refactor: remove Grid in favour of Box component

striker-ui/components/SharedStorage.tsx

@@ -1,25 +1,17 @@
-import { Grid } from '@material-ui/core';
 import Panel from './Panel';
 import SharedStorageNode from './SharedStorageNode';
-import { HeaderText, BodyText } from './Text';
+import { HeaderText } from './Text';
 import PeriodicFetch from '../lib/fetchers/periodicFetch';
 
 const SharedStorage = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
   const { data } = PeriodicFetch<AnvilSharedStorage>(
     `${process.env.NEXT_PUBLIC_API_URL}/anvils/get_shared_storage?anvil_uuid=`,
-    anvil.anvil_uuid,
+    anvil?.anvil_uuid,
   );
 
   return (
     <Panel>
-      <Grid container alignItems="center" justify="space-around">
-        <Grid item xs={12}>
       <HeaderText text="Shared Storage" />
-        </Grid>
-        <Grid item xs={12}>
-          <BodyText text="Mount /mnt/shared" />
-        </Grid>
-        <Grid item xs={12}>
       {data &&
         data.file_systems[0]?.nodes.map(
           (node: AnvilSharedStorageNode, index: number): JSX.Element => (
@@ -29,8 +21,6 @@ const SharedStorage = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
             />
           ),
         )}
-        </Grid>
-      </Grid>
     </Panel>
   );
 };

striker-ui/components/SharedStorageNode.tsx

@@ -1,4 +1,6 @@
-import { Grid, Switch } from '@material-ui/core';
+import { Box } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
 import * as prettyBytes from 'pretty-bytes';
 
 import InnerPanel from './InnerPanel';
@@ -6,51 +8,64 @@ import { AllocationBar } from './Bars';
 import { BodyText } from './Text';
 import PanelHeader from './PanelHeader';
 
+const useStyles = makeStyles(() => ({
+  fs: {
+    paddingLeft: '10px',
+    paddingRight: '10px',
+    paddingTop: '20px',
+  },
+  bar: {
+    paddingLeft: '10px',
+    paddingRight: '10px',
+  },
+}));
+
 const SharedStorageNode = ({
   node,
 }: {
   node: AnvilSharedStorageNode;
 }): JSX.Element => {
+  const classes = useStyles();
+
   return (
     <InnerPanel>
       <PanelHeader>
-        <Grid container alignItems="center" justify="space-around">
+        <Box display="flex" width="100%">
-          <Grid item xs={6}>
+          <Box>
-            <BodyText text={`Node: ${node.nodeInfo?.node_name}`} />
+            <BodyText text={node.nodeInfo?.node_name} />
-          </Grid>
+          </Box>
-          <Grid item xs={3}>
+        </Box>
-            <Switch checked={node.is_mounted} />
-          </Grid>
-        </Grid>
       </PanelHeader>
-      <Grid container alignItems="center" justify="space-around">
+      <Box display="flex" width="100%" className={classes.fs}>
-        <Grid item xs={4}>
+        <Box flexGrow={1}>
           <BodyText
             text={`Used: ${prettyBytes.default(node.total - node.free, {
               binary: true,
             })}`}
           />
-        </Grid>
+        </Box>
-        <Grid item xs={4}>
+        <Box>
           <BodyText
             text={`Free: ${prettyBytes.default(node.free, {
               binary: true,
             })}`}
           />
-        </Grid>
+        </Box>
-        <Grid item xs={10}>
+      </Box>
+      <Box display="flex" width="100%" className={classes.bar}>
+        <Box flexGrow={1}>
           <AllocationBar
             allocated={((node.total - node.free) / node.total) * 100}
           />
-        </Grid>
+        </Box>
-        <Grid item xs={6}>
+      </Box>
+      <Box display="flex" justifyContent="center" width="100%">
         <BodyText
           text={`Total Storage: ${prettyBytes.default(node.total, {
             binary: true,
           })}`}
         />
-        </Grid>
+      </Box>
-      </Grid>
     </InnerPanel>
   );
 };