Merge branch 'main' of https://github.com/IGSD-UoW/WPD-MobileApp into main

src/app/components/MapDataMenu.js

@@ -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={{
@@ -211,9 +222,7 @@ function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToSh
               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
@@ -271,15 +296,36 @@ 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)}
-      />
+    <View
+    >
+
+      <ModalOpenBtn
+        setShowModal={() => setShowModal(true)}/>
+
       <SelfClosingModal
+        style={{position:"absolute"}}
         animationType="slide"
         transparent={true}
         showModal={showModal}

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,

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>
   );
 }

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",
 
 };

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,
   },
 });
 

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