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

striker-ui/components/AnvilDrawer.tsx

@@ -1,43 +1,53 @@
-import { Divider, Drawer, List, ListItem, Box } from '@material-ui/core';
+import { Box, Divider, Drawer, List, ListItem } from '@mui/material';
-import { makeStyles, createStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
-import DashboardIcon from '@material-ui/icons/Dashboard';
+import DashboardIcon from '@mui/icons-material/Dashboard';
 import { Dispatch, SetStateAction } from 'react';
 import { BodyText, HeaderText } from './Text';
 import { ICONS, ICON_SIZE } from '../lib/consts/ICONS';
 import { DIVIDER, GREY } from '../lib/consts/DEFAULT_THEME';
 
+const PREFIX = 'AnvilDrawer';
+
+const classes = {
+  list: `${PREFIX}-list`,
+  divider: `${PREFIX}-divider`,
+  text: `${PREFIX}-text`,
+  dashboardButton: `${PREFIX}-dashboardButton`,
+  dashboardIcon: `${PREFIX}-dashboardIcon`,
+};
+
+const StyledDrawer = styled(Drawer)(() => ({
+  [`& .${classes.list}`]: {
+    width: '200px',
+  },
+
+  [`& .${classes.divider}`]: {
+    backgroundColor: DIVIDER,
+  },
+
+  [`& .${classes.text}`]: {
+    paddingTop: '.5em',
+    paddingLeft: '1.5em',
+  },
+
+  [`& .${classes.dashboardButton}`]: {
+    paddingLeft: '.1em',
+  },
+
+  [`& .${classes.dashboardIcon}`]: {
+    fontSize: '2.3em',
+    color: GREY,
+  },
+}));
+
 interface DrawerProps {
   open: boolean;
   setOpen: Dispatch<SetStateAction<boolean>>;
 }
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    list: {
-      width: '200px',
-    },
-    divider: {
-      background: DIVIDER,
-    },
-    text: {
-      paddingTop: '.5em',
-      paddingLeft: '1.5em',
-    },
-    dashboardButton: {
-      paddingLeft: '.1em',
-    },
-    dashboardIcon: {
-      fontSize: '2.3em',
-      color: GREY,
-    },
-  }),
-);
-
 const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => {
-  const classes = useStyles();
-
   return (
-    <Drawer
+    <StyledDrawer
       BackdropProps={{ invisible: true }}
       anchor="left"
       open={open}
@@ -90,7 +100,7 @@ const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => {
           )}
         </List>
       </div>
-    </Drawer>
+    </StyledDrawer>
   );
 };