refactor: remove transition effects from various components for improved performance and consistency

2025-12-20 11:02:11 +01:00
parent 4445a38380
commit dff2a9061f
16 changed files with 44 additions and 101 deletions
--- 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>
--- 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>
--- 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 ? "+" : ""}
--- 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",
          )}
        >