Add an icon-based toggle. Fix alignment of items in header. Keeping unused 'ColorModeSwitch' component for now.

website/src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { Button, Container } from "@chakra-ui/react";
+import { Button, Container, Box } from "@chakra-ui/react";
 import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
@@ -8,7 +8,7 @@ import { FaUser } from "react-icons/fa";
 
 import { NavLinks } from "./NavLinks";
 import { UserMenu } from "./UserMenu";
-import ColorModeSwitch from "../UI/ColorModeSwitch";
+import { ColorModeIconToggle } from "../UI/ColorModeIconToggle";
 
 function MenuIcon(props) {
   return (
@@ -57,7 +57,8 @@ export function Header(props) {
   const borderClass = props.transparent ? "" : props.borderClass ?? "border-b border-gray-100";
   return (
     <nav>
-      <Container className={`flex justify-evenly py-8 px-10 ${borderClass}`}>
+      <Container>
+      <Box className={`flex mx-auto max-w-7xl justify-between py-8 px-10 ${borderClass}`}>
         <div className="relative z-10 flex items-center gap-16">
           <Link href="/" aria-label="Home" className="flex items-center">
             <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />
@@ -114,8 +115,9 @@ export function Header(props) {
           </Popover>
           <AccountButton />
           <UserMenu />
-          <ColorModeSwitch />
+          <ColorModeIconToggle className="ml-5"/>
         </div>
+      </Box>
       </Container>
     </nav>
   );

website/src/components/UI/ColorModeIconToggle.tsx

@@ -0,0 +1,26 @@
+import { useColorMode } from "@chakra-ui/react";
+
+import { CiDark } from 'react-icons/ci';
+import { CiLight } from 'react-icons/ci';
+
+
+export function ColorModeIconToggle(props) {
+  const { colorMode, toggleColorMode } = useColorMode();
+  const propsClassName = props.className ?? '';
+
+  return (
+    <button
+      type="button"
+      className={`flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5 ${propsClassName}`}
+      aria-label="Toggle dark mode"
+      onClick={toggleColorMode}
+    >
+      {colorMode === 'light' ? (
+          <CiDark className="h-5 w-5 stroke-zinc-900 dark:hidden"/>
+        ) : (
+          <CiLight className="h-5 w-5 stroke-white" />
+        )
+      }
+    </button>
+  )
+}

website/src/components/UI/ColorModeSwitch.tsx

@@ -13,4 +13,4 @@ const ColorModeSwitch = () => {
   );
 };
 
-export default ColorModeSwitch;
+export default ColorModeSwitch;