From 1f34f22d0d062d183e91d35725b8ee57eece23cf Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Thu, 10 Jul 2025 00:01:35 +0000
Subject: [PATCH] Modernize the user interface by removing rounded corners and
 edges

Applies modern-section, modern-card, and modern-input classes to SalesHistory and NewSaleForm components, replacing rounded UI elements with angular designs.

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/397ad6bf-35e7-450c-978f-cd41f37e25ff.jpg
---
 client/src/components/NewSaleForm.tsx  | 40 +++++++++++++-------------
 client/src/components/SalesHistory.tsx | 30 +++++++++----------
 replit.md                              |  4 +++
 3 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/client/src/components/NewSaleForm.tsx b/client/src/components/NewSaleForm.tsx
index 20fb1e0..5ef60b3 100644
--- a/client/src/components/NewSaleForm.tsx
+++ b/client/src/components/NewSaleForm.tsx
@@ -161,19 +161,19 @@ export default function NewSaleForm() {
   };
 
   return (
-    <Card className="modern-card-elevated">
-      <CardContent className="mobile-card-content pt-6">
+    <Card className="modern-card">
+      <CardContent className="pt-6">
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="mobile-form-responsive">
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
             {/* Seller Information */}
-            <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">
+            <div className="modern-section border-l-4 border-l-primary">
+              <div className="modern-section-header">
+                <div className="modern-icon-container">
                   <User className="h-5 w-5" />
                 </div>
                 <span className="truncate">Informations Vendeur</span>
-              </h3>
-              <div className="grid grid-cols-1 sm:grid-cols-2 mobile-gap-responsive">
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <FormField
                   control={form.control}
                   name="vendeur"
@@ -181,7 +181,7 @@ export default function NewSaleForm() {
                     <FormItem>
                       <FormLabel>Vendeur <span className="text-destructive">*</span></FormLabel>
                       <FormControl>
-                        <Input placeholder="Nom du vendeur" {...field} />
+                        <Input placeholder="Nom du vendeur" className="modern-input" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -194,7 +194,7 @@ export default function NewSaleForm() {
                     <FormItem>
                       <FormLabel>Date de vente</FormLabel>
                       <FormControl>
-                        <Input type="date" {...field} />
+                        <Input type="date" className="modern-input" {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -204,14 +204,14 @@ export default function NewSaleForm() {
             </div>
 
             {/* Product Information */}
-            <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="modern-section border-l-4 border-l-blue-500 bg-blue-50">
+              <div className="modern-section-header">
                 <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>
-              <div className="grid grid-cols-1 sm:grid-cols-2 mobile-gap-responsive">
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <FormField
                   control={form.control}
                   name="typeArticle"
@@ -306,13 +306,13 @@ export default function NewSaleForm() {
             </div>
 
             {/* Customer Information */}
-            <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="modern-section border-l-4 border-l-emerald-500 bg-emerald-50">
+              <div className="modern-section-header">
                 <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>
+              </div>
               <div className="grid grid-cols-1 sm:grid-cols-2 mobile-gap-responsive">
                 <FormField
                   control={form.control}
@@ -394,15 +394,15 @@ export default function NewSaleForm() {
             </div>
 
             {/* Identity Information */}
-            <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="modern-section border-l-4 border-l-amber-500 bg-amber-50">
+              <div className="modern-section-header">
                 <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>
                 <span className="truncate">Pièce d'Identité</span>
-              </h3>
+              </div>
               <div className="grid grid-cols-1 sm:grid-cols-2 mobile-gap-responsive">
                 <FormField
                   control={form.control}
diff --git a/client/src/components/SalesHistory.tsx b/client/src/components/SalesHistory.tsx
index 87f4798..a29269f 100644
--- a/client/src/components/SalesHistory.tsx
+++ b/client/src/components/SalesHistory.tsx
@@ -250,48 +250,48 @@ export default function SalesHistory({ canDelete = false }: SalesHistoryProps) {
   };
 
   return (
-    <Card className="modern-card-elevated">
-      <CardHeader className="mobile-card-header">
-        <CardTitle className="flex items-center gap-2 sm:gap-3 responsive-title">
-          <div className="p-1.5 sm:p-2 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg sm:rounded-xl">
-            <History className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
+    <Card className="modern-card">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-3">
+          <div className="modern-icon-container">
+            <History className="h-6 w-6" />
           </div>
           <span className="truncate">Historique des Ventes</span>
         </CardTitle>
-        <p className="text-muted-foreground mt-2 responsive-body">
+        <p className="text-muted-foreground mt-2">
           Consultation et gestion des ventes enregistrées
         </p>
       </CardHeader>
-      <CardContent className="mobile-card-content mobile-form-responsive">
+      <CardContent>
         {/* Filters */}
-        <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 items-start sm:items-end mobile-form-section bg-muted bg-opacity-30 rounded-xl border border-border border-opacity-50">
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 flex-1 w-full">
+        <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-end modern-section">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 flex-1 w-full">
             <div>
-              <label className="responsive-caption font-medium">Date de début</label>
+              <label className="font-medium">Date de début</label>
               <Input
                 type="date"
                 value={startDate}
                 onChange={(e) => setStartDate(e.target.value)}
-                className="responsive-body"
+                className="modern-input"
               />
             </div>
             <div>
-              <label className="responsive-caption font-medium">Date de fin</label>
+              <label className="font-medium">Date de fin</label>
               <Input
                 type="date"
                 value={endDate}
                 onChange={(e) => setEndDate(e.target.value)}
-                className="responsive-body"
+                className="modern-input"
               />
             </div>
           </div>
           <div className="flex gap-2 w-full sm:w-auto">
-            <Button onClick={exportToCSV} variant="outline" className="touch-friendly-button flex-1 sm:flex-none">
+            <Button onClick={exportToCSV} variant="outline" className="modern-button flex-1 sm:flex-none">
               <Download className="h-4 w-4 mr-2" />
               <span className="hidden sm:inline">Export CSV</span>
               <span className="sm:hidden">CSV</span>
             </Button>
-            <Button onClick={exportToPDF} variant="outline" className="touch-friendly-button flex-1 sm:flex-none">
+            <Button onClick={exportToPDF} variant="outline" className="modern-button flex-1 sm:flex-none">
               <FileText className="h-4 w-4 mr-2" />
               <span className="hidden sm:inline">Export PDF</span>
               <span className="sm:hidden">PDF</span>
diff --git a/replit.md b/replit.md
index ad2d6f5..5529c34 100644
--- a/replit.md
+++ b/replit.md
@@ -184,6 +184,10 @@ Preferred communication style: Simple, everyday language.
 - ✅ 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
+- ✅ Removed remaining rounded elements from SalesHistory filter cards and form inputs
+- ✅ Updated NewSaleForm with modern-input class for all form fields
+- ✅ Applied modern-section and modern-card classes throughout the application
+- ✅ Replaced all rounded UI elements with straight-edged, angular modern design
 
 ### Database Backup & Recovery System (January 9, 2025)
 - ✅ Added complete database backup and restore functionality in administration panel