diff --git a/src/admin/AdminPhotoMenu.tsx b/src/admin/AdminPhotoMenu.tsx index feeead60..394ff54f 100644 --- a/src/admin/AdminPhotoMenu.tsx +++ b/src/admin/AdminPhotoMenu.tsx @@ -92,13 +92,14 @@ export default function AdminPhotoMenu({ action: () => syncPhotoAction(photo.id) .then(() => revalidatePhoto?.(photo.id)), }); - const sectionDelete = [{ + const sectionDelete: ComponentProps[] = [{ label: 'Delete', icon: , className: 'text-error *:hover:text-error', + color: 'red', action: () => { if (confirm(deleteConfirmationTextForPhoto(photo))) { return deletePhotoAction( diff --git a/src/components/more/MoreMenuItem.tsx b/src/components/more/MoreMenuItem.tsx index 06c34845..fe7eaeef 100644 --- a/src/components/more/MoreMenuItem.tsx +++ b/src/components/more/MoreMenuItem.tsx @@ -12,6 +12,7 @@ export default function MoreMenuItem({ labelComplex, annotation, icon, + color = 'grey', href, hrefDownloadName, className, @@ -23,6 +24,7 @@ export default function MoreMenuItem({ labelComplex?: ReactNode annotation?: ReactNode icon?: ReactNode + color?: 'grey' | 'red' href?: string hrefDownloadName?: string className?: string @@ -47,6 +49,19 @@ export default function MoreMenuItem({ } }, [isPending, dismissMenu, transitionDidStart]); + const getColorClasses = () => { + switch (color) { + case 'grey': return clsx( + 'hover:bg-gray-100/90 active:bg-gray-200/75', + 'dark:hover:bg-gray-800/60 dark:active:bg-gray-900/80', + ); + case 'red': return clsx( + 'hover:bg-red-100/50 active:bg-red-100/75', + 'dark:hover:bg-red-950/55 dark:active:bg-red-950/80', + ); + } + }; + return (