From dff2a9061ff13eef263b53839f99d0c7f7fee269 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Sat, 20 Dec 2025 11:02:11 +0100
Subject: [PATCH] refactor: remove transition effects from various components
 for improved performance and consistency

---
 app/globals.css                               | 57 ++-----------------
 components/accounts/account-card.tsx          |  1 -
 components/categories/category-card.tsx       |  4 +-
 components/categories/parent-category-row.tsx |  2 +-
 components/dashboard/accounts-summary.tsx     |  8 +--
 components/dashboard/overview-cards.tsx       | 18 +++---
 components/dashboard/recent-transactions.tsx  |  6 +-
 components/dashboard/sidebar.tsx              | 19 +++----
 components/rules/rule-group-card.tsx          |  2 +-
 components/ui/breadcrumb.tsx                  |  2 +-
 components/ui/button.tsx                      | 17 +++---
 components/ui/card.tsx                        |  1 -
 components/ui/dialog.tsx                      |  2 +-
 components/ui/icon-picker.tsx                 |  2 +-
 components/ui/sheet.tsx                       |  2 +-
 components/ui/table.tsx                       |  2 +-
 16 files changed, 44 insertions(+), 101 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index a606e9a..39322ea 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -273,13 +273,9 @@
     scroll-behavior: smooth;
   }
 
-  /* Amélioration des transitions globales avec easing fintech */
+  /* Transitions globales désactivées */
   * {
-    transition-property:
-      color, background-color, border-color, text-decoration-color, fill,
-      stroke, opacity, box-shadow, transform, filter;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 200ms;
+    transition: none !important;
   }
 
   /* Désactiver COMPLÈTEMENT toutes les animations pour les popovers et selects - APPROCHE AGRESSIVE */
@@ -358,42 +354,13 @@
     font-weight: 700;
   }
 
-  /* Card hover effect avec élévation */
+  /* Card hover effect désactivé */
   .card-hover {
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
   }
 
   .card-hover::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    padding: 1px;
-    background: linear-gradient(
-      135deg,
-      color-mix(in srgb, var(--primary) 30%, transparent) 0%,
-      color-mix(in srgb, var(--chart-2) 20%, transparent) 100%
-    );
-    -webkit-mask:
-      linear-gradient(#fff 0 0) content-box,
-      linear-gradient(#fff 0 0);
-    -webkit-mask-composite: xor;
-    mask-composite: exclude;
-    opacity: 0;
-    transition: opacity 0.4s ease;
-  }
-
-  .card-hover:hover {
-    transform: translateY(-4px) scale(1.01);
-    box-shadow:
-      0 20px 40px -12px color-mix(in srgb, var(--primary) 20%, transparent),
-      0 8px 16px -8px color-mix(in srgb, var(--foreground) 10%, transparent),
-      inset 0 1px 0 0 color-mix(in srgb, white 30%, transparent);
-  }
-
-  .card-hover:hover::before {
-    opacity: 1;
+    display: none;
   }
 
   /* Background fintech moderne avec dégradés animés et formes abstraites */
@@ -446,8 +413,6 @@
     background-size: 200% 200%;
     pointer-events: none;
     opacity: 1;
-    transition: opacity 0.5s ease;
-    animation: gradient-shift 25s ease infinite;
   }
 
   .dark .page-background {
@@ -505,7 +470,6 @@
       0 8px 32px -8px color-mix(in srgb, var(--primary) 8%, transparent),
       0 2px 8px -2px color-mix(in srgb, var(--foreground) 3%, transparent),
       inset 0 1px 0 0 color-mix(in srgb, white 25%, transparent);
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
   }
@@ -526,15 +490,6 @@
     opacity: 0.5;
   }
 
-  .fintech-card:hover {
-    transform: translateY(-6px) scale(1.01);
-    box-shadow:
-      0 24px 48px -12px color-mix(in srgb, var(--primary) 25%, transparent),
-      0 8px 24px -8px color-mix(in srgb, var(--foreground) 8%, transparent),
-      inset 0 1px 0 0 color-mix(in srgb, white 40%, transparent);
-    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
-  }
-
   /* Gradient backgrounds for stat cards très vibrants */
   .stat-card-gradient-1 {
     background: linear-gradient(
@@ -560,7 +515,6 @@
       transparent 70%
     );
     opacity: 0.3;
-    animation: gradient-shift 8s ease infinite;
   }
 
   .stat-card-gradient-2 {
@@ -587,7 +541,6 @@
       transparent 70%
     );
     opacity: 0.3;
-    animation: gradient-shift 8s ease infinite;
   }
 
   .stat-card-gradient-3 {
@@ -614,7 +567,6 @@
       transparent 70%
     );
     opacity: 0.3;
-    animation: gradient-shift 8s ease infinite;
   }
 
   .stat-card-gradient-4 {
@@ -641,6 +593,5 @@
       transparent 70%
     );
     opacity: 0.3;
-    animation: gradient-shift 8s ease infinite;
   }
 }
diff --git a/components/accounts/account-card.tsx b/components/accounts/account-card.tsx
index a635ede..b6c01f1 100644
--- a/components/accounts/account-card.tsx
+++ b/components/accounts/account-card.tsx
@@ -82,7 +82,6 @@ export function AccountCard({
         "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")}>
diff --git a/components/categories/category-card.tsx b/components/categories/category-card.tsx
index 6ed84e2..b7853fd 100644
--- a/components/categories/category-card.tsx
+++ b/components/categories/category-card.tsx
@@ -25,7 +25,7 @@ export function CategoryCard({
   const isMobile = useIsMobile();
 
   return (
-    <div className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-muted/50 transition-colors group">
+    <div className="flex items-center justify-between py-1.5 px-2 rounded group">
       <div className="flex items-center gap-2 min-w-0 flex-1">
         <div
           className="w-4 h-4 md:w-5 md:h-5 rounded-full flex items-center justify-center shrink-0"
@@ -59,7 +59,7 @@ export function CategoryCard({
         )}
       </div>
 
-      <div className="flex items-center shrink-0 opacity-0 group-hover:opacity-100 md:opacity-100 transition-opacity">
+      <div className="flex items-center shrink-0 opacity-0 group-hover:opacity-100 md:opacity-100">
         <Button
           variant="ghost"
           size="icon"
diff --git a/components/categories/parent-category-row.tsx b/components/categories/parent-category-row.tsx
index 2eb6349..d8db228 100644
--- a/components/categories/parent-category-row.tsx
+++ b/components/categories/parent-category-row.tsx
@@ -57,7 +57,7 @@ export function ParentCategoryRow({
       <Collapsible open={isExpanded} onOpenChange={onToggleExpanded}>
         <div className="flex items-center justify-between px-2 md:px-3 py-1.5 md:py-2">
           <CollapsibleTrigger asChild>
-            <button className="flex items-center gap-1.5 md:gap-2 hover:opacity-80 transition-opacity flex-1 min-w-0">
+            <button className="flex items-center gap-1.5 md:gap-2 hover:opacity-80 flex-1 min-w-0">
               {isExpanded ? (
                 <ChevronDown className="w-3 h-3 md:w-4 md:h-4 text-muted-foreground shrink-0" />
               ) : (
diff --git a/components/dashboard/accounts-summary.tsx b/components/dashboard/accounts-summary.tsx
index 4caa094..a2860ae 100644
--- a/components/dashboard/accounts-summary.tsx
+++ b/components/dashboard/accounts-summary.tsx
@@ -113,11 +113,11 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
               return (
                 <div
                   key={account.id}
-                  className="space-y-2.5 p-3 rounded-xl bg-muted/30 hover:bg-muted/50 border border-border/50 hover:border-primary/20 transition-all duration-300 group"
+                  className="space-y-2.5 p-3 rounded-xl bg-muted/30 border border-border/50 group"
                 >
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-3">
-                      <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                      <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center">
                         <Building2 className="w-5 h-5 text-primary" />
                       </div>
                       <div>
@@ -225,11 +225,11 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
                   return (
                     <div
                       key={account.id}
-                      className="space-y-2.5 p-3 rounded-xl bg-muted/30 hover:bg-muted/50 border border-border/50 hover:border-primary/20 transition-all duration-300 group"
+                      className="space-y-2.5 p-3 rounded-xl bg-muted/30 border border-border/50 group"
                     >
                       <div className="flex items-center justify-between">
                         <div className="flex items-center gap-3">
-                          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center">
                             <Building2 className="w-5 h-5 text-primary" />
                           </div>
                           <div>
diff --git a/components/dashboard/overview-cards.tsx b/components/dashboard/overview-cards.tsx
index 52acd4e..54c793b 100644
--- a/components/dashboard/overview-cards.tsx
+++ b/components/dashboard/overview-cards.tsx
@@ -13,7 +13,7 @@ interface OverviewCardsProps {
 export function OverviewCards({ data }: OverviewCardsProps) {
   const totalBalance = data.accounts.reduce(
     (sum, acc) => sum + getAccountBalance(acc),
-    0,
+    0
   );
 
   const thisMonth = new Date();
@@ -21,7 +21,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
   const thisMonthStr = thisMonth.toISOString().slice(0, 7);
 
   const monthTransactions = data.transactions.filter((t) =>
-    t.date.startsWith(thisMonthStr),
+    t.date.startsWith(thisMonthStr)
   );
 
   const income = monthTransactions
@@ -47,12 +47,11 @@ export function OverviewCards({ data }: OverviewCardsProps) {
   return (
     <div className="grid gap-4 sm:gap-6 grid-cols-2 lg:grid-cols-4">
       <Card className="stat-card-gradient-1 card-hover group relative overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-br from-primary/8 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
         <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
           <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
             Solde Total
           </CardTitle>
-          <div className="rounded-2xl bg-gradient-to-br from-primary/30 via-primary/20 to-primary/10 p-3 shrink-0 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg shadow-primary/20">
+          <div className="rounded-2xl bg-gradient-to-br from-primary/30 via-primary/20 to-primary/10 p-3 shrink-0 shadow-lg shadow-primary/20">
             <Wallet className="h-5 w-5 text-primary" />
           </div>
         </CardHeader>
@@ -62,7 +61,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
               "text-2xl sm:text-3xl md:text-3xl lg:text-xl xl:text-xl font-black tracking-tight mb-4 leading-none break-words",
               totalBalance >= 0
                 ? "text-emerald-600 dark:text-emerald-400"
-                : "text-red-600 dark:text-red-400",
+                : "text-red-600 dark:text-red-400"
             )}
           >
             {formatCurrency(totalBalance)}
@@ -74,12 +73,11 @@ export function OverviewCards({ data }: OverviewCardsProps) {
       </Card>
 
       <Card className="stat-card-gradient-2 card-hover group relative overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-br from-success/8 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
         <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
           <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
             Revenus du mois
           </CardTitle>
-          <div className="rounded-2xl bg-gradient-to-br from-success/30 via-success/20 to-success/10 p-3 shrink-0 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg shadow-success/20">
+          <div className="rounded-2xl bg-gradient-to-br from-success/30 via-success/20 to-success/10 p-3 shrink-0 shadow-lg shadow-success/20">
             <TrendingUp className="h-5 w-5 text-success" />
           </div>
         </CardHeader>
@@ -97,12 +95,11 @@ export function OverviewCards({ data }: OverviewCardsProps) {
       </Card>
 
       <Card className="stat-card-gradient-3 card-hover group relative overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-br from-destructive/8 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
         <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
           <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
             Dépenses du mois
           </CardTitle>
-          <div className="rounded-2xl bg-gradient-to-br from-destructive/30 via-destructive/20 to-destructive/10 p-3 shrink-0 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg shadow-destructive/20">
+          <div className="rounded-2xl bg-gradient-to-br from-destructive/30 via-destructive/20 to-destructive/10 p-3 shrink-0 shadow-lg shadow-destructive/20">
             <TrendingDown className="h-5 w-5 text-destructive" />
           </div>
         </CardHeader>
@@ -120,12 +117,11 @@ export function OverviewCards({ data }: OverviewCardsProps) {
       </Card>
 
       <Card className="stat-card-gradient-4 card-hover group relative overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-br from-chart-4/8 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
         <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-4 px-6 pt-6 sm:px-7 sm:pt-7 lg:px-5 lg:pt-5 relative z-10">
           <CardTitle className="text-xs font-bold text-muted-foreground/70 leading-tight uppercase tracking-widest">
             Pointage
           </CardTitle>
-          <div className="rounded-2xl bg-gradient-to-br from-chart-4/30 via-chart-4/20 to-chart-4/10 p-3 shrink-0 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg shadow-chart-4/20">
+          <div className="rounded-2xl bg-gradient-to-br from-chart-4/30 via-chart-4/20 to-chart-4/10 p-3 shrink-0 shadow-lg shadow-chart-4/20">
             <CreditCard className="h-5 w-5 text-chart-4" />
           </div>
         </CardHeader>
diff --git a/components/dashboard/recent-transactions.tsx b/components/dashboard/recent-transactions.tsx
index 10ca400..77bef64 100644
--- a/components/dashboard/recent-transactions.tsx
+++ b/components/dashboard/recent-transactions.tsx
@@ -76,7 +76,7 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
             return (
               <div
                 key={transaction.id}
-                className="group rounded-2xl bg-gradient-to-r from-muted/50 via-muted/30 to-muted/20 hover:from-muted/70 hover:via-muted/50 hover:to-muted/40 border-2 border-border/40 hover:border-primary/30 transition-all duration-300 overflow-hidden hover:shadow-lg hover:shadow-primary/10 hover:scale-[1.02] backdrop-blur-sm"
+                className="group rounded-2xl bg-gradient-to-r from-muted/50 via-muted/30 to-muted/20 border-2 border-border/40 overflow-hidden backdrop-blur-sm"
               >
                 <div className="flex items-start gap-4 md:gap-5 p-4 md:p-5">
                   <div className="flex-1 min-w-0 overflow-hidden">
@@ -89,7 +89,7 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
                           "font-black tabular-nums text-sm md:text-base shrink-0 md:hidden",
                           transaction.amount >= 0
                             ? "text-emerald-600 dark:text-emerald-400"
-                            : "text-red-600 dark:text-red-400",
+                            : "text-red-600 dark:text-red-400"
                         )}
                       >
                         {transaction.amount >= 0 ? "+" : ""}
@@ -131,7 +131,7 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
                       "font-black tabular-nums text-base md:text-lg shrink-0 hidden md:block leading-tight",
                       transaction.amount >= 0
                         ? "text-emerald-600 dark:text-emerald-400"
-                        : "text-red-600 dark:text-red-400",
+                        : "text-red-600 dark:text-red-400"
                     )}
                   >
                     {transaction.amount >= 0 ? "+" : ""}
diff --git a/components/dashboard/sidebar.tsx b/components/dashboard/sidebar.tsx
index 58a0e8e..2be50ef 100644
--- a/components/dashboard/sidebar.tsx
+++ b/components/dashboard/sidebar.tsx
@@ -85,8 +85,7 @@ function SidebarContent({
               <Button
                 variant={isActive ? "secondary" : "ghost"}
                 className={cn(
-                  "w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300",
-                  "hover:bg-muted/70 hover:scale-[1.02] hover:shadow-md",
+                  "w-full justify-start gap-4 h-12 rounded-2xl",
                   isActive &&
                     "bg-gradient-to-r from-primary/15 via-primary/10 to-primary/5 border-2 border-primary/30 shadow-lg shadow-primary/10 backdrop-blur-sm",
                   collapsed && "justify-center px-2 w-12 mx-auto",
@@ -94,8 +93,8 @@ function SidebarContent({
               >
                 <item.icon
                   className={cn(
-                    "w-5 h-5 shrink-0 transition-all duration-300",
-                    isActive && "text-primary scale-110",
+                    "w-5 h-5 shrink-0",
+                    isActive && "text-primary",
                   )}
                 />
                 {!collapsed && (
@@ -124,7 +123,7 @@ function SidebarContent({
           <Button
             variant="ghost"
             className={cn(
-              "w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300 hover:bg-muted/70 hover:scale-[1.02] hover:shadow-md",
+              "w-full justify-start gap-4 h-12 rounded-2xl",
               collapsed && "justify-center px-2 w-12 mx-auto",
             )}
           >
@@ -138,8 +137,8 @@ function SidebarContent({
           variant="ghost"
           onClick={handleSignOut}
           className={cn(
-            "w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300",
-            "text-destructive hover:text-destructive hover:bg-destructive/15 hover:scale-[1.02] hover:shadow-md",
+            "w-full justify-start gap-4 h-12 rounded-2xl",
+            "text-destructive",
             collapsed && "justify-center px-2 w-12 mx-auto",
           )}
         >
@@ -180,14 +179,14 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
   return (
     <aside
       className={cn(
-        "hidden md:flex flex-col h-screen glass border-r border-border transition-all duration-300",
+        "hidden md:flex flex-col h-screen glass border-r border-border",
         "backdrop-blur-xl",
         collapsed ? "w-16" : "w-64",
       )}
     >
       <div
         className={cn(
-          "flex items-center border-b border-border/30 transition-all duration-300",
+          "flex items-center border-b border-border/30",
           collapsed ? "justify-center p-4" : "justify-between p-6",
         )}
       >
@@ -206,7 +205,7 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
           size="icon"
           onClick={() => setCollapsed(!collapsed)}
           className={cn(
-            "hover:bg-muted/60 rounded-xl transition-all duration-300 hover:scale-110",
+            "rounded-xl",
             collapsed ? "" : "ml-auto",
           )}
         >
diff --git a/components/rules/rule-group-card.tsx b/components/rules/rule-group-card.tsx
index 495e0f3..ddcd6a9 100644
--- a/components/rules/rule-group-card.tsx
+++ b/components/rules/rule-group-card.tsx
@@ -57,7 +57,7 @@ export function RuleGroupCard({
     <div className="border border-border rounded-lg bg-card overflow-hidden">
       {/* Header */}
       <div
-        className="flex flex-col md:flex-row md:items-center gap-2 md:gap-3 p-3 md:p-4 cursor-pointer hover:bg-accent/5 transition-colors"
+        className="flex flex-col md:flex-row md:items-center gap-2 md:gap-3 p-3 md:p-4 cursor-pointer hover:bg-accent/5"
         onClick={onToggleExpand}
       >
         <div className="flex items-center gap-2 md:gap-3 flex-1 min-w-0">
diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx
index f63ae19..9c28940 100644
--- a/components/ui/breadcrumb.tsx
+++ b/components/ui/breadcrumb.tsx
@@ -43,7 +43,7 @@ function BreadcrumbLink({
   return (
     <Comp
       data-slot="breadcrumb-link"
-      className={cn("hover:text-foreground transition-colors", className)}
+      className={cn("hover:text-foreground", className)}
       {...props}
     />
   );
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 80e6954..2716ff9 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -5,21 +5,20 @@ 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-xl text-sm font-semibold transition-all duration-300 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: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-xl text-sm font-semibold 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: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-gradient-to-r from-primary via-primary/95 to-primary/90 text-primary-foreground hover:from-primary/95 hover:via-primary hover:to-primary/95 shadow-xl shadow-primary/30 hover:shadow-2xl hover:shadow-primary/40 hover:scale-[1.03] active:scale-[0.97] backdrop-blur-sm border border-primary/20",
+          "bg-gradient-to-r from-primary via-primary/95 to-primary/90 text-primary-foreground shadow-xl shadow-primary/30 backdrop-blur-sm border border-primary/20",
         destructive:
-          "bg-gradient-to-r from-destructive via-destructive/95 to-destructive/90 text-white hover:from-destructive/95 hover:via-destructive hover:to-destructive/95 shadow-xl shadow-destructive/30 hover:shadow-2xl hover:shadow-destructive/40 hover:scale-[1.03] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 active:scale-[0.97] backdrop-blur-sm border border-destructive/20",
+          "bg-gradient-to-r from-destructive via-destructive/95 to-destructive/90 text-white shadow-xl shadow-destructive/30 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 backdrop-blur-sm border border-destructive/20",
         outline:
-          "border-2 bg-background/95 backdrop-blur-md shadow-md hover:bg-accent hover:text-accent-foreground hover:border-primary/50 hover:shadow-lg hover:scale-[1.03] dark:bg-input/40 dark:border-input dark:hover:bg-input/60 active:scale-[0.97]",
+          "border-2 bg-background/95 backdrop-blur-md shadow-md dark:bg-input/40 dark:border-input",
         secondary:
-          "bg-gradient-to-r from-secondary via-secondary/95 to-secondary/90 text-secondary-foreground hover:from-secondary/95 hover:via-secondary hover:to-secondary/95 hover:shadow-lg hover:scale-[1.03] active:scale-[0.97] backdrop-blur-sm",
-        ghost:
-          "hover:bg-accent/70 hover:text-accent-foreground dark:hover:bg-accent/50 hover:scale-[1.03] active:scale-[0.97] backdrop-blur-sm",
-        link: "text-primary underline-offset-4 hover:underline font-semibold",
+          "bg-gradient-to-r from-secondary via-secondary/95 to-secondary/90 text-secondary-foreground backdrop-blur-sm",
+        ghost: "backdrop-blur-sm",
+        link: "text-primary underline-offset-4 font-semibold",
       },
       size: {
         default: "h-10 px-5 py-2.5 has-[>svg]:px-4",
@@ -34,7 +33,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
+  }
 );
 
 function Button({
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index 34c49d1..f585cf6 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -9,7 +9,6 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
       className={cn(
         "fintech-card",
         "bg-card text-card-foreground flex flex-col",
-        "transition-all duration-300 ease-out",
         className,
       )}
       {...props}
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index a4116d3..4f877c8 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -69,7 +69,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
           >
             <XIcon />
             <span className="sr-only">Close</span>
diff --git a/components/ui/icon-picker.tsx b/components/ui/icon-picker.tsx
index 5617cf6..952871b 100644
--- a/components/ui/icon-picker.tsx
+++ b/components/ui/icon-picker.tsx
@@ -316,7 +316,7 @@ export function IconPicker({ value, onChange, color }: IconPickerProps) {
                       key={icon}
                       onClick={() => handleSelect(icon)}
                       className={cn(
-                        "flex items-center justify-center p-2 rounded-md hover:bg-accent transition-colors",
+                        "flex items-center justify-center p-2 rounded-md hover:bg-accent",
                         value === icon && "bg-accent ring-2 ring-primary",
                       )}
                       title={icon}
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
index 0280752..f08ddb4 100644
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -72,7 +72,7 @@ function SheetContent({
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
           <XIcon className="size-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
index 4b3c98e..f1032de 100644
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@@ -57,7 +57,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b",
         className,
       )}
       {...props}