refactor: switch from using material-ui's Paper to pseudo elements for panel decoration

striker-ui/components/Panel.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { Paper, Box } from '@material-ui/core';
+// import { Paper, Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import { TEXT } from '../lib/consts/DEFAULT_THEME';
+import { PANEL_BACKGROUND, TEXT } from '../lib/consts/DEFAULT_THEME';
 
 type Props = {
   children: ReactNode;
@@ -17,24 +17,29 @@ const useStyles = makeStyles(() => ({
     borderColor: TEXT,
   },
   paper: {
+    margin: 10,
     padding: 10,
+    backgroundColor: PANEL_BACKGROUND,
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: '-10px',
+      bottom: '-10px',
+      width: '30px',
+      height: '30px',
+      border: '1px',
+      borderColor: TEXT,
+      borderWidth: '1px',
+      borderRadius: '3px',
+      borderStyle: 'solid',
+    },
   },
 }));
 
 const Panel = ({ children }: Props): JSX.Element => {
   const classes = useStyles();
 
-  return (
-    <>
-      <Box display="flex" justifyContent="flex-start">
-        <Box className={classes.rectangle} />
-      </Box>
-      <Paper className={classes.paper}>{children}</Paper>
-      <Box display="flex" justifyContent="flex-end">
-        <Box className={classes.rectangle} />
-      </Box>
-    </>
-  );
+  return <div className={classes.paper}>{children}</div>;
 };
 
 export default Panel;