UserMenu darkMode refactor

website/src/components/Header/UserMenu.tsx

@@ -4,9 +4,11 @@ import Image from "next/image";
 import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { FaCog, FaSignOutAlt, FaGithub } from "react-icons/fa";
+import { Box, useColorModeValue } from "@chakra-ui/react";
 
 export function UserMenu() {
   const { data: session } = useSession();
+  const backgroundColor = useColorModeValue("#FFFFFF", "#000000");
 
   if (!session) {
     return <></>;
@@ -27,7 +29,7 @@ export function UserMenu() {
         {({ open }) => (
           <>
             <Popover.Button aria-label="Toggle Account Options" className="flex">
-              <div className="flex items-center gap-4 p-1 lg:pr-6 rounded-full bg-white border border-slate-300/70 hover:bg-gray-200/50 transition-colors duration-300">
+              <div className="flex items-center gap-4 p-1 lg:pr-6 rounded-full border border-slate-300/70 hover:bg-gray-200/50 transition-colors duration-300">
                 <Image
                   src="/images/temp-avatars/av1.jpg"
                   alt="Profile Picture"
@@ -40,7 +42,7 @@ export function UserMenu() {
             </Popover.Button>
             <AnimatePresence initial={false}>
               {open && (
-                <>
+                <Box backgroundColor={backgroundColor}>
                   <Popover.Panel
                     static
                     as={motion.div}
@@ -51,9 +53,9 @@ export function UserMenu() {
                       y: -10,
                       transition: { duration: 0.2 },
                     }}
-                    className="absolute right-0 mt-3 w-screen max-w-xs p-4 rounded-md bg-white border border-slate-300/70"
+                    className="absolute right-0 mt-3 w-screen bg-inherit max-w-xs p-4 rounded-md border border-slate-300/70"
                   >
-                    <div className="flex flex-col gap-1">
+                    <Box className="flex flex-col gap-1">
                       {accountOptions.map((item) => (
                         <a
                           key={item.name}
@@ -80,9 +82,9 @@ export function UserMenu() {
                           <p>Sign Out</p>
                         </div>
                       </a>
-                    </div>
+                    </Box>
                   </Popover.Panel>
-                </>
+                </Box>
               )}
             </AnimatePresence>
           </>