Update application UI with a modern and streamlined design

Revamp the entire UI with a new theme, enhancing readability and modern aesthetics across all components, including AI chat, calendar, media uploads, and user management sections.

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/nriKMjY

client/src/pages/login.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest } from "@/lib/queryClient";
-import { Lock, User } from "lucide-react";
+import { Lock, User, Sparkles } from "lucide-react";
 
 export default function Login() {
   const [, setLocation] = useLocation();
@@ -16,7 +16,6 @@ export default function Login() {
   const [isLoading, setIsLoading] = useState(false);
   const [showDefaultPassword, setShowDefaultPassword] = useState(false);
 
-  // Vérifier si le mot de passe admin par défaut est toujours actif
   useEffect(() => {
     const checkDefaultPassword = async () => {
       try {
@@ -44,7 +43,6 @@ export default function Login() {
         description: `Bienvenue ${data.username}`,
       });
 
-      // Rediriger vers le dashboard
       setLocation("/");
     } catch (error: any) {
       toast({
@@ -58,29 +56,38 @@ export default function Login() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20 p-4">
-      <Card className="w-full max-w-md">
-        <CardHeader className="space-y-1 text-center">
-          <CardTitle className="text-3xl font-bold">Social Flow</CardTitle>
-          <CardDescription>
-            Connectez-vous à votre compte pour gérer vos publications
-          </CardDescription>
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-primary/5 to-secondary/5 p-4">
+      <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
+      
+      <Card className="w-full max-w-md rounded-2xl border-border/50 shadow-2xl relative z-10">
+        <CardHeader className="space-y-4 text-center pt-8 pb-6">
+          <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary to-secondary mx-auto flex items-center justify-center shadow-2xl">
+            <Sparkles className="w-10 h-10 text-white" />
+          </div>
+          <div>
+            <CardTitle className="text-3xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+              Social Flow
+            </CardTitle>
+            <CardDescription className="text-base mt-3">
+              Connectez-vous à votre compte pour gérer vos publications
+            </CardDescription>
+          </div>
         </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="username" data-testid="label-username">
+        <CardContent className="pb-8 px-8">
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div className="space-y-3">
+              <Label htmlFor="username" className="text-sm font-semibold" data-testid="label-username">
                 Nom d'utilisateur
               </Label>
               <div className="relative">
-                <User className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                <User className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                 <Input
                   id="username"
                   type="text"
                   placeholder="admin"
                   value={username}
                   onChange={(e) => setUsername(e.target.value)}
-                  className="pl-10"
+                  className="pl-12 h-12 rounded-xl bg-muted/30 border-border/50 focus:border-primary/50"
                   required
                   disabled={isLoading}
                   data-testid="input-username"
@@ -88,19 +95,19 @@ export default function Login() {
               </div>
             </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="password" data-testid="label-password">
+            <div className="space-y-3">
+              <Label htmlFor="password" className="text-sm font-semibold" data-testid="label-password">
                 Mot de passe
               </Label>
               <div className="relative">
-                <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                <Lock className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                 <Input
                   id="password"
                   type="password"
                   placeholder="••••••••"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  className="pl-10"
+                  className="pl-12 h-12 rounded-xl bg-muted/30 border-border/50 focus:border-primary/50"
                   required
                   disabled={isLoading}
                   data-testid="input-password"
@@ -110,7 +117,7 @@ export default function Login() {
 
             <Button
               type="submit"
-              className="w-full"
+              className="w-full h-12 rounded-xl bg-gradient-to-r from-primary to-secondary hover:opacity-90 text-base font-semibold shadow-lg mt-6"
               disabled={isLoading}
               data-testid="button-login"
             >
@@ -119,10 +126,13 @@ export default function Login() {
           </form>
 
           {showDefaultPassword && (
-            <div className="mt-6 text-center text-sm text-muted-foreground">
-              <p>Identifiants par défaut :</p>
-              <p className="font-semibold">admin / admin</p>
-              <p className="text-xs mt-2 text-orange-500">⚠️ Changez ce mot de passe après la première connexion</p>
+            <div className="mt-8 text-center p-4 rounded-xl bg-warning/10 border border-warning/20">
+              <p className="text-sm text-muted-foreground mb-2">Identifiants par défaut :</p>
+              <p className="font-semibold text-foreground">admin / admin</p>
+              <p className="text-xs mt-3 text-warning flex items-center justify-center gap-2">
+                <span className="text-base">⚠️</span>
+                Changez ce mot de passe après la première connexion
+              </p>
             </div>
           )}
         </CardContent>