Refactor still working on UI changes

client/src/components/layout/Header.jsx

@@ -2,6 +2,7 @@ import { useRecipe, Button, Stack, 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";
 
 // Import the asset properly so Vite can bundle it for any server
 // import defaultAvatar from "@/assets/user_profile.svg";
@@ -13,7 +14,8 @@ export default function Header() {
 
     const { user } = useAuthStore();
     console.log(user);
-    const displayName = user ? (user.fullName || user.username) : "Loading...";
+    const displayName = user ? (user.firstName || user.username) : "Loading...";
+    const avatarname = user ? (user.fullName || user.username) : "Loading...";
 
     const displayEmail = user?.email || "LDAP User";
 
@@ -23,15 +25,17 @@ export default function Header() {
             {/*<Button as={NavLink} to="/home" color="color" variant="plain" textStyle="5xl" fontWeight="bold">*/}
             {/*    VDAP*/}
             {/*</Button>*/}
+            <SearchBar placeholder="Enter a volcano to search" size="sm" width="410px" />
 
             {/* User Profile Section */}
             <Flex align="center" gap={3} pr={6}>
-                <Stack gap="0" textAlign="right" cursor="default">
-                    <Text color="color" fontWeight="bold" textStyle="lg">{displayName}</Text>
-                    <Text color="fg.muted" textStyle="sm">{displayEmail}</Text>
-                </Stack>
+                <Text color="color" fontWeight="bold" textStyle="md" >{displayName}</Text>
+                {/*<Stack gap="0" textAlign="right" cursor="default">*/}
+                {/*    <Text color="color" fontWeight="bold" textStyle="md" width="100%" >{displayName}</Text>*/}
+                {/*    <Text color="fg.muted" textStyle="sm">{displayEmail}</Text>*/}
+                {/*</Stack>*/}
                 <UserAvatarMenu
-                    name={displayName}
+                    name={avatarname}
                     // avatar={user.avatar}
                 />
             </Flex>

client/src/components/layout/Sidebar.jsx

@@ -40,15 +40,15 @@ export default function Sidebar() {
             to="/home"
             color="color"
             variant="plain"
-            textStyle={isOpen ? "5xl" : "4xl"} // Scale down slightly when closed
             fontWeight="bold"
             height="auto" // Prevents the large text from squashing vertically
             overflow="hidden"
             px={0}
-            justifyContent={isOpen ? "flex-start" : "center"} // Center the 'V' when collapsed
+            justifyContent={isOpen ? "center" : "center"} // Center the 'V' when collapsed
             ml={isOpen ? 3 : 0} // Align with other buttons when open
+            textStyle={isOpen ? "4xl" : "3xl"} // Scale down slightly when closed
         >
-          {isOpen ? "VDAP" : "V"}
+          {isOpen ? "🌋 VDAP" : "🌋"}
         </Button>
 
         {/* Menu Trigger */}

client/src/pages/home/Home.jsx

@@ -28,7 +28,7 @@ export default function Home() {
       <Flex direction="column" height="100%" width="100%">
 
         {/* 2. 🛠️ SUB HEADER: Matches your original padding and background */}
-        <Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="base200" p={5} align="center" justify="space-between" width="100%">
+        <Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="transparent" p={5} align="center" justify="space-between" width="100%">
 
           {/* TABS CONTAINER - Replicates the Tabs.List line container */}
           <Flex borderBottom="1px solid" borderColor="fg.muted" gap={2}>
@@ -48,7 +48,7 @@ export default function Home() {
                   <SettingsButton />
                 </>
             ) : (
-                <SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
+                <SettingsButton />
             )}
           </HStack>
 

client/src/theme.js

@@ -3,12 +3,10 @@ import { defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineReci
 // RECIPES
 const headerRecipe = defineRecipe({
   base: {
-    bg: "{base200}",
+    bg: "{transparent}",
     color: "text",
     width: "100%",
     height: "100%",
-    borderBottom: "1px solid",
-    borderBottomColor:"{border}",
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
@@ -18,13 +16,13 @@ const headerRecipe = defineRecipe({
 
 const dashboardRecipe = defineRecipe({
   base: {
-    bg: "{base200}"
+    bg: "{testBackground}"
   }
 });
 
 const canvasRecipe = defineRecipe({
   base: {
-    bg: "{base200}",
+    bg: "{transparent}",
     zIndex: "-1",
     color: "{text}"
   }
@@ -34,22 +32,35 @@ const sidebarRecipe = defineSlotRecipe({
   slots: ["root", "close_button", "buttons", "dark_mode_button"],
   base: {
     root: {
-      bg: "{base200}",
-      borderRight: "1px solid",
-      borderColor: "{border}", 
+      // 1. Semi-transparent backgrounds
+      bg: { base: "linear-gradient(to bottom right, #BBBBBB4C, #FFFFFF4C)", _dark: "rgba(20, 20, 20, 0.4)" },
+
+      // 2. The glass blur effect
+      backdropFilter: "blur(12px)",
+      WebkitBackdropFilter: "blur(12px)", // For Safari compatibility
+
+      // 3. Subtle semi-transparent borders to catch the light
+      border: "1px solid",
+      borderColor: { base: "rgba(255, 255, 255, 0.3)", _dark: "rgba(255, 255, 255, 0.1)" },
+
+      // Your existing layout properties
+      borderRadius: "2xl",
+      boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)", // A softer shadow helps the glass pop
       width: "100%",
-      height: "100%",
+      height: "calc(100% - 16px)",
+      margin: "8px",
       display: "flex",
       flexDirection: "column",
-      justifyContent: "start", 
+      justifyContent: "start",
       alignItems: "start",
       gap: 2,
       p: 2,
+      zIndex: 10,
     },
     buttons: {
       bg: "transparent",
-      _hover: {bg: "{primaryLt}", color: "{textInverted}"},
-      "&.active": {bg: "{primary}", color: "{textInverted}"},
+      _hover: {bg: "{testButton}", color: "{textInverted}"},
+      "&.active": {bg: "{testButton}", color: "{textInverted}"},
       fontSize: "xl",
       color: {base: "{text}"},
       variant: "ghost",
@@ -179,8 +190,12 @@ const config = defineConfig({
         secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
         border: {value: {base: "#000000", _dark: "#cbcbcb84"}},
         text: {value: {base: "#000000", _dark: "lightgrey"}},
-        textInverted: {value: "white"},
+        textInverted: {value: "#000000"},
         icon: {value: {base: "#000000", _dark: "lightgrey"}},
+        testBackground: { value: {base: "linear-gradient(to bottom right, #BBBBBB, #FFFFFF)", _dark: "#191613"} },
+        testSidebar: { value: {base: "#FBFBFB", _dark: "#272421"} },
+        testButton: { value: {base: "#FFFFFF", _dark: "#C09754"} },
+
       },
     },
     tokens: {