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

components/accounts/account-card.tsx

@@ -79,9 +79,10 @@ export function AccountCard({
   const cardContent = (
     <Card
       className={cn(
-        "relative",
-        isSelected && "ring-2 ring-primary",
-        isDragging && "bg-muted/80",
+        "relative group",
+        isSelected && "ring-2 ring-primary shadow-lg shadow-primary/10",
+        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(
-              "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",
-                isMobile ? "w-3 h-3" : "w-4 h-4"
-              )} />
+            <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", isMobile ? "w-3 h-3" : "w-4 h-4")}
+              />
             </div>
             <div className="min-w-0 flex-1">
-              <CardTitle className={cn(
-                "font-semibold truncate leading-tight",
-                isMobile ? "text-[11px]" : "text-sm"
-              )}>
+              <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(
-                "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"
-                )} />
+              <Button
+                variant="ghost"
+                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")}
+                />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
@@ -164,19 +169,22 @@ export function AccountCard({
           </DropdownMenu>
         </div>
       </CardHeader>
-      <CardContent className={cn(
-        isMobile ? "px-2 pb-2 pt-1" : "pt-1",
-        compact && "pt-0"
-      )}>
+      <CardContent
+        className={cn(isMobile ? "px-2 pb-2 pt-1" : "pt-1", 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 ? "text-base" : "text-xl",
+              compact
+                ? isMobile
+                  ? "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(
-              "flex items-center justify-between gap-2 mt-1",
-              isMobile ? "text-[10px]" : "text-xs",
-              "text-muted-foreground"
-            )}>
+            <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
-        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"
-        )}
-      >
+      <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">
             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",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground",
+        "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}