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

striker-ui/components/Panel.tsx

@@ -1,12 +1,23 @@
 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 = {
+const useStyles = makeStyles(() => ({
+  paper: {
+    // margin: 20,
+    padding: '30px',
+    backgroundColor: PANEL_BACKGROUND,
+    opacity: 0.8,
+    zIndex: 999,
+  },
+  container: {
+    position: 'relative',
+  },
+  square: {
     content: '""',
     position: 'absolute',
     width: '30px',
@@ -18,41 +29,27 @@ const decorationBoxProps = {
     borderStyle: 'solid',
     padding: 0,
     margin: 0,
-  zIndex: -1,
-};
-
-const useStyles = makeStyles(() => ({
-  rectangle: {
-    width: '30px',
-    height: '30px',
-    borderWidth: '1px',
-    borderRadius: '3px',
-    borderStyle: 'solid',
-    borderColor: DIVIDER,
   },
-  paper: {
+  topSquare: {
-    margin: 10,
-    padding: '30px',
-    backgroundColor: PANEL_BACKGROUND,
-    position: 'relative',
-    zIndex: 999,
-    '&::before': {
-      ...decorationBoxProps,
     top: '-5px',
     left: '-5px',
   },
-    '&::after': {
+  bottomSquare: {
-      ...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;