chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed color mode button background

Browse Source
This commit is contained in:
vkuchenik
2026-09-09 11:54:24 -07:00
parent 4aa8eb7ff0
commit 4914b64fe2
5 changed files with 81 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/eslint.config.js
+1 -1
View File
@@ -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"]])
client/index.html
+3
View File
@@ -2,6 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="icon" type="image/svg+xml" href="volcano.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VDAP</title>
client/src/css/index.css
+2 -1
View File
@@ -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;
}
client/src/pages/home/Home.jsx
+12 -19
View File
@@ -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 (
<Flex direction="column" height="100%" width="100%">
<Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="transparent" p={5} align="center"
justify="space-between" width="100%">
<Flex css={homeStyle.root}>
<Flex as="header">
{/* TABS CONTAINER */}
<Flex gap={2} alignItems="center">
<Flex>
{HOME_TABS.map((tab) => {
const Icon = tab.icon;
return (
<Box
key={tab.name}
as={NavLink}
to={tab.url}
end={tab.exact} // CRITICAL: Forces exact match so "/home" deactivates on sub-routes
css={tabStyles}
>
<Box key={tab.name} as={NavLink} to={tab.url} end={tab.exact} css={glassTabsStyle}> {/* CRITICAL: 'end' prop forces exact match so "/home" deactivates on sub-routes*/}
{/* flexShrink: 0 ensures the icon never squishes during the gooey animation */}
<Icon size={24} style={{flexShrink: 0}}/>
<Box as="span">{tab.name}</Box>
@@ -59,7 +52,7 @@ export default function Home() {
</Flex>
{/* TABS CONTENT */}
<Flex flex="1" overflow="auto">
<Flex>
<Outlet/>
</Flex>
client/src/theme.js
+63 -26
View File
@@ -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,
},
},
});