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 { makeStyles, createStyles } from '@material-ui/core/styles';
-import DashboardIcon from '@material-ui/icons/Dashboard';
+import { Box, Divider, Drawer, List, ListItem } from '@mui/material';
+import { styled } from '@mui/material/styles';
+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';
 
-interface DrawerProps {
-  open: boolean;
-  setOpen: Dispatch<SetStateAction<boolean>>;
-}
+const PREFIX = 'AnvilDrawer';
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    list: {
+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',
   },
-    divider: {
-      background: DIVIDER,
+
+  [`& .${classes.divider}`]: {
+    backgroundColor: DIVIDER,
   },
-    text: {
+
+  [`& .${classes.text}`]: {
     paddingTop: '.5em',
     paddingLeft: '1.5em',
   },
-    dashboardButton: {
+
+  [`& .${classes.dashboardButton}`]: {
     paddingLeft: '.1em',
   },
-    dashboardIcon: {
+
+  [`& .${classes.dashboardIcon}`]: {
     fontSize: '2.3em',
     color: GREY,
   },
-  }),
-);
+}));
 
-const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => {
-  const classes = useStyles();
+interface DrawerProps {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+}
 
+const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => {
   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>
   );
 };