From 4914b64fe24e7cd2d278016b255673153f4b2624 Mon Sep 17 00:00:00 2001 From: vkuchenik Date: Wed, 9 Sep 2026 11:54:24 -0700 Subject: [PATCH] fixed color mode button background --- client/eslint.config.js | 2 +- client/index.html | 3 ++ client/src/css/index.css | 3 +- client/src/pages/home/Home.jsx | 31 +++++------- client/src/theme.js | 89 ++++++++++++++++++++++++---------- 5 files changed, 81 insertions(+), 47 deletions(-) diff --git a/client/eslint.config.js b/client/eslint.config.js index 8c2c3fe..2eefe1f 100644 --- a/client/eslint.config.js +++ b/client/eslint.config.js @@ -24,6 +24,6 @@ export default defineConfig([globalIgnores(['dist']), { }, }, rules: { - 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }], + 'no-unused-vars': 'off', }, }, ...storybook.configs["flat/recommended"]]) diff --git a/client/index.html b/client/index.html index e99bbf6..cdb6e80 100644 --- a/client/index.html +++ b/client/index.html @@ -2,6 +2,9 @@ + + + VDAP diff --git a/client/src/css/index.css b/client/src/css/index.css index 3725a93..3b6c55d 100644 --- a/client/src/css/index.css +++ b/client/src/css/index.css @@ -1,3 +1,4 @@ :root { - font-family: Georgia, 'Times New Roman', Times, serif; + /*font-family: Georgia, 'Times New Roman', Times, serif;*/ + font-family: "Roboto", sans-serif; } \ No newline at end of file diff --git a/client/src/pages/home/Home.jsx b/client/src/pages/home/Home.jsx index 0afeeec..61f15df 100644 --- a/client/src/pages/home/Home.jsx +++ b/client/src/pages/home/Home.jsx @@ -1,4 +1,4 @@ -import {HStack, Flex, Box, useRecipe} from "@chakra-ui/react"; +import {HStack, Flex, Box, useRecipe, useSlotRecipe} from "@chakra-ui/react"; import {NavLink, Outlet, useLocation} from "react-router-dom"; import {SearchBar} from "../../components/dashboard/SearchBar.jsx"; import {SettingsButton} from "../../components/dashboard/SettingsButton.jsx"; @@ -16,30 +16,23 @@ const HOME_TABS = [ ]; export default function Home() { - const recipe = useRecipe({key: "glassTab"}); - const tabStyles = recipe(); + const glassTabsRecipe = useRecipe({key: "glassTab"}); + const homeRecipe = useSlotRecipe({key: "home"}); + const glassTabsStyle = glassTabsRecipe(); + const homeStyle = homeRecipe(); - const location = useLocation(); - const isPersonalDashboard = location.pathname === "/home" || location.pathname === "/home/"; + const location= useLocation(); + const isPersonalDashboard= location.pathname === "/home" || location.pathname === "/home/"; return ( - - - - + + {/* TABS CONTAINER */} - + {HOME_TABS.map((tab) => { const Icon = tab.icon; return ( - + {/* CRITICAL: 'end' prop forces exact match so "/home" deactivates on sub-routes*/} {/* flexShrink: 0 ensures the icon never squishes during the gooey animation */} {tab.name} @@ -59,7 +52,7 @@ export default function Home() { {/* TABS CONTENT */} - + diff --git a/client/src/theme.js b/client/src/theme.js index c44160e..4e0f21e 100644 --- a/client/src/theme.js +++ b/client/src/theme.js @@ -31,8 +31,8 @@ const headerRecipe = defineSlotRecipe({ // The Text component "& p": { - fontWeight: "bold", - fontSize:"16px" // equivalent to chakra 'md' + fontWeight: "600", + fontSize: "16px" // equivalent to chakra 'md' } } }, @@ -95,9 +95,9 @@ const sidebarRecipe = defineSlotRecipe({ }, _hover: { - bg: "rgba(255, 255, 255, 0.1)", + bg: "rgba(255, 255, 255, 0.2)", color: "{text}", - fontWeight: "semibold", + fontWeight: "500", "& svg": { strokeWidth: "3" } @@ -165,7 +165,7 @@ const sidebarRecipe = defineSlotRecipe({ px: 0, }, logo_text: { - transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease", + transition: "opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "clip", @@ -181,50 +181,47 @@ const sidebarRecipe = defineSlotRecipe({ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "clip", + fontWeight: "500" }, collapse_button: { - "& svg": { flexShrink: "0" }, + "& svg": {flexShrink: "0"}, }, opened_theme_button: { - width: "100%" , + width: "100%", align: "center", justifyContent: "right", mr: 6, - "& .chakra-button": { // targets the chakra button class in ColorModeButton component to set bg transparency - "&:hover": { - bg: "transparent", - } - }, "& button": { alignSelf: "center", transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease", + _hover: { + bg: "transparent", + } } }, closed_theme_button: { ml: 0.9, - "& .chakra-button": { // targets the chakra button class to set bg transparency - "&:hover": { - bg: "transparent", - } - }, "& button": { transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease", + _hover: { + bg: "transparent", + } } }, }, variants: { state: { open: { - root: { width: "190px" }, + root: {width: "190px"}, button_text: {ml: 3, opacity: 1, visibility: "visible"}, - logo_text: {ml: 3, opacity: 1, visibility: "visible"}, + logo_text: {ml: 3, opacity: 1, visibility: "visible", transition: "opacity 0.5s ease, visibility 0.5s ease, margin 0.5s ease"}, opened_theme_button: {"& button": {opacity: 1, visibility: "visible"}}, closed_theme_button: {"& button": {opacity: 0, visibility: "hidden"}}, }, closed: { - root: { width: "71px" }, + root: {width: "71px"}, button_text: {opacity: 0, visibility: "hidden"}, - logo_text: {opacity: 0, visibility: "hidden"}, + logo_text: {opacity: 0, visibility: "hidden", transition: "opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease"}, opened_theme_button: {"& button": {opacity: 0, visibility: "hidden"}}, closed_theme_button: {"& button": {opacity: 1, visibility: "visible"}}, } @@ -255,6 +252,45 @@ const canvasRecipe = defineRecipe({ } }); +const homeRecipe = defineSlotRecipe({ + slots: ["root"], + base: { + root: { + flexDirection: "column", + height: "100%", + width: "100%", + + // Flex contianer as a header that contains all the tabs + "& header": { + width: "100%", + align: "center", + justify: "space-between", + top: "0", + p: 5, + position: "sticky", + zIndex: "dropdown", + bg: "transparent", + + // Flex container renders as div for all the buttons within the header + "& > div": { + alignItems: "center", + gap: 2, + + // icon in each tab button + "& svg": { + // TODO: bring over svg styling + } + } + }, + + "& > div": { + flex: 1, + overflow: "auto", + } + }, + }, +}) + // const widgetRecipe = defineSlotRecipe({ // slots: ["root", "header", "canvas"], // base: { @@ -331,7 +367,7 @@ const glassPanelRecipe = defineSlotRecipe({ boxShadow: "xl", minW: "240px", // OVERRIDES: Make the background 85-90% opaque instead of 40% - bg: { base: "rgba(255, 255, 255, 0.75)", _dark: "rgba(20, 22, 25, 0.8)" }, + bg: {base: "rgba(255, 255, 255, 0.75)", _dark: "rgba(20, 22, 25, 0.8)"}, // OVERRIDES: Increase the blur just to smooth out any stubborn gridlines backdropFilter: "blur(15px)", @@ -375,7 +411,7 @@ const glassTabRecipe = defineRecipe({ overflow: "hidden", whiteSpace: "nowrap", textDecoration: "none", - fontWeight: "bold", + fontWeight: "500", color: "fg.muted", // --- THE GLASS EFFECT (Inactive) --- @@ -418,7 +454,7 @@ const glassTabRecipe = defineRecipe({ } }); -const config= defineConfig({ +const config = defineConfig({ globalCss: { ".react-grid-placeholder": { background: "#c0d2e3ff !important", @@ -500,8 +536,8 @@ const config= defineConfig({ // primaryLt: {value: {base: "#98cdffff", _dark: "#98cdffff"}}, // secondaryBG: {value: {base: "#EDF1F1", _dark: "#121212"}}, // border: {value: {base: "#000000", _dark: "#cbcbcb84"}}, - // text: {value: {base: "#000000", _dark: "#FFFFFF"}}, - // textInverted: {value: {base: "#000000", _dark: "#FFFFFF"}}, + text: {value: {base: "#000000", _dark: "#FFFFFF"}}, + textInverted: {value: {base: "#000000", _dark: "#FFFFFF"}}, // icon: {value: {base: "#000000", _dark: "#FFFFFF"}}, gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "rgba(255, 255, 255, 0.1)"}}, @@ -526,6 +562,7 @@ const config= defineConfig({ sidebar: sidebarRecipe, // widget: widgetRecipe, glassPanel: glassPanelRecipe, + home: homeRecipe, }, }, });