From aa7918563e0332d08229a7477ff8d265ac008cdc Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 17 Apr 2025 17:27:47 -0500
Subject: [PATCH] Fix recipe overlay shadow/background

---
 src/components/Modal.tsx          | 7 +++----
 src/recipe/PhotoRecipeOverlay.tsx | 8 +++++++-
 src/recipe/RecipeModal.tsx        | 2 +-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 82e91667..a93e82e8 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -90,10 +90,9 @@ export default function Modal({
           className={clsx(
             container && 'w-[calc(100vw-1.5rem)] sm:w-[min(540px,90vw)]',
             container && !noPadding && 'p-3 md:p-4',
-            container && 'rounded-lg md:rounded-xl',
-            container && 'border-medium',
-            'bg-white dark:bg-black',
-            'shadow-2xl/20 dark:shadow-2xl/100',
+            container && 'rounded-lg md:rounded-xl border-medium',
+            container && 'bg-white dark:bg-black',
+            container && 'shadow-2xl/20 dark:shadow-2xl/100',
             className,
           )}
         >
diff --git a/src/recipe/PhotoRecipeOverlay.tsx b/src/recipe/PhotoRecipeOverlay.tsx
index 6bef441f..209b26bf 100644
--- a/src/recipe/PhotoRecipeOverlay.tsx
+++ b/src/recipe/PhotoRecipeOverlay.tsx
@@ -26,9 +26,11 @@ export default function PhotoRecipeOverlay({
   data,
   film,
   onClose,
+  isOnPhoto = true,
 }: RecipeProps & {
   ref?: RefObject<HTMLDivElement | null>
   onClose?: () => void
+  isOnPhoto?: boolean
 }) {
   const {
     dynamicRange,
@@ -96,7 +98,11 @@ export default function PhotoRecipeOverlay({
         'z-10',
         'w-[20rem] p-3 space-y-3',
         'scroll-mt-8',
-        'rounded-lg shadow-2xl',
+        'rounded-lg',
+        isOnPhoto
+          ? 'shadow-2xl'
+          // 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',
         'backdrop-blur-xl saturate-[300%]',
diff --git a/src/recipe/RecipeModal.tsx b/src/recipe/RecipeModal.tsx
index 27032365..a1588213 100644
--- a/src/recipe/RecipeModal.tsx
+++ b/src/recipe/RecipeModal.tsx
@@ -12,13 +12,13 @@ export default function ShareModals() {
 
   if (recipeModalProps) {
     return <Modal
-      className="bg-transparent!"
       onClose={() => setRecipeModalProps?.(undefined)}
       container={false}
     >
       <PhotoRecipeOverlay {...{
         ...recipeModalProps,
         onClose: () => setRecipeModalProps?.(undefined),
+        isOnPhoto: false,
       }}/>
     </Modal>;
   }