refactor: add decoration boxes using pseudo elements (z-index not responding)

striker-ui/components/Panel.tsx

@@ -7,6 +7,21 @@ 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: {
     width: '30px',
@@ -18,20 +33,19 @@ const useStyles = makeStyles(() => ({
   },
   paper: {
     margin: 10,
-    padding: 10,
+    padding: '30px',
     backgroundColor: PANEL_BACKGROUND,
+    position: 'relative',
+    zIndex: 999,
     '&::before': {
-      content: '""',
+      ...decorationBoxProps,
-      position: 'absolute',
+      top: '-5px',
-      top: '-10px',
+      left: '-5px',
-      bottom: '-10px',
+    },
-      width: '30px',
+    '&::after': {
-      height: '30px',
+      ...decorationBoxProps,
-      border: '1px',
+      bottom: '-5px',
-      borderColor: TEXT,
+      right: '-5px',
-      borderWidth: '1px',
-      borderRadius: '3px',
-      borderStyle: 'solid',
     },
   },
 }));