Consolidates header box elements for all AddResource flows

phlask · Feb 8, 2025 · c3bfafc · c3bfafc
1 parent 7689e72
commit c3bfafc
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 146 deletions.
diff --git a/src/components/AddResourceModal/AddBathroom/AddBathroom.jsx b/src/components/AddResourceModal/AddBathroom/AddBathroom.jsx
@@ -65,37 +65,27 @@ const AddBathroom = ({
 
   return (
     <Box overflow="scroll" justifyContent="center">
-      {isMobile ? (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: isMobile ? 'flex-end' : 'center',
+          justifyContent: isMobile ? null : 'center',
+          padding: isMobile ? '0px 20px 10px' : '20px 0',
+          height: isMobile ? '88px': '64px',
+          backgroundColor: '#7C7C7C',
+        }}>
         <Typography
-          display="flex"
-          flexDirection="row"
-          alignItems="flex-end"
-          padding="0px 20px 10px"
-          height="88px"
-          backgroundColor="#7C7C7C"
-          color="common.white"
-        >
-          Add Bathroom Resource
-        </Typography>
-      ):
-      (
-        <Typography
-          display="flex"
-          flexDirection="row"
-          alignItems="center"
-          justifyContent="center"
-          height="64px"
-          backgroundColor="#7C7C7C"
-          color="common.white"
-          textAlign="center"
-          fontFamily="Inter"
-          fontWeight={600}
-          padding="20px 0"
-          fontSize={20.16}
-        >
-          Add a Bathroom Site
+          sx={{
+            color: 'common.white',
+            textAlign: isMobile ? null : 'center',
+            fontFamily: isMobile ? null : 'Inter',
+            fontWeight: isMobile ? null : 600,
+            fontSize: isMobile ? null : 20.16
+        }}>
+          Add a Bathroom Resource
         </Typography>
-      )}
+      </Box>
       <CardContent>
         <form
           onSubmit={handleSubmit((data, e) => {

diff --git a/src/components/AddResourceModal/AddFood/AddFood.jsx b/src/components/AddResourceModal/AddFood/AddFood.jsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { setDefaults } from 'react-geocode';
 import { useForm } from 'react-hook-form';
-import { Card, CardContent, Grid, IconButton, Typography } from '@mui/material';
+import { Box, Card, CardContent, Grid, IconButton, Typography } from '@mui/material';
 
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
@@ -78,38 +78,27 @@ const AddFood = ({
         justifyContent: 'center'
       }}
     >
-      {isMobile ? (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: isMobile ? 'flex-end' : 'center',
+          justifyContent: isMobile ? null : 'center',
+          padding: isMobile ? '0px 20px 10px' : '20px 0',
+          height: isMobile ? '88px': '64px',
+          backgroundColor: '#FF9A55',
+        }}>
         <Typography
-          display="flex"
-          flexDirection="row"
-          alignItems="flex-end"
-          padding="0px 20px 10px"
-          height="88px"
-          backgroundColor="#FF9A55"
-          color="common.white"
-        >
+          sx={{
+            color: 'common.white',
+            textAlign: isMobile ? null : 'center',
+            fontFamily: isMobile ? null : 'Inter',
+            fontWeight: isMobile ? null : 600,
+            fontSize: isMobile ? null : 20.16
+        }}>
           Add a Food Resource
         </Typography>
-      ):
-      (
-        <Typography
-          display="flex"
-          flexDirection="row"
-          alignItems="center"
-          justifyContent="center"
-          height="64px"
-          backgroundColor="#FF9A55"
-          color="common.white"
-          textAlign="center"
-          fontFamily="Inter"
-          fontWeight={600}
-          padding="20px 0"
-          fontSize={20.16}
-        >
-          Add a Food Site
-        </Typography>
-
-      )}
+      </Box>
       <CardContent>
         <form
           onSubmit={handleSubmit((data, e) => {

diff --git a/src/components/AddResourceModal/AddForaging/AddForaging.jsx b/src/components/AddResourceModal/AddForaging/AddForaging.jsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { setDefaults } from 'react-geocode';
 import { useForm } from 'react-hook-form';
-import { Card, CardContent, Grid, Typography, IconButton } from '@mui/material';
+import { Box, Card, CardContent, Grid, Typography, IconButton } from '@mui/material';
 
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
@@ -77,38 +77,27 @@ const AddForaging = ({
         justifyContent: 'center'
       }}
     >
-      {isMobile ? (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: isMobile ? 'flex-end' : 'center',
+          justifyContent: isMobile ? null : 'center',
+          padding: isMobile ? '0px 20px 10px' : '20px 0',
+          height: isMobile ? '88px': '64px',
+          backgroundColor: '#5DA694',
+        }}>
         <Typography
-          display="flex"
-          flexDirection="row"
-          alignItems="flex-end"
-          padding="0px 20px 10px"
-          height="88px"
-          backgroundColor="#5DA694"
-          color="common.white"
-        >
+          sx={{
+            color: 'common.white',
+            textAlign: isMobile ? null : 'center',
+            fontFamily: isMobile ? null : 'Inter',
+            fontWeight: isMobile ? null : 600,
+            fontSize: isMobile ? null : 20.16
+        }}>
           Add a Foraging Resource
         </Typography>
-      ):
-      (
-        <Typography
-          display="flex"
-          flexDirection="row"
-          alignItems="center"
-          justifyContent="center"
-          height="64px"
-          backgroundColor="#5DA694"
-          color="common.white"
-          textAlign="center"
-          fontFamily="Inter"
-          fontWeight={600}
-          padding="20px 0"
-          fontSize={20.16}
-        >
-          Add a Foraging Site
-        </Typography>
-
-      )}
+      </Box>
       <CardContent>
         <form
           onSubmit={handleSubmit((data, e) => {

diff --git a/src/components/AddResourceModal/AddWaterTap/AddWaterTap.jsx b/src/components/AddResourceModal/AddWaterTap/AddWaterTap.jsx
@@ -79,65 +79,27 @@ const AddWaterTap = ({
       overflow="scroll"
       justifyContent="center"
     >
-      {isMobile ? (
-        <Box
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: isMobile ? 'flex-end' : 'center',
+          justifyContent: isMobile ? null : 'center',
+          padding: isMobile ? '0px 20px 10px' : '20px 0',
+          height: isMobile ? '88px': '64px',
+          backgroundColor: '#5286E9',
+        }}>
+        <Typography
           sx={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'flex-end',
-            padding: '0px 20px 10px',
-            height: '88px',
-            backgroundColor: '#5286E9',
-            color: 'common.white'
-          }}>
-          {/* <Typography
-            display="flex"
-            flexDirection="row"
-            alignItems="flex-end"
-            padding="0px 20px 10px"
-            height="88px"
-            backgroundColor="#5286E9"
-            color="common.white"
-          > */}
-            Add Water Resource
-          {/* </Typography> */}
-        </Box>
-      ):
-      (
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: '64px',
-            backgroundColor: '#5286E9',
             color: 'common.white',
-            textAlign: 'center',
-            fontFamily: 'Inter',
-            fontWeight: '600',
-            padding: '20px 0',
-            fontSize: '20.16'
-          }}>
-        {/* <Typography
-          display="flex"
-          flexDirection="row"
-          alignItems="center"
-          justifyContent="center"
-          height="64px"
-          backgroundColor="#5286E9"
-          color="common.white"
-          textAlign="center"
-          fontFamily="Inter"
-          fontWeight={600}
-          padding="20px 0"
-          fontSize={20.16}
-        > */}
-          Add a Water Site
-        {/* </Typography> */}
-        </Box>
-
-      )}
+            textAlign: isMobile ? null : 'center',
+            fontFamily: isMobile ? null : 'Inter',
+            fontWeight: isMobile ? null : 600,
+            fontSize: isMobile ? null : 20.16
+        }}>
+          Add a Water Resource
+        </Typography>
+      </Box>
       <CardContent width="770px">
         <form
           onSubmit={handleSubmit((data, e) => {