refactor: add better alignment and a divider to the resource component

striker-ui/components/Resource/ResourceVolumes.tsx

@@ -1,6 +1,5 @@
 import * as prettyBytes from 'pretty-bytes';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, Box, Divider } from '@material-ui/core';
-import { Box } from '@material-ui/core';
 import InsertLinkIcon from '@material-ui/icons/InsertLink';
 import { InnerPanel, PanelHeader } from '../Panels';
 import { BodyText } from '../Text';
@@ -20,6 +19,7 @@ const useStyles = makeStyles((theme) => ({
     paddingLeft: '.7em',
     paddingRight: '.7em',
     paddingTop: '1em',
+    paddingBottom: '.7em',
   },
   bar: {
     paddingLeft: '.7em',
@@ -35,6 +35,9 @@ const useStyles = makeStyles((theme) => ({
   decoratorBox: {
     paddingRight: '.3em',
   },
+  divider: {
+    background: DIVIDER,
+  },
 }));
 
 const selectDecorator = (state: string): Colours => {
@@ -78,6 +81,7 @@ const ResourceVolumes = ({
               {volume.connections.map(
                 (connection): JSX.Element => {
                   return (
+                    <>
                       <Box
                         key={connection.fencing}
                         display="flex"
@@ -86,14 +90,32 @@ const ResourceVolumes = ({
                       >
                         <Box className={classes.decoratorBox}>
                           <Decorator
-                          colour={selectDecorator(connection.connection_state)}
+                            colour={selectDecorator(
+                              connection.connection_state,
+                            )}
                           />
                         </Box>
-                      <BodyText text={connection.targets[0].target_name} />
+                        <Box>
+                          <Box display="flex" width="100%">
+                            <BodyText
+                              text={connection.targets[0].target_name}
+                            />
                             <InsertLinkIcon style={{ color: DIVIDER }} />
-                      <BodyText text={connection.targets[1].target_name} />
+                            <BodyText
+                              text={connection.targets[1].target_name}
+                            />
+                          </Box>
+                          <Box
+                            display="flex"
+                            justifyContent="center"
+                            width="100%"
+                          >
                             <BodyText text={connection.connection_state} />
                           </Box>
+                        </Box>
+                      </Box>
+                      <Divider className={classes.divider} />
+                    </>
                   );
                 },
               )}