Flood zones icons updated

src/app/config/assets.js

@@ -11,12 +11,21 @@ import RainLow from "../assets/chuva_fraca.svg";
 import RainMedium from "../assets/chuva_moderada.svg";
 import RainHigh from "../assets/chuva_forte.svg";
 import RainVeryHigh from "../assets/chuva_muito_forte.svg";
+import FloodZonesPassable from "../assets/alagamento_transitavel.svg";
+import FloodZonesNotPassable from "../assets/alagamento_intransitavel.svg";
 
 export default {
   floodZones: {
     FloodZonesIcon: FloodZones,
     passable: require("../assets/floodZonesAssets/passable_icon.png"),
+    passable_toggle: require("../assets/floodZonesAssets/Transitavel_c.png"),
+
+    passable_2: require("../assets/floodZonesAssets/passable_2.png"),
+    Passable: FloodZonesPassable,
     notPassable: require("../assets/floodZonesAssets/not_passable_icon.png"),
+    notPassable2: require("../assets/floodZonesAssets/notpassable_2_toggle.png"),
+    notPassable_toggle: require("../assets/floodZonesAssets/Intransitavel_c.png"),
+    NotPassable: FloodZonesNotPassable,
   },
   riverLevel: {
     RiverIcon: RiverIcon,

src/app/screens/SharingFloodZonesScreen.js

@@ -75,28 +75,34 @@ function SharingFloodZonesScreen(props) {
         >
           <View style={styles.imgs_container}>
             <TouchableNativeFeedback onPress={() => setPassable(1)}>
-              <View
-                style={styles.img_block}
-                borderColor={passable == 1 ? colors.primary : colors.white}
-              >
-                <Image
-                  style={styles.image}
-                  source={assets.floodZones.passable}
-                />
-                <Text style={styles.text}>Transitável</Text>
+              <View>
+                {passable == 1 ? (
+                  <Image
+                    source={assets.floodZones.passable_toggle}
+                    style={styles.image}
+                  />
+                ) : (
+                  <Image
+                    style={styles.image}
+                    source={assets.floodZones.passable_2}
+                  />
+                )}
               </View>
             </TouchableNativeFeedback>
 
             <TouchableNativeFeedback onPress={() => setPassable(0)}>
-              <View
-                style={styles.img_block}
-                borderColor={passable == 0 ? colors.primary : colors.white}
-              >
-                <Image
-                  style={styles.image}
-                  source={assets.floodZones.notPassable}
-                />
-                <Text style={styles.text}>Intransitável</Text>
+              <View style={styles.img_block}>
+                {passable == 0 ? (
+                  <Image
+                    source={assets.floodZones.notPassable_toggle}
+                    style={styles.image}
+                  />
+                ) : (
+                  <Image
+                    style={styles.image}
+                    source={assets.floodZones.notPassable2}
+                  />
+                )}
               </View>
             </TouchableNativeFeedback>
           </View>
@@ -156,7 +162,7 @@ function SharingFloodZonesScreen(props) {
   );
 }
 const borderWidth = 4;
-const dims = scaleDimsFromWidth(150, 80, 42.0);
+const dims = scaleDimsFromWidth(93, 106, 30.0);
 
 const styles = StyleSheet.create({
   container: {
@@ -165,22 +171,20 @@ const styles = StyleSheet.create({
   },
 
   image: {
-    width: dims.width * 0.9,
-    height: dims.height * 0.9,
+    width: dims.width,
+    height: dims.height,
     resizeMode: "contain",
   },
   img_block: {
     borderRadius: 5,
-    padding: 10,
     borderStyle: "dotted",
     borderColor: colors.white,
     borderWidth: borderWidth,
     alignItems: "center",
-    width: dims.width,
   },
   imgs_container: {
     flexDirection: "row",
-    justifyContent: "space-between",
+    justifyContent: "space-evenly",
   },
 
   text: {