refactor(striker-ui): migrate MUI v4->5 on Decorator

striker-ui/components/Decorator.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import {
   BLUE,
   GREY,
@@ -7,31 +7,41 @@ import {
   BORDER_RADIUS,
 } from '../lib/consts/DEFAULT_THEME';
 
-export type Colours = 'ok' | 'off' | 'error' | 'warning';
+const PREFIX = 'Decorator';
 
-const useStyles = makeStyles(() => ({
+const classes = {
-  decorator: {
+  ok: `${PREFIX}-ok`,
-    width: '1.4em',
+  warning: `${PREFIX}-warning`,
-    height: '100%',
+  error: `${PREFIX}-error`,
-    borderRadius: BORDER_RADIUS,
+  off: `${PREFIX}-off`,
-  },
+};
-  ok: {
+
+const StyledDiv = styled('div')(() => ({
+  width: '1.4em',
+  height: '100%',
+  borderRadius: BORDER_RADIUS,
+
+  [`&.${classes.ok}`]: {
     backgroundColor: BLUE,
   },
-  warning: {
+
+  [`&.${classes.warning}`]: {
     backgroundColor: PURPLE,
   },
-  error: {
+
+  [`&.${classes.error}`]: {
     backgroundColor: RED,
   },
-  off: {
+
+  [`&.${classes.off}`]: {
     backgroundColor: GREY,
   },
 }));
 
+export type Colours = 'ok' | 'off' | 'error' | 'warning';
+
 const Decorator = ({ colour }: { colour: Colours }): JSX.Element => {
-  const classes = useStyles();
+  return <StyledDiv className={classes[colour]} />;
-  return <div className={`${classes.decorator} ${classes[colour]}`} />;
 };
 
 export default Decorator;