From c2089397450757a7f66ca95570dfb10a18879f20 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Sat, 4 Oct 2025 10:02:07 +0000
Subject: [PATCH] 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 | 61 ++++++++++++++-------------
 client/src/components/topbar.tsx      | 35 +++++++--------
 2 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/client/src/components/stats-cards.tsx b/client/src/components/stats-cards.tsx
index 81eb806..0051ce6 100644
--- a/client/src/components/stats-cards.tsx
+++ b/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>
diff --git a/client/src/components/topbar.tsx b/client/src/components/topbar.tsx
index cc45014..6fdf30b 100644
--- a/client/src/components/topbar.tsx
+++ b/client/src/components/topbar.tsx
@@ -1,4 +1,5 @@
-import { Bell, Menu } from "lucide-react";
+import { Bell, Menu, Search } from "lucide-react";
+import { Input } from "@/components/ui/input";
 
 interface TopBarProps {
   onMenuClick: () => void;
@@ -6,35 +7,31 @@ interface TopBarProps {
 
 export default function TopBar({ onMenuClick }: TopBarProps) {
   return (
-    <header className="bg-card border-b border-border sticky top-0 z-10">
-      <div className="flex items-center justify-between px-6 py-4">
-        <div className="flex items-center gap-4">
+    <header className="bg-card/50 backdrop-blur-xl border-b border-border/50 sticky top-0 z-10">
+      <div className="flex items-center justify-between px-6 lg:px-8 py-5">
+        <div className="flex items-center gap-6 flex-1">
           <button 
-            className="lg:hidden text-foreground"
+            className="lg:hidden text-foreground hover:text-primary transition-colors"
             onClick={onMenuClick}
             data-testid="button-menu"
           >
             <Menu className="w-6 h-6" />
           </button>
-          <div>
-            <h2 className="text-2xl font-bold text-foreground">Tableau de bord</h2>
-            <p className="text-sm text-muted-foreground">Gérez vos publications sur tous vos réseaux</p>
+          <div className="flex-1 max-w-md hidden md:block">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <Input 
+                placeholder="Rechercher des publications, pages, médias..." 
+                className="pl-10 bg-muted/30 border-muted focus:border-primary/50 rounded-xl"
+              />
+            </div>
           </div>
         </div>
         <div className="flex items-center gap-4">
-          <button className="relative p-2 text-muted-foreground hover:text-foreground transition-all" data-testid="button-notifications">
+          <button className="relative p-2.5 text-muted-foreground hover:text-primary hover:bg-muted/30 rounded-xl transition-all" data-testid="button-notifications">
             <Bell className="w-5 h-5" />
-            <span className="absolute top-1 right-1 w-2 h-2 bg-destructive rounded-full"></span>
+            <span className="absolute top-2 right-2 w-2 h-2 bg-destructive rounded-full ring-2 ring-card"></span>
           </button>
-          <div className="flex items-center gap-3 pl-4 border-l border-border">
-            <div className="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
-              <span className="text-primary-foreground font-semibold">SF</span>
-            </div>
-            <div className="hidden md:block">
-              <p className="text-sm font-medium text-foreground">Social Flow</p>
-              <p className="text-xs text-muted-foreground">admin@socialflow.app</p>
-            </div>
-          </div>
         </div>
       </div>
     </header>