give the stage some visual design

noahm · Apr 16, 2024 · c7e9652 · c7e9652
1 parent 172bb18
commit c7e9652
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/ui/stage/stage-test.tsx b/ui/stage/stage-test.tsx
@@ -1,3 +1,4 @@
+import cn from "classnames";
 import { useAtomValue, type Atom } from "jotai";
 import type React from "react";
 import { useEffect, useState } from "react";
@@ -92,5 +93,5 @@ export function StageTest({
     ));
   }
 
-  return <div className="pad">{panels}</div>;
+  return <div className={cn("pad", { disabled: !stage })}>{panels}</div>;
 }
diff --git a/ui/styles.css b/ui/styles.css
@@ -74,15 +74,36 @@ button:focus {
 }
 
 .pad {
+  position: relative;
   float: right;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr; 
-  grid-template-rows: 1fr 1fr 1fr; 
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr;
   gap: 1em 1em;
-  height: 20em;
+  height: 26em;
   width: 20em;
   margin-right: 1em;
+  background-color: silver;
+  padding: 4em 1em 4em;
+  --corner-cut-size: 3em;
+  clip-path: polygon(var(--corner-cut-size) 0, calc(100% - var(--corner-cut-size)) 0, 100% var(--corner-cut-size), 100% calc(100% - var(--corner-cut-size)), calc(100% - var(--corner-cut-size)) 100%, var(--corner-cut-size) 100%, 0 calc(100% - var(--corner-cut-size)), 0 var(--corner-cut-size));
+}
+.pad::after {
+  /* its a bar! */
+  content: "";
+  text-align: center;
+  height: 1em;
+  width: 60%;
+  background-color: #222;
+  border-radius: 1em;
+  position: absolute;
+  bottom: 1.5em;
+  left: 20%;
 }
+.pad.disabled {
+  opacity: 0.5;
+}
+
 .panel {
   outline: 2px solid #ddd;
   position: relative;