Refine overlay animation/behavior

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'),
       );
     }
   };

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>;

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',