Restyle more components ✨

wotschofsky · Dec 6, 2024 · d7f2344 · d7f2344
1 parent 46c48e3
commit d7f2344
Show file tree

Hide file tree

Showing 14 changed files with 252 additions and 99 deletions.
diff --git a/app/_components/search-form.tsx b/app/_components/search-form.tsx
@@ -337,7 +337,7 @@ export const SearchForm: FC<SearchFormProps> = (props) => {
           />
 
           <ClientOnly>
-            <kbd className="pointer-events-none absolute right-3 top-1/2 hidden h-5 -translate-y-1/2 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+            <kbd className="pointer-events-none absolute right-3 top-1/2 hidden h-5 -translate-y-1/2 select-none items-center gap-1 rounded border border-zinc-200 bg-zinc-100 px-1.5 font-mono text-[10px] font-medium opacity-100 dark:border-zinc-700 dark:bg-zinc-800 sm:flex">
               {isAppleDevice() ? (
                 <>
                   <span className="text-xs">⌘</span>K

diff --git a/app/lookup/[domain]/(dns)/_components/location-selector.tsx b/app/lookup/[domain]/(dns)/_components/location-selector.tsx
@@ -52,7 +52,7 @@ export const LocationSelector: FC<LocationSelectorProps> = ({
 
   return (
     <Label className="flex flex-col gap-1">
-      <span className="text-sm text-muted-foreground">Location</span>
+      <span className="text-sm text-zinc-500 dark:text-zinc-400">Location</span>
 
       <Select
         defaultValue={initialValue || 'auto'}

diff --git a/app/lookup/[domain]/_components/ip-details-modal.tsx b/app/lookup/[domain]/_components/ip-details-modal.tsx
@@ -9,14 +9,12 @@ import useSWRImmutable from 'swr/immutable';
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
 import {
   Drawer,
   DrawerContent,
-  DrawerDescription,
   DrawerHeader,
   DrawerTitle,
 } from '@/components/ui/drawer';
@@ -159,8 +157,8 @@ export const IpDetailsModal: FC<IpDetailsModalProps> = ({
         <DrawerContent>
           <DrawerHeader>
             <DrawerTitle>{title}</DrawerTitle>
-            <DrawerDescription>{content}</DrawerDescription>
           </DrawerHeader>
+          {content}
         </DrawerContent>
       </Drawer>
     );
@@ -171,8 +169,8 @@ export const IpDetailsModal: FC<IpDetailsModalProps> = ({
       <DialogContent>
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
-          <DialogDescription>{content}</DialogDescription>
         </DialogHeader>
+        {content}
       </DialogContent>
     </Dialog>
   );

diff --git a/app/lookup/[domain]/layout.tsx b/app/lookup/[domain]/layout.tsx
@@ -91,7 +91,7 @@ const LookupLayout: FC<LookupLayoutProps> = async (props) => {
         </div>
 
         <div className="p-3">
-          <Card className="pb-16">
+          <Card className="pb-12">
             <div className="container">
               <ResultsTabs domain={domain} />
               {children}

diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
@@ -2,6 +2,7 @@
 
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as React from 'react';
+import { X } from 'lucide-react';
 
 import { buttonVariants } from '@/components/ui/button';
 
@@ -22,14 +23,14 @@ AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, children, ...props }, ref) => (
+>(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
+    ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-zinc-950/25 py-16 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className,
     )}
     {...props}
-    ref={ref}
   />
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
@@ -39,15 +40,16 @@ const AlertDialogContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 >(({ className, ...props }, ref) => (
   <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
-        className,
-      )}
-      {...props}
-    />
+    <AlertDialogOverlay>
+      <AlertDialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          'relative z-50 grid w-full max-w-lg gap-4 rounded-t-3xl bg-white p-8 shadow-lg ring-1 ring-zinc-950/10 transition duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 dark:bg-zinc-900 dark:ring-white/10 sm:rounded-2xl',
+          className,
+        )}
+        {...props}
+      ></AlertDialogPrimitive.Content>
+    </AlertDialogOverlay>
   </AlertDialogPortal>
 ));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
@@ -72,7 +74,7 @@ const AlertDialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      'mt-2 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto',
       className,
     )}
     {...props}
@@ -86,7 +88,10 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn('text-lg font-semibold', className)}
+    className={cn(
+      'text-balance text-lg/6 font-semibold text-zinc-950 dark:text-white sm:text-base/6',
+      className,
+    )}
     {...props}
   />
 ));
@@ -98,7 +103,10 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.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}
   />
 ));

diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx
@@ -8,9 +8,10 @@ const alertVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-background text-foreground',
+        default:
+          'border-zinc-950/10 dark:border-white/10 bg-white/50 text-zinc-950 dark:bg-white/5 dark:text-white',
         destructive:
-          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+          'border-red-500/50 bg-red-50 text-red-700 dark:border-red-500/50 dark:bg-red-900/50 dark:text-red-200 [&>svg]:text-red-500',
       },
     },
     defaultVariants: {

diff --git a/components/ui/button.tsx b/components/ui/button.tsx
@@ -5,18 +5,76 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
+  [
+    // Base
+    'relative isolate inline-flex items-center justify-center gap-x-2 rounded-lg border text-base/6 font-semibold',
+    // Sizing
+    'px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6',
+    // Focus
+    'focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500',
+    // Disabled
+    'data-[disabled]:opacity-50',
+    // Icon
+    '[&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-[hover]:[--btn-icon:ButtonText]',
+  ],
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline:
-          'border border-input hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        default: [
+          ...[
+            'text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',
+            'dark:text-white dark:[--btn-bg:theme(colors.zinc.600)] dark:[--btn-hover-overlay:theme(colors.white/5%)]',
+            '[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]',
+          ],
+
+          // Optical border, implemented as the button background to avoid corner artifacts
+          'border-transparent bg-[--btn-border]',
+          // Dark mode: border is rendered on `after` so background is set to button background
+          'dark:bg-[--btn-bg]',
+          // Button background, implemented as foreground layer to stack on top of pseudo-border layer
+          'before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-[--btn-bg]',
+          // Drop shadow, applied to the inset `before` layer so it blends with the border
+          'before:shadow',
+          // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+          'dark:before:hidden',
+          // Dark mode: Subtle white outline is applied using a border
+          'dark:border-white/5',
+          // Shim/overlay, inset to match button foreground and used for hover state + highlight shadow
+          'after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.lg)-1px)]',
+          // Inner highlight shadow
+          'after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)]',
+          // White overlay on hover
+          'after:data-[active]:bg-[--btn-hover-overlay] after:data-[hover]:bg-[--btn-hover-overlay]',
+          // Dark mode: `after` layer expands to cover entire button
+          'dark:after:-inset-px dark:after:rounded-lg',
+          // Disabled
+          'before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none',
+        ],
+        destructive: [
+          'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.red.600)] [--btn-border:theme(colors.red.700/90%)]',
+          '[--btn-icon:theme(colors.red.300)] data-[active]:[--btn-icon:theme(colors.red.200)] data-[hover]:[--btn-icon:theme(colors.red.200)]',
+        ],
+        outline: [
+          // Base
+          'border-zinc-950/10 text-zinc-950 data-[active]:bg-zinc-950/[2.5%] data-[hover]:bg-zinc-950/[2.5%]',
+          // Dark mode
+          'dark:border-white/15 dark:text-white dark:[--btn-bg:transparent] dark:data-[active]:bg-white/5 dark:data-[hover]:bg-white/5',
+          // Icon
+          '[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]',
+        ],
+        secondary: [
+          'text-zinc-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] data-[active]:[--btn-border:theme(colors.zinc.950/15%)] data-[hover]:[--btn-border:theme(colors.zinc.950/15%)]',
+          'dark:text-white dark:[--btn-hover-overlay:theme(colors.white/5%)] dark:[--btn-bg:theme(colors.zinc.800)]',
+          '[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]',
+        ],
+        ghost: [
+          // Base
+          'border-transparent text-zinc-950 data-[active]:bg-zinc-950/5 data-[hover]:bg-zinc-950/5',
+          // Dark mode
+          'dark:text-white dark:data-[active]:bg-white/10 dark:data-[hover]:bg-white/10',
+          // Icon
+          '[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]',
+        ],
         link: 'underline-offset-4 hover:underline text-primary',
       },
       size: {

diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
@@ -25,7 +25,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/30 py-16 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-zinc-950/25 py-16 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className,
     )}
     {...props}
@@ -42,13 +42,13 @@ const DialogContent = React.forwardRef<
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          'relative z-50 grid w-full max-w-lg gap-4 bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full',
+          'relative z-50 grid w-full max-w-lg gap-4 rounded-t-3xl bg-white p-8 shadow-lg ring-1 ring-zinc-950/10 transition duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 dark:bg-zinc-900 dark:ring-white/10 sm:rounded-2xl',
           className,
         )}
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
           <X className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
@@ -64,7 +64,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col space-y-1.5 text-center sm:text-left',
+      'text-balance text-lg/6 font-semibold text-zinc-950 dark:text-white sm:text-base/6',
       className,
     )}
     {...props}
@@ -78,7 +78,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      'mt-2 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto',
       className,
     )}
     {...props}
@@ -93,7 +93,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.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}
@@ -107,7 +107,10 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn(
+      'mt-2 text-pretty text-sm text-zinc-500 dark:text-zinc-400',
+      className,
+    )}
     {...props}
   />
 ));