Updates to Choose Resourse menu (#297)

* Updates to Choose Resourse menu * Adds temporary button to render AddResourceModalV2 on mobile and tunes presentation for all buttons and water button content * updated button colors on hover * feat(choose-resource): update icons * Integrates AddResourceModalV2 with Toolbar button * Updates yarn lock * Fixes mix up with foraging and bathroom icons * changes to theme.js * Adjusts top padding on buttons to align to prototype * Updates desktop toolbar to include Add Resource button --------- Co-authored-by: Gabriel Cardona <2278918+gcardonag@users.noreply.github.com> Co-authored-by: Ron Braha <ron.braha@icloud.com>
phlask · Mar 15, 2023 · f3fdfa1 · f3fdfa1
1 parent d10718c
commit f3fdfa1
Show file tree

Hide file tree

Showing 14 changed files with 3,570 additions and 3,068 deletions.
diff --git a/assets/images/PhlaskButton.png b/assets/images/PhlaskButton.png
diff --git a/package.json b/package.json
@@ -9,8 +9,8 @@
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/react-fontawesome": "^0.1.11",
+    "@mui/icons-material": "^5.4.2",
     "@mui/material": "^5.6.2",
-    "@mui/icons-material": "5.4.2",
     "@reduxjs/toolkit": "^1.8.2",
     "bootstrap": "^5.1.3",
     "cypress": "^9.5.4",

diff --git a/src/components/AddResourceModal/AddResourceModal.js b/src/components/AddResourceModal/AddResourceModal.js
@@ -8,6 +8,7 @@ import {
   Popover,
   Accordion
 } from 'react-bootstrap';
+import Dialog from '@mui/material/Dialog';
 import ImageUploader from 'react-images-upload';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
@@ -417,9 +418,9 @@ export class AddResourceModal extends Component {
   render() {
     return (
       <>
-        <Modal
-          show={this.state.show}
-          onHide={this.handleClose}
+        <Dialog
+          open={this.state.show}
+          onClose={this.handleClose}
           className={styles.modal}
         >
           {this.state.formStep === 'chooseResource' && (
@@ -565,7 +566,7 @@ export class AddResourceModal extends Component {
           )}
 
           {this.state.formStep === 'shareSocials' && <ShareSocials />}
-        </Modal>
+        </Dialog>
 
         <button
           onClick={this.handleShow}

diff --git a/src/components/AddResourceModal/AddResourceModal.module.scss b/src/components/AddResourceModal/AddResourceModal.module.scss
@@ -16,18 +16,38 @@
   height: 90vh;
 }
 
+.dialog {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100%;
+}
+
 .greyHeader {
   color: #626262;
-  font-size: 2rem;
+  font-size: 24px;
+  text-align: center;
+}
+
+.subHeader {
+  font-size: 14px;
   text-align: center;
-  margin-bottom: 48px;
+  margin-bottom: 40px;
 }
 
 .modalButton {
-  display: block;
-  margin: 24px auto;
-  padding: 16px 32px;
-  min-width: 60%;
+  display: flex;
+  flex-direction: column;
+  width: 209px;
+  gap: 8px;
+  height: 93px;
+}
+
+.buttonWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 26px;
 }
 
 .modalFormLabel {

diff --git a/src/components/AddResourceModal/AddResourceModalV2.js b/src/components/AddResourceModal/AddResourceModalV2.js
@@ -0,0 +1,40 @@
+import React 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 { DialogContent } from '@mui/material';
+import { ReactComponent as CloseIcon } from '../icons/CloseIcon.svg';
+import IconButton from '@mui/material/IconButton';
+
+const AddResourceModalV2 = (props) => {
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
+
+  const onClose = () => props.setOpen(false);
+
+  return (
+    <>
+      <Dialog open={props.open} onClose={onClose} fullScreen={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>
+      </Dialog>
+    </>
+  );
+};
+
+export default AddResourceModalV2;
diff --git a/src/components/AddResourceModal/ChooseResource.jsx b/src/components/AddResourceModal/ChooseResource.jsx
@@ -1,43 +1,57 @@
-import React from "react";
-import styles from "./AddResourceModal.module.scss";
-import { Modal, Button } from "react-bootstrap";
+import React from 'react';
+import styles from './AddResourceModal.module.scss';
+import Button from '@mui/material/Button';
+import { ReactComponent as WaterIconCR } from '../icons/WaterIconChooseResource.svg';
+import { ReactComponent as FoodIconCR } from '../icons/FoodIconChooseResource.svg';
+import { ReactComponent as ForagingIconCR } from '../icons/ForagingIconChooseResource.svg';
+import { ReactComponent as ToiletIconCR } from '../icons/ToiletIconChooseResource.svg';
 
 function ChooseResource({ setFormStep }) {
   return (
-    <div className={styles.modalContent}>
-      <Modal.Header className={styles.modalHeader} closeButton></Modal.Header>
-      <h1 className={styles.greyHeader}>Add a Resource</h1>
-      <Button
-        className={styles.modalButton}
-        variant="primary"
-        onClick={() => setFormStep("addWaterTap")}
-      >
-        Water Tap
-      </Button>
-      <Button
-        className={styles.modalButton}
-        variant="primary"
-        onClick={() => setFormStep("addFood")}
-      >
-        Food
-      </Button>
-      <Button
-        className={styles.modalButton}
-        variant="primary"
-        onClick={() => setFormStep("addBathroom")}
-      >
-        Bathroom
-      </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="primary"
-        onClick={() => setFormStep("addForaging")}
-      >
-        Foraging
-      </Button>
+    <div className={styles.dialog}>
+      <h2 className={styles.greyHeader}>Add a Resource</h2>
+      <h3 className={styles.subHeader}>
+        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"
+          onClick={() => setFormStep('addWaterTap')}
+        >
+          <WaterIconCR />
+          <span>Water</span>
+        </Button>
+        <Button
+          className={styles.modalButton}
+          variant="food"
+          onClick={() => setFormStep('addFood')}
+        >
+          <FoodIconCR />
+          Food
+        </Button>
+        <Button
+          className={styles.modalButton}
+          variant="bathrooms"
+          onClick={() => setFormStep('addBathroom')}
+        >
+          <ToiletIconCR />
+          Bathroom
+        </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"
+          onClick={() => setFormStep('addForaging')}
+        >
+          <ForagingIconCR />
+          Foraging
+        </Button>
+      </div>
     </div>
   );
 }

diff --git a/src/components/Toolbar/Toolbar.js b/src/components/Toolbar/Toolbar.js
@@ -18,7 +18,7 @@ import Filter from '../ResourceMenu/Filter';
 import styles from './Toolbar.module.scss';
 
 import { isMobile } from 'react-device-detect';
-import { AddResourceModal } from '../AddResourceModal';
+import AddResourceModalV2 from '../AddResourceModal/AddResourceModalV2';
 import { ReactComponent as ContributeIcon } from '../icons/ContributeIcon.svg';
 import { ReactComponent as ResourceIcon } from '../icons/ResourceIcon.svg';
 
@@ -29,6 +29,9 @@ import { ReactComponent as ForagingIcon } from '../icons/CircleForagingIcon.svg'
 import { ReactComponent as ToiletIcon } from '../icons/CircleBathroomIcon.svg';
 import { ReactComponent as WaterIcon } from '../icons/CircleWaterIcon.svg';
 
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import { SvgIcon, Typography } from '@mui/material';
 import BottomNavigation from '@mui/material/BottomNavigation';
 import NavigationItem from './NavigationItem';
@@ -100,7 +103,7 @@ function getCoordinates() {
 
 function Toolbar(props) {
   const [value, setValue] = React.useState(0);
-  const [open, setOpen] = React.useState(false);
+  const [openResourceModal, setOpenResourceModal] = React.useState(false);
   const phlaskType = useSelector(phlaskTypeSelector);
 
   const selectedResourceIcon = {
@@ -207,7 +210,16 @@ function Toolbar(props) {
           >
             <FoodIcon />
           </button>
-          <AddResourceModal />
+
+          <button
+            className={styles.addButton}
+            onClick={() => {
+              setOpenResourceModal(true)
+            }}
+          >
+            <FontAwesomeIcon icon={faPlus} size="2x" />
+          </button>
+          <AddResourceModalV2 open={openResourceModal} setOpen={setOpenResourceModal} />
         </div>
       ) : (
         // MOBILE VERSION OF THE TOOLBAR (V2)
@@ -249,10 +261,14 @@ function Toolbar(props) {
             <NavigationItem
               label={<Typography fontSize={'small'}>Contribute</Typography>}
               icon={<ContributeIcon className={styles.contributeButton} />}
+              onClick={() =>
+                setOpenResourceModal(true)
+              }
             />
           </BottomNavigation>
         </Box>
       )}
+      <AddResourceModalV2 open={openResourceModal} setOpen={setOpenResourceModal} />
     </>
   );
 }

diff --git a/src/components/Toolbar/Toolbar.module.scss b/src/components/Toolbar/Toolbar.module.scss
@@ -153,6 +153,22 @@ $foodColor: #8dc63f;
     box-shadow: 0 0 0 0.2rem rgba(#ccc, 0.3);
   }
 
+  .addButton {
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    right: 0.35rem;
+    color: #999;
+
+    &:hover {
+      color: #666;
+    }
+
+    svg {
+      padding: 0.15rem;
+    }
+  }
+
   .filterButton {
     box-sizing: content-box;
     right: 1rem;

diff --git a/src/components/icons/FoodIconChooseResource.svg b/src/components/icons/FoodIconChooseResource.svg