Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-09 07:25:19 +02:00
Code Issues Releases Activity Actions

Update the profile icon click and positioning of popover

Browse source
This commit is contained in:
Aditya Gannavarapu 2024-01-20 18:56:04 +05:30
parent 9ebaa29116
commit 7db5480497
3 changed files with 3 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

2
libs/client/features/src/layout/DesktopLayout.tsx
View file

@ -193,7 +193,7 @@ export function DesktopLayout({ children, sidebar }: DesktopLayoutProps) {
<MenuPopover <MenuPopover
isHeader={false} isHeader={false}
icon={<ProfileCircle />} icon={<ProfileCircle />}
buttonClassName="w-12 h-12 rounded-full" placement={'right-end'}
/> />
</div> </div>
</nav> </nav>

7
libs/client/features/src/layout/MenuPopover.tsx
View file

@ -6,24 +6,19 @@ import {
RiShutDownLine as LogoutIcon, RiShutDownLine as LogoutIcon,
RiDatabase2Line, RiDatabase2Line,
} from 'react-icons/ri' } from 'react-icons/ri'
import classNames from 'classnames'
export function MenuPopover({ export function MenuPopover({
icon, icon,
buttonClassName,
placement = 'top-end', placement = 'top-end',
isHeader, isHeader,
}: { }: {
icon: JSX.Element icon: JSX.Element
buttonClassName?: string
placement?: ComponentProps<typeof Menu.Item>['placement'] placement?: ComponentProps<typeof Menu.Item>['placement']
isHeader: boolean isHeader: boolean
}) { }) {
return ( return (
<Menu> <Menu>
<Menu.Button variant="icon" className={classNames(buttonClassName)}> <Menu.Button variant="profileIcon">{icon}</Menu.Button>
{icon}
</Menu.Button>
<Menu.Items <Menu.Items
placement={placement} placement={placement}
className={isHeader ? 'bg-gray-600' : 'min-w-[200px]'} className={isHeader ? 'bg-gray-600' : 'min-w-[200px]'}

1
libs/design-system/src/lib/Button/Button.tsx
View file

@ -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', 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', 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', 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', 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', 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',
}) })