added hover & active w/ dark mode

dark mode works with buttons in hover, active, and inactive state! (and its not totally ugly!)

client/src/App.jsx

@@ -2,12 +2,14 @@ import { useState } from 'react'
 import Header from './components/header.jsx';
 import Sidebar from './components/sidebar.jsx';
 import Widget from './components/Widget.jsx'
-import { Grid, GridItem } from "@chakra-ui/react"
+import { Grid, GridItem, useRecipe } from "@chakra-ui/react"
 
 
 function App() {
+  const recipe = useRecipe({ key: "canvas" });
+  const styles = recipe();
   return (
-    <Grid
+    <Grid css={styles}
       templateRows="1fr 11fr"
       templateColumns="0.25fr 11.75fr"
       height="100vh"
@@ -25,7 +27,6 @@ function App() {
           templateColumns="repeat(4 1fr)"
           height="100%"
           width="100%"
-          bg="#121212"
           >
           <Widget />
         </Grid>

client/src/components/sidebar.jsx

@@ -60,7 +60,7 @@ export const Users = createIcon({
 export default function Sidebar () {
   const variant = useColorModeValue("ghost", "solid")
   const [isOpen, setIsOpen] = useState(true);
-  const [activeButton, setActiveButton] = useState("Dashboard")
+  const [activeButton, setActiveButton] = useState(0)
   const recipe = useSlotRecipe({ key: "sidebar" });
   const styles = recipe();
 
@@ -69,19 +69,19 @@ export default function Sidebar () {
       {isOpen ? (
         <>
           <CloseButton color="secondary" size="sm" _hover={{bg: "#EDF1F1"}} variant="ghost" onClick={() => setIsOpen(!isOpen)}></CloseButton>
-          <Button css={styles.buttons} _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} onClick={() => setActiveButton("Dashboard")} >
+          <Button css={styles.buttons} onClick={() => setActiveButton(0)} bg={activeButton === 0 ? "primary":undefined}>
             <PushPin fill="iconFill" /> Dashboard
           </Button>
-          <Button css={styles.buttons} _hover={activeButton === "Global" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Global")} bg={activeButton === "Global" ? "#A4B6B6" : ""}>
+          <Button css={styles.buttons} onClick={() => setActiveButton(1)} bg={activeButton === 1 ? "primary":undefined}>
             <Globe fill="iconFill" stroke="black" /> Global Map
           </Button>
-          <Button css={styles.buttons} _hover={activeButton === "Regional" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Regional")} bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}>
+          <Button css={styles.buttons} onClick={() => setActiveButton(2)} bg={activeButton === 2 ? "primary":undefined}>
             <MapMarker fill="iconFill" stroke="black"/> Regional Map
           </Button>
-          <Button css={styles.buttons} _hover={activeButton === "Volcano" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Volcano")} bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}>
+          <Button css={styles.buttons} onClick={() => setActiveButton(3)} bg={activeButton === 3 ? "primary":undefined}>
             <FaVolcano color="color"/> Volcano
           </Button>
-          <Button css={styles.buttons} _hover={activeButton === "Admin" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}>
+          <Button css={styles.buttons} onClick={() => setActiveButton(4)} bg={activeButton === 4 ? "primary":undefined}>
             <Users fill="iconFill" stroke="black"/> Admin
           </Button>
         </>

client/src/theme.js

@@ -3,11 +3,11 @@ import { defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineReci
 // RECIPES
 const headerRecipe = defineRecipe({
   base: {
-    bg: "{secondaryBG}",
+    bg: "{base200}",
     color: "text",
     width: "100%",
     height: "100%",
-    borderBottom: "1px solid",
+    borderBottom: "0px solid",
     borderBottomColor:"{border}",
     display: "flex",
     flexDirection: "row",
@@ -16,12 +16,18 @@ const headerRecipe = defineRecipe({
   }
 });
 
+const canvasRecipe = defineRecipe({
+  base: {
+    bg: "{base200}"
+  }
+});
+
 const sidebarRecipe = defineSlotRecipe({
   slots: ["root", "close_button", "buttons", "dark_mode_button"],
   base: {
     root: {
-      bg: "{primaryBG}",
+      bg: {base: "{base200}", _dark: "#282828"},
-      borderRight: "1px solid",
+      borderRight: "0px solid",
       borderColor: "{border}", 
       width: "100%",
       height: "100%",
@@ -33,9 +39,12 @@ const sidebarRecipe = defineSlotRecipe({
       p: 2,
     },
     buttons: {
-      bg: {base: "transparent", _dark: "#414141"},
+      bg: "transparent",
+      _hover: {bg: "{primaryLt}"},
       fontSize: "xl",
-      color: {base: "#19332D", _dark: "#CBCBCB"}
+      color: {base: "#19332D", _dark: "#CBCBCB"},
+      variant: "ghost",
+      width: "100%"
     },
   }
 });
@@ -72,7 +81,11 @@ const config = defineConfig({
   theme: {
     semanticTokens: {
       colors: {
-        primaryBG: { value: {base: "#FFFFFF", _dark: "#121212"}},
+        base100: { value: {base: "#f7f9fa", _dark: "#787b73"}},
+        bsae200: { value: {base: "#eef2f6", _dark: "#484c42"}},
+        base300: { value: {base: "#dfe5ed", _dark: "#60645a"}},
+        primary: { value: {base: "#9cd855", _dark: "#629631"}},
+        primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}},
         secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
         border: {value: {base: "#000000", _dark: "#CBCBCB"}},
         text: {value: {base: "#19332D", _dark: "#CBCBCB"}},
@@ -89,6 +102,7 @@ const config = defineConfig({
       // sidebar: sidebarRecipe,
       // sidebarBTN: sidebarBtnRecipe,
       header: headerRecipe,
+      canvas: canvasRecipe,
     },
     slotRecipes: {
       sidebar: sidebarRecipe,