From 022f37b0869d2dcd083dce4611f6bccae6db24a8 Mon Sep 17 00:00:00 2001 From: Venessa Kuchenik Date: Tue, 15 Jul 2025 12:55:27 -0700 Subject: [PATCH 1/4] dark mode technically works but it is terrible --- client/src/App.jsx | 1 + client/src/components/header.jsx | 37 ++++------- client/src/components/sidebar.jsx | 91 +++++++++++-------------- client/src/main.jsx | 5 +- client/src/theme.js | 107 ++++++++++++++++++++++++++---- 5 files changed, 150 insertions(+), 91 deletions(-) diff --git a/client/src/App.jsx b/client/src/App.jsx index 591c1c2..8429718 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -25,6 +25,7 @@ function App() { templateColumns="repeat(4 1fr)" height="100%" width="100%" + bg="#121212" > diff --git a/client/src/components/header.jsx b/client/src/components/header.jsx index 72d8271..e6316b9 100644 --- a/client/src/components/header.jsx +++ b/client/src/components/header.jsx @@ -1,32 +1,23 @@ -import { Box, Button, Avatar, HStack, Stack, Text } from "@chakra-ui/react" +import { chakra, useRecipe, Box, Button, Avatar, HStack, Stack, Text } from "@chakra-ui/react" export default function Header() { + const recipe = useRecipe({ key: "header" }); + const styles = recipe(); return ( - - + + - + ); } diff --git a/client/src/components/sidebar.jsx b/client/src/components/sidebar.jsx index 9a32fce..fd89e0e 100644 --- a/client/src/components/sidebar.jsx +++ b/client/src/components/sidebar.jsx @@ -1,4 +1,5 @@ -import { Box, Button, createIcon, CloseButton, IconButton, Stack } from "@chakra-ui/react"; +import { chakra, useRecipe, useSlotRecipe, Box, Button, createIcon, CloseButton, IconButton, Stack } from "@chakra-ui/react"; +import { useColorModeValue, ColorModeButton } from "@/components/ui/color-mode"; import { FaVolcano } from "react-icons/fa6"; import { RxHamburgerMenu } from "react-icons/rx"; import { useState } from "react"; @@ -10,7 +11,7 @@ export const PushPin = createIcon({ fill: "none", path: ( <> - + ), }); @@ -21,9 +22,9 @@ export const Globe = createIcon({ fill: "none", path: ( <> - - - + + + ), }); @@ -34,8 +35,8 @@ export const MapMarker = createIcon({ fill: "none", path: ( <> - - + + ), }); @@ -46,64 +47,46 @@ export const Users = createIcon({ fill: "none", path: ( <> - - - - - - + + + + + + ), }); export default function Sidebar () { + const variant = useColorModeValue("ghost", "solid") const [isOpen, setIsOpen] = useState(true); const [activeButton, setActiveButton] = useState("Dashboard") + const recipe = useSlotRecipe({ key: "sidebar" }); + const styles = recipe(); return ( - <> - {isOpen && ( - - setIsOpen(!isOpen)}> - - - - - - - )} - - {!isOpen && ( - + + ) : ( + <> setIsOpen(!isOpen)}> @@ -122,9 +105,9 @@ export default function Sidebar () { setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}> - + )} - - + + ); } diff --git a/client/src/main.jsx b/client/src/main.jsx index 85e6708..14f86f7 100644 --- a/client/src/main.jsx +++ b/client/src/main.jsx @@ -1,4 +1,5 @@ import { ChakraProvider } from '@chakra-ui/react'; +import { ColorModeProvider } from '@/components/ui/color-mode'; import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import './css/index.css'; @@ -10,7 +11,9 @@ import { system } from './theme.js'; createRoot(document.getElementById('root')).render( - + + + , ) diff --git a/client/src/theme.js b/client/src/theme.js index 042393a..b11f184 100644 --- a/client/src/theme.js +++ b/client/src/theme.js @@ -1,18 +1,99 @@ -import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"; +import { defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe } from "@chakra-ui/react"; -const config = defineConfig({ - theme: { - tokens: { - colors: { - primaryBG: { value: {base: "#FFFFF", _dark: "AAB8C5"} }, - secondaryBG: { value: "#EDF1F1" }, - border: {value: "#000000"} - }, - fonts: { - body: { value: "georgia, system-ui, sans-serif" }, - }, - } +// RECIPES +const headerRecipe = defineRecipe({ + base: { + bg: "{secondaryBG}", + color: "text", + width: "100%", + height: "100%", + borderBottom: "1px solid", + borderBottomColor:"{border}", + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", } }); +const sidebarRecipe = defineSlotRecipe({ + slots: ["root", "close_button", "buttons", "dark_mode_button"], + base: { + root: { + bg: "{primaryBG}", + borderRight: "1px solid", + borderColor: "{border}", + width: "100%", + height: "100%", + display: "flex", + flexDirection: "column", + justifyContent: "start", + alignItems: "start", + gap: 2, + p: 2, + }, + buttons: { + bg: {base: "transparent", _dark: "#414141"}, + fontSize: "xl", + color: {base: "#19332D", _dark: "#CBCBCB"} + }, + } +}); + + +// const sidebarRecipe = defineRecipe({ +// base: { +// bg: "{primaryBG}", +// borderRight: "1px solid", +// borderColor: "{border}", +// width: "100%", +// height: "100%", +// display: "flex", +// flexDirection: "column", +// justifyContent: "start", +// alignItems: "start", +// gap: 2, +// p: 2, +// }, +// variants: { +// dark: { +// borderRight: "2px solid", +// } +// } +// }); + +// const sidebarBtnRecipe = defineRecipe({ +// base: { +// bg: "{sidebarBtnBG}" +// } +// }); + +const config = defineConfig({ + theme: { + semanticTokens: { + colors: { + primaryBG: { value: {base: "#FFFFFF", _dark: "#121212"}}, + secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}}, + border: {value: {base: "#000000", _dark: "#CBCBCB"}}, + text: {value: {base: "#19332D", _dark: "#CBCBCB"}}, + iconFill: { value: {base: "#FFFFFF", _dark: "#CBCBCB"}}, + icon: {value: {base: "#19332D", _dark: "#CBCBCB"}}, + }, + }, + tokens: { + fonts: { + body: { value: "georgia, system-ui, sans-serif" }, + }, + }, + recipes: { + // sidebar: sidebarRecipe, + // sidebarBTN: sidebarBtnRecipe, + header: headerRecipe, + }, + slotRecipes: { + sidebar: sidebarRecipe, + } + }, +}); + export const system = createSystem(defaultConfig, config); \ No newline at end of file From 23540bc5cdbe7789e3056cf4ae558df386a6a216 Mon Sep 17 00:00:00 2001 From: Venessa Kuchenik Date: Tue, 15 Jul 2025 18:28:37 -0700 Subject: [PATCH 2/4] 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 | 7 ++++--- client/src/components/sidebar.jsx | 12 ++++++------ client/src/theme.js | 28 +++++++++++++++++++++------- 3 files changed, 31 insertions(+), 16 deletions(-) diff --git a/client/src/App.jsx b/client/src/App.jsx index 8429718..601f6ea 100644 --- a/client/src/App.jsx +++ b/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 ( - diff --git a/client/src/components/sidebar.jsx b/client/src/components/sidebar.jsx index fd89e0e..61b3ca7 100644 --- a/client/src/components/sidebar.jsx +++ b/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 ? ( <> setIsOpen(!isOpen)}> - - - - - diff --git a/client/src/theme.js b/client/src/theme.js index b11f184..1883cc2 100644 --- a/client/src/theme.js +++ b/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}", - borderRight: "1px solid", + bg: {base: "{base200}", _dark: "#282828"}, + 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, From 59667876b0f1ad309c2b963d92831061c27d7d8f Mon Sep 17 00:00:00 2001 From: Venessa Kuchenik Date: Wed, 16 Jul 2025 07:21:26 -0700 Subject: [PATCH 3/4] Updated colors in theme.js --- client/src/theme.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/src/theme.js b/client/src/theme.js index 1883cc2..6b36f07 100644 --- a/client/src/theme.js +++ b/client/src/theme.js @@ -7,7 +7,7 @@ const headerRecipe = defineRecipe({ color: "text", width: "100%", height: "100%", - borderBottom: "0px solid", + borderBottom: "1px solid", borderBottomColor:"{border}", display: "flex", flexDirection: "row", @@ -26,8 +26,8 @@ const sidebarRecipe = defineSlotRecipe({ slots: ["root", "close_button", "buttons", "dark_mode_button"], base: { root: { - bg: {base: "{base200}", _dark: "#282828"}, - borderRight: "0px solid", + bg: "{base200}", + borderRight: "1px solid", borderColor: "{border}", width: "100%", height: "100%", From 466ee6edc44a318140de01316ca94925a0277d79 Mon Sep 17 00:00:00 2001 From: Venessa Kuchenik Date: Wed, 16 Jul 2025 11:23:29 -0700 Subject: [PATCH 4/4] fixed spelling error --- client/src/theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/theme.js b/client/src/theme.js index 6b36f07..68926d3 100644 --- a/client/src/theme.js +++ b/client/src/theme.js @@ -82,7 +82,7 @@ const config = defineConfig({ semanticTokens: { colors: { base100: { value: {base: "#f7f9fa", _dark: "#787b73"}}, - bsae200: { value: {base: "#eef2f6", _dark: "#484c42"}}, + base200: { value: {base: "#eef2f6", _dark: "#484c42"}}, base300: { value: {base: "#dfe5ed", _dark: "#60645a"}}, primary: { value: {base: "#9cd855", _dark: "#629631"}}, primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}},