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/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,
},
},
});