clean up usermenu a little bit to follow site styling

HolodexNet · Aug 24, 2024 · 92f6263 · 92f6263
1 parent 0948497
commit 92f6263
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 36 deletions.
diff --git a/packages/react/src/components/header/userMenu/components/UserMenu.tsx b/packages/react/src/components/header/userMenu/components/UserMenu.tsx
@@ -1,30 +1,32 @@
 import { useAuth } from "@/hooks/useAuth";
 import { userAtom } from "@/store/auth";
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuSeparator,
-} from "@radix-ui/react-dropdown-menu";
 import { GearIcon, CalendarIcon, ExitIcon } from "@radix-ui/react-icons";
 import { useAtomValue } from "jotai";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { UserMenuItem } from "./UserMenuItem";
 import { Button } from "@/shadcn/ui/button";
-import { DropdownMenuLabel } from "@/shadcn/ui/dropdown-menu";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/shadcn/ui/dropdown-menu";
 import { Avatar, AvatarFallback, AvatarImage } from "@/shadcn/ui/avatar";
 
 export function UserMenu() {
   const { t } = useTranslation();
   const user = useAtomValue(userAtom);
   const { logout } = useAuth();
+  const navigate = useNavigate();
 
   const mockUserMenuItems = [
     {
       key: "settings",
       value: "Settings",
-      fn: () => console.log("settings"),
+      fn: () => navigate("/settings/user"),
       icon: <GearIcon />,
     },
     {
@@ -45,50 +47,51 @@ export function UserMenu() {
   }
 
   return (
-    <DropdownMenu>
+    <DropdownMenu modal={false}>
       <DropdownMenuTrigger className="z-30 mx-2 w-8 shrink-0 overflow-hidden rounded-full bg-base-2">
         <img
           src={`https://api.dicebear.com/7.x/shapes/svg?seed=${user.id}`}
           alt="User avatar"
         />
       </DropdownMenuTrigger>
       <DropdownMenuContent className="relative right-8 z-30 w-72 bg-base-2">
-        <div className="grid grid-cols-4 grid-rows-3 p-4">
-          <Avatar className="col-start-1 row-span-3 row-start-1 self-center justify-self-center">
+        <DropdownMenuItem className="flex flex-row">
+          <Avatar className="mx-2">
             <AvatarImage
               src={`https://api.dicebear.com/7.x/shapes/svg?seed=${user.id}`}
               alt="userIcon"
             />
             <AvatarFallback>CN</AvatarFallback>
           </Avatar>
-          <div className="col-span-3 col-start-2 row-span-2 row-start-1">
-            <DropdownMenuLabel className="overflow-hidden text-ellipsis">
+          <div className="flex flex-col gap-1">
+            <DropdownMenuLabel className="overflow-hidden text-ellipsis p-0 pl-2">
               {user.username}
             </DropdownMenuLabel>
-            <div className="flex flex-row gap-2 px-2 py-1.5 ">
+            <div className="flex flex-row gap-2 p-0 pl-2 text-sm">
               <div
-                className={user.google_id ? "text-secondary-11" : "text-base"}
+                className={user.discord_id ? "text-secondary-11" : "text-base"}
               >
-                <div className="i-mdi:google p-1 text-xs" />
+                <div className="i-mdi:discord" />
               </div>
               <div
-                className={user.discord_id ? "text-secondary-11" : "text-base"}
+                className={user.google_id ? "text-secondary-11" : "text-base"}
               >
-                <div className="i-mdi:discord p-1 text-xs" />
+                <div className="i-mdi:google" />
               </div>
-              <div
+              {/* <div
                 className={user.twitter_id ? "text-secondary-11" : "text-base"}
               >
-                <div className="i-mdi:twitter p-1 text-xs" />
-              </div>
+                <div className="i-mdi:twitter" />
+              </div> */}
             </div>
+            <DropdownMenuLabel className="flex flex-row capitalize text-primary-11">
+              <div className="i-mage:stars-c mr-1 animate-pulse"></div>
+              {user.role === "user" ? "" : user.role}
+              {user.contribution_count + " " + t("component.mainNav.points")}
+            </DropdownMenuLabel>
           </div>
-          <DropdownMenuLabel className="col-span-3 col-start-2 row-start-3 capitalize text-base-11">
-            {user.role} : {user.contribution_count}
-            {t("component.mainNav.points")}
-          </DropdownMenuLabel>
-        </div>
-        <DropdownMenuSeparator className="border-base" />
+        </DropdownMenuItem>
+        <DropdownMenuSeparator className="" />
         {mockUserMenuItems.map((item) => {
           return (
             <UserMenuItem

diff --git a/packages/react/src/components/header/userMenu/components/UserMenuItem.tsx b/packages/react/src/components/header/userMenu/components/UserMenuItem.tsx
@@ -10,14 +10,9 @@ interface UserMenuItemProps {
 
 export function UserMenuItem({ item, onClick }: UserMenuItemProps) {
   return (
-    <DropdownMenuItem
-      onClick={() => onClick()}
-      className="grid h-full w-full cursor-pointer grid-cols-4 p-4"
-    >
-      <div className="col-start-1 self-center justify-self-center">
-        {item.icon}
-      </div>
-      <div className="col-span-3 col-start-2 px-2">{item.value}</div>
+    <DropdownMenuItem onClick={() => onClick()} className="cursor-pointer">
+      <div className="mr-2">{item.icon}</div>
+      {item.value}
     </DropdownMenuItem>
   );
 }