From 9fbf22bc32c4a751ed54b011ef4e05dc4b5f58a8 Mon Sep 17 00:00:00 2001 From: Christopher Hight Date: Wed, 22 Jul 2026 14:58:59 -0700 Subject: [PATCH] Refactor still working on UI changes --- client/src/components/layout/Header.jsx | 16 +++++---- client/src/components/layout/Sidebar.jsx | 6 ++-- client/src/pages/home/Home.jsx | 4 +-- client/src/theme.js | 41 ++++++++++++++++-------- 4 files changed, 43 insertions(+), 24 deletions(-) diff --git a/client/src/components/layout/Header.jsx b/client/src/components/layout/Header.jsx index 42077af..5259c35 100644 --- a/client/src/components/layout/Header.jsx +++ b/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() { {/**/} + {/* User Profile Section */} - - {displayName} - {displayEmail} - + {displayName} + {/**/} + {/* {displayName}*/} + {/* {displayEmail}*/} + {/**/} diff --git a/client/src/components/layout/Sidebar.jsx b/client/src/components/layout/Sidebar.jsx index b1f1c8c..4a513af 100644 --- a/client/src/components/layout/Sidebar.jsx +++ b/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" : "🌋"} {/* Menu Trigger */} diff --git a/client/src/pages/home/Home.jsx b/client/src/pages/home/Home.jsx index ebbc3d1..fab657a 100644 --- a/client/src/pages/home/Home.jsx +++ b/client/src/pages/home/Home.jsx @@ -28,7 +28,7 @@ export default function Home() { {/* 2. 🛠️ SUB HEADER: Matches your original padding and background */} - + {/* TABS CONTAINER - Replicates the Tabs.List line container */} @@ -48,7 +48,7 @@ export default function Home() { ) : ( - + )} diff --git a/client/src/theme.js b/client/src/theme.js index c0200ba..a565b37 100644 --- a/client/src/theme.js +++ b/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: {