From 7db5480497f6e547ee354b6e0afa7844582b577a Mon Sep 17 00:00:00 2001
From: Aditya Gannavarapu <aditya.g@setu.co>
Date: Sat, 20 Jan 2024 18:56:04 +0530
Subject: [PATCH] Update the profile icon click and positioning of popover

---
 libs/client/features/src/layout/DesktopLayout.tsx | 2 +-
 libs/client/features/src/layout/MenuPopover.tsx   | 7 +------
 libs/design-system/src/lib/Button/Button.tsx      | 1 +
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/libs/client/features/src/layout/DesktopLayout.tsx b/libs/client/features/src/layout/DesktopLayout.tsx
index 581dcb81..c01af2a4 100644
--- a/libs/client/features/src/layout/DesktopLayout.tsx
+++ b/libs/client/features/src/layout/DesktopLayout.tsx
@@ -193,7 +193,7 @@ export function DesktopLayout({ children, sidebar }: DesktopLayoutProps) {
                     <MenuPopover
                         isHeader={false}
                         icon={<ProfileCircle />}
-                        buttonClassName="w-12 h-12 rounded-full"
+                        placement={'right-end'}
                     />
                 </div>
             </nav>
diff --git a/libs/client/features/src/layout/MenuPopover.tsx b/libs/client/features/src/layout/MenuPopover.tsx
index 36c838bd..e381945d 100644
--- a/libs/client/features/src/layout/MenuPopover.tsx
+++ b/libs/client/features/src/layout/MenuPopover.tsx
@@ -6,24 +6,19 @@ import {
     RiShutDownLine as LogoutIcon,
     RiDatabase2Line,
 } from 'react-icons/ri'
-import classNames from 'classnames'
 
 export function MenuPopover({
     icon,
-    buttonClassName,
     placement = 'top-end',
     isHeader,
 }: {
     icon: JSX.Element
-    buttonClassName?: string
     placement?: ComponentProps<typeof Menu.Item>['placement']
     isHeader: boolean
 }) {
     return (
         <Menu>
-            <Menu.Button variant="icon" className={classNames(buttonClassName)}>
-                {icon}
-            </Menu.Button>
+            <Menu.Button variant="profileIcon">{icon}</Menu.Button>
             <Menu.Items
                 placement={placement}
                 className={isHeader ? 'bg-gray-600' : 'min-w-[200px]'}
diff --git a/libs/design-system/src/lib/Button/Button.tsx b/libs/design-system/src/lib/Button/Button.tsx
index c5bbfd30..36fd6ffd 100644
--- a/libs/design-system/src/lib/Button/Button.tsx
+++ b/libs/design-system/src/lib/Button/Button.tsx
@@ -10,6 +10,7 @@ const ButtonVariants = Object.freeze({
     input: 'px-4 py-2 rounded text-base bg-transparent text-gray-25 border border-gray-200 shadow focus:bg-gray-500 focus:ring-gray-400',
     link: 'px-4 py-2 rounded text-base text-cyan hover:text-cyan-400 focus:text-cyan-300 focus:ring-cyan',
     icon: 'p-0 w-8 h-8 rounded text-2xl text-gray-25 hover:bg-gray-300 focus:bg-gray-200 focus:ring-gray-400',
+    profileIcon: 'p-0 w-12 h-12 rounded text-2xl text-gray-25',
     danger: 'px-4 py-2 rounded text-base bg-red text-gray-700 shadow hover:bg-red-400 focus:bg-red-400 focus:ring-red',
     warn: 'px-4 py-2 rounded text-base bg-gray-500 text-red-500 shadow hover:bg-gray-400 focus:bg-gray-400 focus:ring-red',
 })