From 1aef0e1fe23607e667adec69f1ff391d57e686ad Mon Sep 17 00:00:00 2001
From: GabrielTrettel <gabrielmtrettel@gmail.com>
Date: Tue, 24 Aug 2021 15:01:31 -0300
Subject: [PATCH 1/4] Fixing modal datamenu ScrollView height bug.

---
 src/app/components/MapDataMenu.js      | 73 ++++++++++++++++++--------
 src/app/components/SelfClosingModal.js |  8 +--
 src/app/config/colors.js               |  2 +
 3 files changed, 57 insertions(+), 26 deletions(-)

diff --git a/src/app/components/MapDataMenu.js b/src/app/components/MapDataMenu.js
index b927217..b2ca053 100644
--- a/src/app/components/MapDataMenu.js
+++ b/src/app/components/MapDataMenu.js
@@ -92,7 +92,7 @@ function DataOriginSelector({ dataOriginToShow, setDataOriginToShow }) {
   );
 }
 
-// FIXME: Change icon values in the future 
+// FIXME: Change icon values in the future
 const dataOptions = {
   oficial: [
     {
@@ -146,24 +146,34 @@ function Border() {
   return (
     <View
       style={{
-        width: 0.95 * screen_width,
+        width: 0.91 * screen_width,
         alignSelf: "center",
         height: 2,
         borderRadius: 2,
         paddingHorizontal: 16,
-        backgroundColor: colors.lightestGray,
+        // backgroundColor: colors.separatorGray,
       }}
     />
   );
 }
 
-function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToShow, option) {
+function ListDataOptions(
+  dataOptionsToShow,
+  dataOriginToShow,
+  setDataOptionsToShow,
+  option
+) {
   const item = dataOptionsToShow[dataOriginToShow][option.code];
-  const dataOptionObject = {...dataOptionsToShow, [dataOriginToShow]:  {...dataOptionsToShow[dataOriginToShow], [option.code]: !item}};
-
+  const dataOptionObject = {
+    ...dataOptionsToShow,
+    [dataOriginToShow]: {
+      ...dataOptionsToShow[dataOriginToShow],
+      [option.code]: !item,
+    },
+  };
 
   return (
-    <View>
+    <View key={option.code}>
       <View
         style={{
           flex: 1,
@@ -197,9 +207,10 @@ function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToSh
           )}
         </View>
 
-
         <TouchableOpacity
-          onPress={() => {setDataOptionsToShow(dataOptionObject)}}
+          onPress={() => {
+            setDataOptionsToShow(dataOptionObject);
+          }}
         >
           <View
             style={{
@@ -208,12 +219,10 @@ function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToSh
               height: 36,
               justifyContent: "center",
               borderRadius: 6,
-              backgroundColor:  item  ? colors.activated : colors.notActivated,
+              backgroundColor: item ? colors.activated : colors.notActivated,
             }}
           >
-            <Text style={styles.text}>
-              {item ? "ADICIONAR" : "REMOVER"}
-            </Text>
+            <Text style={styles.text}>{item ? "ADICIONAR" : "REMOVER"}</Text>
           </View>
         </TouchableOpacity>
       </View>
@@ -222,13 +231,32 @@ function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToSh
   );
 }
 
-function DataOriginOptions({ dataOriginToShow, dataOptionsToShow, setDataOptionsToShow }) {
+function DataOriginOptions({
+  dataOriginToShow,
+  dataOptionsToShow,
+  setDataOptionsToShow,
+}) {
   return (
-    <View paddingTop={8} height={"100%"}>
-      <ScrollView        >
+    <View
+      style={{
+        paddingTop: 8,
+        flexDirection: "column",
+      }}
+    >
+      <ScrollView
+        height={270}
+        automaticallyAdjustContentInsets={true}
+      >
+        <View>
         {dataOptions[dataOriginToShow].map((option) =>
-          ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToShow, option)
+          ListDataOptions(
+            dataOptionsToShow,
+            dataOriginToShow,
+            setDataOptionsToShow,
+            option
+          )
         )}
+          </View>
       </ScrollView>
     </View>
   );
@@ -249,13 +277,10 @@ function DataMenuBody({ setShowModal }) {
       riverFlood: true,
     },
   });
-  console.log(dataOptionsToShow)
+
   return (
     <View
-      style={{
-        height: "60%",
-        backgroundColor: colors.white,
-      }}
+      backgroundColor={colors.grayBG}
     >
       <DataMenuHeader setShowModal={setShowModal} />
       <DataOriginSelector
@@ -274,12 +299,14 @@ function DataMenuBody({ setShowModal }) {
 export default function MapDataMenu(props) {
   const [showModal, setShowModal] = useState(null);
   return (
-    <View>
+    <View
+    >
       <Button
         title={"VISUALIZAR DADOS NO MAPA"}
         onPress={() => setShowModal(true)}
       />
       <SelfClosingModal
+        style={{position:"absolute"}}
         animationType="slide"
         transparent={true}
         showModal={showModal}
diff --git a/src/app/components/SelfClosingModal.js b/src/app/components/SelfClosingModal.js
index 23801db..9cdea0a 100644
--- a/src/app/components/SelfClosingModal.js
+++ b/src/app/components/SelfClosingModal.js
@@ -5,12 +5,13 @@ import {
   StyleSheet,
   TouchableWithoutFeedback,
 } from "react-native";
-import { screen_height, screen_width } from "../config/dimensions";
+import { screen_width } from "../config/dimensions";
+import colors from "../config/colors";
 
 export default function SelfClosingModal(props) {
 
   return (
-    <View style={styles.centeredView}>
+    <View style={[styles.centeredView, props.style]}>
       <Modal
         animationType={props.animationType}
         transparent={props.transparent}
@@ -36,12 +37,13 @@ const styles = StyleSheet.create({
     justifyContent: "flex-end",
     alignItems: "center",
     marginTop: 22,
+    marginBottom: 49,
   },
   modalView: {
     flexShrink: 1,
     margin: 20,
     width: screen_width,
-    backgroundColor: "white",
+    backgroundColor: colors.grayBG,
     borderTopLeftRadius: 10,
     borderTopRightRadius: 10,
     marginBottom: 0,
diff --git a/src/app/config/colors.js b/src/app/config/colors.js
index fb66d36..a61c706 100644
--- a/src/app/config/colors.js
+++ b/src/app/config/colors.js
@@ -11,10 +11,12 @@ export default {
   activated: "rgba(26, 138, 17, 0.63)",
   lightGray: "#C4C4C4",
   gray: "#999999",
+  separatorGray: "#D9D9D9",
   subText: "#8B8C8C",
   lightestGray: "#F0F0F0",
   lightBlue: "#1976D2",
   gold: "#ffd700",
   toggle: "#e5eff4",
+  grayBG: "#EEECEC",
 
 };

From bb6bb99879a287039c6b31efaa61c50b2fe63ae7 Mon Sep 17 00:00:00 2001
From: GabrielTrettel <gabrielmtrettel@gmail.com>
Date: Tue, 24 Aug 2021 15:01:59 -0300
Subject: [PATCH 2/4] Temporarily reducing the size of the input data button.
 Switch to the default that is in the prototype.

---
 src/app/navigation/NewListingButton.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/navigation/NewListingButton.js b/src/app/navigation/NewListingButton.js
index abcbc8b..cc15b9d 100644
--- a/src/app/navigation/NewListingButton.js
+++ b/src/app/navigation/NewListingButton.js
@@ -11,7 +11,7 @@ function NewListingButton({ onPress }) {
         <MaterialCommunityIcons
           name="plus-circle"
           color={colors.white}
-          size={40}
+          size={30}
         />
       </View>
     </TouchableOpacity>
@@ -23,12 +23,12 @@ const styles = StyleSheet.create({
     alignItems: "center",
     backgroundColor: colors.primary,
     borderColor: colors.white,
-    borderRadius: 40,
-    borderWidth: 10,
-    bottom: 20,
-    height: 80,
+    borderRadius: 50,
+    borderWidth: 0,
+    bottom: -4,
+    height: 40,
     justifyContent: "center",
-    width: 80,
+    width: 40,
   },
 });
 

From c1d7df0c7512eae0693086e72f68a4c85d9be495 Mon Sep 17 00:00:00 2001
From: GabrielTrettel <gabrielmtrettel@gmail.com>
Date: Tue, 24 Aug 2021 15:09:45 -0300
Subject: [PATCH 3/4] Adjusting opening button in data menu modal

---
 src/app/components/MapDataMenu.js | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/app/components/MapDataMenu.js b/src/app/components/MapDataMenu.js
index b2ca053..d1d4d4a 100644
--- a/src/app/components/MapDataMenu.js
+++ b/src/app/components/MapDataMenu.js
@@ -151,7 +151,7 @@ function Border() {
         height: 2,
         borderRadius: 2,
         paddingHorizontal: 16,
-        // backgroundColor: colors.separatorGray,
+        backgroundColor: colors.separatorGray,
       }}
     />
   );
@@ -296,15 +296,34 @@ function DataMenuBody({ setShowModal }) {
   );
 }
 
+function ModalOpenBtn({setShowModal}) {
+  return (
+      <TouchableOpacity
+        onPress={() => setShowModal()}
+      >
+      <View
+        style={{
+          width: "100%",
+          height: 48,
+          backgroundColor: colors.primary,
+          justifyContent: "center",
+          alignItems: "center"
+        }}>
+        <Text style={styles.text}>VISUALIZAR DADOS NO MAPA</Text>
+      </View>
+      </TouchableOpacity>
+  );
+}
+
 export default function MapDataMenu(props) {
   const [showModal, setShowModal] = useState(null);
   return (
     <View
     >
-      <Button
-        title={"VISUALIZAR DADOS NO MAPA"}
-        onPress={() => setShowModal(true)}
-      />
+
+      <ModalOpenBtn
+        setShowModal={() => setShowModal(true)}/>
+
       <SelfClosingModal
         style={{position:"absolute"}}
         animationType="slide"

From 2f47b7e0a32941ba8305646973f227776fbdb7e4 Mon Sep 17 00:00:00 2001
From: GabrielTrettel <gabrielmtrettel@gmail.com>
Date: Tue, 24 Aug 2021 15:17:58 -0300
Subject: [PATCH 4/4] Implementing rule to not render data filtering modal in
 map form screen

---
 src/app/components/map/OpenStreetMap.js | 4 +++-
 src/app/screens/MapFormScreen.js        | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js
index b656daf..d3af333 100644
--- a/src/app/components/map/OpenStreetMap.js
+++ b/src/app/components/map/OpenStreetMap.js
@@ -40,6 +40,7 @@ export default function OpenStreetMap({
   markersList,
   clickListener,
   moveEndListener,
+  isForm=false
 }) {
   const [mapRef, setMapRef] = useState(null);
   const webviewContent = html_content;
@@ -82,6 +83,7 @@ export default function OpenStreetMap({
           injectedJavaScript={viewFunction}
         />
       )}
+      {!isForm && (
       <View>
         <MapModal
           showModal={markerListener}
@@ -89,7 +91,7 @@ export default function OpenStreetMap({
           markers={markersList}
         />
         <MapDataMenu/>
-      </View>
+      </View>)}
     </View>
   );
 }
diff --git a/src/app/screens/MapFormScreen.js b/src/app/screens/MapFormScreen.js
index e65ffac..68d884b 100644
--- a/src/app/screens/MapFormScreen.js
+++ b/src/app/screens/MapFormScreen.js
@@ -51,6 +51,7 @@ const MapFormScreen = (props) => {
       <OpenStreetMap
         moveEndListener={(e) => moveLocation(e)}
         centerUserLocation={true}
+        isForm={true}
       />
       <View style={styles.markerFixed}>
         <Image