Add support for 2D and 3D mode styling

src/Toolbar.module.css

@@ -0,0 +1,60 @@
+.toolbarWrapper {
+  @apply relative;
+}
+
+.toolbar {
+  @apply flex gap-4 items-center rounded-full;
+  @apply border border-cool-20/30 bg-cool-10/50;
+}
+
+:global(.dark) .toolbar {
+  @apply border-cool-100/50 bg-cool-120/50;
+}
+
+:global(.sketch) .toolbar {
+  @apply border-fern-20/20 bg-fern-10/20;
+}
+
+:global(.dark .sketch) .toolbar {
+  @apply border-fern-120/50 bg-fern-100/30;
+}
+
+.toolbarCap {
+  @apply text-sm font-bold;
+  @apply bg-cool-20/50 text-cool-100;
+}
+
+:global(.dark) .toolbarCap {
+  @apply bg-cool-90/50 text-cool-30;
+}
+
+:global(.sketch) .toolbarCap {
+  @apply bg-fern-20/50 text-fern-100;
+}
+
+:global(.dark .sketch) .toolbarCap {
+  @apply bg-fern-90/50 text-fern-30;
+}
+
+.label {
+  @apply self-stretch flex items-center px-4 py-1;
+  @apply rounded-l-full;
+}
+
+.popoverToggle {
+  @apply self-stretch m-0 flex items-center px-4 py-1;
+  @apply rounded-r-full border-none;
+  @apply hover:bg-cool-20;
+}
+
+:global(.dark) .popoverToggle {
+  @apply hover:bg-cool-90;
+}
+
+:global(.sketch) .popoverToggle {
+  @apply hover:bg-fern-20;
+}
+
+:global(.dark .sketch) .popoverToggle {
+  @apply hover:bg-fern-90;
+}

src/Toolbar.tsx

@@ -11,11 +11,12 @@ import { SetAngleLength } from './components/Toolbar/setAngleLength'
 import { ConvertToVariable } from './components/Toolbar/ConvertVariable'
 import { SetAbsDistance } from './components/Toolbar/SetAbsDistance'
 import { SetAngleBetween } from './components/Toolbar/SetAngleBetween'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPen, faSearch } from '@fortawesome/free-solid-svg-icons'
 import { Popover } from '@headlessui/react'
 import { ActionButton } from 'components/ActionButton'
+import styles from './Toolbar.module.css'
 
 export const Toolbar = () => {
   const {
@@ -34,10 +35,14 @@ export const Toolbar = () => {
     programMemory: s.programMemory,
   }))
 
+  useEffect(() => {
+    console.log('guiMode', guiMode)
+  }, [guiMode])
+
   return (
-    <Popover className="relative">
+    <Popover className={styles.toolbarWrapper + ' ' + guiMode.mode}>
-      <div className="flex gap-4 items-center rounded-full border border-cool-20/30 dark:border-cool-100/50 bg-cool-10/50 dark:bg-cool-120/50">
+      <div className={styles.toolbar}>
-        <span className="self-stretch flex items-center px-4 py-1 bg-cool-20/50 dark:bg-cool-90/50 text-cool-100 dark:text-cool-30 rounded-l-full text-sm font-bold">
+        <span className={styles.toolbarCap + ' ' + styles.label}>
           {guiMode.mode === 'sketch' ? '2D' : '3D'}
         </span>
         <menu className="flex flex-1 gap-2 py-0.5">
@@ -55,13 +60,40 @@ export const Toolbar = () => {
             Start Sketch
           </ActionButton>
         </menu>
-        <Popover.Button className="self-stretch m-0 flex items-center px-4 py-1 bg-cool-20/50 dark:bg-cool-90/50 hover:bg-cool-20 dark:hover:bg-cool-90 text-cool-100 dark:text-cool-30 rounded-r-full border-none text-sm font-bold">
+        <Popover.Button
+          className={styles.toolbarCap + ' ' + styles.popoverToggle}
+        >
           <FontAwesomeIcon icon={faSearch} />
         </Popover.Button>
       </div>
       <Popover.Overlay className="fixed inset-0 bg-chalkboard-110/20 dark:bg-chalkboard-110/50" />
       <Popover.Panel className="absolute top-0 w-screen max-w-xl left-1/2 -translate-x-1/2 bg-chalkboard-10 dark:bg-chalkboard-100 p-5 rounded border border-chalkboard-20/30 dark:border-chalkboard-70/50">
         Open!
+        <ActionButton
+          Element="button"
+          icon={{ icon: faPen, size: 'sm' }}
+          onClick={() => {
+            setGuiMode({
+              mode: 'sketch',
+              sketchMode: 'selectFace',
+            })
+          }}
+          className="py-0 px-0.5 bg-chalkboard-10 dark:bg-chalkboard-100"
+        >
+          Start Sketch
+        </ActionButton>
+        <ActionButton
+          Element="button"
+          icon={{ icon: faPen, size: 'sm' }}
+          onClick={() => {
+            setGuiMode({
+              mode: 'default',
+            })
+          }}
+          className="py-0 px-0.5 bg-chalkboard-10 dark:bg-chalkboard-100"
+        >
+          Exit Sketch
+        </ActionButton>
         <Popover.Button>Close</Popover.Button>
       </Popover.Panel>
       {/* // <div>