From 41a59bba6eafa05c6e94aa57eef4213ac05fbf9b Mon Sep 17 00:00:00 2001
From: analuizaff <nanaluff@hotmail.com>
Date: Mon, 22 Feb 2021 18:57:23 -0300
Subject: [PATCH] date-time picker layout uptated

---
 src/app/components/forms/FormDatePicker.js    | 42 ++++++++++++-------
 src/app/config/colors.js                      |  1 +
 .../screens/PluviometerSharingDataScreen.js   |  2 +-
 3 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/app/components/forms/FormDatePicker.js b/src/app/components/forms/FormDatePicker.js
index 03e053b..95ebf07 100644
--- a/src/app/components/forms/FormDatePicker.js
+++ b/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";
@@ -33,7 +33,7 @@ const FormDatePicker = (props) => {
     setShow(false);
     if (selectedDate) {
       if (mode == 'date') {
-        setDate(moment(selectedDate));        
+        setDate(moment(selectedDate));
         props.onDateChange(selectedDate);
         setMode('time');
         setShow(true); // to show the picker again in time mode
@@ -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;
diff --git a/src/app/config/colors.js b/src/app/config/colors.js
index 170ec54..7fba8b5 100644
--- a/src/app/config/colors.js
+++ b/src/app/config/colors.js
@@ -10,4 +10,5 @@ export default {
   lightGray: "#d3d3d3",
   gray: "gray",
   lightestGray: "#F0F0F0",
+  cerulean: "#006493",
 };
diff --git a/src/app/screens/PluviometerSharingDataScreen.js b/src/app/screens/PluviometerSharingDataScreen.js
index e60e0aa..a6bcef2 100644
--- a/src/app/screens/PluviometerSharingDataScreen.js
+++ b/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,