From 7209d47aa27458c4a2438489a02428ea2ed4d4f4 Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Thu, 13 May 2021 18:23:57 -0400
Subject: [PATCH] style: hide legacy icons in mobile layout and center search
 bar

---
 striker-ui/components/Header.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/striker-ui/components/Header.tsx b/striker-ui/components/Header.tsx
index 592e21b2..5f8f6f47 100644
--- a/striker-ui/components/Header.tsx
+++ b/striker-ui/components/Header.tsx
@@ -22,6 +22,17 @@ const useStyles = makeStyles((theme) =>
     barElement: {
       padding: 0,
     },
+    icons: {
+      [theme.breakpoints.down('sm')]: {
+        display: 'none',
+      },
+    },
+    searchBar: {
+      [theme.breakpoints.down('sm')]: {
+        flexGrow: 1,
+        paddingLeft: '15vw',
+      },
+    },
   }),
 );
 
@@ -40,10 +51,10 @@ const Header = (): JSX.Element => {
               <img alt="" src="/pngs/logo.png" width="160" height="40" />
             </Button>
           </Box>
-          <Box className={classes.barElement}>
+          <Box className={`${classes.barElement} ${classes.searchBar}`}>
             <input className={classes.input} list="search-suggestions" />
           </Box>
-          <Box className={classes.barElement}>
+          <Box className={`${classes.barElement} ${classes.icons}`}>
             {ICONS.map(
               (icon): JSX.Element => (
                 <img