Refine recipe overlay design

src/components/primitives/LabeledIcon.tsx

@@ -29,7 +29,7 @@ export default function LabeledIcon({
 }) {
   return (
     <span className={clsx(
-      'inline-flex gap-x-1.5 md:gap-x-2 min-w-0',
+      'inline-flex gap-x-1.5 min-w-0',
       debug && 'border border-green-500 m-[-1px]',
       className,
     )}>

src/recipe/PhotoRecipe.tsx

@@ -30,9 +30,7 @@ export default function PhotoRecipe({
       icon={<IconRecipe
         size={16}
         className={clsx(
-          props.badged
-            ? 'translate-x-[-1px] translate-y-[0.5px]'
-            : 'translate-y-[-0.5px]',
+          props.badged && 'translate-x-[-1px] translate-y-[0.5px]',
         )}
       />}
       action={toggleRecipeOverlay &&

src/recipe/PhotoRecipeOverlay.tsx

@@ -17,7 +17,6 @@ import {
 } from '.';
 import { TbChecklist } from 'react-icons/tb';
 import CopyButton from '@/components/CopyButton';
-import { labelForFilm } from '@/film';
 import PhotoRecipe from './PhotoRecipe';
 import { useAppText } from '@/i18n/state/client';
 
@@ -107,16 +106,17 @@ export default function PhotoRecipeOverlay({
           // Soften shadow to mimic <Modal />
           : 'shadow-2xl/20 dark:shadow-2xl/100',
         'text-[13.5px] text-black',
-        'bg-white/70 border border-neutral-200/30',
+        'bg-white/70 outline outline-neutral-400/15',
         'backdrop-blur-xl saturate-[300%]',
       )}
     >
       <div className={clsx(
         'flex items-center gap-2 h-6',
         'pl-1.5 pr-0.5',
+        'translate-y-[0.5px]',
       )}>
         <div className={clsx(
-          'grow translate-y-[-0.5px]',
+          'grow translate-y-[0.5px]',
           title && 'hover:opacity-50 active:opacity-75',
         )}>
           {title
@@ -160,12 +160,15 @@ export default function PhotoRecipeOverlay({
         <div className="col-span-8">
           {renderDataSquare(
             <div className="flex items-center gap-1.5">
-              {labelForFilm(film).medium.toLocaleUpperCase()}
               <PhotoFilm
                 contrast="frosted"
                 film={film}
-                type="icon-only"
-                className="opacity-80 translate-y-[-0.5px]"
+                className={clsx(
+                  'translate-y-[-0.5px]',
+                  '*:text-black! *:active:text-black!',
+                  'opacity-80 hover:opacity-60 active:opacity-80',
+                )}
+                badged={false}
               />
             </div>,
             undefined,

src/recipe/PhotoRecipeOverlayButton.tsx

@@ -29,9 +29,9 @@ export default function PhotoRecipeOverlayButton({
           ref.current?.blur();
         }}
         className={clsx(
-          'text-medium',
-          'rounded-md shadow-none',
-          'border-[1.5px] border-medium',
+          'text-medium hover:text-main',
+          'bg-dim hover:bg-medium active:bg-dim',
+          'rounded-md border-transparent shadow-none',
           'p-0 inline-flex items-center justify-center',
           'size-[17px] sm:size-5',
           'hover:bg-extra-dim active:bg-dim',

tailwind.css

@@ -167,11 +167,11 @@ html {
 }
 @utility bg-medium {
   @apply
-    bg-gray-200 dark:bg-gray-700
+    bg-gray-200 dark:bg-gray-700/65
 }
 @utility bg-dim {
   @apply
-    bg-gray-100 dark:bg-gray-900/75
+    bg-gray-100 dark:bg-gray-800/70
 }
 @utility bg-extra-dim {
   @apply