Website Redesign: Release 1 navigation bars #127

* Disabled hover effect over 'Notify Me' and 'Support' buttons
* Updated useIsMobile breakpoint from 'sm' to 'lg' because the 'Notify Me'and 'Support' buttons will cause overflow when breakpoint is 'sm'
* Inverted the X and github icons color

src/components/Footer.jsx

@@ -9,12 +9,12 @@ import Image from 'next/image'
 import Link from 'next/link'
 
 import facebooklogo from '../../public/images/facebook.png'
-import githublogo from '../../public/images/github.png'
+import githublogo from '../../public/images/github_invert.png'
 import instagramlogo from '../../public/images/instagram.png'
 import linkedinlogo from '../../public/images/linkedin.png'
 import licenselogo from '../../public/images/orcasound-all-rights-reserved-2023.png'
 import orcasoundlogo from '../../public/images/orcasoundlogo_3.png'
-import xlogo from '../../public/images/x.png'
+import xlogo from '../../public/images/x_invert.png'
 import youtubelogo from '../../public/images/youtube.png'
 import useIsMobile from '../utils/useIsMobile'
 

src/components/Nav.jsx

@@ -136,7 +136,7 @@ function Mobile() {
   )
 
   return (
-    <Box sx={{ display: { xs: 'flex', sm: 'none' } }}>
+    <Box sx={{ display: { xs: 'flex', sm: 'flex' } }}>
       <IconButton
         size="large"
         aria-label="account of current user"
@@ -151,7 +151,7 @@ function Mobile() {
         anchor="top"
         open={menuIsOpen}
         onClose={handleMenuToggle}
-        sx={{ display: { xs: 'flex', sm: 'none' } }}
+        sx={{ display: { xs: 'flex', sm: 'flex' } }}
       >
         <Toolbar sx={{ height: '80px' }} />
         {list}
@@ -172,12 +172,6 @@ function Desktop() {
             sx={{
               position: 'relative',
               margin: 3,
-              '&:hover .MuiButtonBase-root .MuiTypography-root': {
-                //color: 'grey',
-              },
-              '&:hover .MuiBox-root': {
-                opacity: 1,
-              },
             }}
           >
             <Button
@@ -216,16 +210,13 @@ function Desktop() {
             borderColor: 'white',
             borderStyle: 'solid',
             borderRadius: '100px',
-            display: { xs: 'none', sm: 'flex' },
             textTransform: 'none',
-            width: 150,
-            '&:hover': { color: 'black', backgroundColor: 'white' },
+            maxwidth: 150,
           }}
           startIcon={
             <NotificationsIcon
               sx={{
                 color: 'white',
-                '&:hover': { color: `${theme.palette.secondary.main}` },
               }}
             />
           }
@@ -241,11 +232,8 @@ function Desktop() {
               borderColor: 'white',
               borderStyle: 'solid',
               borderRadius: '100px',
-              display: { xs: 'none', sm: 'flex' },
               textTransform: 'none',
-              width: 150,
-              '&:hover': { color: 'black', backgroundColor: 'white' },
-              '&:hover .MuiSvgIcon-root': { color: 'black' },
+              maxwidth: 150,
             }}
             startIcon={
               <VolunteerActivismIcon

src/utils/useIsMobile.ts

@@ -9,5 +9,5 @@ export default function useIsMobile() {
   // Negate media query so that default SSR value for media query (false) shows
   // up as being mobile. In other words, if the media query fails, assume the
   // client is mobile and render for mobile first
-  return !useMediaQuery<Theme>((theme) => theme.breakpoints.up('sm'))
+  return !useMediaQuery<Theme>((theme) => theme.breakpoints.up('lg'))
 }