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] 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`}