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

add: attempted to create a slot recipe for the data explorer pg

Browse Source
This commit is contained in:
vkuchenik
2026-11-12 09:54:44 -08:00
parent d7ecbc6f65
commit 39ee717a6c
1 changed files with 46 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/theme.js
+46 -10
View File
@@ -23,7 +23,6 @@ const headerRecipe = defineSlotRecipe({
color: "text",
width: "100%",
height: "100%",
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
@@ -32,8 +31,13 @@ const headerRecipe = defineSlotRecipe({
search_bar: {
width: "100%",
// input element in search bar component
"& svg": {
w: "20px",
h: "20px",
},
"& input": {
width: "410px",
borderRadius: "full",
},
},
user_info: {
@@ -254,7 +258,7 @@ const dashboardRecipe = defineRecipe({
// selects the third div in the grid layout (the canvas)
"& > div:nth-of-type(3)": {
width: "100%",
overflow: "auto",
overflowY: "auto",
}
}
});
@@ -353,9 +357,9 @@ const glassPopoverRecipe = defineSlotRecipe({
borderRadius: "1rem",
p: 3,
boxShadow: "lg",
bg: {base: "rgb(246 246 246 / 0.95)", _dark: "#353742"},
backdropFilter: "blur(15px)",
WebkitBackdropFilter: "blur(15px)",
bg: {base: "rgb(246 246 246 / 0.85)", _dark: "rgb(51 53 64 / 0.80)"},
backdropFilter: "blur(8px)",
WebkitBackdropFilter: "blur(8px)",
},
date: {
color: "text",
@@ -533,7 +537,7 @@ const glassDialogRecipe = defineSlotRecipe({
},
});
// 6. Pill/Glass Expanding Tab Button
// 8. Pill/Glass Expanding Tab Button
const glassTabRecipe = defineRecipe({
base: {
display: "flex",
@@ -595,6 +599,37 @@ const glassTabRecipe = defineRecipe({
},
});
// 9. Data Explorer Page
const dataExplorerRecipe = defineSlotRecipe({
slots: ["root", "query_builder", "data_table"],
base: {
root: {
},
query_builder: {
// "& button": {
// borderRadius: "lg",
//
// color: "white",
// bg: "#B63B1F",
// _hover: {
// color: "text",
// bg: "#B63B1F32"
// },
//
// _dark: {
// bg: "#b55038",
// color: "text",
// _hover: {
// bg: "#503D40"
// }
// }
// },
}
}
});
/* ==========================================================================
RAW WIDGET COLORS (For Canvas/Plotly libraries that reject CSS variables)
========================================================================== */
@@ -676,10 +711,10 @@ const config = defineConfig({
gooeyButtonBackground: {value: {base: "rgba(255, 255, 255, 0.1)", _dark: "#333540"}},
// WIDGET SPECIFIC VALUES
widgetItemBg: { value: { base: "rgb(115 132 166 / 0.17)", _dark: "rgb(51 53 64)" } },
widgetItemExpandedBg: { value: { base: "rgb(184 197 220 / 0.17)", _dark: "rgb(59 61 73)" } },
widgetBadgeBg: { value: { base: "rgb(154 163 179 / 0.45)", _dark: "rgb(75 77 90)" } },
widgetInnerBadgeBg: { value: { base: "rgb(224 226 232)", _dark: "rgb(100 103 119)" } },
widgetItemBg: { value: { base: "rgb(115 132 166 / 0.17)", _dark: "rgb(51 53 64 / 0.8)" } },
widgetItemExpandedBg: { value: { base: "rgb(184 197 220 / 0.17)", _dark: "rgb(59 61 73 / 0.8)" } },
widgetBadgeBg: { value: { base: "rgb(154 163 179 / 0.45)", _dark: "rgb(75 77 90 / 0.8)" } },
widgetInnerBadgeBg: { value: { base: "rgb(224 226 232 / 0.6)", _dark: "rgb(100 103 119 / 0.8)" } },
widgetTextMuted: { value: { base: "#262627", _dark: "rgb(236 236 236 / 0.9)" } },
// ALERT COLORS
@@ -705,6 +740,7 @@ const config = defineConfig({
widget: widgetRecipe,
glassPopover: glassPopoverRecipe,
glassDialog: glassDialogRecipe,
dataExplorer: dataExplorerRecipe,
},
},
});