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

client/src/theme.js

@@ -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"},
+      bg: {base: "rgb(246 246 246 / 0.85)", _dark: "rgb(51 53 64 / 0.80)"},
-      backdropFilter: "blur(15px)",
+      backdropFilter: "blur(8px)",
-      WebkitBackdropFilter: "blur(15px)",
+      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)" } },
+        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)" } },
+        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)" } },
+        widgetBadgeBg: { value: { base: "rgb(154 163 179 / 0.45)", _dark: "rgb(75 77 90 / 0.8)" } },
-        widgetInnerBadgeBg: { value: { base: "rgb(224 226 232)", _dark: "rgb(100 103 119)" } },
+        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,
     },
   },
 });