refactor(striker-ui): migrate MUI v4->5 on Panels/Panel

striker-ui/components/Panels/Panel.tsx

@@ -1,27 +1,33 @@
 import { ReactNode } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { GlobalStyles } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import {
   BORDER_RADIUS,
   PANEL_BACKGROUND,
   TEXT,
 } from '../../lib/consts/DEFAULT_THEME';
 
-type Props = {
+const PREFIX = 'Panel';
-  children: ReactNode;
+
+const classes = {
+  paper: `${PREFIX}-paper`,
+  square: `${PREFIX}-square`,
+  topSquare: `${PREFIX}-topSquare`,
+  bottomSquare: `${PREFIX}-bottomSquare`,
 };
 
-const useStyles = makeStyles(() => ({
+const StyledDiv = styled('div')(() => ({
-  paper: {
+  margin: '1em',
+  position: 'relative',
+
+  [`& .${classes.paper}`]: {
     padding: '2.1em',
     backgroundColor: PANEL_BACKGROUND,
     opacity: 0.8,
     zIndex: 999,
   },
-  container: {
+
-    margin: '1em',
+  [`& .${classes.square}`]: {
-    position: 'relative',
-  },
-  square: {
     content: '""',
     position: 'absolute',
     width: '2.1em',
@@ -34,15 +40,25 @@ const useStyles = makeStyles(() => ({
     padding: 0,
     margin: 0,
   },
-  topSquare: {
+
+  [`& .${classes.topSquare}`]: {
     top: '-.3em',
     left: '-.3em',
   },
-  bottomSquare: {
+
+  [`& .${classes.bottomSquare}`]: {
     bottom: '-.3em',
     right: '-.3em',
   },
-  '@global': {
+}));
+
+type Props = {
+  children: ReactNode;
+};
+
+const styledScrollbars = (
+  <GlobalStyles
+    styles={{
       '*::-webkit-scrollbar': {
         width: '.6em',
       },
@@ -54,18 +70,18 @@ const useStyles = makeStyles(() => ({
         outline: '1px solid transparent',
         borderRadius: BORDER_RADIUS,
       },
-  },
+    }}
-}));
+  />
+);
 
 const Panel = ({ children }: Props): JSX.Element => {
-  const classes = useStyles();
-
   return (
-    <div className={classes.container}>
+    <StyledDiv>
+      {styledScrollbars}
       <div className={`${classes.square} ${classes.topSquare}`} />
       <div className={`${classes.square} ${classes.bottomSquare}`} />
       <div className={classes.paper}>{children}</div>
-    </div>
+    </StyledDiv>
   );
 };