Merge pull request #788 from rsandb/Convert-Header-to-Chakra-Components

convert header to chakra components

website/src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Text, 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";
@@ -13,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>
   );
 }
@@ -25,30 +27,25 @@ export function Header(props) {
   const { data: session } = useSession();
   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 ${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 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" />
-            <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>
   );

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