From 4b7bccc17cb528cf9f51506378c4c0797ddd227b Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 11 Mar 2025 00:05:11 -0500
Subject: [PATCH] Refine overlay animation/behavior

---
 src/components/Badge.tsx          |  8 ++++++--
 src/photo/PhotoLarge.tsx          | 29 +++++++++++++++--------------
 src/recipe/PhotoRecipeOverlay.tsx |  6 +++---
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 78c478fd..f588e850 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -37,10 +37,14 @@ export default function Badge({
             : 'text-medium bg-gray-300/30 dark:bg-gray-700/50',
         interactive && (contrast === 'high'
           ? 'hover:opacity-70'
-          : 'hover:text-gray-900 dark:hover:text-gray-100'),
+          : contrast === 'frosted'
+            ? 'hover:text-black dark:hover:text-black'
+            : 'hover:text-gray-900 dark:hover:text-gray-100'),
         interactive && (contrast === 'high'
           ? 'active:opacity-90'
-          : 'active:bg-gray-200 dark:active:bg-gray-700/60'),
+          : contrast === 'frosted'
+            ? 'active:bg-neutral-100/50 dark:active:bg-neutral-900/10'
+            : 'active:bg-gray-200 dark:active:bg-gray-700/60'),
       );
     }
   };
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 7c1a063e..06557768 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -193,23 +193,24 @@ export default function PhotoLarge({
       <div className={clsx(
         'absolute inset-0',
         'flex items-center justify-center',
-        (shouldShowRecipeOverlay || shouldDebugRecipeOverlays)
-          ? 'z-[1]'
-          : 'z-[-1]',
+        // Allow clicks to pass through to zoom controls
+        // when not showing recipe overlay
+        !(shouldShowRecipeOverlay || shouldDebugRecipeOverlays) &&
+          'pointer-events-none',
       )}>
         <AnimatePresence>
           {(shouldShowRecipeOverlay || shouldDebugRecipeOverlays) &&
-          photo.recipeData &&
-          photo.filmSimulation &&
-            <PhotoRecipeOverlay
-              ref={refRecipe}
-              title={photo.recipeTitle}
-              recipe={photo.recipeData}
-              simulation={photo.filmSimulation}
-              iso={photo.isoFormatted}
-              exposure={photo.exposureCompensationFormatted}
-              onClose={hideRecipeOverlay}
-            />}
+            photo.recipeData &&
+            photo.filmSimulation &&
+              <PhotoRecipeOverlay
+                ref={refRecipe}
+                title={photo.recipeTitle}
+                recipe={photo.recipeData}
+                simulation={photo.filmSimulation}
+                iso={photo.isoFormatted}
+                exposure={photo.exposureCompensationFormatted}
+                onClose={hideRecipeOverlay}
+              />}
         </AnimatePresence>
       </div>
     </div>;
diff --git a/src/recipe/PhotoRecipeOverlay.tsx b/src/recipe/PhotoRecipeOverlay.tsx
index f4dbccb2..085007f4 100644
--- a/src/recipe/PhotoRecipeOverlay.tsx
+++ b/src/recipe/PhotoRecipeOverlay.tsx
@@ -74,9 +74,9 @@ export default function PhotoRecipeOverlay({
   return (
     <motion.div
       ref={ref}
-      initial={{ opacity: 0, translateY: -10 }}
-      animate={{ opacity: 1, translateY: 0 }}
-      exit={{ opacity: 0, translateY: -10 }}
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.95 }}
       className={clsx(
         'z-10',
         'w-[20rem] p-3 space-y-2',