Fixed issue Seneca-CDOT#1682 - rewrote buttons to be clickable on the…

… entire botton space
izhuravlev · Feb 12, 2021 · f57c374 · f57c374
1 parent b9371a3
commit f57c374
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 31 deletions.
diff --git a/src/frontend/next/src/components/Header/DesktopHeader.tsx b/src/frontend/next/src/components/Header/DesktopHeader.tsx
@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme) => ({
     float: 'right',
     margin: '0 0.5rem 0 0.5rem',
   },
-  links: {
+  buttonText: {
     color: theme.palette.primary.contrastText,
     fontFamily: 'Roboto, sans-serif',
     textDecoration: 'none',
@@ -47,22 +47,28 @@ export default function DesktopHeader() {
             </a>
           </Link>
           <div className={classes.grow} />
-          <IconButton color="inherit" className={classes.button} aria-label="search">
-            <Link href="/search">
+
+          <Link href="/search" passHref>
+            <IconButton
+              color="inherit"
+              className={classes.button}
+              aria-label="search"
+              component="a"
+            >
               <SearchIcon className={classes.searchIcon} />
-            </Link>
-          </IconButton>
+            </IconButton>
+          </Link>
 
-          <Button color="inherit" size="medium" className={classes.button}>
-            <Link href="/">
-              <a className={classes.links}>Home</a>
-            </Link>
-          </Button>
-          <Button color="inherit" size="medium" className={classes.button}>
-            <Link href="/about">
-              <a className={classes.links}>About</a>
-            </Link>
-          </Button>
+          <Link href="/" passHref>
+            <Button color="inherit" size="medium" className={classes.button} component="a">
+              <p className={classes.buttonText}>Home</p>
+            </Button>
+          </Link>
+          <Link href="/about" passHref>
+            <Button color="inherit" size="medium" className={classes.button} component="a">
+              <p className={classes.buttonText}>About</p>
+            </Button>
+          </Link>
           <Login />
         </Toolbar>
       </AppBar>

diff --git a/src/frontend/next/src/components/Header/MobileHeader.tsx b/src/frontend/next/src/components/Header/MobileHeader.tsx
@@ -32,7 +32,7 @@ const useStyles = makeStyles((theme) => ({
   menuIcon: {
     fontSize: '2.5rem',
   },
-  links: {
+  buttonText: {
     color: theme.palette.background.default,
     fontFamily: 'Roboto, sans-serif',
     textDecoration: 'none',
@@ -46,6 +46,9 @@ const useStyles = makeStyles((theme) => ({
   list: {
     width: 250,
   },
+  sideList: {
+    padding: 0,
+  },
   paper: {
     backgroundColor: theme.palette.primary.main,
   },
@@ -86,19 +89,21 @@ export default function MobileHeader() {
       onClick={toggleDrawer(side, false)}
       onKeyDown={toggleDrawer(side, false)}
     >
-      <List className={classes.item}>
-        <ListItem button className={classes.item}>
-          <Link href="/">
-            <a className={classes.links}>Home</a>
-          </Link>
-        </ListItem>
+      <List className={classes.sideList}>
+        <Link href="/" passHref>
+          <ListItem button className={classes.item} component="a">
+            <p className={classes.buttonText}>Home</p>
+          </ListItem>
+        </Link>
         <Divider className={classes.line} />
-        <ListItem button className={classes.item}>
-          <Link href="/about">
-            <a className={classes.links}>About</a>
-          </Link>
-        </ListItem>
+
+        <Link href="/about" passHref>
+          <ListItem button className={classes.item} component="a">
+            <p className={classes.buttonText}>About</p>
+          </ListItem>
+        </Link>
         <Divider className={classes.line} />
+
         <Login isMobile />
         <Divider className={classes.line} />
       </List>
@@ -115,11 +120,17 @@ export default function MobileHeader() {
             </a>
           </Link>
           <div className={classes.grow} />
-          <IconButton color="inherit" className={classes.button} aria-label="search">
-            <Link href="/search">
+          <Link href="/search" passHref>
+            <IconButton
+              color="inherit"
+              className={classes.button}
+              aria-label="search"
+              component="a"
+            >
               <SearchIcon className={classes.searchIcon} />
-            </Link>
-          </IconButton>
+            </IconButton>
+          </Link>
+
           <IconButton
             onClick={toggleDrawer('right', true)}
             edge="start"