Update board

src/components/Board/Board.js

@@ -21,10 +21,12 @@ const Placeholder = styled.p`
 
 const StyledBoard = styled.div.attrs(() => ({ className: "board" }))`
   position: relative;
-  background-image: url(/board.png);
+  background: radial-gradient(closest-corner, #3954848a, #0d101547 120%),
+    url(/board.png);
+
   width: ${({ size }) => size}px;
   height: ${({ size }) => size}px;
-  border-radius: 1em;
+  border-radius: 2px;
   box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px,
     rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
 `;

src/components/boardComponents/Zone.js

@@ -6,15 +6,23 @@ const ZoneWrapper = styled.div`
   ${({ width = 200, height = 200 }) => css`
     width: ${width}px;
     height: ${height}px;
-    border: 0.8em dashed #222;
-    opacity: 0.3;
+    border: 0.5em dotted #ccc;
+    opacity: 0.2;
     border-radius: 1em;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    position: relative;
     & > div {
-      font-size: 3em;
+      font-size: 1.5em;
+      letter-spacing: -3px;
       user-select: none;
+      background-color: #ccc;
+      position: absolute;
+      padding: 1em 0em;
+      top: 1em;
+      left: -1em;
+      border-radius: 0.5em;
+      color: var(--color-darkGrey);
+      writing-mode: vertical-rl;
+      text-orientation: upright;
     }
   `}
 `;