From e90f8930b35858d031f8198956b0255b24991705 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Sat, 4 Oct 2025 10:01:12 +0000
Subject: [PATCH] Update the application's appearance with a modern and clean
 theme

Refactor the sidebar component to use a new theme, updating color palettes, typography, and layout for a more modern and readable user interface.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_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/sidebar.tsx | 107 ++++++++-----
 client/src/index.css              | 253 ++++++++++++++++++++----------
 2 files changed, 237 insertions(+), 123 deletions(-)

diff --git a/client/src/components/sidebar.tsx b/client/src/components/sidebar.tsx
index 657e772..0346ec4 100644
--- a/client/src/components/sidebar.tsx
+++ b/client/src/components/sidebar.tsx
@@ -4,13 +4,13 @@ import { useQuery, useMutation } from "@tanstack/react-query";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import { useToast } from "@/hooks/use-toast";
 import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 
 export default function Sidebar() {
   const [location] = useLocation();
   const [, setLocation] = useLocation();
   const { toast } = useToast();
 
-  // Charger la session utilisateur
   const { data: session } = useQuery<{ id: string; username: string; role: string }>({
     queryKey: ["/api/auth/session"],
     retry: false,
@@ -18,7 +18,6 @@ export default function Sidebar() {
 
   const isAdmin = session?.role === "admin";
 
-  // Mutation pour déconnexion
   const logoutMutation = useMutation({
     mutationFn: async () => {
       const res = await apiRequest("POST", "/api/auth/logout", {});
@@ -39,7 +38,7 @@ export default function Sidebar() {
     { icon: PlusCircle, label: "Nouvelle publication", href: "/new", badge: null },
     { icon: Calendar, label: "Calendrier", href: "/calendar", badge: null },
     { icon: Images, label: "Médiathèque", href: "/media", badge: null },
-    { icon: Users, label: "Pages gérées", href: "/pages", badge: "8" },
+    { icon: Users, label: "Pages gérées", href: "/pages", badge: null },
     { icon: Bot, label: "Assistant IA", href: "/ai", badge: null },
   ];
 
@@ -49,21 +48,25 @@ export default function Sidebar() {
   ];
 
   return (
-    <aside className="w-64 bg-card border-r border-border flex flex-col h-screen">
-      <div className="p-6 border-b border-border">
+    <aside className="w-72 bg-sidebar border-r border-sidebar-border flex flex-col h-screen">
+      {/* Logo & Brand */}
+      <div className="p-6 border-b border-sidebar-border">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
-            <i className="fas fa-share-nodes text-primary-foreground text-xl"></i>
+          <div className="w-12 h-12 gradient-primary rounded-xl flex items-center justify-center shadow-lg">
+            <svg className="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
+            </svg>
           </div>
           <div>
-            <h1 className="text-xl font-bold text-foreground">Social Flow</h1>
-            <p className="text-xs text-muted-foreground">Automatisation</p>
+            <h1 className="text-xl font-bold gradient-text">Social Flow</h1>
+            <p className="text-xs text-muted-foreground">Automatisation sociale</p>
           </div>
         </div>
       </div>
 
+      {/* Navigation */}
       <nav className="flex-1 p-4 overflow-y-auto">
-        <ul className="space-y-2">
+        <ul className="space-y-1">
           {navItems.map((item) => {
             const Icon = item.icon;
             const isActive = location === item.href;
@@ -73,18 +76,21 @@ export default function Sidebar() {
                 <Link 
                   href={item.href}
                   className={`
-                    flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-all
+                    group flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all relative
                     ${isActive 
-                      ? 'bg-accent text-accent-foreground' 
-                      : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                      ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm' 
+                      : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                     }
                   `}
                   data-testid={`link-${item.label.toLowerCase().replace(/\s+/g, '-')}`}
                 >
-                  <Icon className="w-5 h-5" />
-                  <span>{item.label}</span>
+                  {isActive && (
+                    <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
+                  )}
+                  <Icon className={`w-5 h-5 ${isActive ? 'text-primary' : ''}`} />
+                  <span className="flex-1">{item.label}</span>
                   {item.badge && (
-                    <span className="ml-auto inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary text-primary-foreground">
+                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold gradient-primary text-white shadow-sm">
                       {item.badge}
                     </span>
                   )}
@@ -94,9 +100,10 @@ export default function Sidebar() {
           })}
         </ul>
 
-        <div className="mt-8 pt-8 border-t border-border">
-          <p className="text-xs text-muted-foreground mb-3 px-4 uppercase tracking-wider">Statistiques</p>
-          <ul className="space-y-2">
+        {/* Stats Section */}
+        <div className="mt-8 pt-6 border-t border-sidebar-border">
+          <p className="text-xs font-semibold text-muted-foreground mb-3 px-4 uppercase tracking-wider">Statistiques</p>
+          <ul className="space-y-1">
             {statsItems.map((item) => {
               const Icon = item.icon;
               const isActive = location === item.href;
@@ -106,15 +113,18 @@ export default function Sidebar() {
                   <Link 
                     href={item.href}
                     className={`
-                      flex items-center gap-3 px-4 py-3 rounded-lg transition-all
+                      group flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
                       ${isActive 
-                        ? 'bg-accent text-accent-foreground' 
-                        : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                        ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm' 
+                        : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                       }
                     `}
                     data-testid={`link-${item.label.toLowerCase()}`}
                   >
-                    <Icon className="w-5 h-5" />
+                    {isActive && (
+                      <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
+                    )}
+                    <Icon className={`w-5 h-5 ${isActive ? 'text-primary' : ''}`} />
                     <span>{item.label}</span>
                   </Link>
                 </li>
@@ -124,51 +134,61 @@ export default function Sidebar() {
         </div>
       </nav>
 
-      <div className="p-4 border-t border-border space-y-2">
+      {/* Admin & User Section */}
+      <div className="p-4 border-t border-sidebar-border space-y-2">
         {isAdmin && (
           <>
             <div className="mb-2">
-              <p className="text-xs text-muted-foreground mb-2 px-4 uppercase tracking-wider">Administration</p>
+              <p className="text-xs font-semibold text-muted-foreground mb-2 px-4 uppercase tracking-wider">Administration</p>
             </div>
             <Link 
               href="/users"
               className={`
-                flex items-center gap-3 px-4 py-3 rounded-lg transition-all
+                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
                 ${location === "/users"
-                  ? 'bg-accent text-accent-foreground' 
-                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                  ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm' 
+                  : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                 }
               `}
               data-testid="link-users"
             >
+              {location === "/users" && (
+                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
+              )}
               <UserCog className="w-5 h-5" />
               <span>Utilisateurs</span>
             </Link>
             <Link 
               href="/sql"
               className={`
-                flex items-center gap-3 px-4 py-3 rounded-lg transition-all
+                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
                 ${location === "/sql"
-                  ? 'bg-accent text-accent-foreground' 
-                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                  ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm' 
+                  : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                 }
               `}
               data-testid="link-sql"
             >
+              {location === "/sql" && (
+                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
+              )}
               <Database className="w-5 h-5" />
               <span>SQL</span>
             </Link>
             <Link 
               href="/settings"
               className={`
-                flex items-center gap-3 px-4 py-3 rounded-lg transition-all
+                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
                 ${location === "/settings"
-                  ? 'bg-accent text-accent-foreground' 
-                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                  ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm' 
+                  : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                 }
               `}
               data-testid="link-settings"
             >
+              {location === "/settings" && (
+                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
+              )}
               <Settings className="w-5 h-5" />
               <span>Paramètres</span>
             </Link>
@@ -178,7 +198,7 @@ export default function Sidebar() {
         <div className="pt-2">
           <Button
             variant="ghost"
-            className="w-full justify-start text-muted-foreground hover:text-accent-foreground"
+            className="w-full justify-start text-muted-foreground hover:text-foreground hover:bg-sidebar-accent rounded-xl"
             onClick={() => logoutMutation.mutate()}
             disabled={logoutMutation.isPending}
             data-testid="button-logout"
@@ -188,11 +208,20 @@ export default function Sidebar() {
           </Button>
         </div>
         
+        {/* User Profile Card */}
         {session && (
-          <div className="mt-4 px-4 py-3 bg-muted rounded-lg">
-            <p className="text-xs text-muted-foreground">Connecté en tant que</p>
-            <p className="text-sm font-semibold truncate">{session.username}</p>
-            <p className="text-xs text-muted-foreground capitalize">{session.role}</p>
+          <div className="mt-4 p-4 bg-gradient-to-br from-primary/5 to-secondary/5 border border-primary/10 rounded-xl">
+            <div className="flex items-center gap-3">
+              <Avatar className="w-10 h-10 border-2 border-primary/20">
+                <AvatarFallback className="gradient-primary text-white font-semibold">
+                  {session.username.substring(0, 2).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-semibold truncate">{session.username}</p>
+                <p className="text-xs text-muted-foreground capitalize">{session.role}</p>
+              </div>
+            </div>
           </div>
         )}
       </div>
diff --git a/client/src/index.css b/client/src/index.css
index 1c43172..2f7a8ab 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -3,87 +3,105 @@
 @tailwind utilities;
 
 :root {
-  --card: 300 4.35% 6.67%;
-  --ring: 221.74 13.14% 34.31%;
-  --input: 0 0% 16.86%;
-  --muted: 0 0% 25.1%;
-  --accent: 0 0% 92.16%;
-  --border: 0 0% 16.86%;
-  --radius: 0.4rem;
-  --chart-1: 203.8863 88.2845% 53.1373%;
-  --chart-2: 159.7826 100% 36.0784%;
-  --chart-3: 42.0290 92.8251% 56.2745%;
-  --chart-4: 147.1429 78.5047% 41.9608%;
-  --chart-5: 341.4894 75.2000% 50.9804%;
-  --popover: 45 25% 97%;
-  --primary: 0 0% 96.08%;
-  --sidebar: 45 25% 97%;
-  --spacing: 0.25rem;
-  --font-mono: Menlo, monospace;
-  --font-sans: 'Inter', sans-serif;
-  --secondary: 0 0% 92.16%;
-  --background: 0 0% 3.53%;
-  --font-serif: 'Inter', sans-serif;
-  --foreground: 0 0% 92.16%;
-  --destructive: 356.3033 90.5579% 54.3137%;
-  --sidebar-ring: 9 75% 61%;
-  --sidebar-accent: 25 45% 80%;
-  --sidebar-border: 45 15% 80%;
-  --card-foreground: 0 0% 100%;
-  --sidebar-primary: 9 75% 61%;
-  --muted-foreground: 0 0% 67.06%;
-  --accent-foreground: 0 0% 0%;
-  --popover-foreground: 0 0% 100%;
-  --primary-foreground: 0 0% 5.1%;
-  --sidebar-foreground: 20 14% 17%;
-  --secondary-foreground: 0 0% 5.1%;
+  --background: 222 20% 8%;
+  --foreground: 0 0% 95%;
+  
+  --card: 222 16% 15%;
+  --card-foreground: 0 0% 95%;
+  
+  --popover: 222 18% 12%;
+  --popover-foreground: 0 0% 95%;
+  
+  --primary: 215 85% 58%;
+  --primary-foreground: 0 0% 100%;
+  
+  --secondary: 265 75% 62%;
+  --secondary-foreground: 0 0% 100%;
+  
+  --muted: 222 12% 20%;
+  --muted-foreground: 222 10% 65%;
+  
+  --accent: 222 18% 12%;
+  --accent-foreground: 0 0% 95%;
+  
+  --destructive: 0 85% 62%;
   --destructive-foreground: 0 0% 100%;
-  --sidebar-accent-foreground: 20 14% 17%;
+  
+  --border: 222 12% 20%;
+  --input: 222 12% 20%;
+  --ring: 215 85% 58%;
+  
+  --success: 142 76% 48%;
+  --warning: 35 95% 58%;
+  --info: 195 85% 55%;
+  
+  --chart-1: 215 85% 58%;
+  --chart-2: 265 75% 62%;
+  --chart-3: 142 76% 48%;
+  --chart-4: 195 85% 55%;
+  --chart-5: 35 95% 58%;
+  
+  --sidebar: 222 20% 8%;
+  --sidebar-foreground: 0 0% 95%;
+  --sidebar-primary: 215 85% 58%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --shadow: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 1px 2px -1px hsl(9, 75%, 61% / 0.00);
-  --shadow-lg: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 4px 6px -1px hsl(9, 75%, 61% / 0.00);
-  --shadow-md: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 2px 4px -1px hsl(9, 75%, 61% / 0.00);
-  --shadow-sm: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 1px 2px -1px hsl(9, 75%, 61% / 0.00);
-  --shadow-xl: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00), 0px 8px 10px -1px hsl(9, 75%, 61% / 0.00);
-  --shadow-xs: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00);
-  --shadow-2xl: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00);
-  --shadow-2xs: 0px 2px 0px 0px hsl(9, 75%, 61% / 0.00);
-  --tracking-normal: 0em;
+  --sidebar-accent: 222 18% 12%;
+  --sidebar-accent-foreground: 0 0% 95%;
+  --sidebar-border: 222 12% 20%;
+  --sidebar-ring: 215 85% 58%;
+  
+  --radius: 0.75rem;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, monospace;
 }
 
 .dark {
-  --card: 20 14% 8%;
-  --ring: 9 75% 61%;
-  --input: 20 14% 18%;
-  --muted: 20 14% 15%;
-  --accent: 25 45% 20%;
-  --border: 20 14% 15%;
-  --chart-1: 203.8863 88.2845% 53.1373%;
-  --chart-2: 159.7826 100% 36.0784%;
-  --chart-3: 42.0290 92.8251% 56.2745%;
-  --chart-4: 147.1429 78.5047% 41.9608%;
-  --chart-5: 341.4894 75.2000% 50.9804%;
-  --popover: 20 14% 4%;
-  --primary: 9 75% 61%;
-  --sidebar: 20 14% 8%;
-  --secondary: 30 15% 52%;
-  --background: 20 14% 4%;
-  --foreground: 45 25% 91%;
-  --destructive: 356.3033 90.5579% 54.3137%;
-  --sidebar-ring: 9 75% 61%;
-  --sidebar-accent: 25 45% 20%;
-  --sidebar-border: 20 14% 15%;
-  --card-foreground: 45 25% 85%;
-  --sidebar-primary: 9 75% 61%;
-  --muted-foreground: 45 15% 46%;
-  --accent-foreground: 45 25% 85%;
-  --popover-foreground: 45 25% 91%;
+  --background: 222 20% 8%;
+  --foreground: 0 0% 95%;
+  
+  --card: 222 16% 15%;
+  --card-foreground: 0 0% 95%;
+  
+  --popover: 222 18% 12%;
+  --popover-foreground: 0 0% 95%;
+  
+  --primary: 215 85% 58%;
   --primary-foreground: 0 0% 100%;
-  --sidebar-foreground: 45 25% 85%;
+  
+  --secondary: 265 75% 62%;
   --secondary-foreground: 0 0% 100%;
+  
+  --muted: 222 12% 20%;
+  --muted-foreground: 222 10% 65%;
+  
+  --accent: 222 18% 12%;
+  --accent-foreground: 0 0% 95%;
+  
+  --destructive: 0 85% 62%;
   --destructive-foreground: 0 0% 100%;
-  --sidebar-accent-foreground: 45 25% 85%;
+  
+  --border: 222 12% 20%;
+  --input: 222 12% 20%;
+  --ring: 215 85% 58%;
+  
+  --success: 142 76% 48%;
+  --warning: 35 95% 58%;
+  --info: 195 85% 55%;
+  
+  --chart-1: 215 85% 58%;
+  --chart-2: 265 75% 62%;
+  --chart-3: 142 76% 48%;
+  --chart-4: 195 85% 55%;
+  --chart-5: 35 95% 58%;
+  
+  --sidebar: 222 20% 8%;
+  --sidebar-foreground: 0 0% 95%;
+  --sidebar-primary: 215 85% 58%;
   --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 222 18% 12%;
+  --sidebar-accent-foreground: 0 0% 95%;
+  --sidebar-border: 222 12% 20%;
+  --sidebar-ring: 215 85% 58%;
 }
 
 @layer base {
@@ -94,41 +112,108 @@
   body {
     @apply font-sans antialiased bg-background text-foreground;
   }
+  
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-semibold;
+  }
 }
 
 /* Custom scrollbar */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-track {
-  background: hsl(var(--muted));
+  background: hsl(var(--muted) / 0.3);
+  border-radius: 5px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: hsl(var(--primary));
-  border-radius: 4px;
+  background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--secondary)));
+  border-radius: 5px;
+  border: 2px solid hsl(var(--background));
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: hsl(var(--primary) / 0.8);
+  background: linear-gradient(180deg, hsl(var(--primary) / 0.9), hsl(var(--secondary) / 0.9));
 }
 
-/* Animation for chat messages */
-@keyframes slideInRight {
+/* Smooth transitions */
+* {
+  transition: background-color 200ms, border-color 200ms, color 200ms;
+}
+
+button, a {
+  transition: all 200ms;
+}
+
+/* Animation for cards */
+@keyframes fadeIn {
   from {
     opacity: 0;
-    transform: translateX(20px);
+    transform: translateY(10px);
   }
   to {
     opacity: 1;
-    transform: translateX(0);
+    transform: translateY(0);
   }
 }
 
-.chat-message {
-  animation: slideInRight 0.3s ease-out;
+.fade-in {
+  animation: fadeIn 150ms ease-out;
+}
+
+/* Gradient utilities */
+.gradient-primary {
+  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Card hover effect */
+.card-hover {
+  transition: transform 200ms, box-shadow 200ms;
+}
+
+.card-hover:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 16px hsl(var(--primary) / 0.1);
+}
+
+/* Platform badges */
+.badge-facebook {
+  background: hsl(var(--primary) / 0.15);
+  color: hsl(var(--primary));
+  border: 1px solid hsl(var(--primary) / 0.3);
+}
+
+.badge-instagram {
+  background: hsl(var(--secondary) / 0.15);
+  color: hsl(var(--secondary));
+  border: 1px solid hsl(var(--secondary) / 0.3);
+}
+
+/* Status indicators */
+.status-scheduled {
+  color: hsl(var(--primary));
+}
+
+.status-published {
+  color: hsl(var(--success));
+}
+
+.status-failed {
+  color: hsl(var(--destructive));
+}
+
+.status-draft {
+  color: hsl(var(--muted-foreground));
 }
 
 /* Skeleton loader */