feat: update global styles and component designs for enhanced aesthetics and responsiveness, including new gradients, shadows, and transitions

app/globals.css

@@ -4,74 +4,117 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --background: oklch(1 0 0);
+  /* Background moderne avec légère teinte */
-  --foreground: oklch(0.145 0 0);
+  --background: oklch(0.99 0.002 270);
-  --card: oklch(1 0 0);
+  --foreground: oklch(0.15 0.01 270);
-  --card-foreground: oklch(0.145 0 0);
+  
-  --popover: oklch(1 0 0);
+  /* Cards avec glassmorphism subtil */
-  --popover-foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0 / 0.8);
-  --primary: oklch(0.205 0 0);
+  --card-foreground: oklch(0.15 0.01 270);
-  --primary-foreground: oklch(0.985 0 0);
+  
-  --secondary: oklch(0.97 0 0);
+  /* Popover avec backdrop blur */
-  --secondary-foreground: oklch(0.205 0 0);
+  --popover: oklch(1 0 0 / 0.95);
-  --muted: oklch(0.97 0 0);
+  --popover-foreground: oklch(0.15 0.01 270);
-  --muted-foreground: oklch(0.556 0 0);
+  
-  --accent: oklch(0.97 0 0);
+  /* Primary: Bleu/violet fintech moderne */
-  --accent-foreground: oklch(0.205 0 0);
+  --primary: oklch(0.55 0.18 260);
-  --destructive: oklch(0.577 0.245 27.325);
+  --primary-foreground: oklch(0.99 0 0);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
+  
-  --border: oklch(0.922 0 0);
+  /* Secondary avec teinte subtile */
-  --input: oklch(0.922 0 0);
+  --secondary: oklch(0.97 0.005 270);
-  --ring: oklch(0.708 0 0);
+  --secondary-foreground: oklch(0.25 0.01 270);
-  --chart-1: oklch(0.646 0.222 41.116);
+  
-  --chart-2: oklch(0.6 0.118 184.704);
+  /* Muted plus doux */
-  --chart-3: oklch(0.398 0.07 227.392);
+  --muted: oklch(0.96 0.003 270);
-  --chart-4: oklch(0.828 0.189 84.429);
+  --muted-foreground: oklch(0.5 0.008 270);
-  --chart-5: oklch(0.769 0.188 70.08);
+  
-  --radius: 0.625rem;
+  /* Accent avec couleur vibrante */
-  --sidebar: oklch(0.985 0 0);
+  --accent: oklch(0.95 0.01 260);
-  --sidebar-foreground: oklch(0.145 0 0);
+  --accent-foreground: oklch(0.55 0.18 260);
-  --sidebar-primary: oklch(0.205 0 0);
+  
-  --sidebar-primary-foreground: oklch(0.985 0 0);
+  /* Destructive moderne */
-  --sidebar-accent: oklch(0.97 0 0);
+  --destructive: oklch(0.55 0.22 25);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --destructive-foreground: oklch(0.99 0 0);
-  --sidebar-border: oklch(0.922 0 0);
+  
-  --sidebar-ring: oklch(0.708 0 0);
+  /* Bordures fines et subtiles */
+  --border: oklch(0.92 0.005 270 / 0.6);
+  --input: oklch(0.96 0.003 270);
+  --ring: oklch(0.55 0.18 260 / 0.3);
+  
+  /* Chart colors modernes et vibrantes */
+  --chart-1: oklch(0.6 0.2 260);
+  --chart-2: oklch(0.65 0.18 180);
+  --chart-3: oklch(0.7 0.15 120);
+  --chart-4: oklch(0.65 0.2 320);
+  --chart-5: oklch(0.6 0.18 40);
+  
+  --radius: 0.75rem;
+  
+  /* Sidebar moderne */
+  --sidebar: oklch(0.98 0.003 270);
+  --sidebar-foreground: oklch(0.2 0.01 270);
+  --sidebar-primary: oklch(0.55 0.18 260);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.95 0.01 260);
+  --sidebar-accent-foreground: oklch(0.25 0.01 270);
+  --sidebar-border: oklch(0.92 0.005 270 / 0.5);
+  --sidebar-ring: oklch(0.55 0.18 260 / 0.2);
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
+  /* Background sombre avec teinte subtile */
-  --foreground: oklch(0.985 0 0);
+  --background: oklch(0.12 0.01 270);
-  --card: oklch(0.145 0 0);
+  --foreground: oklch(0.98 0.002 270);
-  --card-foreground: oklch(0.985 0 0);
+  
-  --popover: oklch(0.145 0 0);
+  /* Cards avec effet glassmorphism sombre */
-  --popover-foreground: oklch(0.985 0 0);
+  --card: oklch(0.15 0.01 270 / 0.7);
-  --primary: oklch(0.985 0 0);
+  --card-foreground: oklch(0.98 0.002 270);
-  --primary-foreground: oklch(0.205 0 0);
+  
-  --secondary: oklch(0.269 0 0);
+  /* Popover avec backdrop blur */
-  --secondary-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.15 0.01 270 / 0.95);
-  --muted: oklch(0.269 0 0);
+  --popover-foreground: oklch(0.98 0.002 270);
-  --muted-foreground: oklch(0.708 0 0);
+  
-  --accent: oklch(0.269 0 0);
+  /* Primary: Bleu/violet brillant pour dark mode */
-  --accent-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.65 0.2 260);
-  --destructive: oklch(0.396 0.141 25.723);
+  --primary-foreground: oklch(0.12 0.01 270);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
+  
-  --border: oklch(0.269 0 0);
+  /* Secondary avec plus de contraste */
-  --input: oklch(0.269 0 0);
+  --secondary: oklch(0.22 0.01 270);
-  --ring: oklch(0.439 0 0);
+  --secondary-foreground: oklch(0.95 0.002 270);
-  --chart-1: oklch(0.488 0.243 264.376);
+  
-  --chart-2: oklch(0.696 0.17 162.48);
+  /* Muted plus visible */
-  --chart-3: oklch(0.769 0.188 70.08);
+  --muted: oklch(0.22 0.01 270);
-  --chart-4: oklch(0.627 0.265 303.9);
+  --muted-foreground: oklch(0.65 0.008 270);
-  --chart-5: oklch(0.645 0.246 16.439);
+  
-  --sidebar: oklch(0.205 0 0);
+  /* Accent vibrant */
-  --sidebar-foreground: oklch(0.985 0 0);
+  --accent: oklch(0.25 0.015 260);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --accent-foreground: oklch(0.65 0.2 260);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
+  
-  --sidebar-accent: oklch(0.269 0 0);
+  /* Destructive moderne */
-  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.6 0.22 25);
-  --sidebar-border: oklch(0.269 0 0);
+  --destructive-foreground: oklch(0.98 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
+  
+  /* Bordures subtiles */
+  --border: oklch(0.25 0.01 270 / 0.5);
+  --input: oklch(0.22 0.01 270);
+  --ring: oklch(0.65 0.2 260 / 0.4);
+  
+  /* Chart colors vibrantes pour dark */
+  --chart-1: oklch(0.7 0.22 260);
+  --chart-2: oklch(0.75 0.2 180);
+  --chart-3: oklch(0.8 0.18 120);
+  --chart-4: oklch(0.75 0.22 320);
+  --chart-5: oklch(0.7 0.2 40);
+  
+  /* Sidebar dark moderne */
+  --sidebar: oklch(0.14 0.01 270);
+  --sidebar-foreground: oklch(0.95 0.002 270);
+  --sidebar-primary: oklch(0.65 0.2 260);
+  --sidebar-primary-foreground: oklch(0.12 0.01 270);
+  --sidebar-accent: oklch(0.25 0.015 260);
+  --sidebar-accent-foreground: oklch(0.95 0.002 270);
+  --sidebar-border: oklch(0.25 0.01 270 / 0.4);
+  --sidebar-ring: oklch(0.65 0.2 260 / 0.3);
 }
 
 @theme inline {
@@ -121,9 +164,45 @@
   }
   body {
     @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
   }
   
-  /* Background avec beau dégradé */
+  /* Animations fintech modernes */
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  @keyframes slide-in {
+    from {
+      opacity: 0;
+      transform: translateX(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  
+  /* Smooth scrolling */
+  html {
+    scroll-behavior: smooth;
+  }
+  
+  /* Amélioration des transitions globales */
+  * {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+  
+  /* Background fintech moderne avec dégradés subtils */
   .page-background {
     position: relative;
     background: var(--background);
@@ -138,58 +217,37 @@
     bottom: 0;
     z-index: 0;
     background: 
-      radial-gradient(ellipse 80% 50% at 50% -20%, 
+      radial-gradient(ellipse 100% 60% at 0% 0%, 
-        color-mix(in srgb, var(--chart-1) 25%, transparent) 0%,
+        color-mix(in srgb, var(--primary) 8%, transparent) 0%,
-        transparent 50%
+        transparent 60%
       ),
-      radial-gradient(ellipse 60% 80% at -10% 50%, 
+      radial-gradient(ellipse 80% 50% at 100% 100%, 
-        color-mix(in srgb, var(--chart-2) 20%, transparent) 0%,
+        color-mix(in srgb, var(--chart-2) 6%, transparent) 0%,
-        transparent 50%
+        transparent 60%
       ),
-      radial-gradient(ellipse 60% 80% at 110% 50%, 
+      radial-gradient(ellipse 60% 40% at 50% 50%, 
-        color-mix(in srgb, var(--chart-3) 20%, transparent) 0%,
+        color-mix(in srgb, var(--chart-3) 4%, transparent) 0%,
-        transparent 50%
+        transparent 70%
-      ),
-      radial-gradient(ellipse 80% 50% at 50% 120%, 
-        color-mix(in srgb, var(--chart-4) 25%, transparent) 0%,
-        transparent 50%
-      ),
-      linear-gradient(
-        135deg,
-        color-mix(in srgb, var(--chart-1) 8%, transparent) 0%,
-        transparent 25%,
-        transparent 75%,
-        color-mix(in srgb, var(--chart-2) 8%, transparent) 100%
       );
     background-size: 100% 100%;
     pointer-events: none;
     opacity: 1;
+    transition: opacity 0.3s ease;
   }
   
   .dark .page-background::before {
     background: 
-      radial-gradient(ellipse 80% 50% at 50% -20%, 
+      radial-gradient(ellipse 100% 60% at 0% 0%, 
-        color-mix(in srgb, var(--chart-1) 35%, transparent) 0%,
+        color-mix(in srgb, var(--primary) 12%, transparent) 0%,
-        transparent 50%
+        transparent 60%
       ),
-      radial-gradient(ellipse 60% 80% at -10% 50%, 
+      radial-gradient(ellipse 80% 50% at 100% 100%, 
-        color-mix(in srgb, var(--chart-2) 30%, transparent) 0%,
+        color-mix(in srgb, var(--chart-2) 10%, transparent) 0%,
-        transparent 50%
+        transparent 60%
       ),
-      radial-gradient(ellipse 60% 80% at 110% 50%, 
+      radial-gradient(ellipse 60% 40% at 50% 50%, 
-        color-mix(in srgb, var(--chart-3) 30%, transparent) 0%,
+        color-mix(in srgb, var(--chart-3) 8%, transparent) 0%,
-        transparent 50%
+        transparent 70%
-      ),
-      radial-gradient(ellipse 80% 50% at 50% 120%, 
-        color-mix(in srgb, var(--chart-4) 35%, transparent) 0%,
-        transparent 50%
-      ),
-      linear-gradient(
-        135deg,
-        color-mix(in srgb, var(--chart-1) 12%, transparent) 0%,
-        transparent 25%,
-        transparent 75%,
-        color-mix(in srgb, var(--chart-2) 12%, transparent) 100%
       );
     opacity: 1;
   }

components/accounts/account-card.tsx

@@ -79,9 +79,10 @@ export function AccountCard({
   const cardContent = (
     <Card
       className={cn(
-        "relative",
+        "relative group",
-        isSelected && "ring-2 ring-primary",
+        isSelected && "ring-2 ring-primary shadow-lg shadow-primary/10",
-        isDragging && "bg-muted/80",
+        isDragging && "bg-muted/80 opacity-60",
+        "hover:scale-[1.02] transition-transform duration-200"
       )}
     >
       <CardHeader className={cn("pb-0", isMobile && "px-2 pt-2")}>
@@ -107,20 +108,23 @@ export function AccountCard({
                 className="shrink-0"
               />
             )}
-            <div className={cn(
+            <div
+              className={cn(
                 "rounded-full bg-primary/10 flex items-center justify-center shrink-0",
                 isMobile ? "w-6 h-6" : "w-8 h-8"
-            )}>
+              )}
-              <Icon className={cn(
+            >
-                "text-primary",
+              <Icon
-                isMobile ? "w-3 h-3" : "w-4 h-4"
+                className={cn("text-primary", isMobile ? "w-3 h-3" : "w-4 h-4")}
-              )} />
+              />
             </div>
             <div className="min-w-0 flex-1">
-              <CardTitle className={cn(
+              <CardTitle
+                className={cn(
                   "font-semibold truncate leading-tight",
                   isMobile ? "text-[11px]" : "text-sm"
-              )}>
+                )}
+              >
                 {account.name}
               </CardTitle>
               {!compact && !isMobile && (
@@ -139,13 +143,14 @@ export function AccountCard({
           </div>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="ghost" size="icon" className={cn(
+              <Button
-                "shrink-0",
+                variant="ghost"
-                isMobile ? "h-5 w-5" : "h-7 w-7"
+                size="icon"
-              )}>
+                className={cn("shrink-0", isMobile ? "h-5 w-5" : "h-7 w-7")}
-                <MoreVertical className={cn(
+              >
-                  isMobile ? "w-2.5 h-2.5" : "w-3.5 h-3.5"
+                <MoreVertical
-                )} />
+                  className={cn(isMobile ? "w-2.5 h-2.5" : "w-3.5 h-3.5")}
+                />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
@@ -164,19 +169,22 @@ export function AccountCard({
           </DropdownMenu>
         </div>
       </CardHeader>
-      <CardContent className={cn(
+      <CardContent
-        isMobile ? "px-2 pb-2 pt-1" : "pt-1",
+        className={cn(isMobile ? "px-2 pb-2 pt-1" : "pt-1", compact && "pt-0")}
-        compact && "pt-0"
+      >
-      )}>
         <div className="flex items-center justify-between gap-1.5">
           <div
             className={cn(
               "font-bold truncate",
               compact
-                ? isMobile ? "text-sm" : "text-lg"
+                ? isMobile
-                : isMobile ? "text-base" : "text-xl",
+                  ? "text-sm"
+                  : "text-lg"
+                : isMobile
+                  ? "text-base"
+                  : "text-xl",
               !compact && !isMobile && "mb-1.5",
-              realBalance >= 0 ? "text-emerald-600" : "text-red-600",
+              realBalance >= 0 ? "text-emerald-600" : "text-red-600"
             )}
           >
             {formatCurrency(realBalance)}
@@ -195,11 +203,13 @@ export function AccountCard({
         </div>
         {!compact && (
           <>
-            <div className={cn(
+            <div
+              className={cn(
                 "flex items-center justify-between gap-2 mt-1",
                 isMobile ? "text-[10px]" : "text-xs",
                 "text-muted-foreground"
-            )}>
+              )}
+            >
               <Link
                 href={`/transactions?accountId=${account.id}`}
                 className="hover:text-primary hover:underline truncate"

components/dashboard/overview-cards.tsx

@@ -46,14 +46,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
 
   return (
     <div className="grid gap-3 sm:gap-4 grid-cols-2 lg:grid-cols-4">
-      <Card
+      <Card className="border shadow-sm">
-        className={cn(
-          "border shadow-sm bg-gradient-to-br",
-          totalBalance >= 0
-            ? "from-emerald-50/50 to-card dark:from-emerald-950/20 dark:to-card"
-            : "from-red-50/50 to-card dark:from-red-950/20 dark:to-card"
-        )}
-      >
         <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
           <CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
             Solde Total
@@ -77,7 +70,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
         </CardContent>
       </Card>
 
-      <Card className="border shadow-sm bg-gradient-to-br from-emerald-50/50 to-card dark:from-emerald-950/20 dark:to-card">
+      <Card className="border shadow-sm">
         <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
           <CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
             Revenus du mois
@@ -99,7 +92,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
         </CardContent>
       </Card>
 
-      <Card className="border shadow-sm bg-gradient-to-br from-red-50/50 to-card dark:from-red-950/20 dark:to-card">
+      <Card className="border shadow-sm">
         <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
           <CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
             Dépenses du mois
@@ -121,7 +114,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
         </CardContent>
       </Card>
 
-      <Card className="border shadow-sm bg-gradient-to-br from-blue-50/50 to-card dark:from-blue-950/20 dark:to-card">
+      <Card className="border shadow-sm">
         <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-4 pt-4 sm:px-6 sm:pt-6">
           <CardTitle className="text-sm font-medium text-muted-foreground leading-tight">
             Pointage

components/ui/button.tsx

@@ -5,19 +5,19 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-lg hover:shadow-primary/25 active:scale-[0.98]",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-white hover:bg-destructive/90 hover:shadow-lg hover:shadow-destructive/25 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 active:scale-[0.98]",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background/80 backdrop-blur-sm shadow-sm hover:bg-accent hover:text-accent-foreground hover:border-primary/30 hover:shadow-md dark:bg-input/30 dark:border-input dark:hover:bg-input/50 active:scale-[0.98]",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 hover:shadow-sm active:scale-[0.98]",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 active:scale-[0.98]",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {

components/ui/card.tsx

@@ -7,7 +7,12 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col rounded-xl border shadow-sm",
+        "bg-card text-card-foreground flex flex-col rounded-xl border",
+        "shadow-[0_1px_3px_0_rgb(0_0_0_/_0.05),0_1px_2px_-1px_rgb(0_0_0_/_0.05)]",
+        "backdrop-blur-sm",
+        "transition-all duration-200",
+        "hover:shadow-[0_4px_12px_0_rgb(0_0_0_/_0.08),0_2px_4px_-1px_rgb(0_0_0_/_0.06)]",
+        "hover:border-primary/20",
         className
       )}
       {...props}

components/ui/dropdown-menu.tsx

@@ -42,7 +42,10 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          "bg-popover text-popover-foreground backdrop-blur-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",
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
+          "rounded-lg border border-border/50 p-1 shadow-lg shadow-black/5",
           className,
         )}
         {...props}

components/ui/input.tsx

@@ -8,8 +8,13 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "dark:bg-input/40 border-input h-9 w-full min-w-0 rounded-lg border bg-background/50 backdrop-blur-sm px-3 py-1 text-base",
+        "shadow-sm transition-all duration-200 outline-none",
+        "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
+        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-primary/50 focus-visible:ring-primary/20 focus-visible:ring-[3px] focus-visible:shadow-md focus-visible:shadow-primary/10",
+        "hover:border-primary/30 hover:shadow-sm",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className,
       )}

components/ui/textarea.tsx

@@ -7,7 +7,13 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-input placeholder:text-muted-foreground",
+        "dark:bg-input/40 flex field-sizing-content min-h-16 w-full rounded-lg border bg-background/50 backdrop-blur-sm px-3 py-2 text-base",
+        "shadow-sm transition-all duration-200 outline-none",
+        "focus-visible:border-primary/50 focus-visible:ring-primary/20 focus-visible:ring-[3px] focus-visible:shadow-md focus-visible:shadow-primary/10",
+        "hover:border-primary/30 hover:shadow-sm",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className,
       )}
       {...props}