feat: enhance card components across the application with consistent hover effects and improved layout; update spacing in categories page for better visual hierarchy

2025-12-21 13:38:59 +01:00
parent b3ae6059ca
commit 2452e30a0f
14 changed files with 26 additions and 22 deletions
--- a/app/categories/page.tsx
+++ b/app/categories/page.tsx
@@ -351,7 +351,7 @@ export default function CategoriesPage() {
        onToggleAll={allExpanded ? collapseAll : expandAll}
      />

-      <div className="space-y-1">
+      <div className="space-y-3 md:space-y-4">
        {filteredParentCategories.map((parent: Category) => {
          const allChildren = childrenByParent[parent.id] || [];
          const children = searchQuery.trim()
@@ -387,8 +387,8 @@ export default function CategoriesPage() {
        })}

        {orphanCategories.length > 0 && (
-          <div className="border rounded-lg bg-card">
-            <div className="px-3 py-2 border-b">
+          <Card className="card-hover">
+            <div className="px-3 py-2 border-b border-border">
              <span className="text-sm font-medium text-muted-foreground">
                Catégories non classées ({orphanCategories.length})
              </span>
@@ -405,7 +405,7 @@ export default function CategoriesPage() {
                />
              ))}
            </div>
-          </div>
+          </Card>
        )}
      </div>

--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -48,7 +48,7 @@ export default function LoginPage() {

  return (
    <div className="min-h-screen flex items-center justify-center bg-[var(--background)] p-4 page-background">
-      <Card className="w-full max-w-md page-content">
+      <Card className="w-full max-w-md page-content card-hover">
        <CardHeader className="space-y-1">
          <div className="flex items-center justify-center mb-4">
            <Lock className="w-12 h-12 text-[var(--primary)]" />
--- a/app/transactions/page.tsx
+++ b/app/transactions/page.tsx
@@ -238,7 +238,7 @@ export default function TransactionsPage() {
      />

      {(!isLoadingChart || !isLoadingTransactions) && (
-        <Card className="mb-6">
+        <Card className="mb-6 card-hover">
          <Collapsible open={isStatsExpanded} onOpenChange={setIsStatsExpanded}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 py-3 px-6">
              <CardTitle className="text-base font-semibold">
@@ -272,7 +272,7 @@ export default function TransactionsPage() {
                {/* Summary cards */}
                {!isLoadingTransactions && (
                  <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 mb-6">
-                    <Card>
+                    <Card className="card-hover">
                      <CardContent className="pt-6">
                        <div className="flex items-center justify-between">
                          <div>
@@ -287,7 +287,7 @@ export default function TransactionsPage() {
                        </div>
                      </CardContent>
                    </Card>
-                    <Card>
+                    <Card className="card-hover">
                      <CardContent className="pt-6">
                        <div className="flex items-center justify-between">
                          <div>
--- a/components/categories/parent-category-row.tsx
+++ b/components/categories/parent-category-row.tsx
@@ -13,6 +13,7 @@ import {
  CollapsibleContent,
  CollapsibleTrigger,
 } from "@/components/ui/collapsible";
+import { Card } from "@/components/ui/card";
 import { CategoryIcon } from "@/components/ui/category-icon";
 import {
  Plus,
@@ -54,7 +55,7 @@ export function ParentCategoryRow({
  const isMobile = useIsMobile();

  return (
-    <div className="border rounded-lg bg-card">
+    <Card className="card-hover">
      <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>
@@ -155,6 +156,6 @@ export function ParentCategoryRow({
          )}
        </CollapsibleContent>
      </Collapsible>
-    </div>
+    </Card>
  );
 }
--- a/components/rules/rule-group-card.tsx
+++ b/components/rules/rule-group-card.tsx
@@ -5,6 +5,7 @@ import { ChevronDown, ChevronRight, Plus, Tag } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { CategoryCombobox } from "@/components/ui/category-combobox";
+import { Card } from "@/components/ui/card";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
 import type { Transaction, Category } from "@/lib/types";
@@ -54,7 +55,7 @@ export function RuleGroupCard({
  };

  return (
-    <div className="border border-border rounded-lg bg-card overflow-hidden">
+    <Card className="card-hover 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"
@@ -247,6 +248,6 @@ export function RuleGroupCard({
          )}
        </div>
      )}
-    </div>
+    </Card>
  );
 }
--- a/components/statistics/balance-line-chart.tsx
+++ b/components/statistics/balance-line-chart.tsx
@@ -57,7 +57,7 @@ export function BalanceLineChart({
  };

  return (
-    <Card>
+    <Card className="card-hover">
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle>Évolution du solde</CardTitle>
        <div className="flex gap-1">
--- a/components/statistics/category-bar-chart.tsx
+++ b/components/statistics/category-bar-chart.tsx
@@ -73,7 +73,7 @@ export function CategoryBarChart({
  };

  return (
-    <Card>
+    <Card className="card-hover">
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
@@ -154,3 +154,5 @@ export function CategoryBarChart({
    </Card>
  );
 }
+
+// Find the Card component in this file
--- a/components/statistics/category-pie-chart.tsx
+++ b/components/statistics/category-pie-chart.tsx
@@ -51,7 +51,7 @@ export function CategoryPieChart({
  const currentData = isExpanded ? baseData : baseData.slice(0, maxItems);

  return (
-    <Card>
+    <Card className="card-hover">
      <CardHeader className="flex flex-col md:flex-row md:items-center md:justify-between space-y-2 md:space-y-0 pb-2">
        <CardTitle className="text-sm md:text-base">{title}</CardTitle>
        <div className="flex flex-col md:flex-row gap-2 w-full md:w-auto">
--- a/components/statistics/category-trend-chart.tsx
+++ b/components/statistics/category-trend-chart.tsx
@@ -96,7 +96,7 @@ export function CategoryTrendChart({
  };

  return (
-    <Card>
+    <Card className="card-hover">
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle>Évolution des dépenses par catégorie</CardTitle>
        <div className="flex gap-2">
--- a/components/statistics/income-expense-trend-chart.tsx
+++ b/components/statistics/income-expense-trend-chart.tsx
@@ -28,7 +28,7 @@ export function IncomeExpenseTrendChart({
  formatCurrency,
 }: IncomeExpenseTrendChartProps) {
  return (
-    <Card>
+    <Card className="card-hover">
      <CardHeader>
        <CardTitle>Tendances revenus et dépenses</CardTitle>
      </CardHeader>
--- a/components/statistics/monthly-chart.tsx
+++ b/components/statistics/monthly-chart.tsx
@@ -127,7 +127,7 @@ export function MonthlyChart({

  if (!collapsible) {
    return (
-      <Card>
+      <Card className="card-hover">
        <CardHeader>
          <CardTitle>Revenus vs Dépenses par mois</CardTitle>
        </CardHeader>
@@ -137,7 +137,7 @@ export function MonthlyChart({
  }

  return (
-    <Card>
+    <Card className="card-hover">
      <Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 py-3 px-6">
          <CardTitle className="text-base font-semibold">
--- a/components/statistics/savings-trend-chart.tsx
+++ b/components/statistics/savings-trend-chart.tsx
@@ -31,7 +31,7 @@ export function SavingsTrendChart({
  const isPositive = latestSavings >= 0;

  return (
-    <Card>
+    <Card className="card-hover">
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle>Évolution des économies</CardTitle>
        <div className="flex items-center gap-2">
--- a/components/statistics/top-expenses-list.tsx
+++ b/components/statistics/top-expenses-list.tsx
@@ -21,7 +21,7 @@ export function TopExpensesList({
  const isMobile = useIsMobile();

  return (
-    <Card>
+    <Card className="card-hover">
      <CardHeader>
        <CardTitle className="text-sm md:text-base">Top 5 dépenses</CardTitle>
      </CardHeader>
--- a/components/statistics/year-over-year-chart.tsx
+++ b/components/statistics/year-over-year-chart.tsx
@@ -33,7 +33,7 @@ export function YearOverYearChart({
  previousYearLabel = "Année précédente",
 }: YearOverYearChartProps) {
  return (
-    <Card>
+    <Card className="card-hover">
      <CardHeader>
        <CardTitle>Comparaison année sur année</CardTitle>
      </CardHeader>