refactor: switch from pseudo elements to regular elements for square decorator implementation

striker-ui/components/Panel.tsx

@@ -1,58 +1,55 @@
 import { ReactNode } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { PANEL_BACKGROUND, TEXT, DIVIDER } from '../lib/consts/DEFAULT_THEME';
+import { PANEL_BACKGROUND, TEXT } from '../lib/consts/DEFAULT_THEME';
 
 type Props = {
   children: ReactNode;
 };
 
-const decorationBoxProps = {
-  content: '""',
-  position: 'absolute',
-  width: '30px',
-  height: '30px',
-  border: '1px',
-  borderColor: TEXT,
-  borderWidth: '1px',
-  borderRadius: '3px',
-  borderStyle: 'solid',
-  padding: 0,
-  margin: 0,
-  zIndex: -1,
-};
-
 const useStyles = makeStyles(() => ({
-  rectangle: {
+  paper: {
+    // margin: 20,
+    padding: '30px',
+    backgroundColor: PANEL_BACKGROUND,
+    opacity: 0.8,
+    zIndex: 999,
+  },
+  container: {
+    position: 'relative',
+  },
+  square: {
+    content: '""',
+    position: 'absolute',
     width: '30px',
     height: '30px',
+    border: '1px',
+    borderColor: TEXT,
     borderWidth: '1px',
     borderRadius: '3px',
     borderStyle: 'solid',
-    borderColor: DIVIDER,
+    padding: 0,
+    margin: 0,
   },
-  paper: {
+  topSquare: {
-    margin: 10,
+    top: '-5px',
-    padding: '30px',
+    left: '-5px',
-    backgroundColor: PANEL_BACKGROUND,
+  },
-    position: 'relative',
+  bottomSquare: {
-    zIndex: 999,
+    bottom: '-5px',
-    '&::before': {
+    right: '-5px',
-      ...decorationBoxProps,
-      top: '-5px',
-      left: '-5px',
-    },
-    '&::after': {
-      ...decorationBoxProps,
-      bottom: '-5px',
-      right: '-5px',
-    },
   },
 }));
 
 const Panel = ({ children }: Props): JSX.Element => {
   const classes = useStyles();
 
-  return <div className={classes.paper}>{children}</div>;
+  return (
+    <div className={classes.container}>
+      <div className={`${classes.square} ${classes.topSquare}`} />
+      <div className={`${classes.square} ${classes.bottomSquare}`} />
+      <div className={classes.paper}>{children}</div>
+    </div>
+  );
 };
 
 export default Panel;