updated header so all styling is now in the designated themes file

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 styles = recipe();
+  const recipe = useSlotRecipe({key: "header"});
+  const styles = recipe();
 
-    const { user } = useAuthStore();
-    console.log(user);
-    const displayName = user ? (user.firstName || user.username) : "Loading...";
-    const avatarname = user ? (user.fullName || user.username) : "Loading...";
+  const {user} = useAuthStore();
+  console.log(user);
+  const displayName = user ? (user.firstName || user.username) : "Loading...";
+  const avatarname = user ? (user.fullName || user.username) : "Loading...";
 
-    const displayEmail = user?.email || "LDAP User";
+  const displayEmail = user?.email || "LDAP User";
 
-    return (
-        <Flex css={styles} >
-            <SearchBar placeholder="Enter a volcano to search" size="sm" width="410px" />
-            {/* User Profile Section */}
-            <Flex align="center" gap={3} pr={6}>
-                <Text fontWeight="bold" textStyle="md" >{displayName}</Text>
-                <UserAvatarMenu
-                    name={avatarname}
-                    // avatar={user.avatar}
-                />
-            </Flex>
-        </Flex>
-    );
+  return (
+    <Flex css={styles.root}>
+      <Flex css={styles.search_bar}>
+       <SearchBar placeholder="Enter a volcano to search"/>
+      </Flex>
+
+      {/* User Profile Section */}
+      <Flex css={styles.user_info}>
+        <Text>{displayName}</Text>
+        <UserAvatarMenu
+          name={avatarname}
+          // avatar={user.avatar}
+        />
+      </Flex>
+    </Flex>
+  );
 }