From f844ab95cf9709715e6807ba6948ef4747111a49 Mon Sep 17 00:00:00 2001 From: ncatin Date: Tue, 30 May 2023 13:28:01 -0400 Subject: [PATCH 1/8] Changes to add resource menu --- .../AddResourceModal.module.scss | 21 ++++ .../AddResourceModal/AddResourceModalV2.js | 28 +++-- .../AddResourceModal/ChooseResource.jsx | 20 ++-- src/theme.js | 101 ++++++++++++++++++ yarn.lock | 20 ++-- 5 files changed, 165 insertions(+), 25 deletions(-) diff --git a/src/components/AddResourceModal/AddResourceModal.module.scss b/src/components/AddResourceModal/AddResourceModal.module.scss index 61576169..2d5cf57c 100644 --- a/src/components/AddResourceModal/AddResourceModal.module.scss +++ b/src/components/AddResourceModal/AddResourceModal.module.scss @@ -24,18 +24,39 @@ height: 100%; } +.dialogDesktop { + align-items: center; + justify-content: center; + width: 660px; + height: 314px; + left: 25px; + top: 372px; +} + .greyHeader { color: #626262; font-size: 24px; text-align: center; } +.greyHeaderDesktop { + color: #626262; + font-size: 24px; + text-align: center; + margin-top: 20px; +} + .subHeader { font-size: 14px; text-align: center; margin-bottom: 40px; } +.subHeaderDesktop { + font-size: 14px; + text-align: center; +} + .modalButton { display: flex; flex-direction: column; diff --git a/src/components/AddResourceModal/AddResourceModalV2.js b/src/components/AddResourceModal/AddResourceModalV2.js index e749fe3b..6f006117 100644 --- a/src/components/AddResourceModal/AddResourceModalV2.js +++ b/src/components/AddResourceModal/AddResourceModalV2.js @@ -6,16 +6,27 @@ import { useTheme } from '@mui/material/styles'; import { DialogContent } from '@mui/material'; import { ReactComponent as CloseIcon } from '../icons/CloseIcon.svg'; import IconButton from '@mui/material/IconButton'; +import styles from './AddResourceModal.module.scss'; -const AddResourceModalV2 = (props) => { +const AddResourceModalV2 = props => { const theme = useTheme(); const fullScreen = useMediaQuery(theme.breakpoints.down('md')); const onClose = () => props.setOpen(false); return ( - <> - + + {fullScreen && ( { > - - {}} /> - - - + )} + + + {}} /> + + ); }; diff --git a/src/components/AddResourceModal/ChooseResource.jsx b/src/components/AddResourceModal/ChooseResource.jsx index a183563d..930262d4 100644 --- a/src/components/AddResourceModal/ChooseResource.jsx +++ b/src/components/AddResourceModal/ChooseResource.jsx @@ -5,12 +5,18 @@ 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'; function ChooseResource({ setFormStep }) { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down('md')); return ( -
-

Add a Resource

-

+
+

+ Add a Resource +

+

Choose the type of resource you like
to add and submit the form. @@ -18,7 +24,7 @@ function ChooseResource({ setFormStep }) {
- +
+ {/* TODO: Rebuild the openResourceModal and setOpenResourceModal properties, since this is still class-based + The intent behind this change is to have the Toolbar and AddResourceModal visually contained in the same bottom-left area so that we can take + the responsibility of positioning away from each and keep their presentation relative to their parent container */} + + {/* TODO: Remove position-related styling from this component */} +

); diff --git a/src/components/Toolbar/Toolbar.js b/src/components/Toolbar/Toolbar.js index 876002b3..1e21c099 100644 --- a/src/components/Toolbar/Toolbar.js +++ b/src/components/Toolbar/Toolbar.js @@ -219,7 +219,6 @@ function Toolbar(props) { > -

) : ( // MOBILE VERSION OF THE TOOLBAR (V2) @@ -268,7 +267,6 @@ function Toolbar(props) { )} - ); } From 970cef23e2e54fd6e50554d878f46826bd9d1ccb Mon Sep 17 00:00:00 2001 From: ncatin Date: Tue, 20 Jun 2023 18:59:28 -0400 Subject: [PATCH 3/8] Additional Changes --- src/components/AddResourceModal/AddResourceModalV2.js | 9 ++++++--- src/components/AddResourceModal/ChooseResource.jsx | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/AddResourceModal/AddResourceModalV2.js b/src/components/AddResourceModal/AddResourceModalV2.js index 6f006117..7acfaf33 100644 --- a/src/components/AddResourceModal/AddResourceModalV2.js +++ b/src/components/AddResourceModal/AddResourceModalV2.js @@ -7,6 +7,7 @@ import { DialogContent } from '@mui/material'; import { ReactComponent as CloseIcon } from '../icons/CloseIcon.svg'; import IconButton from '@mui/material/IconButton'; import styles from './AddResourceModal.module.scss'; +import { isMobile } from 'react-device-detect'; const AddResourceModalV2 = props => { const theme = useTheme(); @@ -21,9 +22,11 @@ const AddResourceModalV2 = props => { onClose={onClose} fullScreen={fullScreen} sx={{ - position: !fullScreen ? 'absolute' : null, - top: !fullScreen ? '55vh' : null, - left: !fullScreen ? '-69vw' : null + position: !isMobile ? 'absolute' : null, + // top: !isMobile ? '55vh' : null, + // left: !isMobile ? '-69vw' : null + bottom: !isMobile ? '-40rem' : null, + left: !isMobile ? '-104rem' : null }} > {fullScreen && ( diff --git a/src/components/AddResourceModal/ChooseResource.jsx b/src/components/AddResourceModal/ChooseResource.jsx index 930262d4..305d5541 100644 --- a/src/components/AddResourceModal/ChooseResource.jsx +++ b/src/components/AddResourceModal/ChooseResource.jsx @@ -7,10 +7,10 @@ import { ReactComponent as ForagingIconCR } from '../icons/ForagingIconChooseRes 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(); - const isMobile = useMediaQuery(theme.breakpoints.down('md')); return (

From 3a4e8cc6238bde832ebadbdde5d4bafb5b67a9f9 Mon Sep 17 00:00:00 2001 From: ncatin Date: Tue, 1 Aug 2023 19:38:17 -0400 Subject: [PATCH 4/8] Added style changes to match Figma --- .../AddResourceModal.module.scss | 9 +++++---- .../AddResourceModal/AddResourceModalV2.js | 7 +++---- .../AddResourceModal/ChooseResource.jsx | 20 ++++++++----------- .../ReactGoogleMaps/ReactGoogleMaps.js | 2 +- src/components/Toolbar/Toolbar.js | 1 + src/theme.js | 8 ++++---- 6 files changed, 22 insertions(+), 25 deletions(-) diff --git a/src/components/AddResourceModal/AddResourceModal.module.scss b/src/components/AddResourceModal/AddResourceModal.module.scss index fa7bdb66..6b1315cc 100644 --- a/src/components/AddResourceModal/AddResourceModal.module.scss +++ b/src/components/AddResourceModal/AddResourceModal.module.scss @@ -27,8 +27,8 @@ .dialogDesktop { align-items: center; justify-content: center; - width: 708px; - height: 264px; + width: 660px; + height: 314px; left: 25px; top: 372px; } @@ -49,8 +49,8 @@ } .greyHeaderDesktop { - color: #626262; - font-size: 24px; + color: black; + font-size: 24.19px; text-align: center; margin-top: 20px; } @@ -64,6 +64,7 @@ .subHeaderDesktop { font-size: 14px; text-align: center; + color: grey; } .modalButton { diff --git a/src/components/AddResourceModal/AddResourceModalV2.js b/src/components/AddResourceModal/AddResourceModalV2.js index 88d70dbb..5a1bde21 100644 --- a/src/components/AddResourceModal/AddResourceModalV2.js +++ b/src/components/AddResourceModal/AddResourceModalV2.js @@ -7,7 +7,6 @@ import { Box, DialogContent } from '@mui/material'; import { ReactComponent as CloseIcon } from '../icons/CloseIcon.svg'; import IconButton from '@mui/material/IconButton'; import styles from './AddResourceModal.module.scss'; -import { isMobile } from 'react-device-detect'; import useOnClickOutside from './useOnClickOutside'; const AddResourceModalV2 = props => { @@ -21,7 +20,7 @@ const AddResourceModalV2 = props => { return ( <> - {!isMobile ? ( + {fullScreen ? ( props.open && ( { hideBackdrop={true} sx={{ position: !fullScreen ? 'absolute' : null, - top: !fullScreen ? '55vh' : null, - left: !fullScreen ? '-69vw' : null + top: !fullScreen ? '48vh' : null, + left: !fullScreen ? '-57vw' : null }} > {fullScreen && ( diff --git a/src/components/AddResourceModal/ChooseResource.jsx b/src/components/AddResourceModal/ChooseResource.jsx index 95655423..fa670221 100644 --- a/src/components/AddResourceModal/ChooseResource.jsx +++ b/src/components/AddResourceModal/ChooseResource.jsx @@ -13,18 +13,14 @@ function ChooseResource({ setFormStep }) { const theme = useTheme(); return (
- {isMobile && ( -

- Add a Resource -

- )} - {isMobile && ( -

- Choose the type of resource you like -
- to add and submit the form. -

- )} +

+ {isMobile ? 'Add a Resource' : 'Add a Site'} +

+

+ Choose the type of resource you like +
+ to add and submit the form. +

); } diff --git a/src/components/Toolbar/Toolbar.js b/src/components/Toolbar/Toolbar.js index b5698051..a6aed07e 100644 --- a/src/components/Toolbar/Toolbar.js +++ b/src/components/Toolbar/Toolbar.js @@ -251,6 +251,7 @@ function Toolbar(props) { props.setOpen()} sx={{ width: '100%', display: 'flex', diff --git a/src/theme.js b/src/theme.js index b216a044..47d36999 100644 --- a/src/theme.js +++ b/src/theme.js @@ -83,7 +83,7 @@ let theme = createTheme({ height: '80px', width: '209px', left: '124.75px', - top: '40px', + top: '150px', boxShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.15)', borderRadius: '8px', @@ -110,7 +110,7 @@ let theme = createTheme({ height: '80px', width: '209px', left: '124.75px', - top: '144px', + top: '254px', boxShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.15)', borderRadius: '8px', padding: '4px 0px 7px 0px', @@ -136,7 +136,7 @@ let theme = createTheme({ height: '80px', width: '209px', left: '374.25px', - top: '40px', + top: '150px', boxShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.15)', borderRadius: '8px', padding: '4px 0px 8px 0px', @@ -162,7 +162,7 @@ let theme = createTheme({ height: '80px', width: '209px', left: '374.25px', - top: '144px', + top: '254px', boxShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.15)', borderRadius: '8px', padding: '4px 0px 8px 0px', From 0c68472bc7e39c30cda80bb48bc76b917e4d815d Mon Sep 17 00:00:00 2001 From: ncatin Date: Tue, 8 Aug 2023 17:51:58 -0400 Subject: [PATCH 5/8] Changes to button font --- .../AddResourceModal/AddResourceModalV2.js | 2 +- .../AddResourceModal/ChooseResource.jsx | 22 ++++++++++++++++++- .../icons/FoodIconChooseResource.svg | 2 +- .../icons/ForagingIconChooseResource.svg | 2 +- .../icons/ToiletIconChooseResource.svg | 2 +- .../icons/WaterIconChooseResource.svg | 2 +- src/theme.js | 4 ++-- 7 files changed, 28 insertions(+), 8 deletions(-) diff --git a/src/components/AddResourceModal/AddResourceModalV2.js b/src/components/AddResourceModal/AddResourceModalV2.js index 5a1bde21..2b7d02f9 100644 --- a/src/components/AddResourceModal/AddResourceModalV2.js +++ b/src/components/AddResourceModal/AddResourceModalV2.js @@ -46,7 +46,7 @@ const AddResourceModalV2 = props => { hideBackdrop={true} sx={{ position: !fullScreen ? 'absolute' : null, - top: !fullScreen ? '48vh' : null, + top: !fullScreen ? '372px' : null, left: !fullScreen ? '-57vw' : null }} > diff --git a/src/components/AddResourceModal/ChooseResource.jsx b/src/components/AddResourceModal/ChooseResource.jsx index fa670221..824a2216 100644 --- a/src/components/AddResourceModal/ChooseResource.jsx +++ b/src/components/AddResourceModal/ChooseResource.jsx @@ -26,6 +26,11 @@ function ChooseResource({ setFormStep }) { className={styles.modalButton} variant={isMobile ? 'water' : 'waterDesktop'} onClick={() => setFormStep('addWaterTap')} + sx={{ + textTransform: 'capitalize', + fontSize: '20px', + lineHeight: '1' + }} > Water @@ -34,6 +39,11 @@ function ChooseResource({ setFormStep }) { className={styles.modalButton} variant={isMobile ? 'food' : 'foodDesktop'} onClick={() => setFormStep('addFood')} + sx={{ + textTransform: 'capitalize', + fontSize: '20px', + lineHeight: '1' + }} > Food @@ -42,9 +52,14 @@ function ChooseResource({ setFormStep }) { className={styles.modalButton} variant={isMobile ? 'bathrooms' : 'bathroomsDesktop'} onClick={() => setFormStep('addBathroom')} + sx={{ + textTransform: 'capitalize', + fontSize: '20px', + lineHeight: '1' + }} > - Bathroom + Bathrooms {/* this copy is different than the copy from the figma page, this might be a bit more clear? can make a point to ask @@ -53,6 +68,11 @@ function ChooseResource({ setFormStep }) { className={styles.modalButton} variant={isMobile ? 'foraging' : 'foragingDesktop'} onClick={() => setFormStep('addForaging')} + sx={{ + textTransform: 'capitalize', + fontSize: '20px', + lineHeight: '1' + }} > Foraging diff --git a/src/components/icons/FoodIconChooseResource.svg b/src/components/icons/FoodIconChooseResource.svg index 640ba88e..66a7988f 100644 --- a/src/components/icons/FoodIconChooseResource.svg +++ b/src/components/icons/FoodIconChooseResource.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/icons/ForagingIconChooseResource.svg b/src/components/icons/ForagingIconChooseResource.svg index 8041fc4c..cb816f08 100644 --- a/src/components/icons/ForagingIconChooseResource.svg +++ b/src/components/icons/ForagingIconChooseResource.svg @@ -1,4 +1,4 @@ - + diff --git a/src/components/icons/ToiletIconChooseResource.svg b/src/components/icons/ToiletIconChooseResource.svg index 12d85b63..e0eb7b39 100644 --- a/src/components/icons/ToiletIconChooseResource.svg +++ b/src/components/icons/ToiletIconChooseResource.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/src/components/icons/WaterIconChooseResource.svg b/src/components/icons/WaterIconChooseResource.svg index 0f7e6fdc..edd77bea 100644 --- a/src/components/icons/WaterIconChooseResource.svg +++ b/src/components/icons/WaterIconChooseResource.svg @@ -1,3 +1,3 @@ - + diff --git a/src/theme.js b/src/theme.js index 47d36999..562845b7 100644 --- a/src/theme.js +++ b/src/theme.js @@ -10,7 +10,7 @@ let theme = createTheme({ { props: { variant: 'water' }, style: { - textTransform: 'none', + textTransform: 'capitalize', background: '#5285e9', color: '#ffffff', margin: '0 auto', @@ -28,7 +28,7 @@ let theme = createTheme({ { props: { variant: 'food' }, style: { - textTransform: 'none', + textTransform: 'capitalize', background: '#ff9a55', color: '#ffffff', margin: '0 auto', From 040ae2b6afff588f730b249ea23381ea1ff2cff6 Mon Sep 17 00:00:00 2001 From: Gabriel Cardona <2278918+gcardonag@users.noreply.github.com> Date: Tue, 8 Aug 2023 19:47:39 -0400 Subject: [PATCH 6/8] Testing an adjustment from Dialog to Popover to get dynamic placement on screen --- .../AddResourceModal/AddResourceModalV2.js | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/components/AddResourceModal/AddResourceModalV2.js b/src/components/AddResourceModal/AddResourceModalV2.js index 2b7d02f9..6ffffb66 100644 --- a/src/components/AddResourceModal/AddResourceModalV2.js +++ b/src/components/AddResourceModal/AddResourceModalV2.js @@ -3,7 +3,7 @@ import Dialog from '@mui/material/Dialog'; import ChooseResource from './ChooseResource'; import useMediaQuery from '@mui/material/useMediaQuery'; import { useTheme } from '@mui/material/styles'; -import { Box, DialogContent } from '@mui/material'; +import { Box, DialogContent, Popover } from '@mui/material'; import { ReactComponent as CloseIcon } from '../icons/CloseIcon.svg'; import IconButton from '@mui/material/IconButton'; import styles from './AddResourceModal.module.scss'; @@ -38,17 +38,20 @@ const AddResourceModalV2 = props => { ) ) : ( - {fullScreen && ( { {}} /> - + )} ); From 3b0371059f0991dd24a076475fa487a2e91b94e8 Mon Sep 17 00:00:00 2001 From: Gabriel Cardona <2278918+gcardonag@users.noreply.github.com> Date: Tue, 8 Aug 2023 20:12:53 -0400 Subject: [PATCH 7/8] Updates to use Paper component and function to handle closing when clicking out of the component --- .../AddResourceModal/AddResourceModalV2.js | 87 ++++++++++++++++--- 1 file changed, 73 insertions(+), 14 deletions(-) diff --git a/src/components/AddResourceModal/AddResourceModalV2.js b/src/components/AddResourceModal/AddResourceModalV2.js index 6ffffb66..cc1e304e 100644 --- a/src/components/AddResourceModal/AddResourceModalV2.js +++ b/src/components/AddResourceModal/AddResourceModalV2.js @@ -1,9 +1,9 @@ -import React, { createRef } from 'react'; +import React, { createRef, useEffect, useRef } from 'react'; import Dialog from '@mui/material/Dialog'; import ChooseResource from './ChooseResource'; import useMediaQuery from '@mui/material/useMediaQuery'; import { useTheme } from '@mui/material/styles'; -import { Box, DialogContent, Popover } from '@mui/material'; +import { Box, DialogContent, Popover, Paper } from '@mui/material'; import { ReactComponent as CloseIcon } from '../icons/CloseIcon.svg'; import IconButton from '@mui/material/IconButton'; import styles from './AddResourceModal.module.scss'; @@ -18,6 +18,32 @@ const AddResourceModalV2 = props => { 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 ( <> {fullScreen ? ( @@ -38,20 +64,16 @@ const AddResourceModalV2 = props => { ) ) : ( - {fullScreen && ( { {}} /> - + + ) + // + // {fullScreen && ( + // theme.palette.grey[500] + // }} + // size="large" + // > + // + // + // )} + + // + // {}} /> + // + // )} ); From 9e3ee61df8a38841c9019b3c115db3b2858fb4f0 Mon Sep 17 00:00:00 2001 From: Gabriel Cardona <2278918+gcardonag@users.noreply.github.com> Date: Tue, 8 Aug 2023 20:22:31 -0400 Subject: [PATCH 8/8] Cleans up comments and unused code --- .../AddResourceModal/AddResourceModalV2.js | 41 +------------------ 1 file changed, 1 insertion(+), 40 deletions(-) diff --git a/src/components/AddResourceModal/AddResourceModalV2.js b/src/components/AddResourceModal/AddResourceModalV2.js index cc1e304e..f8b56485 100644 --- a/src/components/AddResourceModal/AddResourceModalV2.js +++ b/src/components/AddResourceModal/AddResourceModalV2.js @@ -1,13 +1,10 @@ import React, { createRef, useEffect, useRef } from 'react'; -import Dialog from '@mui/material/Dialog'; import ChooseResource from './ChooseResource'; import useMediaQuery from '@mui/material/useMediaQuery'; import { useTheme } from '@mui/material/styles'; -import { Box, DialogContent, Popover, Paper } from '@mui/material'; +import { Box, DialogContent, Paper } from '@mui/material'; import { ReactComponent as CloseIcon } from '../icons/CloseIcon.svg'; import IconButton from '@mui/material/IconButton'; -import styles from './AddResourceModal.module.scss'; -import useOnClickOutside from './useOnClickOutside'; const AddResourceModalV2 = props => { const theme = useTheme(); @@ -96,42 +93,6 @@ const AddResourceModalV2 = props => { ) - // - // {fullScreen && ( - // theme.palette.grey[500] - // }} - // size="large" - // > - // - // - // )} - - // - // {}} /> - // - // )} );