Change `cerulean` color to primary

src/app/components/forms/FormDatePicker.js

@@ -8,7 +8,7 @@ import {
   Platform,
   TouchableOpacity,
 } from "react-native";
-import { MaterialCommunityIcons } from '@expo/vector-icons'
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import DateTimePicker from "@react-native-community/datetimepicker";
 
 import moment from "moment";
@@ -20,10 +20,10 @@ const FormDatePicker = (props) => {
   const [date, setDate] = useState(moment(defaultDate));
   const [show, setShow] = useState(false);
   const [auxDate, setAuxDate] = useState(moment());
-  const [mode, setMode] = useState('date');
+  const [mode, setMode] = useState("date");
   const [time, setTime] = useState(moment(defaultDate));
 
-  //-------------------------- Time picker ainda não está habilitado pra ios  -------------------------------- 
+  //-------------------------- Time picker ainda não está habilitado pra ios  --------------------------------
 
   const onChange = (e, selectedDate) => {
     setAuxDate(moment(selectedDate)); // variavel auxiliar para não alterar a data com a rolagem, apenas com o done
@@ -32,16 +32,16 @@ const FormDatePicker = (props) => {
   const androidOnChange = (e, selectedDate) => {
     setShow(false);
     if (selectedDate) {
-      if (mode == 'date') {
+      if (mode == "date") {
         setDate(moment(selectedDate));
         props.onDateChange(selectedDate);
-        setMode('time');
+        setMode("time");
         setShow(true); // to show the picker again in time mode
       } else {
         setTime(moment(selectedDate));
         props.onTimeChange(selectedDate);
         setShow(false);
-        setMode('date');
+        setMode("date");
       }
     }
   };
@@ -73,8 +73,7 @@ const FormDatePicker = (props) => {
         formatChosenDate={(selectedDate) => {
           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
@@ -95,11 +94,17 @@ const FormDatePicker = (props) => {
         }}
       >
         <View style={styles.dateIcon}>
-          <MaterialCommunityIcons name="calendar-today" size={30} color="white" alignItems="center" />
+          <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")}
+            {" "}
+            {date.format("DD/MM/YYYY")} {"\n "} {time.format("HH:mm")}
           </Text>
         </View>
       </View>
@@ -168,8 +173,8 @@ const FormDatePicker = (props) => {
 FormDatePicker.defaultProps = {
   textStyle: {},
   defaultDate: moment(),
-  onDateChange: () => { },
-  onTimeChange: () => { },
+  onDateChange: () => {},
+  onTimeChange: () => {},
 };
 
 const styles = StyleSheet.create({
@@ -189,19 +194,19 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   dateInput: {
-    flex: 0.80,
+    flex: 0.8,
     backgroundColor: colors.white,
     borderRadius: 25,
     marginVertical: 10,
   },
   dateIcon: {
-    backgroundColor: colors.cerulean,
+    backgroundColor: colors.primary,
     padding: 8,
     width: 20,
     alignItems: "center",
     borderRadius: 5,
-    flex: 0.20,
-  }
+    flex: 0.2,
+  },
 });
 
 export default FormDatePicker;

src/app/components/forms/FormLocationPicker.js

@@ -1,29 +1,34 @@
 import React from "react";
-import {
-    StyleSheet,
-    Text,
-    View,
-} from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 
-import { MaterialIcons } from '@expo/vector-icons';
+import { MaterialIcons } from "@expo/vector-icons";
 import colors from "../../config/colors";
 import { TouchableOpacity } from "react-native-gesture-handler";
 
-function FormLocationPicker (){
+function FormLocationPicker() {
     return (
-            <View>
-                <View style={styles.location}>
-                    <View style={styles.mapIcon}>
-                        <MaterialIcons name="location-on" size={28} color="white" alignItems="center" alignContent="center" />
-                    </View>
-                    <View style={styles.adressText}>
-                        <Text>{""} Endereço {"\n "}...</Text>
-                    </View>
+        <View>
+            <View style={styles.location}>
+                <View style={styles.mapIcon}>
+                    <MaterialIcons
+                        name="location-on"
+                        size={28}
+                        color="white"
+                        alignItems="center"
+                        alignContent="center"
+                    />
+                </View>
+                <View style={styles.adressText}>
+                    <Text>
+                        {""} Endereço {"\n "}...
+                    </Text>
                 </View>
-                <Text style={{ color: colors.primary }}>Defina o local no mapa</Text>
             </View>
+            <Text style={{ color: colors.primary }}>
+                Defina o local no mapa
+            </Text>
+        </View>
     );
-
 }
 
 const styles = StyleSheet.create({
@@ -38,16 +43,15 @@ const styles = StyleSheet.create({
         backgroundColor: colors.white,
         borderRadius: 25,
         marginVertical: 10,
-
     },
     mapIcon: {
-        backgroundColor: colors.cerulean,
+        backgroundColor: colors.primary,
         padding: 8,
         width: 20,
         alignItems: "center",
         borderRadius: 5,
-        flex: 0.20,
-    }
+        flex: 0.2,
+    },
 });
 
-export default FormLocationPicker;
+export default FormLocationPicker;

src/app/config/colors.js

@@ -1,5 +1,5 @@
 export default {
-  primary: "#1976D2",
+  primary: "#006493",
   secondary: "#4ecdc4",
   black: "#000",
   white: "#fff",
@@ -10,5 +10,4 @@ export default {
   lightGray: "#C4C4C4",
   gray: "gray",
   lightestGray: "#F0F0F0",
-  cerulean: "#006493",
 };

src/app/screens/MapFormScreen.js

@@ -9,7 +9,7 @@ import useLocation from "../hooks/useLocation";
 import useMarkers from "../hooks/selectFromDB";
 import MapMarker from "../components/MapMarker";
 import attachFocusToQuery from "../hooks/useFocus";
-import SearchBox from "../components/maps/SearchBox";
+// import SearchBox from "../components/maps/SearchBox";
 
 function MapFormScreen(props) {
     const location = useLocation({
@@ -17,8 +17,6 @@ function MapFormScreen(props) {
         longitude: -51.3948396,
     });
 
-    
-
     const hasToQuery = attachFocusToQuery();
     const markers = useMarkers(hasToQuery);
 
@@ -47,12 +45,15 @@ function MapFormScreen(props) {
                     ...lat_long_delta,
                 }}
             >
-                <Marker draggable ={true}
+                <Marker
+                    draggable={true}
                     coordinate={{
                         latitude: local.latitude,
                         longitude: local.longitude,
                     }}
-                    onDragEnd={(e) => console.log({ x: e.nativeEvent.coordinate })}
+                    onDragEnd={(e) =>
+                        console.log({ x: e.nativeEvent.coordinate })
+                    }
                 ></Marker>
             </MapView>
         </View>

src/app/screens/PluviometerSharingDataScreen.js

@@ -21,7 +21,6 @@ import { TouchableOpacity } from "react-native-gesture-handler";
 
 const dims = scaleDimsFromWidth(85, 85, 25);
 
-
 const validationSchema = Yup.object().shape({
   pluviometer: Yup.number()
     .required("Campo obrigatório")
@@ -91,9 +90,21 @@ function PluviometerSharingDataScreen(props) {
             styles={{ width: 50 }}
           />
 
-          <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between" }}>
+          <View
+            style={{
+              flex: 1,
+              flexDirection: "row",
+              justifyContent: "space-between",
+            }}
+          >
             {/*Data da coleta:*/}
-            <View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
+            <View
+              style={{
+                flex: 0.48,
+                borderRightColor: colors.primary,
+                borderRightWidth: 1,
+              }}
+            >
               <FormDatePicker
                 textStyle={{
                   borderColor: colors.gray,
@@ -105,8 +116,10 @@ function PluviometerSharingDataScreen(props) {
               />
             </View>
             {/*Local do evento:*/}
-            <View style={{ flex: 0.48 }} >
-              <TouchableOpacity onPress={() => props.navigation.navigate("FormMap")}>
+            <View style={{ flex: 0.48 }}>
+              <TouchableOpacity
+                onPress={() => props.navigation.navigate("FormMap")}
+              >
                 <FormLocationPicker />
               </TouchableOpacity>
             </View>

src/app/screens/RiverFloodSharingDataScreen.js

@@ -123,7 +123,7 @@ function RiverFloodSharingDataScreen(props) {
             <View
               style={{
                 flex: 0.48,
-                borderRightColor: colors.cerulean,
+                borderRightColor: colors.primary,
                 borderRightWidth: 1,
               }}
             >

src/app/screens/SharingFloodZonesScreen.js

@@ -7,7 +7,10 @@ import FormImagePicker from "../components/forms/FormImagePicker";
 import useLocation from "../hooks/useLocation";
 import colors from "../config/colors";
 import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
-import { TouchableNativeFeedback, TouchableOpacity } from "react-native-gesture-handler";
+import {
+  TouchableNativeFeedback,
+  TouchableOpacity,
+} from "react-native-gesture-handler";
 import { insertFloodZone } from "../database/databaseLoader";
 import { showMessage } from "react-native-flash-message";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
@@ -109,9 +112,21 @@ function SharingFloodZonesScreen(props) {
 
           <FormImagePicker name="images" height={10} />
 
-          <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between" }}>
+          <View
+            style={{
+              flex: 1,
+              flexDirection: "row",
+              justifyContent: "space-between",
+            }}
+          >
             {/*Data da coleta:*/}
-            <View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
+            <View
+              style={{
+                flex: 0.48,
+                borderRightColor: colors.primary,
+                borderRightWidth: 1,
+              }}
+            >
               <FormDatePicker
                 textStyle={{
                   borderColor: colors.gray,
@@ -124,7 +139,9 @@ function SharingFloodZonesScreen(props) {
             </View>
             {/*Local do evento:*/}
             <View style={{ flex: 0.48 }}>
-              <TouchableOpacity onPress={() => props.navigation.navigate("FormMap")}>
+              <TouchableOpacity
+                onPress={() => props.navigation.navigate("FormMap")}
+              >
                 <FormLocationPicker />
               </TouchableOpacity>
             </View>