feat: enhance global styles and component themes with new semantic colors; integrate ThemeProvider for improved theme management and update color usage across various components for consistency

2025-12-22 08:40:25 +01:00
parent 6c14484636
commit 4f13134ef0
39 changed files with 809 additions and 432 deletions
--- a/components/dashboard/accounts-summary.tsx
+++ b/components/dashboard/accounts-summary.tsx
@@ -89,7 +89,7 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
            <span
              className={cn(
                "text-xs font-semibold tabular-nums ml-auto",
-                folderTotal >= 0 ? "text-emerald-600" : "text-red-600",
+                folderTotal >= 0 ? "text-success" : "text-destructive",
              )}
            >
              {formatCurrency(folderTotal)}
@@ -131,8 +131,8 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
                      className={cn(
                        "font-bold tabular-nums text-base",
                        realBalance >= 0
-                          ? "text-emerald-600 dark:text-emerald-400"
-                          : "text-red-600 dark:text-red-400",
+                          ? "text-success"
+                          : "text-destructive",
                      )}
                    >
                      {formatCurrency(realBalance)}
@@ -204,7 +204,7 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
                  <span
                    className={cn(
                      "text-xs font-semibold tabular-nums ml-auto",
-                      orphanTotal >= 0 ? "text-emerald-600" : "text-red-600",
+                      orphanTotal >= 0 ? "text-success" : "text-destructive",
                    )}
                  >
                    {formatCurrency(orphanTotal)}
@@ -245,8 +245,8 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
                          className={cn(
                            "font-bold tabular-nums text-base",
                            realBalance >= 0
-                              ? "text-emerald-600 dark:text-emerald-400"
-                              : "text-red-600 dark:text-red-400",
+                              ? "text-success"
+                              : "text-destructive",
                          )}
                        >
                          {formatCurrency(realBalance)}
--- a/components/dashboard/overview-cards.tsx
+++ b/components/dashboard/overview-cards.tsx
@@ -60,7 +60,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {
    <div className="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-5">
      <Card className="stat-card-gradient-1 card-hover group relative overflow-hidden">
        {/* Icône en arrière-plan */}
-        <div className="absolute bottom-2 right-2 opacity-[0.04] dark:opacity-[0.03] z-0 pointer-events-none">
+        <div className="absolute bottom-2 right-2 opacity-[0.04] z-0 pointer-events-none">
          <Wallet className="h-20 w-20 sm:h-24 sm:w-24 md:h-28 md:w-28 text-primary" strokeWidth={1} />
        </div>
        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3 px-5 pt-5 sm:px-6 sm:pt-6 relative z-10">
@@ -73,8 +73,8 @@ export function OverviewCards({ data }: OverviewCardsProps) {
            className={cn(
              "text-2xl sm:text-3xl md:text-3xl lg:text-2xl xl:text-3xl font-black tracking-tight mb-3 leading-tight break-words",
              totalBalance >= 0
-                ? "text-emerald-600 dark:text-emerald-400"
-                : "text-red-600 dark:text-red-400"
+                ? "text-success"
+                : "text-destructive"
            )}
          >
            {formatCurrency(totalBalance)}
@@ -87,7 +87,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {

      <Card className="stat-card-gradient-2 card-hover group relative overflow-hidden">
        {/* Icône en arrière-plan */}
-        <div className="absolute bottom-2 right-2 opacity-[0.04] dark:opacity-[0.03] z-0 pointer-events-none">
+        <div className="absolute bottom-2 right-2 opacity-[0.04] z-0 pointer-events-none">
          <TrendingUp className="h-20 w-20 sm:h-24 sm:w-24 md:h-28 md:w-28 text-success" strokeWidth={1} />
        </div>
        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3 px-5 pt-5 sm:px-6 sm:pt-6 relative z-10">
@@ -110,7 +110,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {

      <Card className="stat-card-gradient-3 card-hover group relative overflow-hidden">
        {/* Icône en arrière-plan */}
-        <div className="absolute bottom-2 right-2 opacity-[0.04] dark:opacity-[0.03] z-0 pointer-events-none">
+        <div className="absolute bottom-2 right-2 opacity-[0.04] z-0 pointer-events-none">
          <TrendingDown className="h-20 w-20 sm:h-24 sm:w-24 md:h-28 md:w-28 text-destructive" strokeWidth={1} />
        </div>
        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3 px-5 pt-5 sm:px-6 sm:pt-6 relative z-10">
@@ -133,7 +133,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {

      <Card className="stat-card-gradient-4 card-hover group relative overflow-hidden">
        {/* Icône en arrière-plan */}
-        <div className="absolute bottom-2 right-2 opacity-[0.04] dark:opacity-[0.03] z-0 pointer-events-none">
+        <div className="absolute bottom-2 right-2 opacity-[0.04] z-0 pointer-events-none">
          <CreditCard className="h-20 w-20 sm:h-24 sm:w-24 md:h-28 md:w-28 text-chart-4" strokeWidth={1} />
        </div>
        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3 px-5 pt-5 sm:px-6 sm:pt-6 relative z-10">
@@ -153,7 +153,7 @@ export function OverviewCards({ data }: OverviewCardsProps) {

      <Card className="stat-card-gradient-5 card-hover group relative overflow-hidden">
        {/* Icône en arrière-plan */}
-        <div className="absolute bottom-2 right-2 opacity-[0.04] dark:opacity-[0.03] z-0 pointer-events-none">
+        <div className="absolute bottom-2 right-2 opacity-[0.04] z-0 pointer-events-none">
          <Tag className="h-20 w-20 sm:h-24 sm:w-24 md:h-28 md:w-28 text-chart-5" strokeWidth={1} />
        </div>
        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3 px-5 pt-5 sm:px-6 sm:pt-6 relative z-10">
--- a/components/dashboard/recent-transactions.tsx
+++ b/components/dashboard/recent-transactions.tsx
@@ -88,8 +88,8 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
                        className={cn(
                          "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-success"
+                            : "text-destructive"
                        )}
                      >
                        {transaction.amount >= 0 ? "+" : ""}
@@ -130,8 +130,8 @@ export function RecentTransactions({ data }: RecentTransactionsProps) {
                    className={cn(
                      "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-success"
+                        : "text-destructive"
                    )}
                  >
                    {transaction.amount >= 0 ? "+" : ""}
--- a/components/dashboard/sidebar.tsx
+++ b/components/dashboard/sidebar.tsx
@@ -88,20 +88,17 @@ function SidebarContent({
                  "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",
+                  collapsed && "justify-center px-2 w-12 mx-auto"
                )}
              >
                <item.icon
-                  className={cn(
-                    "w-5 h-5 shrink-0",
-                    isActive && "text-primary",
-                  )}
+                  className={cn("w-5 h-5 shrink-0", isActive && "text-primary")}
                />
                {!collapsed && (
                  <span
                    className={cn(
                      "font-semibold text-sm",
-                      isActive && "text-primary font-bold",
+                      isActive && "text-primary font-bold"
                    )}
                  >
                    {item.label}
@@ -116,7 +113,7 @@ function SidebarContent({
      <div
        className={cn(
          "border-t border-border/30 space-y-2",
-          collapsed ? "p-2" : "p-4",
+          collapsed ? "p-2" : "p-4"
        )}
      >
        <Link href="/settings" onClick={handleLinkClick}>
@@ -124,7 +121,7 @@ function SidebarContent({
            variant="ghost"
            className={cn(
              "w-full justify-start gap-4 h-12 rounded-2xl",
-              collapsed && "justify-center px-2 w-12 mx-auto",
+              collapsed && "justify-center px-2 w-12 mx-auto"
            )}
          >
            <Settings className="w-5 h-5 shrink-0" />
@@ -139,7 +136,7 @@ function SidebarContent({
          className={cn(
            "w-full justify-start gap-4 h-12 rounded-2xl",
            "text-destructive",
-            collapsed && "justify-center px-2 w-12 mx-auto",
+            collapsed && "justify-center px-2 w-12 mx-auto"
          )}
        >
          <LogOut className="w-5 h-5 shrink-0" />
@@ -164,7 +161,10 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
  if (isMobile) {
    return (
      <Sheet open={open} onOpenChange={onOpenChange}>
-        <SheetContent side="left" className="w-64 p-0">
+        <SheetContent
+          side="left"
+          className="w-64 p-0 bg-sidebar text-sidebar-foreground border-sidebar-border"
+        >
          <SheetTitle className="sr-only">Navigation</SheetTitle>
          <div className="flex flex-col h-full">
            <SidebarContent
@@ -180,15 +180,15 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
  return (
    <aside
      className={cn(
-        "hidden md:flex flex-col h-screen glass border-r border-border",
+        "hidden md:flex flex-col h-screen bg-sidebar text-sidebar-foreground border-r border-sidebar-border",
        "backdrop-blur-xl",
-        collapsed ? "w-16" : "w-64",
+        collapsed ? "w-16" : "w-64"
      )}
    >
      <div
        className={cn(
          "flex items-center border-b border-border/30",
-          collapsed ? "justify-center p-4" : "justify-between p-6",
+          collapsed ? "justify-center p-4" : "justify-between p-6"
        )}
      >
        {!collapsed && (
@@ -205,10 +205,7 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
          variant="ghost"
          size="icon"
          onClick={() => setCollapsed(!collapsed)}
-          className={cn(
-            "rounded-xl",
-            collapsed ? "" : "ml-auto",
-          )}
+          className={cn("rounded-xl", collapsed ? "" : "ml-auto")}
        >
          {collapsed ? (
            <ChevronRight className="w-5 h-5" />