From f360abd58db0d72c228d65bbc9be7e7c9535d7b1 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Fri, 7 Jan 2022 14:38:33 -0500
Subject: [PATCH] refactor(striker-ui): migrate MUI v4->5 on Panels/InnerPanel

---
 striker-ui/components/Panels/InnerPanel.tsx | 32 +++++++++------------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/striker-ui/components/Panels/InnerPanel.tsx b/striker-ui/components/Panels/InnerPanel.tsx
index 0b55ec44..c4aadd51 100644
--- a/striker-ui/components/Panels/InnerPanel.tsx
+++ b/striker-ui/components/Panels/InnerPanel.tsx
@@ -1,29 +1,25 @@
 import { ReactNode } from 'react';
-import { Box } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import { BORDER_RADIUS, DIVIDER } from '../../lib/consts/DEFAULT_THEME';
 
+const StyledBox = styled(Box)({
+  borderWidth: '1px',
+  borderRadius: BORDER_RADIUS,
+  borderStyle: 'solid',
+  borderColor: DIVIDER,
+  marginTop: '1.4em',
+  marginBottom: '1.4em',
+  paddingBottom: 0,
+  position: 'relative',
+});
+
 type Props = {
   children: ReactNode;
 };
 
-const useStyles = makeStyles(() => ({
-  innerBody: {
-    borderWidth: '1px',
-    borderRadius: BORDER_RADIUS,
-    borderStyle: 'solid',
-    borderColor: DIVIDER,
-    marginTop: '1.4em',
-    marginBottom: '1.4em',
-    paddingBottom: 0,
-    position: 'relative',
-  },
-}));
-
 const InnerPanel = ({ children }: Props): JSX.Element => {
-  const classes = useStyles();
-
-  return <Box className={classes.innerBody}>{children}</Box>;
+  return <StyledBox>{children}</StyledBox>;
 };
 
 export default InnerPanel;