Refine modal styles

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

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

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"