fixed color mode button background

client/eslint.config.js

@@ -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

@@ -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

@@ -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

@@ -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 glassTabsRecipe = useRecipe({key: "glassTab"});
-  const tabStyles = recipe();
+  const homeRecipe = useSlotRecipe({key: "home"});
+  const glassTabsStyle = glassTabsRecipe();
+  const homeStyle = homeRecipe();
 
-  const location = useLocation();
+  const location= useLocation();
-  const isPersonalDashboard = location.pathname === "/home" || location.pathname === "/home/";
+  const isPersonalDashboard= location.pathname === "/home" || location.pathname === "/home/";
 
   return (
-    <Flex direction="column" height="100%" width="100%">
+    <Flex css={homeStyle.root}>
-
+      <Flex as="header">
-      <Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="transparent" p={5} align="center"
-            justify="space-between" width="100%">
-
         {/* TABS CONTAINER */}
-        <Flex gap={2} alignItems="center">
+        <Flex>
           {HOME_TABS.map((tab) => {
             const Icon = tab.icon;
             return (
-              <Box
+              <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*/}
-                key={tab.name}
-                as={NavLink}
-                to={tab.url}
-                end={tab.exact} // CRITICAL: Forces exact match so "/home" deactivates on sub-routes
-                css={tabStyles}
-              >
                 {/* 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

@@ -31,8 +31,8 @@ const headerRecipe = defineSlotRecipe({
 
       // The Text component
       "& p": {
-        fontWeight: "bold",
+        fontWeight: "600",
-        fontSize:"16px"     // equivalent to chakra 'md'
+        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"}},
+        text: {value: {base: "#000000", _dark: "#FFFFFF"}},
-        // textInverted: {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,
     },
   },
 });