refactor: switch from Grid to Box for more flexible layout using flexbox

striker-ui/pages/index.tsx

@@ -1,6 +1,7 @@
-import { Grid } from '@material-ui/core';
+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,9 +11,16 @@ import Network from '../components/Network';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
 import Servers from '../components/Servers';
 
+import AnvilProvider from '../components/AnvilContext';
+
 const useStyles = makeStyles(() => ({
-  grid: {
+  child: {
-    height: '100vh',
+    width: '22%',
+    height: '100%',
+  },
+  server: {
+    width: '35%',
+    height: '100%',
   },
 }));
 
@@ -25,50 +33,38 @@ const Home = (): JSX.Element => {
   );
 
   return (
-    <Grid container alignItems="center" justify="space-around">
+    <>
-      <Grid item xs={3}>
+      <Header />
-        <Grid container justify="flex-start" direction="column">
+      <AnvilProvider>
-          <Anvils list={data} />
+        <Box
-          <Nodes anvil={data?.anvils[0]} />
+          display="flex"
-        </Grid>
+          flexDirection="row"
-      </Grid>
+          width="100%"
-      <Grid item xs={3}>
+          justifyContent="space-between"
-        <Grid
+          alignContent="flex-start"
-          container
-          justify="flex-start"
-          direction="column"
-          className={classes.grid}
-        >
-          <Servers anvil={data?.anvils[0]} />
-        </Grid>
-      </Grid>
-      <Grid item xs={3}>
-        <Grid
-          container
-          justify="flex-start"
-          direction="column"
-          className={classes.grid}
-        >
-          <SharedStorage anvil={data?.anvils[0]} />
-        </Grid>
-      </Grid>
-      <Grid item xs={3}>
-        <Grid
-          container
-          justify="flex-start"
-          direction="column"
-          className={classes.grid}
         >
-          {data?.anvils?.length ? (
+          {data?.anvils && (
             <>
-              <Network />
+              <Box p={1} className={classes.child}>
-              <CPU uuid={data.anvils[0].anvil_uuid} />
+                <Anvils list={data} />
-              <Memory uuid={data.anvils[0].anvil_uuid} />
+                <Nodes anvil={data.anvils[0]} />
+              </Box>
+              <Box p={1} className={classes.server}>
+                <Servers anvil={data.anvils} />
+              </Box>
+              <Box p={1} className={classes.child}>
+                <SharedStorage anvil={data.anvils[0]} />
+              </Box>
+              <Box p={1} className={classes.child}>
+                <Network anvil={data.anvils[0]} />
+                <CPU uuid={data.anvils[0].anvil_uuid} />
+                <Memory uuid={data.anvils[0].anvil_uuid} />
+              </Box>
             </>
-          ) : null}
+          )}
-        </Grid>
+        </Box>
-      </Grid>
+      </AnvilProvider>
-    </Grid>
+    </>
   );
 };