From 1821f4feff8ff3814bace700cff82e8ed9dfb90c Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 9 Jul 2025 23:58:08 +0000
Subject: [PATCH] Modernize the user interface with a cleaner and more
 professional design

Refactors UI components to implement a modern, angular design with updated color scheme and styling in `NewSaleForm.tsx`, `Dashboard.tsx`, `Login.tsx` and `index.css`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: dec54137-d5a2-4406-8ad4-5f2f9fb110bf
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/6a7de82e-d1f1-4ccf-baa2-a2d2d7172ac9.jpg
---
 client/src/components/NewSaleForm.tsx |  34 ++++-----
 client/src/index.css                  | 105 +++++++++++++++++++++-----
 client/src/pages/Dashboard.tsx        |  35 +++++----
 client/src/pages/Login.tsx            |  40 ++++------
 replit.md                             |   5 ++
 5 files changed, 141 insertions(+), 78 deletions(-)

diff --git a/client/src/components/NewSaleForm.tsx b/client/src/components/NewSaleForm.tsx
index 990506b..20fb1e0 100644
--- a/client/src/components/NewSaleForm.tsx
+++ b/client/src/components/NewSaleForm.tsx
@@ -166,10 +166,10 @@ export default function NewSaleForm() {
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="mobile-form-responsive">
             {/* Seller Information */}
-            <div className="modern-card bg-muted bg-opacity-30 mobile-form-section rounded-xl border-l-4 border-primary">
-              <h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-3">
-                <div className="w-8 h-8 sm:w-10 sm:h-10 bg-primary rounded-lg flex items-center justify-center shadow-sm">
-                  <User className="h-4 w-4 sm:h-5 sm:w-5 text-white" />
+            <div className="bg-muted border border-border mobile-form-section border-l-4 border-l-primary">
+              <h3 className="font-semibold text-foreground mb-6 flex items-center gap-3">
+                <div className="w-10 h-10 bg-primary text-primary-foreground flex items-center justify-center">
+                  <User className="h-5 w-5" />
                 </div>
                 <span className="truncate">Informations Vendeur</span>
               </h3>
@@ -204,10 +204,10 @@ export default function NewSaleForm() {
             </div>
 
             {/* Product Information */}
-            <div className="modern-card bg-blue-50 bg-opacity-50 mobile-form-section rounded-xl border-l-4 border-blue-500">
-              <h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-3">
-                <div className="w-8 h-8 sm:w-10 sm:h-10 bg-blue-500 rounded-lg flex items-center justify-center shadow-sm">
-                  <Package className="h-4 w-4 sm:h-5 sm:w-5 text-white" />
+            <div className="bg-blue-50 border border-border mobile-form-section border-l-4 border-l-blue-500">
+              <h3 className="font-semibold text-foreground mb-6 flex items-center gap-3">
+                <div className="w-10 h-10 bg-blue-500 text-white flex items-center justify-center">
+                  <Package className="h-5 w-5" />
                 </div>
                 <span className="truncate">Informations Produit</span>
               </h3>
@@ -306,10 +306,10 @@ export default function NewSaleForm() {
             </div>
 
             {/* Customer Information */}
-            <div className="modern-card bg-emerald-50 bg-opacity-50 mobile-form-section rounded-xl border-l-4 border-emerald-500">
-              <h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-3">
-                <div className="w-8 h-8 sm:w-10 sm:h-10 bg-emerald-500 rounded-lg flex items-center justify-center shadow-sm">
-                  <Users className="h-4 w-4 sm:h-5 sm:w-5 text-white" />
+            <div className="bg-emerald-50 border border-border mobile-form-section border-l-4 border-l-emerald-500">
+              <h3 className="font-semibold text-foreground mb-6 flex items-center gap-3">
+                <div className="w-10 h-10 bg-emerald-500 text-white flex items-center justify-center">
+                  <Users className="h-5 w-5" />
                 </div>
                 <span className="truncate">Informations Client</span>
               </h3>
@@ -394,10 +394,10 @@ export default function NewSaleForm() {
             </div>
 
             {/* Identity Information */}
-            <div className="modern-card bg-amber-50 bg-opacity-50 mobile-form-section rounded-xl border-l-4 border-amber-500">
-              <h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-3">
-                <div className="w-8 h-8 sm:w-10 sm:h-10 bg-amber-500 rounded-lg flex items-center justify-center shadow-sm">
-                  <svg className="h-4 w-4 sm:h-5 sm:w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div className="bg-amber-50 border border-border mobile-form-section border-l-4 border-l-amber-500">
+              <h3 className="font-semibold text-foreground mb-6 flex items-center gap-3">
+                <div className="w-10 h-10 bg-amber-500 text-white flex items-center justify-center">
+                  <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
                   </svg>
                 </div>
@@ -503,7 +503,7 @@ export default function NewSaleForm() {
                 type="submit" 
                 size="lg"
                 disabled={isSubmitting || createSaleMutation.isPending}
-                className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white border-0 shadow-lg hover:shadow-xl hover:scale-[1.02] smooth-transition touch-friendly-button order-1 sm:order-2"
+                className="bg-primary hover:bg-primary/90 text-primary-foreground border-0 shadow-lg hover:shadow-xl order-1 sm:order-2"
               >
                 <Save className="h-5 w-5 mr-2" />
                 <span className="hidden sm:inline">{isSubmitting || createSaleMutation.isPending ? 'Enregistrement...' : 'Enregistrer la Vente'}</span>
diff --git a/client/src/index.css b/client/src/index.css
index ca40f3a..231da71 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -15,18 +15,18 @@
   --border: hsl(220, 13%, 91%);
   --input: hsl(220, 13%, 91%);
   
-  /* Modern blue-purple gradient palette */
-  --primary: hsl(232, 97%, 59%);
-  --primary-foreground: hsl(0, 0%, 100%);
-  --secondary: hsl(220, 14%, 96%);
-  --secondary-foreground: hsl(222, 15%, 11%);
-  --accent: hsl(262, 100%, 97%);
-  --accent-foreground: hsl(222, 15%, 11%);
+  /* Modern dark theme palette */
+  --primary: hsl(220, 13%, 18%);
+  --primary-foreground: hsl(0, 0%, 98%);
+  --secondary: hsl(220, 13%, 95%);
+  --secondary-foreground: hsl(220, 13%, 18%);
+  --accent: hsl(220, 13%, 95%);
+  --accent-foreground: hsl(220, 13%, 18%);
   
   /* Status colors */
-  --destructive: hsl(0, 85%, 60%);
+  --destructive: hsl(0, 72%, 51%);
   --destructive-foreground: hsl(0, 0%, 98%);
-  --success: hsl(142, 71%, 45%);
+  --success: hsl(142, 69%, 45%);
   --success-foreground: hsl(0, 0%, 98%);
   --warning: hsl(38, 92%, 50%);
   --warning-foreground: hsl(0, 0%, 98%);
@@ -34,8 +34,8 @@
   --info-foreground: hsl(0, 0%, 98%);
   
   /* Interactive elements */
-  --ring: hsl(232, 97%, 59%);
-  --radius: 0.75rem;
+  --ring: hsl(220, 13%, 18%);
+  --radius: 0.375rem;
   
   /* Gradient colors */
   --gradient-from: hsl(232, 97%, 59%);
@@ -56,8 +56,8 @@
   --border: hsl(215, 28%, 17%);
   --input: hsl(215, 28%, 17%);
   
-  /* Dark mode blue-purple palette */
-  --primary: hsl(232, 97%, 65%);
+  /* Dark mode palette */
+  --primary: hsl(0, 0%, 98%);
   --primary-foreground: hsl(222, 20%, 4%);
   --secondary: hsl(215, 28%, 17%);
   --secondary-foreground: hsl(210, 40%, 95%);
@@ -74,12 +74,79 @@
   --info: hsl(210, 100%, 65%);
   --info-foreground: hsl(0, 0%, 98%);
   
-  --ring: hsl(232, 97%, 65%);
-  
-  /* Dark gradient colors */
-  --gradient-from: hsl(232, 97%, 65%);
-  --gradient-to: hsl(262, 100%, 65%);
-  --gradient-accent: hsl(282, 100%, 65%);
+  --ring: hsl(0, 0%, 98%);
+}
+
+/* Modern Design Utilities */
+.modern-card {
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
+.modern-button {
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-weight: 500;
+  padding: 8px 16px;
+  transition: all 0.2s ease;
+}
+
+.modern-button:hover {
+  background: hsl(var(--muted));
+  border-color: hsl(var(--primary));
+}
+
+.modern-button-primary {
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  border: 1px solid hsl(var(--primary));
+}
+
+.modern-button-primary:hover {
+  background: hsl(var(--primary) / 0.9);
+}
+
+.modern-input {
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  padding: 8px 12px;
+  font-size: 14px;
+  transition: border-color 0.2s ease;
+}
+
+.modern-input:focus {
+  outline: none;
+  border-color: hsl(var(--primary));
+  box-shadow: 0 0 0 1px hsl(var(--primary));
+}
+
+.modern-section {
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+  padding: 24px;
+  margin-bottom: 24px;
+}
+
+.modern-section-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.modern-icon-container {
+  width: 40px;
+  height: 40px;
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 /* Enhanced keyframes for mobile animations */
diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx
index 6fc3945..8870e18 100644
--- a/client/src/pages/Dashboard.tsx
+++ b/client/src/pages/Dashboard.tsx
@@ -40,32 +40,31 @@ function DashboardContent() {
   return (
     <div className="min-h-screen bg-background">
       {/* Modern Header */}
-      <header className="sticky top-0 z-50 border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <header className="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
         <div className="max-w-7xl mx-auto mobile-padding">
-          <div className="flex justify-between items-center h-14 sm:h-16">
-            <div className="flex items-center gap-2 sm:gap-4">
+          <div className="flex justify-between items-center h-16">
+            <div className="flex items-center gap-4">
               <div className="relative">
-                <div className="p-1.5 sm:p-2 bg-gradient-to-br from-primary to-purple-600 rounded-lg sm:rounded-xl shadow-sm">
-                  <Package className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
+                <div className="p-2 bg-primary text-primary-foreground">
+                  <Package className="h-6 w-6" />
                 </div>
-                <div className="absolute -inset-1 bg-gradient-to-br from-primary to-purple-600 rounded-lg sm:rounded-xl blur opacity-20 -z-10"></div>
               </div>
               <div className="min-w-0">
-                <h1 className="text-lg sm:text-xl font-bold gradient-text truncate">RegisFlow</h1>
-                <p className="text-xs sm:text-sm text-muted-foreground hidden sm:block">Registre des ventes des Feux d'artifice</p>
+                <h1 className="text-xl font-bold text-foreground truncate">RegisFlow</h1>
+                <p className="text-sm text-muted-foreground hidden sm:block">Registre des ventes des Feux d'artifice</p>
               </div>
             </div>
             
             <div className="flex items-center gap-2 sm:gap-4">
               {/* Store Selector for Admin */}
               {isAdmin && !isLoadingStores && (
-                <div className="hidden sm:flex items-center gap-2 sm:gap-3 p-1.5 sm:p-2 bg-muted/50 rounded-lg border border-border/50">
+                <div className="hidden sm:flex items-center gap-3 p-2 bg-muted border border-border">
                   <Building2 className="h-4 w-4 text-muted-foreground" />
                   <Select 
                     value={selectedStoreId?.toString() || ""} 
                     onValueChange={(value) => setSelectedStoreId(parseInt(value))}
                   >
-                    <SelectTrigger className="w-32 sm:w-48 border-0 bg-transparent focus:ring-0 text-sm">
+                    <SelectTrigger className="w-48 border-0 bg-transparent focus:ring-0 text-sm">
                       <SelectValue placeholder="Magasin" />
                     </SelectTrigger>
                     <SelectContent>
@@ -81,7 +80,7 @@ function DashboardContent() {
 
               {/* Current Store Display for Non-Admin */}
               {!isAdmin && selectedStore && (
-                <div className="hidden sm:flex items-center gap-2 px-2 sm:px-3 py-1.5 sm:py-2 bg-muted/50 rounded-lg border border-border/50">
+                <div className="hidden sm:flex items-center gap-2 px-3 py-2 bg-muted border border-border">
                   <Building2 className="h-4 w-4 text-primary" />
                   <span className="text-sm font-medium">{selectedStore.name}</span>
                 </div>
@@ -116,29 +115,29 @@ function DashboardContent() {
       <main className="max-w-7xl mx-auto mobile-padding py-4 sm:py-6 lg:py-8">
         <div className="fade-in">
           <Tabs value={activeTab} onValueChange={setActiveTab} className="mobile-form-responsive">
-            <TabsList className={`grid w-full ${canAccessAdmin ? 'grid-cols-3' : 'grid-cols-2'} max-w-full sm:max-w-2xl h-12 sm:h-14 bg-muted bg-opacity-50 p-1.5 sm:p-2 rounded-xl sm:rounded-2xl border border-border border-opacity-50`}>
+            <TabsList className={`grid w-full ${canAccessAdmin ? 'grid-cols-3' : 'grid-cols-2'} max-w-full sm:max-w-2xl h-14 bg-muted p-0 border border-border`}>
               <TabsTrigger 
                 value="new-sale" 
-                className="h-9 sm:h-10 rounded-lg sm:rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium text-xs sm:text-sm"
+                className="h-full data-[state=active]:bg-background data-[state=active]:border-b-2 data-[state=active]:border-primary font-medium text-sm"
               >
-                <Package className="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" />
+                <Package className="h-5 w-5 mr-2" />
                 <span className="hidden sm:inline">Nouvelle Vente</span>
                 <span className="sm:hidden">Vente</span>
               </TabsTrigger>
               <TabsTrigger 
                 value="history" 
-                className="h-9 sm:h-10 rounded-lg sm:rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium text-xs sm:text-sm"
+                className="h-full data-[state=active]:bg-background data-[state=active]:border-b-2 data-[state=active]:border-primary font-medium text-sm"
               >
-                <History className="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" />
+                <History className="h-5 w-5 mr-2" />
                 <span className="hidden sm:inline">Historique</span>
                 <span className="sm:hidden">Liste</span>
               </TabsTrigger>
               {canAccessAdmin && (
                 <TabsTrigger 
                   value="admin" 
-                  className="h-9 sm:h-10 rounded-lg sm:rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium text-xs sm:text-sm"
+                  className="h-full data-[state=active]:bg-background data-[state=active]:border-b-2 data-[state=active]:border-primary font-medium text-sm"
                 >
-                  <Settings className="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" />
+                  <Settings className="h-5 w-5 mr-2" />
                   <span className="hidden sm:inline">Administration</span>
                   <span className="sm:hidden">Admin</span>
                 </TabsTrigger>
diff --git a/client/src/pages/Login.tsx b/client/src/pages/Login.tsx
index 0bd4886..80c0f7f 100644
--- a/client/src/pages/Login.tsx
+++ b/client/src/pages/Login.tsx
@@ -51,41 +51,33 @@ export default function Login() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center gradient-bg mobile-padding py-4 relative overflow-hidden">
-      {/* Background decoration */}
-      <div className="absolute inset-0 overflow-hidden">
-        <div className="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-white/20 to-white/5 rounded-full blur-3xl"></div>
-        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-gradient-to-br from-white/20 to-white/5 rounded-full blur-3xl"></div>
-      </div>
+    <div className="min-h-screen flex items-center justify-center bg-background mobile-padding py-4">
       
-      <Card className="w-full max-w-md modern-card-elevated backdrop-blur-sm bg-white/90 border-white/20 slide-in-up relative z-10">
-        <CardHeader className="text-center space-y-4 sm:space-y-6 mobile-card-header">
+      <Card className="w-full max-w-md modern-card border border-border">
+        <CardHeader className="text-center space-y-6">
           <div className="flex justify-center">
-            <div className="relative">
-              <div className="p-3 sm:p-4 bg-gradient-to-br from-primary to-purple-600 rounded-xl sm:rounded-2xl shadow-lg">
-                <Sparkles className="h-6 w-6 sm:h-8 sm:w-8 text-white" />
-              </div>
-              <div className="absolute -inset-2 bg-gradient-to-br from-primary to-purple-600 rounded-xl sm:rounded-2xl blur opacity-20 -z-10"></div>
+            <div className="modern-icon-container">
+              <Sparkles className="h-8 w-8" />
             </div>
           </div>
           <div className="space-y-2">
-            <CardTitle className="responsive-title font-bold gradient-text">RegisFlow</CardTitle>
-            <p className="text-muted-foreground responsive-subtitle">Registre des ventes des Feux d'artifice</p>
+            <CardTitle className="text-2xl font-bold text-foreground">RegisFlow</CardTitle>
+            <p className="text-muted-foreground text-sm">Registre des ventes des Feux d'artifice</p>
           </div>
         </CardHeader>
-        <CardContent className="mobile-card-content space-y-4 sm:space-y-6">
+        <CardContent className="space-y-6">
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="mobile-form-responsive">
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
               <FormField
                 control={form.control}
                 name="username"
                 render={({ field }) => (
-                  <FormItem className="space-y-2 sm:space-y-3">
-                    <FormLabel className="responsive-body font-semibold text-foreground">Nom d'utilisateur</FormLabel>
+                  <FormItem className="space-y-2">
+                    <FormLabel className="font-semibold text-foreground">Nom d'utilisateur</FormLabel>
                     <FormControl>
                       <Input 
                         placeholder="Votre nom d'utilisateur" 
-                        className="touch-friendly responsive-body border-2 border-border/50 focus:border-primary bg-background/50 backdrop-blur-sm smooth-transition" 
+                        className="modern-input" 
                         {...field} 
                       />
                     </FormControl>
@@ -97,13 +89,13 @@ export default function Login() {
                 control={form.control}
                 name="password"
                 render={({ field }) => (
-                  <FormItem className="space-y-2 sm:space-y-3">
-                    <FormLabel className="responsive-body font-semibold text-foreground">Mot de passe</FormLabel>
+                  <FormItem className="space-y-2">
+                    <FormLabel className="font-semibold text-foreground">Mot de passe</FormLabel>
                     <FormControl>
                       <Input 
                         type="password" 
                         placeholder="Votre mot de passe" 
-                        className="touch-friendly responsive-body border-2 border-border/50 focus:border-primary bg-background/50 backdrop-blur-sm smooth-transition" 
+                        className="modern-input" 
                         {...field} 
                       />
                     </FormControl>
@@ -113,7 +105,7 @@ export default function Login() {
               />
               <Button 
                 type="submit" 
-                className="w-full touch-friendly responsive-body font-semibold bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 hover:shadow-lg hover:scale-[1.02] smooth-transition" 
+                className="w-full modern-button-primary" 
                 disabled={isLoggingIn}
               >
                 <LogIn className="h-5 w-5 mr-2" />
diff --git a/replit.md b/replit.md
index f2f0dd5..ad2d6f5 100644
--- a/replit.md
+++ b/replit.md
@@ -179,6 +179,11 @@ Preferred communication style: Simple, everyday language.
 - ✅ Made "Lieu de naissance" field mandatory in new sale form for regulatory compliance
 - ✅ Removed unnecessary header section from new sale form for cleaner interface
 - ✅ Created custom favicon with fireworks design representing RegisFlow application
+- ✅ Implemented modern UI template with angular design elements replacing rounded components
+- ✅ Updated color scheme to use darker, more professional tones with less vibrant gradients
+- ✅ Modified card layouts, buttons, and form elements to use rectangular shapes instead of rounded corners
+- ✅ Enhanced Dashboard with clean, professional navigation tabs using bottom borders instead of rounded active states
+- ✅ Simplified login page with modern, angular design maintaining accessibility and usability
 
 ### Database Backup & Recovery System (January 9, 2025)
 - ✅ Added complete database backup and restore functionality in administration panel