fix(striker-ui): revise Decorator to allow props override

striker-ui/components/Decorator.tsx

@@ -1,4 +1,5 @@
-import { styled } from '@mui/material/styles';
+import { Box as MUIBox, BoxProps as MUIBoxProps } from '@mui/material';
+import { FC } from 'react';
 import {
   BLUE,
   GREY,
@@ -7,6 +8,12 @@ import {
   BORDER_RADIUS,
 } from '../lib/consts/DEFAULT_THEME';
 
+export type Colours = 'ok' | 'off' | 'error' | 'warning';
+
+type DecoratorProps = MUIBoxProps & {
+  colour: Colours;
+};
+
 const PREFIX = 'Decorator';
 
 const classes = {
@@ -16,32 +23,40 @@ const classes = {
   off: `${PREFIX}-off`,
 };
 
-const StyledDiv = styled('div')(() => ({
-  width: '1.4em',
-  height: '100%',
-  borderRadius: BORDER_RADIUS,
-
-  [`&.${classes.ok}`]: {
-    backgroundColor: BLUE,
-  },
-
-  [`&.${classes.warning}`]: {
-    backgroundColor: PURPLE,
-  },
-
-  [`&.${classes.error}`]: {
-    backgroundColor: RED,
-  },
-
-  [`&.${classes.off}`]: {
-    backgroundColor: GREY,
-  },
-}));
-
-export type Colours = 'ok' | 'off' | 'error' | 'warning';
-
-const Decorator = ({ colour }: { colour: Colours }): JSX.Element => (
-  <StyledDiv className={classes[colour]} />
+const Decorator: FC<DecoratorProps> = ({
+  colour,
+  sx,
+  ...restDecoratorProps
+}): JSX.Element => (
+  <MUIBox
+    {...{
+      ...restDecoratorProps,
+      className: classes[colour],
+      sx: {
+        borderRadius: BORDER_RADIUS,
+        height: '100%',
+        width: '1.4em',
+
+        [`&.${classes.ok}`]: {
+          backgroundColor: BLUE,
+        },
+
+        [`&.${classes.warning}`]: {
+          backgroundColor: PURPLE,
+        },
+
+        [`&.${classes.error}`]: {
+          backgroundColor: RED,
+        },
+
+        [`&.${classes.off}`]: {
+          backgroundColor: GREY,
+        },
+
+        ...sx,
+      },
+    }}
+  />
 );
 
 export default Decorator;

striker-ui/components/Hosts/AnvilHost.tsx

@@ -31,7 +31,7 @@ const StyledBox = styled(Box)(({ theme }) => ({
   [`& .${classes.state}`]: {
     paddingLeft: '.7em',
     paddingRight: '.7em',
-    paddingTop: '1em',
+    paddingTop: '2.2em',
   },
 
   [`& .${classes.bar}`]: {
@@ -44,6 +44,7 @@ const StyledBox = styled(Box)(({ theme }) => ({
   },
 
   [`& .${classes.decoratorBox}`]: {
+    alignSelf: 'stretch',
     paddingRight: '.3em',
   },
 }));

striker-ui/components/SharedStorage/SharedStorageHost.tsx

@@ -16,7 +16,7 @@ const StyledDiv = styled('div')(() => ({
   [`& .${classes.fs}`]: {
     paddingLeft: '.7em',
     paddingRight: '.7em',
-    paddingTop: '1em',
+    paddingTop: '2.2em',
   },
 
   [`& .${classes.bar}`]: {