Crisp up modals and dropdowns

src/admin/AdminAppMenu.tsx

@@ -234,7 +234,7 @@ export default function AdminAppMenu({
       alignOffset={-85}
       onOpen={refreshAdminData}
       className={clsx(
-        'border-medium',
+        'outline-medium',
         className,
       )}
       classNameButton={clsx(

src/cmdk/CommandKClient.tsx

@@ -85,6 +85,8 @@ const DIALOG_DESCRIPTION = 'For searching photos, views, and settings';
 const LISTENER_KEYDOWN = 'keydown';
 const MINIMUM_QUERY_LENGTH = 2;
 
+const MAX_HEIGHT = '20rem';
+
 type CommandKItem = {
   label: ReactNode
   explicitKey?: string
@@ -163,12 +165,11 @@ export default function CommandKClient({
 
   const refInput = useRef<HTMLInputElement>(null);
   const mobileViewportHeight = useVisualViewportHeight();
-  const heightMaximum = '18rem';
   const maxHeight = useMemo(() => {
     const positionY = refInput.current?.getBoundingClientRect().y;
     return mobileViewportHeight && positionY
-      ? `min(${mobileViewportHeight - positionY - 32}px, ${heightMaximum})`
-      : heightMaximum;
+      ? `min(${mobileViewportHeight - positionY - 32}px, ${MAX_HEIGHT})`
+      : MAX_HEIGHT;
   }, [mobileViewportHeight]);
 
   const refScroll = useRef<HTMLDivElement>(null);
@@ -585,8 +586,8 @@ export default function CommandKClient({
           <DialogDescription>{DIALOG_DESCRIPTION}</DialogDescription>
         </VisuallyHidden.Root>
         <div className={clsx(
-          'px-3 md:px-4',
-          'pt-3 md:pt-4',
+          'px-3 md:px-3.5',
+          'pt-3 md:pt-3.5',
         )}>
           <div className="relative">
             <Command.Input
@@ -599,7 +600,7 @@ export default function CommandKClient({
                 'w-full min-w-0!',
                 'focus:ring-0',
                 isPlaceholderVisible || isLoading && 'pr-10!',
-                'border-gray-200! dark:border-gray-800!',
+                'border-medium',
                 'focus:border-gray-200 dark:focus:border-gray-800',
                 'placeholder:text-gray-400/80',
                 'dark:placeholder:text-gray-700',

src/components/Modal.tsx

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

src/components/more/MoreMenu.tsx

@@ -83,7 +83,7 @@ export default function MoreMenu({
             'min-w-[8rem]',
             'component-surface',
             'py-1',
-            'shadow-lg',
+            'shadow-lg shadow-gray-900/10 dark:shadow-900',
             'data-[side=top]:dark:shadow-[0_0px_40px_rgba(0,0,0,0.6)]',
             'data-[side=bottom]:dark:shadow-[0_10px_40px_rgba(0,0,0,0.6)]',
             'data-[side=top]:animate-fade-in-from-bottom',

src/recipe/PhotoRecipeOverlay.tsx

@@ -101,7 +101,7 @@ export default function PhotoRecipeOverlay({
         'z-10',
         'w-[20rem] p-3 space-y-3',
         'scroll-mt-8',
-        'rounded-lg',
+        'rounded-[10px]',
         isOnPhoto
           ? 'shadow-2xl'
           // Soften shadow to mimic <Modal />

src/share/ShareModal.tsx

@@ -50,7 +50,7 @@ export default function ShareModal({
   ) =>
     <div
       className={clsx(
-        'py-3 px-3',
+        'py-2.5 px-3',
         embedded ? 'border-l' : 'border rounded-md',
         'border-gray-200 bg-gray-50 active:bg-gray-100',
         // eslint-disable-next-line max-len

tailwind.css

@@ -141,15 +141,19 @@
 }
 @utility divide-main {
   @apply
-    divide-gray-200 dark:divide-gray-700
+    divide-gray-400/25 dark:divide-gray-700
 }
 @utility border-medium {
   @apply
-    border border-gray-200 dark:border-gray-800
+    border border-gray-400/25 dark:border-gray-800
+}
+@utility outline-medium {
+  @apply
+    outline outline-gray-400/25 dark:outline-gray-800
 }
 @utility divide-medium {
   @apply
-    divide-gray-200 dark:divide-gray-800
+    divide-gray-400/25 dark:divide-gray-800
 }
 /* Background */
 @utility bg-main {
@@ -170,7 +174,8 @@
 }
 @utility bg-content {
   @apply
-    bg-main border-medium
+    /* '!' necessary for radix controls */
+    bg-main outline-medium!
 }
 @utility bg-invert {
   @apply