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>
-
+          <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" 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

@@ -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>
-
+          <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" 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

@@ -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>
-
+          <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" 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;