From 14ea5ee7d8a9e2e9ece92d71a283a4dc1a2d1927 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Mon, 1 Dec 2025 16:57:11 -0800
Subject: [PATCH] feat: dropdown affordance on profile menu

---
 .../profileMenu/ProfileMenu.module.css        |  7 ++++
 .../components/profileMenu/ProfileMenu.tsx    | 39 ++++++++++++-------
 2 files changed, 32 insertions(+), 14 deletions(-)
 create mode 100644 src/webapp/features/profile/components/profileMenu/ProfileMenu.module.css

diff --git a/src/webapp/features/profile/components/profileMenu/ProfileMenu.module.css b/src/webapp/features/profile/components/profileMenu/ProfileMenu.module.css
new file mode 100644
index 00000000..9bfaba47
--- /dev/null
+++ b/src/webapp/features/profile/components/profileMenu/ProfileMenu.module.css
@@ -0,0 +1,7 @@
+.root {
+  background-color: transparent;
+
+  &:hover {
+    background-color: var(--mantine-color-gray-light);
+  }
+}
diff --git a/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx b/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
index 2fc8bfde..8d5340c2 100644
--- a/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
+++ b/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
@@ -1,4 +1,13 @@
-import { Skeleton, Avatar, Group, Alert, Menu, Button } from '@mantine/core';
+import {
+  Skeleton,
+  Avatar,
+  Group,
+  Alert,
+  Menu,
+  Card,
+  Text,
+  UnstyledButton,
+} from '@mantine/core';
 import useMyProfile from '../../lib/queries/useMyProfile';
 import { MdBugReport, MdCollectionsBookmark } from 'react-icons/md';
 import { TbStackForward } from 'react-icons/tb';
@@ -9,6 +18,8 @@ import { IoMdLogOut } from 'react-icons/io';
 import { useNavbarContext } from '@/providers/navbar';
 import { BiSolidUserCircle } from 'react-icons/bi';
 import { useOs } from '@mantine/hooks';
+import { BsThreeDots } from 'react-icons/bs';
+import styles from './ProfileMenu.module.css';
 
 export default function ProfileMenu() {
   const router = useRouter();
@@ -38,19 +49,19 @@ export default function ProfileMenu() {
     <Group>
       <Menu shadow="sm" width={280}>
         <Menu.Target>
-          <Button
-            variant="subtle"
-            color="bright"
-            fz="md"
-            radius="md"
-            size="lg"
-            px={3}
-            fullWidth
-            justify="start"
-            leftSection={<Avatar src={data.avatarUrl} />}
-          >
-            {data.name}
-          </Button>
+          <Card px={5} py={5} flex={1} className={styles.root}>
+            <UnstyledButton>
+              <Group justify="space-between" wrap="nowrap">
+                <Group gap={'xs'} c={'bright'} wrap="nowrap">
+                  <Avatar src={data.avatarUrl} />
+                  <Text fw={600} lineClamp={1}>
+                    {data.name}
+                  </Text>
+                </Group>
+                <BsThreeDots />
+              </Group>
+            </UnstyledButton>
+          </Card>
         </Menu.Target>
 
         <Menu.Dropdown>
-- 
2.51.2