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

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