Fix recipe overlay shadow/background

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 && 'rounded-lg md:rounded-xl border-medium',
-            container && 'border-medium',
+            container && 'bg-white dark:bg-black',
-            'bg-white dark:bg-black',
+            container && 'shadow-2xl/20 dark:shadow-2xl/100',
-            'shadow-2xl/20 dark:shadow-2xl/100',
             className,
           )}
         >

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

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