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

src/app/components/LoadingMarkersModal.js

@@ -1,10 +1,11 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   Modal,
   StyleSheet,
   Text,
   TouchableHighlight,
   View,
+  TouchableOpacity,
 } from "react-native";
 
 import { MaterialCommunityIcons } from "@expo/vector-icons";
@@ -12,10 +13,27 @@ import colors from "../config/colors";
 import { dimensions, screen_height } from "../config/dimensions";
 
 export default function LoadingMarkersModal({ show }) {
-  if (show) {
+  const [closed, setClosed] = useState(false);
+  if (show && !closed) {
     return (
+      // NOTE:
       // 267 = (tabBar height = 49) + (data menu btn height = 48) + (this modal = 170/2)
       <View style={[styles.container, { bottom: (screen_height - 267) / 2 }]}>
+        <View
+          style={{
+            justifyContent: "flex-start",
+            alignSelf: "flex-end",
+          }}
+        >
+          <TouchableOpacity onPress={() => setClosed(true)}>
+            <MaterialCommunityIcons
+              name="close"
+              size={20}
+              color={colors.primary}
+              alignItems="center"
+            />
+          </TouchableOpacity>
+        </View>
         <MaterialCommunityIcons
           name="sync"
           size={48}
@@ -37,7 +55,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     width: "80%",
     height: 170,
-    justifyContent: "center",
+    // justifyContent: "center",
     alignSelf: "center",
     backgroundColor: colors.lightestGray,
     borderColor: colors.primary,

src/app/components/MapModal.js

@@ -36,36 +36,36 @@ function onCloseModal(setShowModal, setCurrentMarker) {
 function topBar(props, setShowModal, setCurrentMarker) {
   return (
     <View style={styles.topBar}>
-      <View style={{ alignContent: "center", flex: 1, marginHorizontal: 10 }}>
+      <View style={{ alignContent: "center", flex: 1, marginHorizontal: 10}}>
         <Text style={[styles.bodyTitle, { color: "white" }]}>
           {props ? props.title : "Aguarde..."}
         </Text>
       </View>
 
       <View style={{ flexDirection: "row", alignSelf: "flex-end" }}>
-        <TouchableOpacity
-          style={styles.topBarIcon}
-          onPress={() => notImplemented()}
-        >
-          <MaterialCommunityIcons
-            name="pencil"
-            size={20}
-            color={colors.white}
-            alignItems="center"
-          />
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          style={styles.topBarIcon}
-          onPress={() => notImplemented()}
-        >
-          <MaterialCommunityIcons
-            name="trash-can"
-            size={20}
-            color={colors.white}
-            alignItems="center"
-          />
-        </TouchableOpacity>
+        {/* <TouchableOpacity */}
+        {/*   style={styles.topBarIcon} */}
+        {/*   onPress={() => notImplemented()} */}
+        {/* > */}
+        {/*   <MaterialCommunityIcons */}
+        {/*     name="pencil" */}
+        {/*     size={20} */}
+        {/*     color={colors.white} */}
+        {/*     alignItems="center" */}
+        {/*   /> */}
+        {/* </TouchableOpacity> */}
+
+        {/* <TouchableOpacity */}
+        {/*   style={styles.topBarIcon} */}
+        {/*   onPress={() => notImplemented()} */}
+        {/* > */}
+        {/*   <MaterialCommunityIcons */}
+        {/*     name="trash-can" */}
+        {/*     size={20} */}
+        {/*     color={colors.white} */}
+        {/*     alignItems="center" */}
+        {/*   /> */}
+        {/* </TouchableOpacity> */}
 
         <TouchableOpacity
           style={styles.topBarIcon}