From 05f3ce5d20c6b6eb714e032ba522713e9fa1e2aa Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Fri, 13 Jan 2023 20:34:52 -0600
Subject: [PATCH] Update UserMenu to use Chakra components and include score

---
 website/src/components/Header/UserMenu.tsx | 124 ++++++---------------
 1 file changed, 36 insertions(+), 88 deletions(-)

diff --git a/website/src/components/Header/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx
index b99d4a1f..9f225bb6 100644
--- a/website/src/components/Header/UserMenu.tsx
+++ b/website/src/components/Header/UserMenu.tsx
@@ -1,16 +1,10 @@
-import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react";
-import { Popover } from "@headlessui/react";
-import { AnimatePresence, motion } from "framer-motion";
-import Image from "next/image";
-import NextLink from "next/link";
+import { Avatar, Box, Link, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Text } from "@chakra-ui/react";
 import { signOut, useSession } from "next-auth/react";
 import React from "react";
 import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi";
 
 export function UserMenu() {
   const { data: session } = useSession();
-  const backgroundColor = useColorModeValue("white", "gray.700");
-  const accentColor = useColorModeValue("gray.300", "gray.600");
 
   if (!session) {
     return <></>;
@@ -47,87 +41,41 @@ export function UserMenu() {
     }
 
     return (
-      <Popover className="relative">
-        {({ open }) => (
-          <>
-            <Popover.Button aria-label="Toggle Account Options" className="flex">
-              <Box
-                borderWidth="1px"
-                borderColor={accentColor}
-                className="flex items-center gap-4 p-1 lg:pr-6 rounded-full transition-colors duration-300"
-              >
-                <Image
-                  src={session.user.image || "/images/temp-avatars/av1.jpg"}
-                  alt="Profile Picture"
-                  width="36"
-                  height="36"
-                  className="rounded-full"
-                ></Image>
-                <p data-cy="username" className="hidden lg:flex">
-                  {session.user.name || session.user.email}
-                </p>
-              </Box>
-            </Popover.Button>
-            <AnimatePresence initial={false}>
-              {open && (
-                <Box backgroundColor={backgroundColor}>
-                  <Popover.Panel
-                    static
-                    as={motion.div}
-                    initial={{ opacity: 0, y: -10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{
-                      opacity: 0,
-                      y: -10,
-                      transition: { duration: 0.2 },
-                    }}
-                  >
-                    <Box
-                      bg={backgroundColor}
-                      borderRadius="xl"
-                      shadow="base"
-                      className="absolute right-0 mt-3 w-screen max-w-xs p-4"
-                    >
-                      <Box className="flex flex-col gap-1">
-                        {accountOptions.map((item) => (
-                          <Link
-                            as={NextLink}
-                            key={item.name}
-                            href={item.href}
-                            aria-label={item.desc}
-                            className="flex items-center"
-                            bg={backgroundColor}
-                            _hover={{ textDecoration: "none" }}
-                          >
-                            <div className="p-4">
-                              <item.icon className="text-blue-500" aria-hidden="true" />
-                            </div>
-                            <div>
-                              <Text>{item.name}</Text>
-                            </div>
-                          </Link>
-                        ))}
-                        <Link
-                          className="flex items-center rounded-md cursor-pointer"
-                          _hover={{ textDecoration: "none" }}
-                          onClick={() => signOut({ callbackUrl: "/" })}
-                        >
-                          <div className="p-4">
-                            <FiLogOut className="text-blue-500" />
-                          </div>
-                          <div>
-                            <Text>Sign Out</Text>
-                          </div>
-                        </Link>
-                      </Box>
-                    </Box>
-                  </Popover.Panel>
-                </Box>
-              )}
-            </AnimatePresence>
-          </>
-        )}
-      </Popover>
+      <>
+        <Menu>
+          <MenuButton border="solid" borderRadius="full" borderWidth="thin" borderColor="blackAlpha.300">
+            <Box display="flex" alignItems="center" gap="3" p="1" paddingRight={[1, 1, 1, 6, 6]}>
+              <Avatar size="sm" bgImage={session.user.image}></Avatar>
+              <p data-cy="username" className="hidden lg:flex">
+                {session.user.name || session.user.email}
+              </p>
+            </Box>
+          </MenuButton>
+          <MenuList p="2" borderRadius="xl">
+            <Box display="flex" flexDirection="column" alignItems="center" borderRadius="md" p="4">
+              <Text>Your Score</Text>
+              <Text color="blue.500" fontWeight="bold" fontSize="xl">
+                3,200
+              </Text>
+            </Box>
+            <MenuDivider></MenuDivider>
+            {accountOptions.map((item) => (
+              <Link key={item.name} href={item.href} _hover={{ textDecoration: "none" }}>
+                <MenuItem gap="3" borderRadius="md" p="4">
+                  <item.icon className="text-blue-500" aria-hidden="true" />
+                  <Text>{item.name}</Text>
+                </MenuItem>
+              </Link>
+            ))}
+
+            <MenuDivider></MenuDivider>
+            <MenuItem gap="3" borderRadius="md" p="4" onClick={() => signOut({ callbackUrl: "/" })}>
+              <FiLogOut className="text-blue-500" aria-hidden="true" />
+              <Text>Sign Out</Text>
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      </>
     );
   }
 }