implement styling 💅

patsimm · Nov 11, 2024 · 458f4d7 · 458f4d7
1 parent 6597f40
commit 458f4d7
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 41 deletions.
diff --git a/src/ButtonSquare.scss b/src/ButtonSquare.scss
@@ -7,18 +7,28 @@
   font-size: 1rem;
   width: 4em;
   height: 4em;
-  background-color: var(--color-grayscale-600);
   border: none;
   border-radius: var(--spacing-m);
   cursor: pointer;
   color: inherit;
+  background-color: transparent;
 
   &--selected {
+    position: relative;
     border: none;
     background-color: var(--color-primary-100);
     @include glow-box(var(--color-primary-100), 0px, 1.5);
   }
 
+  &:hover:not(&--selected) {
+    position: relative;
+    @include pseudo-background {
+      backdrop-filter: blur(5rem);
+      background-color: rgba(from white r g b / 4%);
+      border-radius: var(--spacing-m);
+    }
+  }
+
   &__icon {
     display: flex;
     align-items: center;

diff --git a/src/IconButton.scss b/src/IconButton.scss
@@ -7,11 +7,11 @@
   font-size: 1rem;
   width: 3em;
   height: 3em;
-  background-color: var(--color-grayscale-600);
   border: none;
   border-radius: var(--spacing-m);
   cursor: pointer;
   color: inherit;
+  background-color: transparent;
 
   &__icon-hover {
     display: none;

diff --git a/src/Toolbar.scss b/src/Toolbar.scss
@@ -2,9 +2,23 @@
 
 .toolbar {
   position: absolute;
+  display: flex;
+  column-gap: var(--spacing-sm);
   bottom: 0;
   left: 50%;
   margin: var(--spacing-m);
-  transform: translateX(-50%);
+  background-color: transparent;
+  pointer-events: auto;
   @include button-area;
+
+  &__container {
+    left: 0;
+    bottom: 0;
+    pointer-events: none;
+    position: absolute;
+    display: flex;
+    align-content: center;
+    width: 100%;
+    height: 100%;
+  }
 }
diff --git a/src/Toolbar.tsx b/src/Toolbar.tsx
@@ -10,19 +10,21 @@ function Toolbar() {
   const setTool = useAppStore((state) => state.setTool);
   const tool = useAppStore((state) => state.tool);
   return (
-    <div className={classNames("toolbar")}>
-      <ButtonSquare
-        title={"Move"}
-        onClick={() => setTool(TOOL_MOVE)}
-        selected={tool === TOOL_MOVE}
-        icon={<HandSvg />}
-      />
-      <ButtonSquare
-        title={"Add Rectangle"}
-        onClick={() => setTool(TOOL_ADD_NODE)}
-        selected={tool === TOOL_ADD_NODE}
-        icon={<SquareSvg />}
-      />
+    <div className={classNames("toolbar__container")}>
+      <div className={classNames("toolbar")}>
+        <ButtonSquare
+          title={"Move"}
+          onClick={() => setTool(TOOL_MOVE)}
+          selected={tool === TOOL_MOVE}
+          icon={<HandSvg />}
+        />
+        <ButtonSquare
+          title={"Add Rectangle"}
+          onClick={() => setTool(TOOL_ADD_NODE)}
+          selected={tool === TOOL_ADD_NODE}
+          icon={<SquareSvg />}
+        />
+      </div>
     </div>
   );
 }

diff --git a/src/common.scss b/src/common.scss
@@ -1,19 +1,29 @@
-@mixin button-area-large {
-  padding: var(--spacing-m);
-  column-gap: var(--spacing-m);
-  background-color: var(--color-grayscale-600);
-  color: var(--color-foreground);
-  display: flex;
-  border-radius: 2rem;
+@mixin pseudo-background {
+  &::before {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    @content
+  }
+
+  &>* {
+    z-index: 2;
+  }
 }
 
 @mixin button-area {
   padding: var(--spacing-m);
-  column-gap: var(--spacing-sm);
-  background-color: var(--color-grayscale-600);
   color: var(--color-foreground);
-  display: flex;
-  border-radius: 2rem;
+  @include pseudo-background {
+    backdrop-filter: blur(5rem);
+    background-color: rgba(from var(--color-grayscale-500) r g b / 50%);
+    border-radius: 2rem;
+  }
 }
 
 @mixin glow-box($color: currentcolor, $displacement: 0px, $factor: 1) {

diff --git a/src/main.tsx b/src/main.tsx
@@ -4,16 +4,12 @@ import App from "./App.tsx";
 import "./index.css";
 import Player from "./synth/Player.ts";
 
-const audioContext = new AudioContext();
-const player = new Player(audioContext);
+const player = new Player();
 
-audioContext
-  .suspend()
-  .then(() => player.start())
-  .then(() =>
-    createRoot(document.getElementById("root")!).render(
-      <StrictMode>
-        <App player={player} />
-      </StrictMode>,
-    ),
-  );
+player.start();
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App player={player} />
+  </StrictMode>,
+);
diff --git a/src/synth/Player.ts b/src/synth/Player.ts
@@ -20,8 +20,9 @@ export default class Player {
     return this.#state;
   }
 
-  public constructor(context: AudioContext) {
-    this.context = context;
+  public constructor() {
+    this.context = new AudioContext();
+    this.context.suspend();
     this.integrateNodeStates(
       computeSoundNodeStates(useAppStore.getInitialState().nodes),
     );