Update the user interface with a modern, simple, and readable theme

Refactored UI components for stat cards and the top bar, introducing gradient backgrounds, rounded elements, improved spacing, and a search input.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/Ob3gzfQ

client/src/components/stats-cards.tsx

@@ -1,4 +1,4 @@
-import { CalendarCheck, Users, Bot, Images } from "lucide-react";
+import { CalendarCheck, Users, Bot, Images, TrendingUp, TrendingDown } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 
 export default function StatsCards() {
@@ -9,41 +9,35 @@ export default function StatsCards() {
   const statCards = [
     {
       icon: CalendarCheck,
-      iconColor: "text-chart-1",
-      iconBg: "bg-chart-1/10",
+      iconColor: "from-blue-500 to-blue-600",
       title: (stats as any)?.scheduledPosts ?? 0,
       subtitle: "Publications planifiées",
       change: "+12%",
+      trending: "up",
       changeLabel: "vs mois dernier",
-      period: "Ce mois",
     },
     {
       icon: Users,
-      iconColor: "text-chart-2",
-      iconBg: "bg-chart-2/10",
+      iconColor: "from-purple-500 to-purple-600",
       title: (stats as any)?.connectedPages ?? 0,
       subtitle: "Pages connectées",
       info: "Facebook • Instagram",
-      period: "Total",
     },
     {
       icon: Bot,
-      iconColor: "text-chart-3",
-      iconBg: "bg-chart-3/10",
+      iconColor: "from-green-500 to-green-600",
       title: (stats as any)?.aiTextsGenerated ?? 0,
       subtitle: "Textes générés par IA",
       change: "+8%",
+      trending: "up",
       changeLabel: "vs hier",
-      period: "Aujourd'hui",
     },
     {
       icon: Images,
-      iconColor: "text-chart-4",
-      iconBg: "bg-chart-4/10",
+      iconColor: "from-cyan-500 to-cyan-600",
       title: (stats as any)?.mediaStored ?? 0,
       subtitle: "Médias stockés",
       info: "Images • Vidéos",
-      period: "Bibliothèque",
     },
   ];
 
@@ -51,10 +45,10 @@ export default function StatsCards() {
     return (
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
         {[1, 2, 3, 4].map((i) => (
-          <div key={i} className="bg-card rounded-lg border border-border p-6">
-            <div className="skeleton h-12 w-12 rounded-lg mb-4" />
-            <div className="skeleton h-8 w-16 mb-2" />
-            <div className="skeleton h-4 w-32" />
+          <div key={i} className="bg-card rounded-2xl border border-border p-6 shadow-sm">
+            <div className="skeleton h-12 w-12 rounded-xl mb-4" />
+            <div className="skeleton h-10 w-20 mb-2" />
+            <div className="skeleton h-4 w-36" />
           </div>
         ))}
       </div>
@@ -65,31 +59,40 @@ export default function StatsCards() {
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
       {statCards.map((stat, index) => {
         const Icon = stat.icon;
+        const TrendIcon = stat.trending === "up" ? TrendingUp : TrendingDown;
+        
         return (
           <div 
             key={index} 
-            className="bg-card rounded-lg border border-border p-6 hover:shadow-lg transition-all cursor-pointer"
+            className="group bg-card rounded-2xl border border-border p-6 hover:border-primary/30 transition-all cursor-pointer card-hover shadow-sm"
             data-testid={`stat-card-${index}`}
           >
-            <div className="flex items-center justify-between mb-4">
-              <div className={`w-12 h-12 rounded-lg ${stat.iconBg} flex items-center justify-center`}>
-                <Icon className={`${stat.iconColor} w-6 h-6`} />
+            <div className="flex items-start justify-between mb-6">
+              <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${stat.iconColor} flex items-center justify-center shadow-lg`}>
+                <Icon className="text-white w-7 h-7" />
               </div>
-              <span className="text-xs text-muted-foreground">{stat.period}</span>
             </div>
-            <h3 className="text-3xl font-bold text-foreground mb-1" data-testid={`stat-value-${index}`}>
-              {stat.title}
-            </h3>
-            <p className="text-sm text-muted-foreground">{stat.subtitle}</p>
+            
+            <div className="space-y-1">
+              <h3 className="text-4xl font-bold text-foreground" data-testid={`stat-value-${index}`}>
+                {stat.title}
+              </h3>
+              <p className="text-sm text-muted-foreground font-medium">{stat.subtitle}</p>
+            </div>
+            
             {stat.change && (
               <div className="mt-4 flex items-center gap-2">
-                <span className="text-xs text-chart-2">{stat.change}</span>
+                <div className={`flex items-center gap-1 px-2 py-1 rounded-lg ${stat.trending === "up" ? "bg-success/10 text-success" : "bg-destructive/10 text-destructive"}`}>
+                  <TrendIcon className="w-3 h-3" />
+                  <span className="text-xs font-semibold">{stat.change}</span>
+                </div>
                 <span className="text-xs text-muted-foreground">{stat.changeLabel}</span>
               </div>
             )}
+            
             {stat.info && (
-              <div className="mt-4 flex items-center gap-2">
-                <span className="text-xs text-muted-foreground">{stat.info}</span>
+              <div className="mt-4">
+                <span className="text-xs text-muted-foreground font-medium">{stat.info}</span>
               </div>
             )}
           </div>