From a3244fc58b3adb5219b0820d0e18fde0ec42a514 Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Wed, 28 Apr 2021 18:44:32 -0400
Subject: [PATCH] fix: change the nesting of the components to fix problem with
 the AppBar

---
 striker-ui/components/Header.tsx | 16 +++------
 striker-ui/pages/index.tsx       | 56 +++++++++++++++-----------------
 2 files changed, 31 insertions(+), 41 deletions(-)

diff --git a/striker-ui/components/Header.tsx b/striker-ui/components/Header.tsx
index 25134561..eabad80e 100644
--- a/striker-ui/components/Header.tsx
+++ b/striker-ui/components/Header.tsx
@@ -14,7 +14,7 @@ const useStyles = makeStyles((theme) =>
     },
     input: {
       height: '40px',
-      width: '500px',
+      width: '30vw',
       backgroundColor: theme.palette.secondary.main,
       borderRadius: '3px',
     },
@@ -28,20 +28,14 @@ const Header = (): JSX.Element => {
   const classes = useStyles();
   return (
     <AppBar position="static" className={classes.appBar}>
-      <Box
-        display="flex"
-        flexDirection="row"
-        width="100%"
-        justifyContent="space-between"
-        alignContent="flex-start"
-      >
-        <Box p={1} className={classes.barElement}>
+      <Box display="flex" justifyContent="space-between" flexDirection="row">
+        <Box className={classes.barElement}>
           <Image src="/pngs/logo.png" width="160" height="40" />
         </Box>
-        <Box p={1} className={classes.barElement}>
+        <Box className={classes.barElement}>
           <input className={classes.input} list="search-suggestions" />
         </Box>
-        <Box p={1} className={classes.barElement}>
+        <Box className={classes.barElement}>
           {ICONS.map(
             (icon): JSX.Element => (
               <Image
diff --git a/striker-ui/pages/index.tsx b/striker-ui/pages/index.tsx
index 53a14253..a83f70a2 100644
--- a/striker-ui/pages/index.tsx
+++ b/striker-ui/pages/index.tsx
@@ -1,7 +1,6 @@
 import { Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
-import Header from '../components/Header';
 import Anvils from '../components/Anvils';
 import Nodes from '../components/Nodes';
 import CPU from '../components/CPU';
@@ -10,7 +9,7 @@ import Memory from '../components/Memory';
 import Network from '../components/Network';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
 import Servers from '../components/Servers';
-
+import Header from '../components/Header';
 import AnvilProvider from '../components/AnvilContext';
 
 const useStyles = makeStyles(() => ({
@@ -34,35 +33,32 @@ const Home = (): JSX.Element => {
 
   return (
     <>
-      <Header />
       <AnvilProvider>
-        <Box
-          display="flex"
-          flexDirection="row"
-          width="100%"
-          justifyContent="space-between"
-          alignContent="flex-start"
-        >
-          {data?.anvils && (
-            <>
-              <Box p={1} className={classes.child}>
-                <Anvils list={data} />
-                <Nodes anvil={data.anvils} />
-              </Box>
-              <Box p={1} className={classes.server}>
-                <Servers anvil={data.anvils} />
-              </Box>
-              <Box p={1} className={classes.child}>
-                <SharedStorage anvil={data.anvils} />
-              </Box>
-              <Box p={1} className={classes.child}>
-                <Network />
-                <CPU />
-                <Memory />
-              </Box>
-            </>
-          )}
-        </Box>
+        <Header />
+        {data?.anvils && (
+          <Box
+            display="flex"
+            flexDirection="row"
+            width="100%"
+            justifyContent="space-between"
+          >
+            <Box p={1} className={classes.child}>
+              <Anvils list={data} />
+              <Nodes anvil={data.anvils} />
+            </Box>
+            <Box p={1} className={classes.server}>
+              <Servers anvil={data.anvils} />
+            </Box>
+            <Box p={1} className={classes.child}>
+              <SharedStorage anvil={data.anvils} />
+            </Box>
+            <Box p={1} className={classes.child}>
+              <Network />
+              <CPU />
+              <Memory />
+            </Box>
+          </Box>
+        )}
       </AnvilProvider>
     </>
   );