From 489f48523b65be12994fb094352e38e3cec106cf Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 26 May 2025 19:00:10 -0500
Subject: [PATCH] Refine modal styles

---
 src/components/Modal.tsx  | 17 +++++++++--------
 src/components/OGTile.tsx |  3 +--
 src/share/ShareModal.tsx  |  4 ++--
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 23e058d3..07a3424f 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -82,7 +82,7 @@ export default function Modal({
         : false}
       animate={{ backgroundColor: resolvedTheme === 'dark'
         ? 'rgba(0, 0, 0, 0.80)'
-        : 'rgba(255, 255, 255, 0.80)' }}
+        : 'rgba(255, 255, 255, 0.90)' }}
       transition={{ duration: 0.3, easing: 'easeOut' }}
     >
       <AnimateItems
@@ -91,13 +91,14 @@ export default function Modal({
           ref={contentRef}
           key="modalContent"
           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 && 'outline-medium',
-            container && 'bg-white dark:bg-black',
-            container && 'shadow-gray-900 shadow-2xl/15',
-            container && 'dark:shadow-black dark:shadow-2xl/100',
+            ...container ? [
+              'w-[calc(100vw-1.5rem)] sm:w-[min(540px,90vw)]',
+              !noPadding && 'p-2',
+              'rounded-xl outline-medium',
+              'bg-white dark:bg-black',
+              'shadow-gray-900 shadow-2xl/15',
+              'dark:shadow-black dark:shadow-2xl/100',
+            ] : [],
             className,
           )}
         >
diff --git a/src/components/OGTile.tsx b/src/components/OGTile.tsx
index 2758358a..7422a1d3 100644
--- a/src/components/OGTile.tsx
+++ b/src/components/OGTile.tsx
@@ -60,8 +60,7 @@ export default function OGTile({
       className={clsx(
         'group',
         'block w-full rounded-md overflow-hidden',
-        'border shadow-xs',
-        'border-gray-200 dark:border-gray-800',
+        'border-medium shadow-xs',
         riseOnHover && 'hover:-translate-y-1.5 transition-transform',
       )}
     >
diff --git a/src/share/ShareModal.tsx b/src/share/ShareModal.tsx
index 625d11b4..6516d79d 100644
--- a/src/share/ShareModal.tsx
+++ b/src/share/ShareModal.tsx
@@ -66,7 +66,7 @@ export default function ShareModal({
 
   return (
     <Modal onClose={() => setShareModalProps?.(undefined)}>
-      <div className="space-y-3 md:space-y-4 w-full">
+      <div className="space-y-2 w-full">
         {title &&
           <div className={clsx(
             'flex items-center gap-x-3',
@@ -83,7 +83,7 @@ export default function ShareModal({
             'rounded-md',
             'w-full overflow-hidden',
             'flex items-center justify-stretch',
-            'border border-gray-200 dark:border-gray-800',
+            'border-medium',
           )}>
             <MaskedScroll
               className="flex grow"