standardazing modal messages

src/app/components/ConfirmationModal.js

@@ -2,10 +2,11 @@ import React from "react";
 import { Modal, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import colors from "../config/colors";
 import { dimensions } from "../config/dimensions";
+import { Ionicons } from "@expo/vector-icons";
 
 function Btn({ label, onPress, bgColor, txtColor }) {
   return (
-    <TouchableOpacity onPress={onPress}>
+    <TouchableOpacity style={{marginTop: 15}} onPress={onPress}>
       <View
         style={{
           paddingHorizontal: 40,
@@ -14,7 +15,7 @@ function Btn({ label, onPress, bgColor, txtColor }) {
           borderRadius: 6,
         }}
       >
-        <Text style={{color: txtColor, fontWeight: "bold"}}>{label}</Text>
+        <Text style={{ color: txtColor, fontWeight: "bold" }}>{label}</Text>
       </View>
     </TouchableOpacity>
   );
@@ -26,8 +27,9 @@ export default function ConfirmationModal({
   onDecline,
   confirmationLabel,
   declineLabel,
-  title = "",
+  title = null,
   description = "",
+  icon = null,
 }) {
   return (
     <Modal
@@ -45,33 +47,46 @@ export default function ConfirmationModal({
           }}
         >
           <View style={styles.container}>
-            <View style={{ flex: 1, marginBottom: title !== "" ? 40 : 0 }}>
-              <Text
-                style={[styles.text, { fontSize: dimensions.text.secondary }]}
-              >
-                {title}
-              </Text>
+            {title && (
+              <View style={{ flex: 1, marginBottom: title !== "" ? 40 : 0 }}>
+                <Text
+                  style={[styles.text, { fontSize: dimensions.text.secondary }]}
+                >
+                  {title}
+                </Text>
+              </View>
+            )}
+            <View style={{ flexDirection: "row", alignItems: "center" }}>
+              {icon && (
+                <View style={{ marginRight: 5 }}>
+                  <Ionicons name={icon} size={30} color={colors.primary} />
+                </View>
+              )}
+              <Text style={styles.text}>{description}</Text>
             </View>
-            <Text style={styles.text}>{description}</Text>
             <View
               style={{
                 flexDirection: "row",
                 justifyContent: "space-evenly",
-                marginTop:  24,
+                marginTop: 24,
               }}
             >
-              {onConfirm && confirmationLabel && <Btn
-                label={confirmationLabel}
-                onPress={onConfirm}
-                bgColor={colors.secondary}
-                txtColor={colors.white}
-              />}
-              {onDecline && declineLabel && <Btn
-                label={declineLabel}
-                onPress={onDecline}
-                bgColor={colors.lightGray}
-                txtColor={colors.black}
-              />}
+              {onConfirm && confirmationLabel && (
+                <Btn
+                  label={confirmationLabel}
+                  onPress={onConfirm}
+                  bgColor={colors.primary}
+                  txtColor={colors.white}
+                />
+              )}
+              {onDecline && declineLabel && (
+                <Btn
+                  label={declineLabel}
+                  onPress={onDecline}
+                  bgColor={colors.secondary}
+                  txtColor={colors.white}
+                />
+              )}
             </View>
           </View>
         </View>
@@ -82,7 +97,7 @@ export default function ConfirmationModal({
 
 const styles = StyleSheet.create({
   container: {
-    width: "80%",
+    width: "85%",
     justifyContent: "center",
     alignSelf: "center",
     backgroundColor: colors.lightestGray,
@@ -90,7 +105,7 @@ const styles = StyleSheet.create({
     borderWidth: 2,
     borderRadius: 12,
     paddingVertical: 16,
-    paddingHorizontal: 12
+    paddingHorizontal: 12,
   },
   text: {
     fontSize: dimensions.text.default,

src/app/components/LoadingMarkersModal.js

@@ -40,7 +40,7 @@ export default function LoadingMarkersModal({ show }) {
           style={{ alignSelf: "center", marginBottom: 12 }}
         />
         <Text style={styles.text}>
-          Aguarde um momento enquanto os dados são carregados
+          Aguarde um momento enquanto os dados são carregados.
         </Text>
       </View>
     );
@@ -65,7 +65,7 @@ const styles = StyleSheet.create({
   text: {
     fontSize: dimensions.text.secondary,
     textAlign: "center",
-    color: colors.primary,
+    color: colors.black,
     fontWeight: "bold",
   },
 });

src/app/components/SvgLabeledButton.js

@@ -23,6 +23,9 @@ export default function SvgLabeledButton({
   active = true,
   inactiveOnPress = () => {},
 }) {
+  if(!active){
+    normalBgcolor = colors.grayBG;
+  }
   const dims = scaleDimsFromWidth(width, height, 16);
   return (
     <Shadow
@@ -52,7 +55,7 @@ export default function SvgLabeledButton({
               },
             ]}
           >
-            <SvgImage {...dims} />
+              <SvgImage {...dims} />
 
             <Text style={styles.label}>{label}</Text>
           </View>

src/app/components/forms/OnSubmitAwaitModal.js

@@ -6,41 +6,38 @@ import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { dimensions, screen_height } from "../../config/dimensions";
 
 const OnSubmitAwaitModal = ({ show }) => {
-  if(show){
-  return (
-    <Modal
-      transparent={true}
-      isVisible={show}
-      style={{
-        justifyContent: "flex-start",
-        alignSelf: "flex-end",
-      }}
-    >
-      <View style={[styles.container, { bottom: (screen_height - 267) / 2 }]}>
-        <MaterialCommunityIcons
-          name="sync"
-          size={48}
-          color={colors.primary}
-          style={{ alignSelf: "center", marginBottom: 12 }}
-        />
-        <Text style={styles.text}>
-          Aguarde um momento. Estamos enviando o formulário.
-        </Text>
-      </View>
-    </Modal>
-    
-  );
-    }else{
-      return(
-  <></>
-      );
-    }
+  if (show) {
+    return (
+      <Modal
+        transparent={true}
+        isVisible={show}
+        style={{
+          justifyContent: "flex-start",
+          alignSelf: "flex-end",
+        }}
+      >
+        <View style={[styles.container, { bottom: (screen_height - 267) / 2 }]}>
+          <MaterialCommunityIcons
+            name="sync"
+            size={50}
+            color={colors.primary}
+            style={{ alignSelf: "center", marginBottom: 12 }}
+          />
+          <Text style={styles.text}>
+            Aguarde um momento enquanto registramos o dado.
+          </Text>
+        </View>
+      </Modal>
+    );
+  } else {
+    return <></>;
+  }
 };
 
 const styles = StyleSheet.create({
   container: {
     position: "absolute",
-    width: "80%",
+    width: "85%",
     height: 170,
     // justifyContent: "center",
     alignSelf: "center",
@@ -53,7 +50,7 @@ const styles = StyleSheet.create({
   text: {
     fontSize: dimensions.text.secondary,
     textAlign: "center",
-    color: colors.primary,
+    color: colors.black,
     fontWeight: "bold",
   },
 });

src/app/components/forms/OnSubmitMessageModal.js

@@ -28,7 +28,7 @@ const onModalClose = () =>{
               <View>
                 <AntDesign
                   name="warning"
-                  size={48}
+                  size={50}
                   color={colors.primary}
                   style={{ alignSelf: "center", marginBottom: 12 }}
                 />
@@ -41,7 +41,7 @@ const onModalClose = () =>{
               <View>
                 <MaterialCommunityIcons
                   name="check-all"
-                  size={48}
+                  size={50}
                   color={colors.primary}
                   style={{ alignSelf: "center", marginBottom: 12 }}
                 />
@@ -64,7 +64,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     position: "absolute",
-    width: "80%",
+    width: "85%",
     height: 170,
     // justifyContent: "center",
     alignSelf: "center",

src/app/screens/AccountScreen.js

@@ -198,7 +198,7 @@ function AccountScreen(props) {
           </View>
           <ConfirmationModal
             show={showLog}
-            title="SAIR"
+            icon={"log-out-outline"}
             description="Você tem certeza que deseja sair?"
             confirmationLabel="SIM"
             declineLabel="NÃO"

src/app/screens/SharingDataScreen.js

@@ -31,14 +31,15 @@ function SharingDataScreen({ navigation }) {
     <View style={styles.container}>
       <ConfirmationModal
         show={showLogPluv}
-        description="Para enviar um dado pluviométrico cadastre um pluviômetro"
+        icon={"md-warning-outline"}
+        description="Para enviar um dado pluviométrico, cadastre um pluviômetro"
         confirmationLabel="Cadastrar"
         onConfirm={() => onConfirmPluv()} //{setShowLogPluv(false), navigation.navigate("Perfil")}}
         onDecline={() => setShowLogPluv(false)}
       />
       <ConfirmationModal
         show={showLog}
-        description="Para enviar uma informação faça o login ou cadastre-se"
+        description="Para enviar uma informação, faça o login ou cadastre-se"
         confirmationLabel="LOGIN"
         onConfirm={() => authContext.setUser(false)}
         onDecline={() => setShowLog(false)}