date-time picker layout uptated

src/app/components/forms/FormDatePicker.js

@@ -8,7 +8,7 @@ import {
   Platform,
   TouchableOpacity,
 } from "react-native";
-import { FontAwesome5 } from "@expo/vector-icons";
+import { MaterialCommunityIcons } from '@expo/vector-icons'
 import DateTimePicker from "@react-native-community/datetimepicker";
 
 import moment from "moment";
@@ -71,10 +71,10 @@ const FormDatePicker = (props) => {
         minimumDate={new Date(moment().subtract(1, "month"))}
         maximumDate={new Date(moment())}
         formatChosenDate={(selectedDate) => {
-          if(mode == "date"){
+          if (mode == "date") {
             return moment(selectedDate).format("DD/MM/YYYY");
           }
-          else{
+          else {
             return moment(selectedDate).format("HH:mm");
           }
         }} //formatar a data e hora do selected date
@@ -94,14 +94,16 @@ const FormDatePicker = (props) => {
           justifyContent: "space-between",
         }}
       >
-        <View style={styles.dateInput}>
-          <Text style={{ fontSize: dimensions.text.default }}>
-            {" "}
-            {date.format("DD/MM/YYYY")} {"\n"} {time.format("HH:mm")}
-          </Text>
+          <View style={styles.dateIcon}>
+          <MaterialCommunityIcons name="calendar-today" size={30} color="white" alignItems="center"/>
+          </View>
+          <View style={styles.dateInput}>
+            <Text style={{ fontSize: dimensions.text.default }}>
+              {" "}
+              {date.format("DD/MM/YYYY")} {"\n"} {time.format("HH:mm")}
+            </Text>
+          </View>
         </View>
-        <FontAwesome5 name="calendar-day" size={30} color="grey" />
-      </View>
       {Platform.OS !== "ios" && show && renderDatePicker()}
 
       {Platform.OS === "ios" && show && (
@@ -167,8 +169,8 @@ const FormDatePicker = (props) => {
 FormDatePicker.defaultProps = {
   textStyle: {},
   defaultDate: moment(),
-  onDateChange: () => {},
-  onTimeChange: () => {},
+  onDateChange: () => { },
+  onTimeChange: () => { },
 };
 
 const styles = StyleSheet.create({
@@ -188,12 +190,20 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   dateInput: {
-    flex: 0.97,
-    backgroundColor: colors.light,
+    flex: 0.91,
+    backgroundColor: colors.white,
     borderRadius: 25,
-    padding: 18,
+    padding: 10,
     marginVertical: 10,
   },
+  dateIcon:{
+    backgroundColor: colors.cerulean,
+     padding: 10, 
+     width: 20, 
+     alignItems: "center",
+     borderRadius: 5,
+     flex: 0.09,
+  }
 });
 
 export default FormDatePicker;

src/app/config/colors.js

@@ -10,4 +10,5 @@ export default {
   lightGray: "#d3d3d3",
   gray: "gray",
   lightestGray: "#F0F0F0",
+  cerulean: "#006493",
 };

src/app/screens/PluviometerSharingDataScreen.js

@@ -83,7 +83,7 @@ function PluviometerSharingDataScreen(props) {
           </View>
 
           <View style={{ marginTop: 10, flex: 1 }}>
-            <Text style={styles.labelStyle}>Data da coleta:</Text>
+            {/*<Text style={styles.labelStyle}>Data da coleta:</Text>*/}
             <FormDatePicker
               textStyle={{
                 padding: 15,