Fix design inconsistencies 💫

wotschofsky · Dec 18, 2024 · 5d7d609 · 5d7d609
1 parent 53451c5
commit 5d7d609
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/app/_components/footer.tsx b/app/_components/footer.tsx
@@ -27,7 +27,7 @@ const VercelBadge: FC<VercelBadgeProps> = ({ className, ...props }) => (
 export const Footer: FC = () => (
   <footer className="w-full p-4 md:px-8">
     <div className="flex flex-col items-start gap-6 pt-4">
-      <div className="flex w-full flex-col items-center justify-between gap-3 sm:flex-row">
+      <div className="flex w-full flex-col items-center justify-between gap-6 sm:flex-row">
         <Logo />
 
         <p className="text-sm">

diff --git a/app/lookup/[domain]/(dns)/_components/dns-table.tsx b/app/lookup/[domain]/(dns)/_components/dns-table.tsx
@@ -57,7 +57,7 @@ export const DnsTable: FC<DnsTableProps> = ({ records, subvalues }) => (
             </div>
 
             <CollapsibleContent>
-              <code className="block overflow-x-scroll whitespace-nowrap rounded border border-slate-300 bg-slate-200 p-2 font-mono text-xs dark:border-slate-700 dark:bg-slate-800">
+              <code className="block overflow-x-scroll whitespace-nowrap rounded border border-zinc-300 bg-zinc-200 p-2 font-mono text-xs dark:border-zinc-700 dark:bg-zinc-800">
                 {response.trace.map((line) => (
                   // eslint-disable-next-line react/jsx-key
                   <Fragment>

diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
@@ -28,7 +28,10 @@ const DrawerOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Overlay
     ref={ref}
-    className={cn('fixed inset-0 z-50 bg-black/80', className)}
+    className={cn(
+      'fixed inset-0 z-50 bg-zinc-950/25 backdrop-blur-sm',
+      className,
+    )}
     {...props}
   />
 ));
@@ -43,12 +46,12 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        'fixed inset-x-0 bottom-0 z-50 mx-auto flex h-auto max-w-lg flex-col rounded-t-3xl bg-white p-8 shadow-lg ring-1 ring-zinc-950/10 dark:bg-zinc-900 dark:ring-white/10',
         className,
       )}
       {...props}
     >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <div className="mx-auto h-2 w-[100px] -translate-y-4 rounded-full bg-zinc-200 dark:bg-zinc-800" />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
@@ -60,7 +63,10 @@ const DrawerHeader = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
+    className={cn(
+      'text-balance text-lg/6 font-semibold text-zinc-950 dark:text-white sm:text-base/6',
+      className,
+    )}
     {...props}
   />
 );
@@ -71,7 +77,10 @@ const DrawerFooter = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+    className={cn(
+      'mt-2 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto',
+      className,
+    )}
     {...props}
   />
 );
@@ -84,7 +93,7 @@ const DrawerTitle = React.forwardRef<
   <DrawerPrimitive.Title
     ref={ref}
     className={cn(
-      'text-lg font-semibold leading-none tracking-tight',
+      'text-balance text-lg/6 font-semibold text-zinc-950 dark:text-white sm:text-base/6',
       className,
     )}
     {...props}
@@ -98,7 +107,10 @@ const DrawerDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-zinc-500 dark:text-zinc-400', className)}
+    className={cn(
+      'mt-2 text-pretty text-sm text-zinc-500 dark:text-zinc-400',
+      className,
+    )}
     {...props}
   />
 ));