bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make dropdown menu items again rounded

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-08-31 00:12:12 +02:00
parent 064e051273
commit fbcc4f5742
2 changed files with 19 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
View file

@ -105,7 +105,7 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus }: IDropdownMenuItem
target={item.target}
title={item.text}
className={
clsx('flex cursor-pointer items-center px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-800 focus:bg-gray-100 focus:text-gray-800 focus:outline-none black:hover:bg-gray-900 black:focus:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:bg-gray-800 dark:focus:text-gray-200', {
clsx('mx-2 my-1 flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-800 focus:bg-gray-100 focus:text-gray-800 focus:outline-none black:hover:bg-gray-900 black:focus:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:bg-gray-800 dark:focus:text-gray-200', {
'text-danger-600 dark:text-danger-400': item.destructive,
})
}

35
packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
View file

@ -258,23 +258,24 @@ const DropdownMenu = (props: IDropdownMenu) => {
const autoFocus = items && !items.some((item) => item?.active);
const getClassName = () => {
const className = clsx('z-[1001] bg-white py-1 shadow-lg ease-in-out focus:outline-none black:bg-black no-reduce-motion:transition-all dark:bg-gray-900 dark:ring-2 dark:ring-primary-700', touching ? clsx({
'overflow-auto fixed left-0 right-0 mx-auto w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-1rem)] rounded-t-xl duration-200': true,
'bottom-0 opacity-100': isDisplayed && isOpen,
'-bottom-32 opacity-0': !(isDisplayed && isOpen),
}) : clsx({
'rounded-md min-w-56 max-w-sm duration-100': true,
'scale-0': !(isDisplayed && isOpen),
'scale-100': isDisplayed && isOpen,
'origin-bottom': placement === 'top',
'origin-left': placement === 'right',
'origin-top': placement === 'bottom',
'origin-right': placement === 'left',
'origin-bottom-left': placement === 'top-start',
'origin-bottom-right': placement === 'top-end',
'origin-top-left': placement === 'bottom-start',
'origin-top-right': placement === 'bottom-end',
}));
const className = clsx('z-[1001] bg-white py-1 shadow-lg ease-in-out focus:outline-none black:bg-black no-reduce-motion:transition-all dark:bg-gray-900 dark:ring-2 dark:ring-primary-700',
touching ? clsx({
'overflow-auto fixed left-0 right-0 mx-auto w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-1rem)] rounded-t-xl duration-200': true,
'bottom-0 opacity-100': isDisplayed && isOpen,
'-bottom-32 opacity-0': !(isDisplayed && isOpen),
}) : clsx({
'rounded-md min-w-56 max-w-sm duration-100': true,
'scale-0': !(isDisplayed && isOpen),
'scale-100': isDisplayed && isOpen,
'origin-bottom': placement === 'top',
'origin-left': placement === 'right',
'origin-top': placement === 'bottom',
'origin-right': placement === 'left',
'origin-bottom-left': placement === 'top-start',
'origin-bottom-right': placement === 'top-end',
'origin-top-left': placement === 'bottom-start',
'origin-top-right': placement === 'bottom-end',
}));
return className;
};