From 8f33d34ed88181c2476cdacb7f5255d534fae532 Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Mon, 29 Mar 2021 12:30:30 -0400
Subject: [PATCH] refactor: add decoration boxes using pseudo elements (z-index
 not responding)

---
 striker-ui/components/Panel.tsx | 38 ++++++++++++++++++++++-----------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/striker-ui/components/Panel.tsx b/striker-ui/components/Panel.tsx
index 6766fcb7..54e1a788 100644
--- a/striker-ui/components/Panel.tsx
+++ b/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: '""',
-      position: 'absolute',
-      top: '-10px',
-      bottom: '-10px',
-      width: '30px',
-      height: '30px',
-      border: '1px',
-      borderColor: TEXT,
-      borderWidth: '1px',
-      borderRadius: '3px',
-      borderStyle: 'solid',
+      ...decorationBoxProps,
+      top: '-5px',
+      left: '-5px',
+    },
+    '&::after': {
+      ...decorationBoxProps,
+      bottom: '-5px',
+      right: '-5px',
     },
   },
 }));