From b5f0e2ed47c6676323b7e62ffa7d0441a4148fb2 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 9 Apr 2025 19:29:51 -0500
Subject: [PATCH] Refine photo overlay button

---
 src/components/primitives/EntityLink.tsx  | 16 ++++++++++++----
 src/components/primitives/LabeledIcon.tsx |  4 ++--
 src/recipe/PhotoRecipeOverlayButton.tsx   |  3 ++-
 tailwind.css                              |  2 +-
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/primitives/EntityLink.tsx b/src/components/primitives/EntityLink.tsx
index c7dce627..8e5c7a10 100644
--- a/src/components/primitives/EntityLink.tsx
+++ b/src/components/primitives/EntityLink.tsx
@@ -79,12 +79,16 @@ export default function EntityLink({
       className={clsx(
         'inline-flex items-center gap-2',
         'max-w-full overflow-hidden select-none',
+        '[&:has(.action:hover)_a>*>*>*]:underline',
         className,
       )}
     >
       <LinkWithStatus
         href={href}
-        className="peer inline-flex items-center gap-2 max-w-full truncate"
+        className={clsx(
+          'peer',
+          'inline-flex items-center gap-2 max-w-full truncate',
+        )}
         isLoading={isLoading}
         setIsLoading={setIsLoading}
       >
@@ -99,9 +103,8 @@ export default function EntityLink({
           className: clsx(
             classForContrast(),
             href && !badged && 'hover:text-gray-900 dark:hover:text-gray-100',
-            classNameIcon,
           ),
-          classNameIcon: 'text-dim',
+          classNameIcon: clsx('text-dim', classNameIcon),
           debug,
         }}>
           {badged
@@ -116,12 +119,17 @@ export default function EntityLink({
             </Badge>
             : <span className={clsx(
               truncate && 'inline-flex max-w-full *:truncate',
+              'decoration-dotted underline-offset-[4px] underline-main',
+              'decoration-gray-300 dark:decoration-gray-600',
             )}>
               {renderLabel}
             </span>}
         </LabeledIcon>
       </LinkWithStatus>
-      {accessory}
+      {accessory &&
+        <span className="action">
+          {accessory}
+        </span>}
       {!isLoading && hoverEntity !== undefined &&
         <span className="hidden peer-hover:inline text-dim">
           {hoverEntity}
diff --git a/src/components/primitives/LabeledIcon.tsx b/src/components/primitives/LabeledIcon.tsx
index e0d15f4a..595a17e5 100644
--- a/src/components/primitives/LabeledIcon.tsx
+++ b/src/components/primitives/LabeledIcon.tsx
@@ -28,10 +28,10 @@ export default function LabeledIcon({
   debug?: boolean,
 }) {
   return (
-    <span className={ clsx(
+    <span className={clsx(
       'inline-flex gap-x-1.5 md:gap-x-2 min-w-0',
-      className,
       debug && 'border border-green-500 m-[-1px]',
+      className,
     )}>
       {icon && type !== 'text-only' &&
         <Icon {...{
diff --git a/src/recipe/PhotoRecipeOverlayButton.tsx b/src/recipe/PhotoRecipeOverlayButton.tsx
index a8476bbf..90207092 100644
--- a/src/recipe/PhotoRecipeOverlayButton.tsx
+++ b/src/recipe/PhotoRecipeOverlayButton.tsx
@@ -29,7 +29,8 @@ export default function PhotoRecipeOverlayButton({
           'text-medium',
           'rounded-md shadow-none',
           'border-[1.5px] border-medium',
-          'p-0 size-5 inline-flex items-center justify-center',
+          'p-0 inline-flex items-center justify-center',
+          'size-[17px] md:size-5',
           'hover:bg-extra-dim active:bg-dim',
           className,
         )}>
diff --git a/tailwind.css b/tailwind.css
index 0722b691..59c4329b 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -134,7 +134,7 @@
   @apply
     text-red-500 dark:text-red-400
 }
-/* Border */
+/* Rules */
 @utility border-main {
   @apply
     border border-gray-200 dark:border-gray-700