Merge branch '20260902_1249_Kuchenik_Flatten_CSS' into 20260605_1123_Hight_updates

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/App.jsx

@@ -1,7 +1,7 @@
 import 'leaflet/dist/leaflet.css';
-import { useEffect } from 'react';
+import {useEffect} from 'react';
-import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
+import {Routes, Route, Navigate, Outlet} from 'react-router-dom';
-import { useRecipe, Grid, GridItem, useDialog, Flex, Heading } from "@chakra-ui/react";
+import {useRecipe, Grid, GridItem, useDialog, Flex, Heading} from "@chakra-ui/react";
 
 // --- NEW AUTH IMPORTS ---
 import useAuthStore from './store/authStore';
@@ -19,80 +19,75 @@ import GlobalMap from "./pages/maps/GlobalMap.jsx";
 import Admin from "./pages/admin/Admin.jsx";
 import MyDashboard from "./pages/home/tabs/MyDashboard.jsx";
 
+export default function App() {
+  // 1. Pull the initialization function from Zustand
+  const checkAuth = useAuthStore((state) => state.checkAuth);
+
+  // 2. Ping Django to verify the HttpOnly cookie the moment the app boots
+  useEffect(() => {
+    checkAuth();
+  }, [checkAuth]);
+
+  return (
+    <Routes>
+      {/* --- Public Routes --- */}
+      <Route path="/login" element={<Login/>}/>
+
+      {/* --- Secure Routes --- */}
+      <Route element={<ProtectedRoute/>}>
+
+        {/* --- Non-Public Routes (Now completely locked down) --- */}
+        <Route element={<AppFoundation/>}>
+
+          <Route path="/home" element={<Home/>}>
+            <Route index element={<MyDashboard/>}/>
+            <Route path="gas" element={<Placeholder name="Gas"/>}/>
+            <Route path="seismic" element={<Placeholder name="Seismic"/>}/>
+            <Route path="remote" element={<Placeholder name="Remote Sensing"/>}/>
+            <Route path="daily" element={<Placeholder name="Daily Activity"/>}/>
+          </Route>
+
+          <Route path="/global-map" element={<GlobalMap/>}/>
+          <Route path="/regional-map" element={<RegionalMap/>}/>
+          <Route path="/volcano" element={<Volcano/>}/>
+          <Route path="/admin" element={<Admin/>}/>
+        </Route>
+
+      </Route>
+
+      {/* --- Redirect Routes --- */}
+      <Route path="/" element={<Navigate to="/home" replace/>}/>
+    </Routes>
+  );
+}
+
+// The fundamental layout of the webpage
 function AppFoundation() {
-  const recipe = useRecipe({ key: "dashboard" });
+  const recipe = useRecipe({key: "dashboard"});
   const styles = recipe();
   const dialog = useDialog();
 
   return (
     <>
-      <DialogPopup dialog={dialog} />
+      <DialogPopup dialog={dialog}/>
-      <Grid css={styles}
+      <Grid css={styles} templateRows="1fr 11fr" templateColumns="auto 1fr">
-        templateRows="1fr 11fr"
-        templateColumns="auto 1fr"
-        height="100vh"
-        width="100vw"
-      >
         <GridItem rowSpan={2} colSpan={1}>
-          <Sidebar />
+          <Sidebar/>
         </GridItem>
         <GridItem rowSpan={1} colSpan={1}>
-          <Header />
+          <Header/>
         </GridItem>
-        <GridItem colSpan={1} width="100%" overflow="auto">
+        <GridItem colSpan={1}>
-          <Outlet />
+          <Outlet/>
         </GridItem>
       </Grid>
     </>
   )
 }
 
-const Placeholder = ({ name }) => (
+// A dummy page that acts as a placeholder for pages that aren't developed yet but are navigatable to
-    <Flex width="100%" height="100%" align="center" justify="center">
+const Placeholder = ({name}) => (
-        <Heading color="gray.500" _dark={{ color: "gray.200" }} size="lg">{name} Dashboard - Coming Soon</Heading>
+  <Flex width="100%" height="100%" align="center" justify="center">
-    </Flex>
+    <Heading color="gray.500" _dark={{color: "gray.200"}} size="lg">{name} Dashboard - Coming Soon</Heading>
+  </Flex>
 );
-
-function App() {
-    // 1. Pull the initialization function from Zustand
-    const checkAuth = useAuthStore((state) => state.checkAuth);
-
-    // 2. Ping Django to verify the HttpOnly cookie the moment the app boots
-    useEffect(() => {
-        checkAuth();
-    }, [checkAuth]);
-
-    return (
-        <Routes>
-            {/* --- Public Routes --- */}
-            <Route path="/login" element={<Login />} />
-
-            {/* --- SECURE ROUTES --- */}
-            <Route element={<ProtectedRoute />}>
-
-                {/* --- Non-Public Routes (Now completely locked down) --- */}
-                <Route element={<AppFoundation />}>
-
-                    <Route path="/home" element={<Home />}>
-                        <Route index element={<MyDashboard />} />
-                        <Route path="gas" element={<Placeholder name="Gas" />} />
-                        <Route path="seismic" element={<Placeholder name="Seismic" />} />
-                        <Route path="remote" element={<Placeholder name="Remote Sensing" />} />
-                        <Route path="daily" element={<Placeholder name="Daily Activity" />} />
-                    </Route>
-
-                    <Route path="/global-map" element={<GlobalMap />} />
-                    <Route path="/regional-map" element={<RegionalMap />} />
-                    <Route path="/volcano" element={<Volcano />} />
-                    <Route path="/admin" element={<Admin />} />
-                </Route>
-
-            </Route>
-
-            {/* --- Redirect Routes --- */}
-            <Route path="/" element={<Navigate to="/home" replace />} />
-        </Routes>
-    );
-}
-
-export default App;

client/src/components/dashboard/SettingsButton.jsx

@@ -31,8 +31,11 @@ export function SettingsButton() {
   const cancelEdit = useDashboardStore(state => state.cancelEdit);
   const addWidget = useDashboardStore(state => state.addWidget);
 
-  const recipe = useRecipe({key: "glassTab"});
+  const glassTabRecipe = useRecipe({key: "glassTab"});
-  const tabStyles = recipe();
+  const tabStyles = glassTabRecipe();
+
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
 
   // Pull the glass container styles for the dropdown and modal
   const panelRecipe = useSlotRecipe({key: "glassPanel"});
@@ -43,8 +46,6 @@ export function SettingsButton() {
 
   // ⬅️ ➡️ This is the callbacks and scroll control to add the chevron arrows in the tab list
   const tabsRef = useRef(null);
-  const [canScrollLeft, setCanScrollLeft] = useState(false);
-  const [canScrollRight, setCanScrollRight] = useState(false);
 
   const checkScroll = useCallback(() => {
     if (tabsRef.current) {
@@ -92,27 +93,17 @@ export function SettingsButton() {
     <>
       {isEditing ? (
         // 📝 EDIT MODE: The 3-Pill Layout
-        <HStack gap={2}>
+        <HStack>
           {/* 1. The Add Widget Button */}
-          <Box
+          <Box as="button" css={tabStyles} data-state="open" onClick={() => setIsLibraryOpen(true)}
-            as="button"
+            color={{base: "blue.500", _dark: "blue.300"}} _hover={{bg: "rgba(66, 153, 225, 0.1)"}}
-            css={tabStyles}
-            data-state="open"
-            onClick={() => setIsLibraryOpen(true)}
-            color={{base: "blue.500", _dark: "blue.300"}}
-            _hover={{bg: "rgba(66, 153, 225, 0.1)"}}
           >
             <LayoutGrid size={20} style={{flexShrink: 0}}/>
             <Box as="span">Widget Library</Box>
           </Box>
 
           {/* 2. The Save Button */}
-          <Box
+          <Box as="button" css={tabStyles} data-state="open" onClick={saveEdit} color={{base: "green.600", _dark: "green.400"}}
-            as="button"
-            css={tabStyles}
-            data-state="open"
-            onClick={saveEdit}
-            color={{base: "green.600", _dark: "green.400"}}
             _hover={{bg: "rgba(72, 187, 120, 0.1)"}}
           >
             <Save size={20} style={{flexShrink: 0}}/>
@@ -120,12 +111,7 @@ export function SettingsButton() {
           </Box>
 
           {/* 3. The Discard Button */}
-          <Box
+          <Box as="button" css={tabStyles} data-state="open" onClick={cancelEdit} color={{base: "red.500", _dark: "red.400"}}
-            as="button"
-            css={tabStyles}
-            data-state="open"
-            onClick={cancelEdit}
-            color={{base: "red.500", _dark: "red.400"}}
             _hover={{bg: "rgba(245, 101, 101, 0.1)"}}
           >
             <X size={20} style={{flexShrink: 0}}/>
@@ -137,7 +123,7 @@ export function SettingsButton() {
         <Menu.Root positioning={{getAnchorRect}}>
           <Menu.Trigger asChild>
             <Box ref={menuRef} as="button" css={tabStyles}>
-              {/* size increased to 24 to match tabs. flexShrink: 0 is CRITICAL */}
+              {/* settings icon size set to 24 to match tabs. flexShrink 0 is CRITICAL */}
               <Settings size={24} style={{flexShrink: 0}}/>
               <Box as="span">Dashboard Settings</Box>
             </Box>
@@ -174,136 +160,52 @@ export function SettingsButton() {
       <Dialog.Root
         open={isLibraryOpen}
         onOpenChange={(e) => setIsLibraryOpen(e.open)}
-        size="xl"
-        placement="center"
         closeOnInteractOutside={true}
         closeOnEscapeKeyDown={true}
+        size="xl"
+        placement="center"
       >
         {/* Soft blur can be added to the background behind the modal */}
         {/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
         <Dialog.Positioner>
-
+          <Dialog.Content css={modalStyles.root}>
-          <Dialog.Content css={modalStyles.root} overflow="hidden" maxW="60%" minH="80%" p={0}>
+            <Dialog.Header>
-
+              <Dialog.Title>Widgets Shop</Dialog.Title>
-            <Dialog.Header bg="transparent" color={{base: "gray.800", _dark: "white"}} py={4}
-                           borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
-              <Dialog.Title fontSize="xl" fontWeight="bold">Widgets Shop</Dialog.Title>
             </Dialog.Header>
 
-            <Dialog.Body p={0}>
+            <Dialog.Body>
               <Tabs.Root defaultValue={categories[0]} variant="unstyled">
-                <Box position="relative" display="flex" mx="auto" maxWidth="100%" mx={5} mt={4} mb={6}>
+                {/* HORIZONTAL SCROLLABLE MENU OF WIDGET CATEGORIES */}
-
+                <Box>
-                  {/* LEFT GLASS CRESCENT */}
+                  {/* left glass crescent */}
                   {canScrollLeft && (
-                    <Flex
+                    <Flex onClick={() => tabsRef.current.scrollBy({left: -200, behavior: 'smooth'})}>
-                      position="absolute"
+                      <ChevronLeft size={18} style={{ marginLeft: "-30px" }}/> {/* Shifted slightly left to optically center it in the crescent mass */}
-                      left="0" top="0" bottom="0"
-                      w="50px"
-                      align="center" justify="center"
-                      zIndex={2}
-                      cursor="pointer"
-                      onClick={() => tabsRef.current.scrollBy({left: -200, behavior: 'smooth'})}
-                      bg={{base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"}}
-                      backdropFilter="blur(1px)"
-                      borderTopLeftRadius="full"
-                      borderBottomLeftRadius="full"
-
-                      // THE MAGIC: Bites a transparent circle out of the flat right side!
-                      WebkitMaskImage="radial-gradient(circle at 100% 50%, transparent 30px, black 19px)"
-                      maskImage="radial-gradient(circle at 100% 50%, transparent 30px, black 35px)"
-
-                      color={{base: "gray.600", _dark: "gray.300"}}
-                      transition="background-color 0.2s"
-                      _hover={{
-                        color: {base: "blue.500", _dark: "blue.300"},
-                        bg: {base: "rgba(255, 255, 255, 0.9)", _dark: "rgba(40, 40, 40, 0.95)"}
-                      }}
-                    >
-                      {/* Shifted slightly left to optically center it in the crescent mass */}
-                      <ChevronLeft size={18} style={{ marginLeft: "-30px" }}/>
                     </Flex>
                   )}
-                  <Tabs.List
+
-                    ref={tabsRef}
+                  {/* the categories */}
-                    onScroll={checkScroll}
+                  <Tabs.List ref={tabsRef} onScroll={checkScroll}
-                    bg={{base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)"}}
+                    // For desktop users (not on trackpad) to scroll
-                    p={1}
+                    onWheel={(e) => { if (e.currentTarget) e.currentTarget.scrollLeft += e.deltaY; }}
-                    borderRadius="full"
-                    display="flex"
-                    flexWrap="nowrap"
-                    overflowX="auto"
-                    maxWidth="100%"
-                    border="1px solid"
-                    borderColor={{base: "blackAlpha.50", _dark: "whiteAlpha.100"}}
-                    css={{
-                      scrollbarWidth: "none",
-                      "&::-webkit-scrollbar": {display: "none"},
-                    }}
-                    // This is for desktop users not on trackpad to scroll the
-                    onWheel={(e) => {
-                      if (e.currentTarget) {
-                        e.currentTarget.scrollLeft += e.deltaY;
-                      }
-                    }}
                   >
                     {categories.map(cat => (
-                      <Tabs.Trigger
+                      <Tabs.Trigger key={cat} value={cat}>
-                        key={cat}
-                        value={cat}
-                        px={5}
-                        py={2}
-                        borderRadius="full"
-                        whiteSpace="nowrap"
-                        flexShrink={0}
-                        color={{base: "gray.500", _dark: "gray.400"}}
-                        fontWeight="medium"
-                        transition="background-color 0.2s, color 0.2s, box-shadow 0.2s"
-                        _hover={{
-                          color: {base: "gray.800", _dark: "gray.200"}
-                        }}
-                        _selected={{
-                          bg: {base: "white", _dark: "rgba(255, 255, 255, 0.12)"},
-                          color: {base: "blue.600", _dark: "blue.200"},
-                          boxShadow: "sm",
-                          fontWeight: "bold",
-                        }}
-                      >
                         {cat}
                       </Tabs.Trigger>
                     ))}
                   </Tabs.List>
+
+                  {/* right glass crescent */}
                   {canScrollRight && (
-                    <Flex
+                    <Flex onClick={() => tabsRef.current.scrollBy({left: 200, behavior: 'smooth'})}>
-                      position="absolute"
-                      right="0" top="0" bottom="0"
-                      w="50px"
-                      align="center" justify="center"
-                      zIndex={2}
-                      cursor="pointer"
-                      onClick={() => tabsRef.current.scrollBy({left: 200, behavior: 'smooth'})}
-                      bg={{base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"}}
-                      backdropFilter="blur(1px)"
-                      borderTopRightRadius="full"
-                      borderBottomRightRadius="full"
-
-                      // THE MAGIC: Bites a transparent circle out of the flat left side!
-                      WebkitMaskImage="radial-gradient(circle at 0% 50%, transparent 30px, black 19px)"
-                      maskImage="radial-gradient(circle at 0% 50%, transparent 30px, black 35px)"
-
-                      color={{base: "gray.600", _dark: "gray.300"}}
-                      transition="background-color 0.2s"
-                      _hover={{
-                        color: {base: "blue.500", _dark: "blue.300"},
-                        bg: {base: "rgba(255, 255, 255, 0.9)", _dark: "rgba(40, 40, 40, 0.95)"}
-                      }}
-                    >
                       {/* Shifted slightly right to optically center it in the crescent mass */}
                       <ChevronRight size={18} style={{ marginRight: "-30px" }}/>
                     </Flex>
                   )}
-
                 </Box>
+
+                {/* THE WIDGET OPTIONS W/IN EACH CATEGORY */}
                 {categories.map(cat => (
                   <Tabs.Content key={cat} value={cat} p={6}>
                     <Grid templateColumns="repeat(auto-fill, minmax(300px, 1fr))" gap={4}>
@@ -344,7 +246,7 @@ export function SettingsButton() {
                                     h="24px"
                                     flexShrink={0}
                                     borderRadius="full"
-                                    bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
+                                    // bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
                                     fontWeight="black"
                                     fontSize="xs"
                                     bg='transparent'

client/src/components/layout/Header.jsx

@@ -1,6 +1,5 @@
-import { useRecipe, Button, Stack, Text, Flex } from "@chakra-ui/react"
+import {useSlotRecipe, Text, Flex} from "@chakra-ui/react"
 import UserAvatarMenu from "./UserAvatarMenu.jsx";
-import { NavLink } from "react-router-dom";
 import useAuthStore from "@/store/authStore";
 import {SearchBar} from "@/components/dashboard/SearchBar.jsx";
 
@@ -9,27 +8,30 @@ import {SearchBar} from "@/components/dashboard/SearchBar.jsx";
 
 // Accept a 'user' prop now, fallback to placeholder if empty
 export default function Header() {
-    const recipe = useRecipe({ key: "header" });
+  const recipe = useSlotRecipe({key: "header"});
-    const styles = recipe();
+  const styles = recipe();
 
-    const { user } = useAuthStore();
+  const {user} = useAuthStore();
-    console.log(user);
+  console.log(user);
-    const displayName = user ? (user.firstName || user.username) : "Loading...";
+  const displayName = user ? (user.firstName || user.username) : "Loading...";
-    const avatarname = user ? (user.fullName || user.username) : "Loading...";
+  const avatarname = user ? (user.fullName || user.username) : "Loading...";
 
-    const displayEmail = user?.email || "LDAP User";
+  const displayEmail = user?.email || "LDAP User";
 
-    return (
+  return (
-        <Flex css={styles} >
+    <Flex css={styles.root}>
-            <SearchBar placeholder="Enter a volcano to search" size="sm" width="410px" />
+      <Flex css={styles.search_bar}>
-            {/* User Profile Section */}
+       <SearchBar placeholder="Enter a volcano to search"/>
-            <Flex align="center" gap={3} pr={6}>
+      </Flex>
-                <Text fontWeight="bold" textStyle="md" >{displayName}</Text>
+
-                <UserAvatarMenu
+      {/* User Profile Section */}
-                    name={avatarname}
+      <Flex css={styles.user_info}>
-                    // avatar={user.avatar}
+        <Text>{displayName}</Text>
-                />
+        <UserAvatarMenu
-            </Flex>
+          name={avatarname}
-        </Flex>
+          // avatar={user.avatar}
-    );
+        />
+      </Flex>
+    </Flex>
+  );
 }

client/src/components/layout/Sidebar.jsx

@@ -1,9 +1,8 @@
-import {useSlotRecipe, Box, Button, IconButton} from "@chakra-ui/react";
+import {Mountain, House, Earth, MapPin, ShieldUser, PanelLeftClose, PanelLeftOpen} from 'lucide-react';
+import {useSlotRecipe, Box, Button, IconButton, Text, Flex} from "@chakra-ui/react";
 import {ColorModeButton} from "@/components/ui/color-mode.jsx";
-import {useState} from "react";
 import {NavLink} from "react-router-dom";
-import Tooltip from "../ui/Tooltip.jsx";
+import {useState} from "react";
-import {Mountain, House, Earth, MapPin, ShieldUser, Menu, PanelLeftClose, PanelLeftOpen} from 'lucide-react';
 
 const SIDEBAR_DEFAULT_BUTTONS = [
   {icon: House, name: "Home", url: "/home"},
@@ -14,40 +13,28 @@ const SIDEBAR_DEFAULT_BUTTONS = [
 ];
 
 export default function Sidebar() {
-
   const [isOpen, setIsOpen] = useState(true);
-
   const recipe = useSlotRecipe({key: "sidebar"});
   const styles = recipe({state: isOpen ? "open" : "closed"});
-
+  const visibleButtons = SIDEBAR_DEFAULT_BUTTONS; // TODO: call btns here according to users authorization
-  // TODO we will need to call buttons here by authorized user, for now we update the visible buttons as simply the default buttons
-  const visibleButtons = SIDEBAR_DEFAULT_BUTTONS;
 
   const toggleSidebar = () => setIsOpen((prev) => !prev);
 
   return (
     <Box css={styles.root}>
-      {/* Home Link Logo */}
+       {/* Logo Navigates to Home Page */}
-      <Button
+      <Button as={NavLink} to="/home" variant="plain" css={styles.logo}>
-        as={NavLink}
+        <Flex>
-        to="/home"
+          <Text>🌋</Text>
-        css={styles.logo}
+          <Text css={styles.logo_text}>VDAP</Text>
-        variant="plain"
+        </Flex>
-      >
-        {isOpen ? "🌋 VDAP" : "🌋"}
       </Button>
 
-
       {/* Navigation Buttons */}
       {visibleButtons.map((button) => {
         const Icon = button.icon;
         return (
-          <Button
+          <Button as={NavLink} to={button.url} css={styles.buttons}> {/* Navigation buttons are [icon text] */}
-            as={NavLink}
-            to={button.url}
-            css={styles.buttons}
-          >
-            {/* Navigation buttons are [icon text] */}
             <Icon/>
             <Box as="span" css={styles.button_text}>
               {button.name}
@@ -55,21 +42,16 @@ export default function Sidebar() {
           </Button>
         );
       })}
-      <Box css={styles.footer}>
+
-        {/* Menu Trigger */}
+      {/* Collapse Sidebar and Theme Footer Buttons */}
-        <IconButton
+      <Flex css={styles.footer}>
-          aria-label="Toggle Sidebar"
+        <IconButton aria-label="Toggle Sidebar" variant="plain" onClick={toggleSidebar} css={styles.collapse_button}>
-          variant="plain"
-          size="md"
-          onClick={toggleSidebar}
-          css={styles.collapse_button}
-        >
           {isOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
         </IconButton>
-
+        <Flex css={styles.color_mode_button}>
-          {/* Theme Toggler */}
+          <ColorModeButton />
-          <ColorModeButton _hover={{ bg: "transparent" }} />
+        </Flex>
-        </Box>
+      </Flex>
-      </Box>
+    </Box>
   );
 }

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" css={homeStyle.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>
@@ -49,7 +42,6 @@ export default function Home() {
 
           {/* The Settings button is now inline with the tabs and only renders on the personal dashboard */}
           {isPersonalDashboard && <SettingsButton/>}
-
         </Flex>
 
         {/* EDIT MODE BUTTONS & CONTROLS */}
@@ -57,10 +49,10 @@ export default function Home() {
         <HStack width="258px" justifyContent="flex-end">
           {/* Future global controls go here */}
         </HStack>
-
       </Flex>
 
-      <Flex flex="1" overflow="auto">
+      {/* TABS CONTENT */}
+      <Flex css={homeStyle.body}>
         <Outlet/>
       </Flex>
 

client/src/pages/home/tabs/MyDashboard.jsx

@@ -13,8 +13,8 @@ import {WIDGET_REGISTRY} from '@/constants/widgetRegistry.jsx';
 // React-Grid-Layout requires this wrapper to automatically calculate screen width
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
-export default function MyDashboard() {
 
+export default function MyDashboard() {
   // ☁️ Database Connection
   const {user} = useAuthStore();
 
@@ -28,25 +28,23 @@ export default function MyDashboard() {
   // 🔒 Safety lock to prevent infinite re-renders
   const hasHydrated = useRef(false);
 
-  // 1. Pull the new global slot recipe
+  // 1. Pull the global slot recipes
   const recipe = useSlotRecipe({key: "glassPanel"});
   const styles = recipe({ layout: "widget" });
   const popoverStyles = recipe({ layout: "popover" });
 
+  // 2. Populate widgets
   useEffect(() => {
     if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
       const savedLayout = user.preferences.dashboard_layout;
 
       // Safety check: Only inject if it's actually an array of widgets.
       // (Prevents a crash if MariaDB returns a default empty object {})
-      if (Array.isArray(savedLayout)) {
+      if (Array.isArray(savedLayout)) setWidgets(savedLayout);
-        setWidgets(savedLayout);
-      }
       hasHydrated.current = true;
     }
   }, [user, setWidgets]);
 
-
   // 🛠️ Format the data for RGL
   const rglLayout = widgets.map(w => ({
     i: w.id,
@@ -54,10 +52,10 @@ export default function MyDashboard() {
     y: w.y,
     w: w.w,
     h: w.h,
-    isResizable: false // 🚫 The magic lock! No resizing allowed globally.
+    isResizable: false // The magic lock! No resizing allowed globally.
   }));
 
-  // 3. THE COMPONENT MAPPER
+  // 3. The component mapper
   const renderWidget = (widget) => {
     const registryEntry = WIDGET_REGISTRY[widget.type];
 
@@ -70,28 +68,21 @@ export default function MyDashboard() {
       return (
         <>
           <Box css={styles.header}>
-            <Text color="titleColor" fontWeight="semibold" fontSize="md" isTruncated>
+            <Text>
               {registryEntry.name}
             </Text>
 
-            {/* THE SETTINGS ELLIPSIS */}
+            {/* WIDGET SETTINGS BUTTON (ELLIPSES) */}
-            {SettingsUI ? (
+            {SettingsUI && (
               <Popover.Root positioning={{placement: "bottom-end"}}>
                 <Popover.Trigger asChild>
-                  <IconButton
+                  <IconButton size="xs" variant="ghost" aria-label="Widget Settings">
-                    size="xs"
-                    variant="ghost"
-                    color="gray.400"
-                    borderRadius="xl"
-                    _hover={{color: "white", bg: "gray.700"}}
-                    aria-label="Widget Settings"
-                  >
                     <MoreVertical size={16}/>
                   </IconButton>
                 </Popover.Trigger>
 
                 {/* NEW: The Positioner lifts the content out of the Flexbox flow */}
-                <Popover.Positioner zIndex={10}>
+                <Popover.Positioner zIndex={1}>
                   <Popover.Content css={popoverStyles.root}>
                     <Suspense fallback={<Spinner size="sm"/>}>
                       <SettingsUI
@@ -102,8 +93,6 @@ export default function MyDashboard() {
                   </Popover.Content>
                 </Popover.Positioner>
               </Popover.Root>
-            ) : (
-              <Box w="20px" h="20px"/>
             )}
           </Box>
 
@@ -133,30 +122,28 @@ export default function MyDashboard() {
         rowHeight={30}
         isDraggable={isEditing}     // Only allows dragging when Settings tools toggle this
         isResizable={false}         // Double lock-down
-        onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
         compactType="vertical"      // Auto-packs widgets to the top
+        onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
       >
-        {/* 3. 🎨 Paint the Widgets */}
+        {/* 🎨 Paint the Widgets */}
         {widgets.map(widget => (
           <Box
             key={widget.id}
             css={styles.root}
-            // 3. Grid-specific state overrides remain inline
+            // Grid-specific state overrides remain inline
             boxShadow={isEditing ? "outline" : styles.root.boxShadow}
             borderStyle={isEditing ? "dashed" : "solid"}
             borderWidth={isEditing ? "2px" : "1px"}
             borderColor={isEditing ? "orange.300" : styles.root.borderColor}
             cursor={isEditing ? "grab" : "default"}
-            position="relative" // 3. REQUIRED so the absolute button stays inside this box
+            position="relative" // REQUIRED so the absolute button stays inside this box
           >
-            {/* 4. THE DELETE BUTTON */}
+            {/* THE DELETE BUTTON */}
             {isEditing && (
               <IconButton
-                aria-label="Remove widget"
                 position="absolute"
                 top={2}
                 right={2}
-                size="xs"
                 bg="white"
                 color="black"
                 border="1px solid"
@@ -164,6 +151,8 @@ export default function MyDashboard() {
                 borderColor="gray.200"
                 _hover={{bg: "red.50", color: "red.500", borderColor: "red.200"}}
                 zIndex={2}
+                aria-label="Remove widget"
+                size="xs"
                 onClick={() => removeWidget(widget.id)}
                 onMouseDown={(e) => e.stopPropagation()} // 🚫 Stops RGL from grabbing the widget
                 onTouchStart={(e) => e.stopPropagation()} // 🚫 Same protection for mobile touches
@@ -172,7 +161,7 @@ export default function MyDashboard() {
               </IconButton>
             )}
 
-            {/* 4. SUSPENSE BOUNDARY wrapping the render function */}
+            {/* SUSPENSE BOUNDARY wrapping the render function */}
             <Suspense fallback={
               <Flex css={styles.body} align="center" justify="center">
                 <Spinner size="md" color="blue.400" thickness="3px"/>

client/src/theme.js

@@ -1,26 +1,52 @@
 import {defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe} from "@chakra-ui/react";
 
-// RECIPES
+// CONSOLIDATED ✔
-const headerRecipe = defineRecipe({
+const headerRecipe = defineSlotRecipe({
+  slots: ["root", "search_bar", "user_info"],
   base: {
-    bg: "{transparent}",
+    root: {
-    color: "text",
+      bg: "{transparent}",
-    width: "100%",
+      color: "text",
-    height: "100%",
+      width: "100%",
-    display: "flex",
+      height: "100%",
-    flexDirection: "row",
+      display: "flex",
-    justifyContent: "space-between",
+      flexDirection: "row",
-    alignItems: "center",
+      justifyContent: "space-between",
-  }
+      alignItems: "center",
+      pl: 3,
+    },
+    search_bar: {
+      width: "100%",
+      // input element in search bar component
+      "& input": {
+        width: "410px",
+      }
+    },
+    user_info: {
+      flexDirection: "row",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      gap: 3,
+      pr: 6,
+
+      // The Text component
+      "& p": {
+        fontWeight: "600",
+        fontSize: "md"     // equivalent to 16px
+      }
+    }
+  },
 });
 
+// CONSOLIDATED ✔
 const sidebarRecipe = defineSlotRecipe({
-  slots: ["root", "logo", "footer", "button_text","buttons", "collapse_button"],
+  slots: ["root", "logo", "logo_text", "footer", "button_text", "buttons", "collapse_button", "color_mode_button"],
   base: {
     root: {
       // 1. Semi-transparent backgrounds
       bg: {
-        base: "linear-gradient(to bottom right, #99000040 20%, #FF660040 60%, #EEEE0040 100%)",
+        // base: "linear-gradient(to bottom right, #99000040 20%, #FF660040 60%, #EEEE0040 100%)", // this is too pale for light mode imo
+        base: "linear-gradient(to bottom right, #97282880 20%, #EB7F3160 60%, #FCAD3840 100%)",    // colors from: https://colorhunt.co/palette/972828e45742eb7f31fcad38
         _dark: "linear-gradient(to bottom right, #9900003C 20%, #FF66003C 60%, #FFC0003C 100%)"
       },
 
@@ -47,7 +73,7 @@ const sidebarRecipe = defineSlotRecipe({
       justifyContent: "start",
       alignItems: "stretch",
       gap: 4,
-      transition: "width 0.4s ease",
+      transition: "width 0.5s ease",
 
       // CRITICAL: Adjust padding and overflow to allow the button to touch the right edge
       pl: 2, // Keep left padding
@@ -62,7 +88,7 @@ const sidebarRecipe = defineSlotRecipe({
       bg: "transparent",
 
       justifyContent: "flex-start",
-      transition: "background-color 0.4s ease, color 0.4s ease",
+      transition: "background-color 0.3s ease, color 0.3s ease",
 
       "& svg": {
         transition: "stroke-width 0.4s ease",
@@ -70,11 +96,13 @@ const sidebarRecipe = defineSlotRecipe({
       },
 
       _hover: {
-        bg: "rgba(255, 255, 255, 0.1)",
+        bg: "rgba(255, 255, 255, 0.2)",
         color: "{text}",
-        fontWeight: "semibold",
         "& svg": {
           strokeWidth: "3"
+        },
+        "& span": {
+          fontWeight: "700",
         }
       },
 
@@ -94,9 +122,11 @@ const sidebarRecipe = defineSlotRecipe({
         _hover: {
           bg: "{MainBackground}",
           color: "{textInverted}",
-          fontWeight: "normal",
           "& svg": {
             strokeWidth: "2" // Keeps the active icon at normal thickness on hover
+          },
+          "& span": {
+            fontWeight: "500",
           }
         },
 
@@ -131,98 +161,198 @@ const sidebarRecipe = defineSlotRecipe({
     },
     logo: {
       width: "100%",
-      height: "auto",
+      justifyContent: "flex-start",
-      overflow: "hidden",
+      ml: 2,
+      textStyle: "4xl",
       fontWeight: "bold",
+      overflow: "hidden",
       px: 0,
     },
+    logo_text: {
+      transition: "opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "clip",
+    },
     footer: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      width: "100%",
       mt: "auto",
-      display: "flex",
+      pl: 2,
-      justifyContent: "center",
-      alignItems: "center",
-      pb: 4,
       pr: 2,
-      transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
     },
     button_text: {
       transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
-      whiteSpace: "nowrap"
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "clip",
+      fontWeight: "500",
     },
     collapse_button: {
-      "& svg": { flexShrink: "0" },
+      "& svg": {flexShrink: "0"},
     },
+    color_mode_button: {
+      "& button": {
+        _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: {
       open: {
-        root: { width: "190px" },
+        root: {width: "190px"},
-        logo: { justifyContent: "flex-start", ml: 2, textStyle: "4xl" },
-        footer: { gap: 16, flexDirection: "row" },
         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"},
+        color_mode_button: {
+          "& button": {
+            position: "static",
+          },
+          // the css below is equivalent to chakra's 'truncate' prop
+          // it 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: {
-        root: { width: "71px" },
+        root: {width: "71px"},
-        logo: { justifyContent: "center", ml: -1, textStyle: "3xl" },
+        button_text: {opacity: 0, visibility: "hidden"},
-        footer: { gap: 2, flexDirection: "column-reverse"  },
+        logo_text: {opacity: 0, visibility: "hidden", transition: "opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease"},
-        button_text: {ml: 0, opacity: 0, visibility: "hidden"},
+        color_mode_button: {"& button": {position: "relative", bottom: "35px", right: "37px",}
+        },
       }
     }
   }
 });
 
+// CONSOLIDATED ✔
 const dashboardRecipe = defineRecipe({
   base: {
-    bg: "{MainBackground}"
+    height: "100vh",
-  }
+    width: "100vw",
-});
+    bg: "{MainBackground}",
 
-const canvasRecipe = defineRecipe({
+    // selects the third div in the grid layout (the canvas)
-  base: {
+    "& > div:nth-of-type(3)": {
-    bg: "{transparent}",
+      width: "100%",
-    zIndex: "-1",
-    color: "{text}"
-  }
-});
-
-const widgetRecipe = defineSlotRecipe({
-  slots: ["root", "header", "canvas"],
-  base: {
-    root: {
-      flexDirection: "column",
-      gap: "1",
-      position: "relative",
-      bg: "base100",
-      borderRadius: "md",
-      p: "1",
-      paddingBottom: "2",
-      border: "1px solid",
-      borderColor: "{base300}",
-      textAlign: "center",
-      height: "100%",
-      position: "fixed"
-    },
-    header: {
-      flexShrink: "0",
-      bg: "{base300}",
-      color: "{text}",
-      cursor: "move",
-      borderRadius: "sm",
-      whiteSpace: "nowrap",
-      textAlign: "left",
-      pl: "2"
-    },
-    canvas: {
-      flex: "1 1 auto",
-      bg: "transparent",
-      color: "{text}",
-      cursor: "default",
-      borderRadius: "md",
       overflow: "auto",
     }
   }
 });
 
+// CONSOLIDATED ✔
+const homeRecipe = defineSlotRecipe({
+  slots: ["root", "header", "body"],
+  base: {
+    root: {
+      flexDirection: "column",
+      height: "100%",
+      width: "100%",
+    },
+    header: {
+      // Flex contianer as a header that contains all the tabs
+      width: "100%",
+      align: "center",
+      justify: "space-between",
+      top: "0",
+      p: 5,
+      position: "sticky",
+      zIndex: "dropdown",
+      bg: "transparent",
+
+      // THE TABS
+      // 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
+        }
+      }
+    },
+    body: {
+      flex: 1,
+      overflow: "auto",
+    }
+  },
+})
+
+// const canvasRecipe = defineRecipe({
+//   base: {
+//     bg: "{transparent}",
+//     zIndex: "-1",
+//     color: "{text}"
+//   }
+// });
+
+// const widgetRecipe = defineSlotRecipe({
+//   slots: ["root", "header", "canvas"],
+//   base: {
+//     root: {
+//       flexDirection: "column",
+//       gap: "1",
+//       position: "relative",
+//       bg: "base100",
+//       borderRadius: "md",
+//       p: "1",
+//       paddingBottom: "2",
+//       border: "1px solid",
+//       borderColor: "{base300}",
+//       textAlign: "center",
+//       height: "100%",
+//       // position: "fixed"
+//     },
+//     header: {
+//       flexShrink: "0",
+//       bg: "{base300}",
+//       color: "{text}",
+//       cursor: "move",
+//       borderRadius: "sm",
+//       whiteSpace: "nowrap",
+//       textAlign: "left",
+//       pl: "2"
+//     },
+//     canvas: {
+//       flex: "1 1 auto",
+//       bg: "transparent",
+//       color: "{text}",
+//       cursor: "default",
+//       borderRadius: "md",
+//       overflow: "auto",
+//     }
+//   }
+// });
+
+// USED IN COMPONENTS:
+// * Settings Button
+// * My Dashboard
 const glassPanelRecipe = defineSlotRecipe({
   slots: ["root", "header", "body"],
 
@@ -246,26 +376,216 @@ const glassPanelRecipe = defineSlotRecipe({
   variants: {
     layout: {
       widget: {
-        root: {width: "100%", height: "100%", borderRadius: "3xl"},
+        root: {
-        header: {display: "flex", justifyContent: "space-between", alignItems: "center", px: 3, pt: 2, pb: 0},
+          width: "100%",
-        body: {flex: "1", overflow: "hidden", position: "relative", px: 1, pb: 1, pt: 0}
+          height: "100%",
+          borderRadius: "3xl",
+        },
+        header: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          px: 3,
+          pt: 2,
+          pb: 0,
+
+          "& > p": {
+            color: "titleColor",
+            fontWeight: "500",
+            fontSize: "16px",
+
+            // the following three specifications are equivalent to Chakra's 'truncate' prop
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "clip",
+          },
+
+          "& > button": {
+            borderRadius: "xl",
+
+            _hover: {
+              color: "white",
+              bg: "gray.500",
+            },
+          }
+        },
+        body: {
+          flex: "1",
+          overflow: "hidden",
+          position: "relative",
+          px: 1,
+          pb: 1,
+          pt: 0
+        }
       },
       dropdown: {
-        root: {borderRadius: "xl", p: 1}
+        root: {
+          borderRadius: "xl",
+          p: 1
+        }
         // (Header and body slots are ignored here because dropdowns don't use them)
       },
       popover: {
         root: {
           borderRadius: "2xl",
-          p: 4,
+          p: 0,
           boxShadow: "xl",
           minW: "240px",
+          maxW: "60%",
+          minH: "80%",
+          overflow: "hidden",
           // 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)",
           WebkitBackdropFilter: "blur(15px)",
+
+
+          // IMPORTANT: everything below is specific to the widget menu found in the settingsButton component
+          // dialog header
+          "& > div.chakra-dialog__header": {
+            bg: "transparent",
+            color: {
+              base: "gray.800",
+              _dark: "white"
+            },
+            py: 4,
+            borderColor: {
+              base: "gray.200",
+              _dark: "whiteAlpha.200"
+            },
+
+            // title
+            "& h2": {
+              fontSize: "xl",
+              fontWeight: "bold"
+            },
+          },
+
+          // dialog body
+          "& > div.chakra-dialog__body": {
+            p: 0,
+
+            // box container of the widget category menu
+            "& div.chakra-tabs__root > div:first-child": {
+              position: "relative",
+              display: "flex",
+              maxW: "100%",
+              mx: 5,
+              mt: 4,
+              mb: 6
+            },
+
+            // the horizontal widget categories menu
+            "& div.chakra-tabs__list": {
+              bg: {
+                base: "rgba(0, 0, 0, 0.04)",
+                _dark: "rgba(255, 255, 255, 0.05)"
+              },
+              p: 1,
+              borderRadius: "full",
+              display: "flex",
+              flexWrap: "nowrap",
+              overflowX: "auto",
+              maxW: "100%",
+              border: "1px solid",
+              borderColor: {
+                base: "blackAlpha.50",
+                _dark: "whiteAlpha.100"
+              },
+              scrollbarWidth: "none",
+              "&::-webkit-scrollbar": {display: "none"},
+
+              // the pill shaped menu options
+              "& button.chakra-tabs__trigger": {
+                px: 5,
+                py: 2,
+                borderRadius: "full",
+                whiteSpace: "nowrap",
+                flexShrink: 0,
+                color: {
+                  base: "gray.500",
+                  _dark: "gray.400"
+                },
+                fontWeight: "medium",
+                transition: "background-color 0.2s, color 0.2s, box-shadow 0.2s",
+                _hover: {
+                  color: {
+                    base: "gray.800",
+                    _dark: "gray.200"
+                  },
+                },
+                _selected: {
+                  bg: {
+                    base: "white",
+                    _dark: "rgba(255, 255, 255, 0.12)"
+                  },
+                  color: {
+                    base: "blue.600",
+                    _dark: "blue.200"
+                  },
+                  boxShadow: "sm",
+                  fontWeight: "bold",
+                }
+              }
+            },
+
+            // base styling applied to both chevron navigators
+            "& div.chakra-tabs__root > div:first-child div:has(svg)": {
+              position: "absolute",
+              top: "0",
+              bottom: "0",
+              w: "50px",
+              alignItems: "center",
+              justifyContent: "center",
+              zIndex: 2,
+              cursor: "pointer",
+              bg: {
+                base: "rgba(255, 255, 255, 0.7)",
+                _dark: "rgba(30, 30, 30, 0.8)"
+              },
+              color: {
+                base: "gray.600",
+                _dark: "gray.300"
+              },
+              backdropFilter: "blur(1px)",
+              transition: "background-color 0.2s",
+
+              _hover: {
+                color: {
+                  base: "blue.500",
+                  _dark: "blue.300"
+                },
+                bg: {
+                  base: "rgba(255, 255, 255, 0.9)",
+                  _dark: "rgba(40, 40, 40, 0.95)"
+                },
+              },
+
+              "&:has(.lucide-chevron-left)": {
+                left: 0,
+                borderTopLeftRadius: "full",
+                borderBottomLeftRadius: "full",
+                // Bites a transparent circle out of the flat right side!
+                WebkitMaskImage: "radial-gradient(circle at 100% 50%, transparent 30px, black 19px)",
+                maskImage: "radial-gradient(circle at 100% 50%, transparent 30px, black 35px)",
+              },
+
+              "&:has(.lucide-chevron-right)": {
+                right: 0,
+                borderTopRightRadius: "full",
+                borderBottomRightRadius: "full",
+                // THE MAGIC: Bites a transparent circle out of the flat left side!
+                WebkitMaskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 19px)",
+                maskImage: "radial-gradient(circle at 0% 50%, transparent 30px, black 35px)",
+              }
+            }
+
+          }
         }
       }
     },
@@ -305,7 +625,7 @@ const glassTabRecipe = defineRecipe({
     overflow: "hidden",
     whiteSpace: "nowrap",
     textDecoration: "none",
-    fontWeight: "bold",
+    fontWeight: "500",
     color: "fg.muted",
 
     // --- THE GLASS EFFECT (Inactive) ---
@@ -423,16 +743,17 @@ const config = defineConfig({
   theme: {
     semanticTokens: {
       colors: {
-        base100: {value: {base: "#f6f9faff", _dark: "#1617199e"}},
+        // base100: {value: {base: "#f6f9faff", _dark: "#1617199e"}},
-        base200: {value: {base: "#e6ecf1ff", _dark: "#242424"}},
+        // base200: {value: {base: "#e6ecf1ff", _dark: "#242424"}},
-        base300: {value: {base: "#d3dae4ff", _dark: "#0a0b0bff"}},
+        // base300: {value: {base: "#d3dae4ff", _dark: "#0a0b0bff"}},
-        primary: {value: {base: "#2B98F8", _dark: "#2B98F8"}},
+        // primary: {value: {base: "#2B98F8", _dark: "#2B98F8"}},
-        primaryLt: {value: {base: "#98cdffff", _dark: "#98cdffff"}},
+        // primaryLt: {value: {base: "#98cdffff", _dark: "#98cdffff"}},
-        secondaryBG: {value: {base: "#EDF1F1", _dark: "#121212"}},
+        // secondaryBG: {value: {base: "#EDF1F1", _dark: "#121212"}},
-        border: {value: {base: "#000000", _dark: "#cbcbcb84"}},
+        // border: {value: {base: "#000000", _dark: "#cbcbcb84"}},
         text: {value: {base: "#000000", _dark: "#FFFFFF"}},
         textInverted: {value: {base: "#000000", _dark: "#FFFFFF"}},
-        icon: {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)"}},
         MainBackground: {value: {base: "#F9F9F9", _dark: "#141414"}},
         titleColor: {value: {base: "gray.800", _dark: "#FFFFFF"}},
@@ -446,17 +767,20 @@ const config = defineConfig({
       },
     },
     recipes: {
-      header: headerRecipe,
       dashboard: dashboardRecipe,
-      canvas: canvasRecipe,
+      // canvas: canvasRecipe,
       glassTab: glassTabRecipe
     },
     slotRecipes: {
+      header: headerRecipe,
       sidebar: sidebarRecipe,
-      widget: widgetRecipe,
+      // widget: widgetRecipe,
       glassPanel: glassPanelRecipe,
+      home: homeRecipe,
     },
   },
 });
 
+
+// Define semantic tokens and export recipes
 export const system = createSystem(defaultConfig, config);