From 998c8baa47237764f0c49850dbc0b2287f66da07 Mon Sep 17 00:00:00 2001
From: Om Mishra <32200996+mishraomp@users.noreply.github.com>
Date: Mon, 25 Mar 2024 16:10:30 -0700
Subject: [PATCH] chore: header pin changes (#57)

---
 frontend/src/App.tsx                          | 67 ++++++++------
 .../src/components/AuthorizationDetails.tsx   | 10 +--
 frontend/src/components/Dashboard.tsx         |  2 +-
 frontend/src/components/Header.tsx            | 88 +++++++++++++++----
 4 files changed, 117 insertions(+), 50 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7917e0c1..f8505c80 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -8,8 +8,8 @@ import { fetchOMRRData } from '@/features/omrr/omrr-slice'
 import { useEffect } from 'react'
 import { RootState } from '@/app/store'
 import CircularProgress from '@mui/material/CircularProgress'
-import Snackbar from '@mui/material/Snackbar'
 import 'leaflet/dist/leaflet.css'
+import { Snackbar } from '@mui/material'
 
 export default function App() {
   const status: string = useSelector((state: RootState) => state.omrr.status)
@@ -20,31 +20,48 @@ export default function App() {
   }, [dispatch])
   return (
     <Grid container sx={{ flexGrow: 1 }}>
-      <Grid item xs={12}>
-        <Header />
-      </Grid>
-      <Grid item xs={12}>
-        {status === 'loading' ? (
-          <CircularProgress />
-        ) : status === 'failed' ? (
-          <Snackbar
-            message="Loading Failed, Please try later refreshing the page"
-            sx={{ background: '#fffffff', backgroundColor: '#fffffff' }}
-            color="error"
-            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-            autoHideDuration={6000}
-            draggable
-            open={true}
-          ></Snackbar>
-        ) : (
-          <BrowserRouter>
+      {status === 'loading' ? (
+        <><Grid item xs={12}>
+          <Header />
+        </Grid>
+          <Grid item xs={12}>
+            <CircularProgress />
+          </Grid>
+          <Grid item xs={12}>
+            <Footer />
+          </Grid></>
+      ) : status === 'failed' ? (
+        <><Grid item xs={12}>
+          <Header />
+        </Grid>
+          <Grid item xs={12}>
+            <Snackbar
+              message="Loading Failed, Please try later refreshing the page"
+              sx={{ background: '#fffffff', backgroundColor: '#fffffff' }}
+              color="error"
+              anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+              autoHideDuration={6000}
+              draggable
+              open={true}
+            ></Snackbar>
+          </Grid>
+          <Grid item xs={12}>
+            <Footer />
+          </Grid></>
+      ) : (
+        <><BrowserRouter>
+          <Grid item xs={12}>
+            <Header />
+          </Grid>
+          <Grid item xs={12}>
             <AppRoutes />
-          </BrowserRouter>
-        )}
-      </Grid>
-      <Grid item xs={12}>
-        <Footer />
-      </Grid>
+          </Grid>
+          <Grid item xs={12}>
+            <Footer />
+          </Grid>
+        </BrowserRouter></>
+      )}
+
     </Grid>
   )
 }
diff --git a/frontend/src/components/AuthorizationDetails.tsx b/frontend/src/components/AuthorizationDetails.tsx
index 723042a9..c74c011b 100644
--- a/frontend/src/components/AuthorizationDetails.tsx
+++ b/frontend/src/components/AuthorizationDetails.tsx
@@ -162,10 +162,10 @@ export default function AuthorizationDetails() {
     //read from assets
     iconUrl: pin,
     shadowUrl: shadow,
-    iconSize: [25, 41],
-    iconAnchor: [12, 41],
+    iconSize: [50, 82],
+    iconAnchor: [25, 82],
     popupAnchor: [1, -34],
-    shadowSize: [41, 41],
+    shadowSize: [82, 82],
   })
   const navigate = useNavigate()
   const buttonClicked = (route: any) => {
@@ -212,8 +212,8 @@ export default function AuthorizationDetails() {
             <MapContainer
               id="map"
               center={facilityLocation}
-              scrollWheelZoom={false}
-              zoom={12}
+              scrollWheelZoom={true}
+              zoom={14}
               style={{ height: '60em' }}
               className="map-container"
             >
diff --git a/frontend/src/components/Dashboard.tsx b/frontend/src/components/Dashboard.tsx
index 30a9de51..8f8e0391 100644
--- a/frontend/src/components/Dashboard.tsx
+++ b/frontend/src/components/Dashboard.tsx
@@ -105,7 +105,7 @@ export default function Dashboard() {
           height: '100%',
           backgroundImage: `url(${homePageBanner})`,
           backgroundSize: 'cover',
-          backgroundPosition: 'left',
+          backgroundPosition: 'center',
         }}
       />
       <Stack>
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 540d81a6..ffd9da7c 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,7 +1,10 @@
 import BCGovLogo from '@/assets/gov-bc-logo-horiz.png'
 import { AppBar, IconButton, Toolbar } from '@mui/material'
-import Typography from '@mui/material/Typography'
-import { HomeRounded, Menu } from '@mui/icons-material'
+import { Feed, Menu } from '@mui/icons-material'
+import Stack from '@mui/material/Stack'
+import { useTheme } from '@mui/material/styles'
+import useMediaQuery from '@mui/material/useMediaQuery'
+
 const styles = {
   appBar: {
     color: '#ffffff',
@@ -10,25 +13,72 @@ const styles = {
   },
 }
 export default function Header() {
+  const theme = useTheme()
+  const mdMatches = useMediaQuery(theme.breakpoints.up('md'))
   return (
     <AppBar position="fixed" sx={styles.appBar}>
-      <Toolbar sx={{ justifyContent: 'space-between' }} id="back-to-top-anchor">
-        <img  alt="Logo" src={BCGovLogo} />
-        <Typography sx={{
-          fontFamily: 'BCSans',
-          fontStyle: 'normal',
-          fontWeight: 400,
-          fontSize: '1.5em',
-          lineHeight: '2.25em',
-          color:' #FFFFFF'
-        }}>
-          Organics Info
-        </Typography>
-        <a href={'/'} target={'_self'}>
-          <IconButton>
-            <Menu color="secondary"></Menu>
-          </IconButton>
-        </a>
+      <Toolbar
+        sx={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          alignContent: 'center',
+          justifyContent: 'space-between',
+        }}
+        id="back-to-top-anchor"
+      >
+        <Stack direction="row" id="logo_name">
+          <a href="/">
+            <img alt="Logo" src={BCGovLogo} />
+          </a>
+          <div>
+            {' '}
+            <span
+              style={{
+                fontFamily: 'BCSans',
+                fontSize: '1.5em',
+                lineHeight: '2.25em',
+                marginLeft: '1em',
+                alignItems: 'center',
+              }}
+            >
+              Organics Info
+            </span>
+          </div>
+        </Stack>
+        <Stack direction="row" id="nav">
+          {mdMatches && (
+            <div>
+              <a
+                href={'/search'}
+                target={'_self'}
+                style={{ textDecoration: 'none' }}
+              >
+                <IconButton>
+                  <Feed color="secondary"></Feed>
+                </IconButton>
+                <span
+                  style={{
+                    color: '#ffffff',
+                    textDecoration: 'none',
+                    textTransform: 'none',
+                  }}
+                >
+                  {' '}
+                  Text Search
+                </span>
+              </a>
+            </div>
+          )}
+          {!mdMatches && (
+            <div>
+              <a href={'/search'} target={'_self'}>
+                <IconButton>
+                  <Menu color="secondary"></Menu>
+                </IconButton>
+              </a>
+            </div>
+          )}
+        </Stack>
       </Toolbar>
     </AppBar>
   )