From 11a8f47f41af4cf3a7b15925159b5a9012cabf8f Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Mon, 16 Jan 2023 20:15:41 -0600
Subject: [PATCH 1/6] convert header to chakra components

also added z-index changes
---
 website/src/components/Header/Header.tsx   | 24 ++++++++++++----------
 website/src/components/Header/UserMenu.tsx |  2 +-
 website/src/components/Hero.tsx            |  2 +-
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx
index d0dc8a06..d779b575 100644
--- a/website/src/components/Header/Header.tsx
+++ b/website/src/components/Header/Header.tsx
@@ -1,9 +1,10 @@
-import { Box, Button, Text, useColorMode } from "@chakra-ui/react";
+import { Box, Divider, Button, Text, Flex, useColorMode } from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
 import { Flags } from "react-feature-flags";
 import { FaUser } from "react-icons/fa";
+import { colors } from "src/styles/Theme/colors";
 
 import { UserMenu } from "./UserMenu";
 
@@ -32,23 +33,24 @@ export function Header(props) {
     ? "border-b border-gray-400"
     : "border-b border-zinc-800";
   return (
-    <nav className={`oa-basic-theme ${borderClass}`}>
-      <Box className="relative z-10 flex justify-between px-4 py-4">
-        <div className="relative z-10 flex items-center gap-10">
-          <Link href={homeURL} aria-label="Home" className="flex items-center">
+    <nav className="oa-basic-theme">
+      <Box position="relative" display="flex" z="10" justifyContent="space-between" p="4">
+        <Link href="/" aria-label="Home">
+          <Flex alignItems="center">
             <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />
-            <Text fontFamily="inter" fontSize="2xl" fontWeight="bold" className="ml-3">
+            <Text fontFamily="inter" fontSize="2xl" fontWeight="bold" ml="3">
               Open Assistant
             </Text>
-          </Link>
-        </div>
-        <div className="flex items-center gap-4">
+          </Flex>
+        </Link>
+
+        <Flex alignItems="center" gap="4">
           <Flags authorizedFlags={["flagTest"]}>
-            <div>FlagTest</div>
+            <Text>FlagTest</Text>
           </Flags>
           <AccountButton />
           <UserMenu />
-        </div>
+        </Flex>
       </Box>
     </nav>
   );
diff --git a/website/src/components/Header/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx
index 7a470464..6697f019 100644
--- a/website/src/components/Header/UserMenu.tsx
+++ b/website/src/components/Header/UserMenu.tsx
@@ -69,7 +69,7 @@ export function UserMenu() {
   }
 
   return (
-    <Menu>
+    <Menu z="20">
       <MenuButton border="solid" borderRadius="full" borderWidth="thin" borderColor={borderColor}>
         <Box display="flex" alignItems="center" gap="3" p="1" paddingRight={[1, 1, 1, 6, 6]}>
           <Avatar size="sm" bgImage={session.user.image}></Avatar>
diff --git a/website/src/components/Hero.tsx b/website/src/components/Hero.tsx
index 1e6b296f..65c80a42 100644
--- a/website/src/components/Hero.tsx
+++ b/website/src/components/Hero.tsx
@@ -65,7 +65,7 @@ export function Hero() {
     <div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
       <Container className="">
         <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
-          <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
+          <div className="relative mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
             <h1 className="text-5xl mb-6 font-bold tracking-tight">Open Assistant</h1>
             <p
               className={`bg-gradient-to-r ${fancyTextGradientClasses} mt-8 text-3xl inline bg-clip-text font-display tracking-tight text-transparent`}

From ed4d1f255128287ce695a6160456db279213844c Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Mon, 16 Jan 2023 20:23:21 -0600
Subject: [PATCH 2/6] Update Header.tsx

---
 website/src/components/Header/Header.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx
index d779b575..02e8234f 100644
--- a/website/src/components/Header/Header.tsx
+++ b/website/src/components/Header/Header.tsx
@@ -35,7 +35,7 @@ export function Header(props) {
   return (
     <nav className="oa-basic-theme">
       <Box position="relative" display="flex" z="10" justifyContent="space-between" p="4">
-        <Link href="/" aria-label="Home">
+        <Link href={homeURL} aria-label="Home">
           <Flex alignItems="center">
             <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />
             <Text fontFamily="inter" fontSize="2xl" fontWeight="bold" ml="3">
@@ -52,6 +52,7 @@ export function Header(props) {
           <UserMenu />
         </Flex>
       </Box>
+      <Divider />
     </nav>
   );
 }

From 5f134d44a5a4d04fc8dea8824b588dedde5d2bcd Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Mon, 16 Jan 2023 20:23:43 -0600
Subject: [PATCH 3/6] Update Header.tsx

---
 website/src/components/Header/Header.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx
index 02e8234f..c7ca5996 100644
--- a/website/src/components/Header/Header.tsx
+++ b/website/src/components/Header/Header.tsx
@@ -27,11 +27,7 @@ export function Header(props) {
   const homeURL = session ? "/dashboard" : "/";
 
   const { colorMode } = useColorMode();
-  const borderClass = props.transparent
-    ? ""
-    : colorMode === "light"
-    ? "border-b border-gray-400"
-    : "border-b border-zinc-800";
+
   return (
     <nav className="oa-basic-theme">
       <Box position="relative" display="flex" z="10" justifyContent="space-between" p="4">

From 964dc1f2c49b167414359edf2fc69da00e2bb9c7 Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Mon, 16 Jan 2023 20:24:09 -0600
Subject: [PATCH 4/6] remove divider

---
 website/src/components/Header/Header.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx
index c7ca5996..b18af517 100644
--- a/website/src/components/Header/Header.tsx
+++ b/website/src/components/Header/Header.tsx
@@ -48,7 +48,6 @@ export function Header(props) {
           <UserMenu />
         </Flex>
       </Box>
-      <Divider />
     </nav>
   );
 }

From 9986e6f4d8947697f7a12ff9227b4f9aba360588 Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Mon, 16 Jan 2023 20:29:36 -0600
Subject: [PATCH 5/6] removed unused components

i guess prettier decided to stop working
---
 website/src/components/Header/Header.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx
index b18af517..de5abec2 100644
--- a/website/src/components/Header/Header.tsx
+++ b/website/src/components/Header/Header.tsx
@@ -1,10 +1,9 @@
-import { Box, Divider, Button, Text, Flex, useColorMode } from "@chakra-ui/react";
+import { Box, Button, Text, Flex } from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
 import { Flags } from "react-feature-flags";
 import { FaUser } from "react-icons/fa";
-import { colors } from "src/styles/Theme/colors";
 
 import { UserMenu } from "./UserMenu";
 
@@ -14,10 +13,12 @@ function AccountButton() {
     return;
   }
   return (
-    <Link href="/auth/signin" aria-label="Home" className="flex items-center">
-      <Button variant="outline" leftIcon={<FaUser />}>
-        Sign in
-      </Button>
+    <Link href="/auth/signin" aria-label="Home">
+      <Flex alignItems="center">
+        <Button variant="outline" leftIcon={<FaUser />}>
+          Sign in
+        </Button>
+      </Flex>
     </Link>
   );
 }
@@ -26,11 +27,9 @@ export function Header(props) {
   const { data: session } = useSession();
   const homeURL = session ? "/dashboard" : "/";
 
-  const { colorMode } = useColorMode();
-
   return (
     <nav className="oa-basic-theme">
-      <Box position="relative" display="flex" z="10" justifyContent="space-between" p="4">
+      <Box display="flex" justifyContent="space-between" p="4">
         <Link href={homeURL} aria-label="Home">
           <Flex alignItems="center">
             <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />

From 57878bc12364757a766efa11aa8d82af76f9665a Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Mon, 16 Jan 2023 20:31:23 -0600
Subject: [PATCH 6/6] Update UserMenu.tsx

---
 website/src/components/Header/UserMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/Header/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx
index 6697f019..7a470464 100644
--- a/website/src/components/Header/UserMenu.tsx
+++ b/website/src/components/Header/UserMenu.tsx
@@ -69,7 +69,7 @@ export function UserMenu() {
   }
 
   return (
-    <Menu z="20">
+    <Menu>
       <MenuButton border="solid" borderRadius="full" borderWidth="thin" borderColor={borderColor}>
         <Box display="flex" alignItems="center" gap="3" p="1" paddingRight={[1, 1, 1, 6, 6]}>
           <Avatar size="sm" bgImage={session.user.image}></Avatar>