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

Updated color more button by consolidating into one button, it now uses css positioning w respect to state rather then visibility

Browse Source
This commit is contained in:
vkuchenik
2026-09-14 15:31:23 -07:00
parent 8e514418d4
commit 3595599dae
2 changed files with 58 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/theme.js
+52 -30
View File
@@ -40,7 +40,7 @@ const headerRecipe = defineSlotRecipe({
// CONSOLIDATED ✔
const sidebarRecipe = defineSlotRecipe({
slots: ["root", "logo", "logo_text", "footer", "button_text", "buttons", "collapse_button", "opened_theme_button", "closed_theme_button"],
slots: ["root", "logo", "logo_text", "footer", "button_text", "buttons", "collapse_button", "color_mode_button"],
base: {
root: {
// 1. Semi-transparent backgrounds
@@ -160,7 +160,6 @@ const sidebarRecipe = defineSlotRecipe({
},
logo: {
width: "100%",
height: "2.5rem",
justifyContent: "flex-start",
ml: 2,
textStyle: "4xl",
@@ -175,10 +174,12 @@ const sidebarRecipe = defineSlotRecipe({
textOverflow: "clip",
},
footer: {
flexDirection: "column",
flexDirection: "row",
justifyContent: "space-between",
width: "100%",
mt: "auto",
ml: 2,
pl: 2,
pr: 2,
},
button_text: {
transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
@@ -190,28 +191,28 @@ const sidebarRecipe = defineSlotRecipe({
collapse_button: {
"& svg": {flexShrink: "0"},
},
opened_theme_button: {
width: "100%",
align: "center",
justifyContent: "right",
mr: 6,
"& 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,
"& button": {
transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
_hover: {
bg: "transparent",
}
}
},
// opened_theme_button: {
// width: "100%",
// align: "center",
// justifyContent: "right",
// mr: 6,
// // "& 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,
// // "& button": {
// // transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
// // _hover: {
// // bg: "transparent",
// // }
// // }
// },
},
variants: {
state: {
@@ -219,15 +220,36 @@ const sidebarRecipe = defineSlotRecipe({
root: {width: "190px"},
button_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"}},
color_mode_button: {
// the css below makes sure the icon doesn't jump out of the bounds of the sidebar while it's transitioning from closed to open
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "clip",
},
// closed_theme_button: {"& button": {opacity: 0, visibility: "hidden"}},
},
closed: {
root: {width: "71px"},
button_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"}},
color_mode_button: {
"& button": {
position: "relative",
bottom: "50px",
right: "37px",
}
},
// closed_theme_button: {
// ml: 0.9,
// "& button": {
// transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
// _hover: {
// bg: "transparent",
// },
// opacity: 1,
// visibility: "visible",
// }
// },
}
}
}