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">
-        <Grid item xs={12}>
-          <HeaderText text="Servers" />
-        </Grid>
-        <Grid item xs={12}>
-          <List
-            component="nav"
-            className={classes.root}
-            aria-label="mailbox folders"
-          >
-            {data &&
-              data.servers.map((server: AnvilServer) => {
-                return (
-                  <>
-                    <ListItem
-                      button
-                      className={classes.button}
-                      key={server.server_uuid}
-                    >
-                      <Box display="flex" flexDirection="row" width="100%">
-                        <Box p={1} className={classes.noPaddingLeft}>
-                          <div
-                            className={`${classes.decorator} ${
-                              classes[selectDecorator(server.server_state)]
-                            }`}
-                          />
-                        </Box>
-                        <Box
-                          p={1}
-                          flexGrow={1}
-                          className={classes.noPaddingLeft}
-                        >
-                          <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>
-                        )}
+      <HeaderText text="Servers" />
+      <List
+        component="nav"
+        className={classes.root}
+        aria-label="mailbox folders"
+      >
+        {data &&
+          data.servers.map((server: AnvilServer) => {
+            return (
+              <>
+                <ListItem
+                  button
+                  className={classes.button}
+                  key={server.server_uuid}
+                >
+                  <Box display="flex" flexDirection="row" width="100%">
+                    <Box p={1} className={classes.noPaddingLeft}>
+                      <div
+                        className={`${classes.decorator} ${
+                          classes[selectDecorator(server.server_state)]
+                        }`}
+                      />
+                    </Box>
+                    <Box p={1} flexGrow={1} className={classes.noPaddingLeft}>
+                      <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>
-                    </ListItem>
-                    <Divider className={classes.divider} />
-                  </>
-                );
-              })}
-          </List>
-        </Grid>
-      </Grid>
+                    )}
+                  </Box>
+                </ListItem>
+                <Divider className={classes.divider} />
+              </>
+            );
+          })}
+      </List>
     </Panel>
   );
 };