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,6 +47,7 @@ export default function ConfirmationModal({
           }}
         >
           <View style={styles.container}>
+            {title && (
               <View style={{ flex: 1, marginBottom: title !== "" ? 40 : 0 }}>
                 <Text
                   style={[styles.text, { fontSize: dimensions.text.secondary }]}
@@ -52,7 +55,15 @@ export default function ConfirmationModal({
                   {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>
             <View
               style={{
                 flexDirection: "row",
@@ -60,18 +71,22 @@ export default function ConfirmationModal({
                 marginTop: 24,
               }}
             >
-              {onConfirm && confirmationLabel && <Btn
+              {onConfirm && confirmationLabel && (
+                <Btn
                   label={confirmationLabel}
                   onPress={onConfirm}
-                bgColor={colors.secondary}
+                  bgColor={colors.primary}
                   txtColor={colors.white}
-              />}
-              {onDecline && declineLabel && <Btn
+                />
+              )}
+              {onDecline && declineLabel && (
+                <Btn
                   label={declineLabel}
                   onPress={onDecline}
-                bgColor={colors.lightGray}
-                txtColor={colors.black}
-              />}
+                  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

src/app/components/forms/OnSubmitAwaitModal.js

@@ -6,7 +6,7 @@ import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { dimensions, screen_height } from "../../config/dimensions";
 
 const OnSubmitAwaitModal = ({ show }) => {
-  if(show){
+  if (show) {
     return (
       <Modal
         transparent={true}
@@ -19,28 +19,25 @@ const OnSubmitAwaitModal = ({ show }) => {
         <View style={[styles.container, { bottom: (screen_height - 267) / 2 }]}>
           <MaterialCommunityIcons
             name="sync"
-          size={48}
+            size={50}
             color={colors.primary}
             style={{ alignSelf: "center", marginBottom: 12 }}
           />
           <Text style={styles.text}>
-          Aguarde um momento. Estamos enviando o formulário.
+            Aguarde um momento enquanto registramos o dado.
           </Text>
         </View>
       </Modal>
-    
-  );
-    }else{
-      return(
-  <></>
     );
+  } 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)}