adding label to comment input

src/app/screens/PluviometerSharingDataScreen.js

@@ -115,13 +115,14 @@ function PluviometerSharingDataScreen(props) {
               </TouchableOpacity>
             </View>
           </View>
-          <View>
+          <View style={{ flex: 1 }}>
+            <Text style={styles.labelStyle}>Comentário:</Text>
             <FormField
               maxLength={255}
               multiline
               name="description"
               numberOfLines={3}
-              placeholder="Descrição"
+              placeholder="Escreva um comentário (Opcional)..."
             />
           </View>
           <SubmitButton title="Enviar" style={{ marginBottom: 100 }} />
@@ -148,7 +149,6 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
     textAlign: "left",
     color: colors.lightBlue,
-    marginBottom: 5,
   },
 });
 

src/app/screens/RainSharingDataScreen.js

@@ -161,14 +161,16 @@ function RainSharingDataScreen(props) {
               </TouchableOpacity>
             </View>
           </View>
-
-          <FormField
-            maxLength={255}
-            multiline
-            name="description"
-            numberOfLines={3}
-            placeholder="Descrição"
-          />
+          <View style={{ flex: 1 }}>
+            <Text style={styles.labelStyle}>Comentário:</Text>
+            <FormField
+              maxLength={255}
+              multiline
+              name="description"
+              numberOfLines={3}
+              placeholder="Escreva um comentário (Opcional)..."
+            />
+          </View>
           <SubmitButton title="Enviar" backgroundColor={colors.primary} />
         </Form>
       </ScrollView>
@@ -197,6 +199,12 @@ const styles = StyleSheet.create({
     fontSize: dimensions.text.default,
     color: colors.danger,
   },
+  labelStyle: {
+    fontSize: dimensions.text.secondary,
+    fontWeight: "bold",
+    textAlign: "left",
+    color: colors.lightBlue,
+  },
 });
 
 export default RainSharingDataScreen;

src/app/screens/RiverFloodSharingDataScreen.js

@@ -40,7 +40,7 @@ function RiverFloodSharingDataScreen(props) {
     context.defaultLocation();
   }, []);
   const location = context.eventCoordinates;
-  const address  = context.eventLocation;
+  const address = context.eventLocation;
 
   const [error, setError] = useState(false);
 
@@ -131,7 +131,7 @@ function RiverFloodSharingDataScreen(props) {
               flex: 1,
               flexDirection: "column",
               justifyContent: "space-between",
-              alignContent:"flex-start",
+              alignContent: "flex-start",
             }}
           >
             {/*Data da coleta:*/}
@@ -157,14 +157,16 @@ function RiverFloodSharingDataScreen(props) {
               </TouchableOpacity>
             </View>
           </View>
-
-          <FormField
-            maxLength={255}
-            multiline
-            name="description"
-            numberOfLines={3}
-            placeholder="Descrição"
-          />
+          <View style={{ flex: 1 }}>
+            <Text style={styles.labelStyle}>Comentário:</Text>
+            <FormField
+              maxLength={255}
+              multiline
+              name="description"
+              numberOfLines={3}
+              placeholder="Escreva um comentário (Opcional)..."
+            />
+          </View>
           <SubmitButton title="Enviar" backgroundColor={colors.primary} />
         </Form>
       </KeyboardAwareScrollView>
@@ -192,6 +194,12 @@ const styles = StyleSheet.create({
     fontSize: 18,
     color: colors.danger,
   },  
+  labelStyle: {
+    fontSize: dimensions.text.secondary,
+    fontWeight: "bold",
+    textAlign: "left",
+    color: colors.lightBlue,
+  },
 });
 
 export default RiverFloodSharingDataScreen;

src/app/screens/SharingFloodZonesScreen.js

@@ -38,7 +38,7 @@ function SharingFloodZonesScreen(props) {
   const [time, setTime] = useState(moment());
 
   const context = useContext(EventLocationContext);
-  const address  = context.eventLocation;
+  const address = context.eventLocation;
 
   useEffect(() => {
     context.defaultLocation();
@@ -117,7 +117,7 @@ function SharingFloodZonesScreen(props) {
               flex: 1,
               flexDirection: "column",
               justifyContent: "space-between",
-              alignContent:"flex-start",
+              alignContent: "flex-start",
             }}
           >
             {/*Data da coleta:*/}
@@ -143,14 +143,16 @@ function SharingFloodZonesScreen(props) {
               </TouchableOpacity>
             </View>
           </View>
-
-          <FormField
-            maxLength={255}
-            multiline
-            name="description"
-            numberOfLines={3}
-            placeholder="Descrição"
-          />
+          <View style={{ flex: 1 }}>
+            <Text style={styles.labelStyle}>Comentário:</Text>
+            <FormField
+              maxLength={255}
+              multiline
+              name="description"
+              numberOfLines={3}
+              placeholder="Escreva um comentário (Opcional)..."
+            />
+          </View>
           <SubmitButton title="Enviar" backgroundColor={colors.primary} />
         </Form>
       </KeyboardAwareScrollView>
@@ -191,6 +193,12 @@ const styles = StyleSheet.create({
     fontSize: 18,
     color: colors.danger,
   },
+  labelStyle: {
+    fontSize: dimensions.text.secondary,
+    fontWeight: "bold",
+    textAlign: "left",
+    color: colors.lightBlue,
+  },
 });
 
 export default SharingFloodZonesScreen;