From d7f2344f11fe40352bb0299f7050e5af463c9c90 Mon Sep 17 00:00:00 2001
From: Felix Wotschofsky <felix@wotschofsky.com>
Date: Fri, 6 Dec 2024 16:14:48 +0100
Subject: [PATCH] =?UTF-8?q?Restyle=20more=20components=20=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/_components/search-form.tsx               |  2 +-
 .../(dns)/_components/location-selector.tsx   |  2 +-
 .../[domain]/_components/ip-details-modal.tsx |  6 +-
 app/lookup/[domain]/layout.tsx                |  2 +-
 components/ui/alert-dialog.tsx                | 38 ++++++----
 components/ui/alert.tsx                       |  5 +-
 components/ui/button.tsx                      | 76 ++++++++++++++++---
 components/ui/dialog.tsx                      | 17 +++--
 components/ui/dropdown-menu.tsx               | 25 ++++--
 components/ui/input.tsx                       | 64 +++++++++++++---
 components/ui/select.tsx                      | 60 ++++++++++-----
 components/ui/skeleton.tsx                    |  5 +-
 components/ui/table.tsx                       | 47 ++++++------
 next.config.js                                |  2 +-
 14 files changed, 252 insertions(+), 99 deletions(-)

diff --git a/app/_components/search-form.tsx b/app/_components/search-form.tsx
index 82ad7678..6733578b 100644
--- 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
index 84769b4a..ed12d5ec 100644
--- 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
index 7462af5a..18774a04 100644
--- 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
index c928e782..f5ecf152 100644
--- 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
index e75d1ee5..e104201f 100644
--- 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
index b248662a..0718b0b5 100644
--- 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
index 579e91da..67d71840 100644
--- 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
index 376b5fa5..eff0dfe9 100644
--- 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}
   />
 ));
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
index d96a92b6..d4c2b949 100644
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -27,7 +27,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      'relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-2 text-sm text-zinc-950 outline-none hover:bg-black/5 dark:text-white dark:hover:bg-white/10',
+      'focus:bg-black/5 dark:focus:bg-white/10',
       inset && 'pl-8',
       className,
     )}
@@ -47,7 +48,8 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',
+      'relative z-50 min-w-[8rem] overflow-hidden rounded-xl border-none bg-white p-1 shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)] dark:bg-zinc-900 dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1)] dark:before:pointer-events-none dark:before:absolute dark:before:-inset-px dark:before:rounded-xl dark:before:shadow-[0px_2px_8px_0px_rgba(0,_0,_0,_0.20),_0px_1px_0px_0px_rgba(255,_255,_255,_0.06)_inset]',
+      '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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className,
     )}
     {...props}
@@ -65,7 +67,8 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 min-w-[8rem] overflow-hidden rounded-xl border-none bg-white p-1 shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)] dark:bg-zinc-900 dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1)] dark:before:pointer-events-none dark:before:absolute dark:before:-inset-px dark:before:rounded-xl dark:before:shadow-[0px_2px_8px_0px_rgba(0,_0,_0,_0.20),_0px_1px_0px_0px_rgba(255,_255,_255,_0.06)_inset]',
+        '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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className,
       )}
       {...props}
@@ -83,7 +86,9 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-2 text-sm text-zinc-950 outline-none hover:bg-black/5 dark:text-white dark:hover:bg-white/10',
+      'focus:bg-black/5 dark:focus:bg-white/10',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
       className,
     )}
@@ -99,7 +104,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm text-zinc-950 outline-none hover:bg-black/5 dark:text-white dark:hover:bg-white/10',
+      'focus:bg-black/5 dark:focus:bg-white/10',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     checked={checked}
@@ -123,7 +130,9 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm text-zinc-950 outline-none hover:bg-black/5 dark:text-white dark:hover:bg-white/10',
+      'focus:bg-black/5 dark:focus:bg-white/10',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     {...props}
@@ -147,7 +156,7 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      'px-2 py-1.5 text-sm font-semibold',
+      'py-1.5 pl-2 pr-2 text-sm font-semibold text-zinc-950 dark:text-white',
       inset && 'pl-8',
       className,
     )}
@@ -162,7 +171,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    className={cn('-mx-1 my-1 h-px bg-zinc-950/10 dark:bg-white/10', className)}
     {...props}
   />
 ));
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index c9b6211f..cb7a2c69 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -7,19 +7,65 @@ export interface InputProps
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
+    const dateTypes = ['date', 'datetime-local', 'month', 'time', 'week'];
+    const isDateType = type && dateTypes.includes(type);
+
     return (
-      <input
-        type={type}
-        className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-zinc-900 dark:text-zinc-400',
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
+      <span
+        data-slot="control"
+        className={cn([
+          'relative block w-full',
+          'before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow',
+          'dark:before:hidden',
+          'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent sm:after:focus-within:ring-2 sm:after:focus-within:ring-blue-500',
+          'has-[[data-disabled]]:opacity-50 before:has-[[data-disabled]]:bg-zinc-950/5 before:has-[[data-disabled]]:shadow-none',
+          'before:has-[[data-invalid]]:shadow-red-500/10',
+        ])}
+      >
+        <input
+          type={type}
+          className={cn([
+            // Date-specific styles
+            isDateType && [
+              '[&::-webkit-datetime-edit-fields-wrapper]:p-0',
+              '[&::-webkit-date-and-time-value]:min-h-[1.5em]',
+              '[&::-webkit-datetime-edit]:inline-flex',
+              '[&::-webkit-datetime-edit]:p-0',
+              '[&::-webkit-datetime-edit-year-field]:p-0',
+              '[&::-webkit-datetime-edit-month-field]:p-0',
+              '[&::-webkit-datetime-edit-day-field]:p-0',
+              '[&::-webkit-datetime-edit-hour-field]:p-0',
+              '[&::-webkit-datetime-edit-minute-field]:p-0',
+              '[&::-webkit-datetime-edit-second-field]:p-0',
+              '[&::-webkit-datetime-edit-millisecond-field]:p-0',
+              '[&::-webkit-datetime-edit-meridiem-field]:p-0',
+            ],
+            // Basic layout
+            'relative block w-full appearance-none rounded-lg px-3.5 py-2.5 sm:px-3 sm:py-1.5',
+            // Typography
+            'text-base/6 text-zinc-950 placeholder:text-zinc-500 dark:text-white sm:text-sm/6',
+            // Border
+            'border border-zinc-950/10 data-[hover]:border-zinc-950/20 dark:border-white/10 dark:data-[hover]:border-white/20',
+            // Background color
+            'bg-transparent dark:bg-white/5',
+            // Hide default focus styles
+            'focus:outline-none',
+            // Invalid state
+            'data-[invalid]:border-red-500 data-[invalid]:data-[hover]:border-red-500 data-[invalid]:dark:border-red-500 data-[invalid]:data-[hover]:dark:border-red-500',
+            // Disabled state
+            'data-[disabled]:border-zinc-950/20 dark:data-[hover]:data-[disabled]:border-white/15 data-[disabled]:dark:border-white/15 data-[disabled]:dark:bg-white/[2.5%]',
+            // System icons
+            'dark:[color-scheme:dark]',
+            className,
+          ])}
+          ref={ref}
+          {...props}
+        />
+      </span>
     );
   },
 );
+
 Input.displayName = 'Input';
 
 export { Input };
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 702d7442..710ead6a 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -16,19 +16,37 @@ const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:text-zinc-400 [&>span]:line-clamp-1',
-      className,
-    )}
-    {...props}
+  <span
+    data-slot="control"
+    className={cn([
+      'relative block w-full',
+      'before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow',
+      'dark:before:hidden',
+      'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent sm:after:focus-within:ring-2 sm:after:focus-within:ring-blue-500',
+      'has-[[data-disabled]]:opacity-50 before:has-[[data-disabled]]:bg-zinc-950/5 before:has-[[data-disabled]]:shadow-none',
+    ])}
   >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'relative block w-full appearance-none rounded-lg px-3.5 py-2.5 sm:px-3 sm:py-1.5',
+        'text-base/6 text-zinc-950 placeholder:text-zinc-500 dark:text-white sm:text-sm/6',
+        'border border-zinc-950/10 data-[hover]:border-zinc-950/20 dark:border-white/10 dark:data-[hover]:border-white/20',
+        'bg-transparent dark:bg-white/5',
+        'focus:outline-none',
+        'data-[disabled]:border-zinc-950/20 dark:data-[hover]:data-[disabled]:border-white/15 data-[disabled]:dark:border-white/15 data-[disabled]:dark:bg-white/[2.5%]',
+        'dark:[color-scheme:dark]',
+        'flex items-center justify-between [&>span]:line-clamp-1',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDown className="h-4 w-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  </span>
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
@@ -44,7 +62,7 @@ const SelectScrollUpButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronUp className="h-4 w-4" />
+    <ChevronUp className="h-4 w-4 opacity-50" />
   </SelectPrimitive.ScrollUpButton>
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -61,7 +79,7 @@ const SelectScrollDownButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronDown className="h-4 w-4" />
+    <ChevronDown className="h-4 w-4 opacity-50" />
   </SelectPrimitive.ScrollDownButton>
 ));
 SelectScrollDownButton.displayName =
@@ -75,7 +93,8 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border-none bg-white p-1 shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)] dark:bg-zinc-900 dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1)] dark:before:pointer-events-none dark:before:absolute dark:before:-inset-px dark:before:rounded-xl dark:before:shadow-[0px_2px_8px_0px_rgba(0,_0,_0,_0.20),_0px_1px_0px_0px_rgba(255,_255,_255,_0.06)_inset]',
+        '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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className,
@@ -105,7 +124,10 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    className={cn(
+      'py-1.5 pl-2 pr-2 text-sm font-semibold text-zinc-950 dark:text-white',
+      className,
+    )}
     {...props}
   />
 ));
@@ -118,7 +140,9 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm text-zinc-950 outline-none hover:bg-black/5 dark:text-white dark:hover:bg-white/10',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'focus:bg-black/5 dark:focus:bg-white/10',
       className,
     )}
     {...props}
@@ -140,7 +164,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    className={cn('-mx-1 my-1 h-px bg-zinc-950/10 dark:bg-white/10', className)}
     {...props}
   />
 ));
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
index a626d9ba..5d7264d8 100644
--- a/components/ui/skeleton.tsx
+++ b/components/ui/skeleton.tsx
@@ -6,7 +6,10 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn('animate-pulse rounded-md bg-muted', className)}
+      className={cn(
+        'animate-pulse rounded-md bg-zinc-200 dark:bg-zinc-800',
+        className,
+      )}
       {...props}
     />
   );
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
index 4eca3ac5..74feef45 100644
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@@ -6,12 +6,19 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn('w-full caption-bottom text-sm', className)}
-      {...props}
-    />
+  <div className="flow-root">
+    <div className="overflow-x-auto whitespace-nowrap">
+      <div className="inline-block min-w-full align-middle">
+        <table
+          ref={ref}
+          className={cn(
+            'min-w-full text-left text-sm/6 text-zinc-950 dark:text-white',
+            className,
+          )}
+          {...props}
+        />
+      </div>
+    </div>
   </div>
 ));
 Table.displayName = 'Table';
@@ -20,7 +27,11 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+  <thead
+    ref={ref}
+    className={cn('text-zinc-500 dark:text-zinc-400', className)}
+    {...props}
+  />
 ));
 TableHeader.displayName = 'TableHeader';
 
@@ -28,11 +39,7 @@ const TableBody = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn('[&_tr:last-child]:border-0', className)}
-    {...props}
-  />
+  <tbody ref={ref} className={className} {...props} />
 ));
 TableBody.displayName = 'TableBody';
 
@@ -52,14 +59,7 @@ const TableRow = React.forwardRef<
   HTMLTableRowElement,
   React.HTMLAttributes<HTMLTableRowElement>
 >(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
-      className,
-    )}
-    {...props}
-  />
+  <tr ref={ref} className={cn(className)} {...props} />
 ));
 TableRow.displayName = 'TableRow';
 
@@ -70,7 +70,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'h-12 px-4 text-left align-middle font-medium text-zinc-500 dark:text-zinc-400 [&:has([role=checkbox])]:pr-0',
+      'border-b border-b-zinc-950/10 px-4 py-2 font-medium first:pl-2 last:pr-2 dark:border-b-white/10',
       className,
     )}
     {...props}
@@ -84,7 +84,10 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    className={cn(
+      'relative border-b border-zinc-950/5 px-4 py-4 first:pl-2 last:pr-2 dark:border-white/5',
+      className,
+    )}
     {...props}
   />
 ));
diff --git a/next.config.js b/next.config.js
index f42eda1e..fe22edc7 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: false,
   webpack(config, { isServer }) {
     // Configures webpack to handle SVG files with SVGR. SVGR optimizes and transforms SVG files
     // into React components. See https://react-svgr.com/docs/next/