Close button on post-selection add site pages

astoppop · Aug 9, 2024 · 314defe · 314defe
1 parent 1d77225
commit 314defe
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 57 deletions.
diff --git a/src/components/AddResourceModal/AddResourceModalV2.jsx b/src/components/AddResourceModal/AddResourceModalV2.jsx
@@ -360,14 +360,13 @@ const AddResourceModalV2 = props => {
 
   const handleClose = () => {
     // on close we should reset form state so user can submit another resource
-
     setValues(initialState);
     setToolbarModal(TOOLBAR_MODAL_NONE);
   };
 
   return (
-    <ModalWrapper>
-      {values.formStep === 'chooseResource' && (
+    <ModalWrapper values={values}>
+      {values.formStep == 'chooseResource' && (
         <ChooseResource
           resourceTypeInfo={props.resourceTypeInfo}
           setFormStep={onChangeFormStep}

diff --git a/src/components/AddResourceModal/ChooseResource.jsx b/src/components/AddResourceModal/ChooseResource.jsx
@@ -1,13 +1,9 @@
-import CloseIcon from '@mui/icons-material/Close';
 import styles from './AddResourceModal.module.scss';
 
-import { Box, Button, IconButton } from '@mui/material';
+import { Box, Button } from '@mui/material';
 import useIsMobile from 'hooks/useIsMobile';
-import { useDispatch } from 'react-redux';
-import { setToolbarModal, TOOLBAR_MODAL_NONE } from '../../actions/actions';
 
 const ResourceButton = props => {
-  const dispatch = useDispatch();
   const Icon = props.desktopIcon;
   return (
     <Button
@@ -34,7 +30,6 @@ const ResourceButton = props => {
 
 const ChooseResource = props => {
   const isMobile = useIsMobile();
-  const dispatch = useDispatch();
   return (
     <>
       {!isMobile && (
@@ -69,25 +64,6 @@ const ChooseResource = props => {
             backgroundColor: '#ffffff'
           }}
         >
-          <IconButton
-            aria-label="close"
-            onClick={() => {
-              dispatch(setToolbarModal(TOOLBAR_MODAL_NONE));
-            }}
-            sx={{
-              position: 'absolute',
-              right: '20px',
-              top: '20px',
-              color: '#000000'
-            }}
-            size="large"
-          >
-            <CloseIcon
-              sx={{
-                fontSize: 32
-              }}
-            />
-          </IconButton>
           <Box
             sx={{
               position: 'absolute',

diff --git a/src/components/AddResourceModal/ModalWrapper.jsx b/src/components/AddResourceModal/ModalWrapper.jsx
@@ -1,12 +1,19 @@
-import { Collapse, Modal, Paper } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { Collapse, IconButton, Modal, Paper } from '@mui/material';
 import useIsMobile from 'hooks/useIsMobile';
+import { useDispatch } from 'react-redux';
 import { useSelector } from 'react-redux/es/exports';
-import { TOOLBAR_MODAL_CONTRIBUTE } from '../../actions/actions';
+import {
+  setToolbarModal,
+  TOOLBAR_MODAL_CONTRIBUTE,
+  TOOLBAR_MODAL_NONE
+} from '../../actions/actions';
 /*
   Higher Order Component that returns a Dialog for mobile and a non modal Dialog for Desktop
  */
 
 const ModalWrapper = props => {
+  const dispatch = useDispatch();
   const isMobile = useIsMobile();
   const toolbarModal = useSelector(state => state.filterMarkers.toolbarModal);
   return (
@@ -31,17 +38,42 @@ const ModalWrapper = props => {
         </Paper>
       )}
       {isMobile && (
-        <Modal
-          open={toolbarModal == TOOLBAR_MODAL_CONTRIBUTE}
-          sx={{
-            position: 'absolute',
-            left: 0,
-            top: 0,
-            width: '100%',
-            height: '100%'
-          }}
-        >
-          <>{props.children}</>
+        <Modal open={toolbarModal == TOOLBAR_MODAL_CONTRIBUTE}>
+          <Paper
+            sx={{
+              left: 0,
+              top: 0,
+              width: '100%',
+              height: '100%'
+            }}
+          >
+            <IconButton
+              aria-label="close"
+              onClick={() => {
+                dispatch(setToolbarModal(TOOLBAR_MODAL_NONE));
+              }}
+              sx={{
+                position: 'absolute',
+                right: '20px',
+                top:
+                  props.values.formStep == 'chooseResource'
+                    ? '20px'
+                    : 'calc(1rem + 20px)',
+                color:
+                  props.values.formStep == 'chooseResource'
+                    ? '#000000'
+                    : '#ffffff'
+              }}
+              size="large"
+            >
+              <CloseIcon
+                sx={{
+                  fontSize: 32
+                }}
+              />
+            </IconButton>
+            {props.children}
+          </Paper>
         </Modal>
       )}
     </>

diff --git a/src/components/Verification/VerificationButton.jsx b/src/components/Verification/VerificationButton.jsx
@@ -1,16 +1,15 @@
-import ModalWrapper from 'components/AddResourceModal/ModalWrapper';
-import React, { useState, useCallback } from 'react';
 import Button from '@mui/material/Button';
-import { getDatabase, set, ref } from 'firebase/database';
-import { resourcesConfig } from '../../firebase/firebaseConfig';
-import { initializeApp } from 'firebase/app';
+import Dialog from '@mui/material/Dialog';
 import Input from '@mui/material/Input';
+import { initializeApp } from 'firebase/app';
+import { getDatabase, ref, set } from 'firebase/database';
+import { useCallback, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import {
-  updateExistingResource,
-  setSelectedPlace
+  setSelectedPlace,
+  updateExistingResource
 } from '../../actions/actions';
-import Dialog from '@mui/material/Dialog';
+import { resourcesConfig } from '../../firebase/firebaseConfig';
 
 const PASSWORD = 'ZnJlZXdhdGVy'; // Ask in Slack if you want the real password
 
@@ -47,7 +46,7 @@ const VerificationButton = props => {
     const { id, ...filteredResource } = resource;
     set(ref(database, `/${resource.id}`), filteredResource);
     setHasBeenUpdated(true);
-    dispatch(updateExistingResource({resource}));
+    dispatch(updateExistingResource({ resource }));
     dispatch(setSelectedPlace(resource));
   };
 
@@ -161,7 +160,7 @@ const VerificationButton = props => {
                     flex: 1,
                     backgroundColor: 'gray',
                     '&:hover': {
-                      backgroundColor: 'gray',
+                      backgroundColor: 'gray'
                     },
                     color: 'white',
                     borderRadius: '4px',
@@ -182,7 +181,7 @@ const VerificationButton = props => {
                     flex: 1,
                     backgroundColor: 'blue',
                     '&:hover': {
-                      backgroundColor: 'blue',
+                      backgroundColor: 'blue'
                     },
                     color: 'white',
                     borderRadius: '4px',
@@ -211,7 +210,7 @@ const VerificationButton = props => {
                     sx={{
                       backgroundColor: 'green',
                       '&:hover': {
-                        backgroundColor: 'green',
+                        backgroundColor: 'green'
                       },
                       color: 'white',
                       padding: '10px',
@@ -227,7 +226,7 @@ const VerificationButton = props => {
                     sx={{
                       backgroundColor: 'orange',
                       '&:hover': {
-                        backgroundColor: 'orange',
+                        backgroundColor: 'orange'
                       },
                       color: 'white',
                       padding: '10px',
@@ -243,7 +242,7 @@ const VerificationButton = props => {
                     sx={{
                       backgroundColor: 'red',
                       '&:hover': {
-                        backgroundColor: 'red',
+                        backgroundColor: 'red'
                       },
                       color: 'white',
                       padding: '10px',
@@ -259,7 +258,7 @@ const VerificationButton = props => {
                     sx={{
                       backgroundColor: 'grey',
                       '&:hover': {
-                        backgroundColor: 'grey',
+                        backgroundColor: 'grey'
                       },
                       color: 'white',
                       padding: '10px',
@@ -280,7 +279,7 @@ const VerificationButton = props => {
                     sx={{
                       backgroundColor: 'grey',
                       '&:hover': {
-                        backgroundColor: 'grey',
+                        backgroundColor: 'grey'
                       },
                       color: 'white',
                       padding: '10px',