Changes to add resource menu

src/components/AddResourceModal/AddResourceModal.module.scss

@@ -24,24 +24,56 @@
   height: 100%;
 }
 
+.dialogDesktop {
+  align-items: center;
+  justify-content: center;
+  width: 660px;
+  height: 314px;
+  left: 25px;
+  top: 372px;
+}
+
+.boxDesktop {
+  background: white;
+  border-radius: 5px;
+  position: 'absolute';
+  top: 840px;
+  left: 20px;
+  filter: drop-shadow(0px 3px 8px 0px);
+}
+
 .greyHeader {
   color: #626262;
   font-size: 24px;
   text-align: center;
 }
 
+.greyHeaderDesktop {
+  color: black;
+  font-size: 24.19px;
+  text-align: center;
+  margin-top: 20px;
+}
+
 .subHeader {
   font-size: 14px;
   text-align: center;
   margin-bottom: 40px;
 }
 
+.subHeaderDesktop {
+  font-size: 14px;
+  text-align: center;
+  color: grey;
+}
+
 .modalButton {
   display: flex;
   flex-direction: column;
   width: 209px;
   gap: 8px;
   height: 93px;
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
 }
 
 .buttonWrapper {

src/components/AddResourceModal/AddResourceModalV2.js

@@ -1,38 +1,99 @@
-import React from 'react';
-import Dialog from '@mui/material/Dialog';
+import React, { createRef, useEffect, useRef } from 'react';
 import ChooseResource from './ChooseResource';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
-import { DialogContent } from '@mui/material';
+import { Box, DialogContent, Paper } from '@mui/material';
 import { ReactComponent as CloseIcon } from '../icons/CloseIcon.svg';
 import IconButton from '@mui/material/IconButton';
 
-const AddResourceModalV2 = (props) => {
+const AddResourceModalV2 = props => {
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
 
   const onClose = () => props.setOpen(false);
 
+  const refNode = createRef();
+  //useOnClickOutside(refNode, () => onClose());
+
+  /**
+   * Hook that alerts clicks outside of the passed ref
+   * Source: https://stackoverflow.com/a/42234988
+   */
+    function useOutsideAlerter(ref) {
+    useEffect(() => {
+      /**
+       * Alert if clicked on outside of element
+       */
+      function handleClickOutside(event) {
+        if (ref.current && !ref.current.contains(event.target)) {
+          props.setOpen(false);
+        }
+      }
+      // Bind the event listener
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        // Unbind the event listener on clean up
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, [ref]);
+  }
+
+  const wrapperRef = useRef(null);
+  useOutsideAlerter(wrapperRef);
+
   return (
     <>
-      <Dialog open={props.open} onClose={onClose} fullScreen={fullScreen}>
-        <IconButton
-          aria-label="close"
-          onClick={onClose}
+      {fullScreen ? (
+        props.open && (
+          <Box
+            ref={refNode}
+            style={{ display: props.open ? 'inline' : 'none' }}
+            bgcolor={'white'}
+            sx={{
+              borderRadius: '10px',
+              position: 'absolute',
+              top: '840px',
+              left: '20px',
+              boxShadow: 3
+            }}
+          >
+            <ChooseResource setFormStep={() => {}} />
+          </Box>
+        )
+      ) : (
+        props.open && (
+        <Paper
+          ref={wrapperRef}
+          open={props.open}
+          onClose={onClose}
           sx={{
             position: 'absolute',
-            right: 20,
-            top: 48,
-            color: theme => theme.palette.grey[500]
+            left: '32px',
+            bottom: '133px'
           }}
-          size="large"
         >
-          <CloseIcon />
-        </IconButton>
-        <DialogContent>
-          <ChooseResource setFormStep={() => {}} />
-        </DialogContent>
-      </Dialog>
+          {fullScreen && (
+            <IconButton
+              aria-label="close"
+              onClick={onClose}
+              sx={{
+                position: 'absolute',
+                right: 20,
+                top: 48,
+                color: theme => theme.palette.grey[500]
+              }}
+              size="large"
+            >
+              <CloseIcon />
+            </IconButton>
+          )}
+
+          <DialogContent>
+            <ChooseResource setFormStep={() => {}} />
+          </DialogContent>
+        </Paper>
+       )
+      )}
     </>
   );
 };

src/components/AddResourceModal/ChooseResource.jsx

@@ -5,48 +5,74 @@ import { ReactComponent as WaterIconCR } from '../icons/WaterIconChooseResource.
 import { ReactComponent as FoodIconCR } from '../icons/FoodIconChooseResource.svg';
 import { ReactComponent as ForagingIconCR } from '../icons/ForagingIconChooseResource.svg';
 import { ReactComponent as ToiletIconCR } from '../icons/ToiletIconChooseResource.svg';
+import { useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { isMobile } from 'react-device-detect';
 
 function ChooseResource({ setFormStep }) {
+  const theme = useTheme();
   return (
-    <div className={styles.dialog}>
-      <h2 className={styles.greyHeader}>Add a Resource</h2>
-      <h3 className={styles.subHeader}>
+    <div className={isMobile ? styles.dialog : styles.dialogDesktop}>
+      <h2 className={isMobile ? styles.greyHeader : styles.greyHeaderDesktop}>
+        {isMobile ? 'Add a Resource' : 'Add a Site'}
+      </h2>
+      <h3 className={isMobile ? styles.subHeader : styles.subHeaderDesktop}>
         Choose the type of resource you like
         <br />
         to add and submit the form.
       </h3>
       <div className={styles.buttonWrapper}>
         <Button
           className={styles.modalButton}
-          variant="water"
+          variant={isMobile ? 'water' : 'waterDesktop'}
           onClick={() => setFormStep('addWaterTap')}
+          sx={{
+            textTransform: 'capitalize',
+            fontSize: '20px',
+            lineHeight: '1'
+          }}
         >
           <WaterIconCR />
           <span>Water</span>
         </Button>
         <Button
           className={styles.modalButton}
-          variant="food"
+          variant={isMobile ? 'food' : 'foodDesktop'}
           onClick={() => setFormStep('addFood')}
+          sx={{
+            textTransform: 'capitalize',
+            fontSize: '20px',
+            lineHeight: '1'
+          }}
         >
           <FoodIconCR />
           Food
         </Button>
         <Button
           className={styles.modalButton}
-          variant="bathrooms"
+          variant={isMobile ? 'bathrooms' : 'bathroomsDesktop'}
           onClick={() => setFormStep('addBathroom')}
+          sx={{
+            textTransform: 'capitalize',
+            fontSize: '20px',
+            lineHeight: '1'
+          }}
         >
           <ToiletIconCR />
-          Bathroom
+          Bathrooms
         </Button>
         {/* this copy is different than the copy from the figma page,
           this might be a bit more clear? can make a point to ask 
           about this next week */}
         <Button
           className={styles.modalButton}
-          variant="foraging"
+          variant={isMobile ? 'foraging' : 'foragingDesktop'}
           onClick={() => setFormStep('addForaging')}
+          sx={{
+            textTransform: 'capitalize',
+            fontSize: '20px',
+            lineHeight: '1'
+          }}
         >
           <ForagingIconCR />
           Foraging

src/components/AddResourceModal/useOnClickOutside.js

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+
+const useOnClickOutside = (ref, callback) => {
+    useEffect(() => {
+      const listener = (event) => {
+        if (!ref.current || ref.current.contains(event.target)) {
+          return;
+        }
+
+        callback(event);
+      };
+
+      document.addEventListener('mousedown', listener);
+      document.addEventListener('touchstart', listener);
+
+      return () => {
+        document.removeEventListener('mousedown', listener);
+        document.removeEventListener('touchstart', listener);
+      };
+    }, [ref, callback]);
+  };
+
+  export default useOnClickOutside;

src/components/ReactGoogleMaps/ReactGoogleMaps.js

@@ -15,10 +15,11 @@ import TutorialModal from '../TutorialModal/TutorialModal';
 import styles from './ReactGoogleMaps.module.scss';
 // import Legend from "./Legend";
 // Temporary Food/Water Toggle
-import Stack from '@mui/material/Stack';
 import { isMobile } from 'react-device-detect';
-import MapMarkersMapper from '../MapMarkers/MapMarkersMapper';
 import Toolbar from '../Toolbar/Toolbar';
+import MapMarkersMapper from '../MapMarkers/MapMarkersMapper';
+import { Stack } from '@mui/material';
+import AddResourceModalV2 from '../AddResourceModal/AddResourceModalV2';
 
 // // Actual Magic: https://stackoverflow.com/a/41337005
 // // Distance calculates the distance between two lat/lon pairs
@@ -156,6 +157,7 @@ export class ReactGoogleMaps extends Component {
       zoom: 16,
       searchedTap: null,
       anchor: false,
+      openResourceModal: false,
       map: null
     };
     this.toggleDrawer = this.toggleDrawer.bind(this);
@@ -353,9 +355,24 @@ export class ReactGoogleMaps extends Component {
               showButton={isMobile ? !this.state.isSearchBarShown : true}
             />
           </Stack>
-          <Toolbar map={this.state.map}/>
+          <AddResourceModalV2
+            open={this.state.openResourceModal}
+            setOpen={() =>
+              this.setState(prev => {
+                return { openResourceModal: !prev.openResourceModal };
+              })
+            }
+          />
+          <Toolbar
+            setOpen={() =>
+              this.setState(prev => {
+                return { openResourceModal: !prev.openResourceModal };
+              })
+            }
+          />{' '}
+          {/* TODO: Remove position-related styling from this component */}
         </Stack>
-        <SelectedTap></SelectedTap>
+        <SelectedTap />
       </div>
     );
   }

src/components/Toolbar/Toolbar.js

@@ -105,7 +105,7 @@ function getCoordinates() {
 
 function Toolbar(props) {
   const [value, setValue] = React.useState(0);
-  const [openResourceModal, setOpenResourceModal] = React.useState(false);
+
   const phlaskType = useSelector(phlaskTypeSelector);
   const dispatch = useDispatch();
   const property_name = useSelector(state => state);
@@ -244,6 +244,7 @@ function Toolbar(props) {
           </IconButton>
           <IconButton
             variant="blue"
+            onClick={() => props.setOpen()}
             sx={{
               width: '100%',
               display: 'flex',
@@ -302,15 +303,11 @@ function Toolbar(props) {
                 </Typography>
               }
               icon={<ContributeIcon className={styles.contributeButton} />}
-              onClick={() => setOpenResourceModal(true)}
+              onClick={() => props.setOpen()}
             />
           </BottomNavigation>
         </Box>
       )}
-      <AddResourceModalV2
-        open={openResourceModal}
-        setOpen={setOpenResourceModal}
-      />
     </>
   );
 }