refactor: remove Grid in favour of Box component

striker-ui/components/Servers.tsx

@@ -1,4 +1,4 @@
-import { Grid, List, ListItem, Divider, Box } from '@material-ui/core';
+import { List, ListItem, Divider, Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import { ClassNameMap } from '@material-ui/styles';
 import Panel from './Panel';
@@ -57,57 +57,47 @@ const Servers = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => {
   );
   return (
     <Panel>
-      <Grid container alignItems="center" justify="space-around">
+      <HeaderText text="Servers" />
-        <Grid item xs={12}>
+      <List
-          <HeaderText text="Servers" />
+        component="nav"
-        </Grid>
+        className={classes.root}
-        <Grid item xs={12}>
+        aria-label="mailbox folders"
-          <List
+      >
-            component="nav"
+        {data &&
-            className={classes.root}
+          data.servers.map((server: AnvilServer) => {
-            aria-label="mailbox folders"
+            return (
-          >
+              <>
-            {data &&
+                <ListItem
-              data.servers.map((server: AnvilServer) => {
+                  button
-                return (
+                  className={classes.button}
-                  <>
+                  key={server.server_uuid}
-                    <ListItem
+                >
-                      button
+                  <Box display="flex" flexDirection="row" width="100%">
-                      className={classes.button}
+                    <Box p={1} className={classes.noPaddingLeft}>
-                      key={server.server_uuid}
+                      <div
-                    >
+                        className={`${classes.decorator} ${
-                      <Box display="flex" flexDirection="row" width="100%">
+                          classes[selectDecorator(server.server_state)]
-                        <Box p={1} className={classes.noPaddingLeft}>
+                        }`}
-                          <div
+                      />
-                            className={`${classes.decorator} ${
+                    </Box>
-                              classes[selectDecorator(server.server_state)]
+                    <Box p={1} flexGrow={1} className={classes.noPaddingLeft}>
-                            }`}
+                      <BodyText text={server.server_name} />
-                          />
+                      <BodyText text={server.server_state} />
-                        </Box>
+                    </Box>
-                        <Box
+                    {server.server_state === 'Started' && (
-                          p={1}
+                      <Box p={1}>
-                          flexGrow={1}
+                        <BodyText
-                          className={classes.noPaddingLeft}
+                          text={`${anvil.nodes[0].node_name} | ${anvil.nodes[1].node_name}`}
-                        >
+                        />
-                          <BodyText text={server.server_name} />
-                          <BodyText text={server.server_state} />
-                        </Box>
-                        {server.server_state === 'Started' && (
-                          <Box p={1}>
-                            <BodyText
-                              text={`${anvil.nodes[0].node_name} | ${anvil.nodes[1].node_name}`}
-                            />
-                          </Box>
-                        )}
                       </Box>
-                    </ListItem>
+                    )}
-                    <Divider className={classes.divider} />
+                  </Box>
-                  </>
+                </ListItem>
-                );
+                <Divider className={classes.divider} />
-              })}
+              </>
-          </List>
+            );
-        </Grid>
+          })}
-      </Grid>
+      </List>
     </Panel>
   );
 };