From 4333a9ae1242192eb55f77440509656a07b07d7e Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Thu, 10 Jul 2025 00:07:10 +0000
Subject: [PATCH] Enhance the look and feel of forms and data display for
 improved UI

Updates the styles of input fields, vendor sections, and filter cards to provide better visual consistency.

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/19d76f99-63e3-4717-987b-4fafe960e234.jpg
---
 client/src/components/NewSaleForm.tsx  |  2 +-
 client/src/components/SalesHistory.tsx |  6 +++---
 client/src/index.css                   | 19 +++++++++++++++----
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/client/src/components/NewSaleForm.tsx b/client/src/components/NewSaleForm.tsx
index 1f67224..6368168 100644
--- a/client/src/components/NewSaleForm.tsx
+++ b/client/src/components/NewSaleForm.tsx
@@ -168,7 +168,7 @@ export default function NewSaleForm() {
             {/* Seller Information */}
             <div className="modern-section modern-section-vendor">
               <div className="modern-section-header">
-                <div className="modern-icon-container">
+                <div className="w-10 h-10 bg-purple-500 text-white flex items-center justify-center border-2 border-purple-500 shadow-md">
                   <User className="h-5 w-5" />
                 </div>
                 <span className="truncate">Informations Vendeur</span>
diff --git a/client/src/components/SalesHistory.tsx b/client/src/components/SalesHistory.tsx
index a29269f..9d77a12 100644
--- a/client/src/components/SalesHistory.tsx
+++ b/client/src/components/SalesHistory.tsx
@@ -264,10 +264,10 @@ export default function SalesHistory({ canDelete = false }: SalesHistoryProps) {
       </CardHeader>
       <CardContent>
         {/* Filters */}
-        <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-end modern-section">
+        <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-end modern-filter-card">
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 flex-1 w-full">
             <div>
-              <label className="font-medium">Date de début</label>
+              <label className="font-medium text-sm block mb-2">Date de début</label>
               <Input
                 type="date"
                 value={startDate}
@@ -276,7 +276,7 @@ export default function SalesHistory({ canDelete = false }: SalesHistoryProps) {
               />
             </div>
             <div>
-              <label className="font-medium">Date de fin</label>
+              <label className="font-medium text-sm block mb-2">Date de fin</label>
               <Input
                 type="date"
                 value={endDate}
diff --git a/client/src/index.css b/client/src/index.css
index d9caf04..e664b20 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -109,13 +109,14 @@
 }
 
 .modern-input {
-  border: 2px solid hsl(var(--border));
+  border: 2px solid hsl(220, 13%, 75%);
   background: hsl(var(--background));
   color: hsl(var(--foreground));
   padding: 10px 14px;
   font-size: 14px;
   transition: all 0.2s ease;
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  border-radius: 0;
 }
 
 .modern-input:focus {
@@ -161,8 +162,8 @@
 
 /* Section-specific styles */
 .modern-section-vendor {
-  border-left: 4px solid hsl(var(--primary));
-  background: hsl(var(--muted) / 0.3);
+  border-left: 4px solid hsl(262, 83%, 58%);
+  background: hsl(262, 83%, 98%);
 }
 
 .modern-section-product {
@@ -181,11 +182,12 @@
 }
 
 .modern-select-trigger {
-  border: 2px solid hsl(var(--border));
+  border: 2px solid hsl(220, 13%, 75%);
   background: hsl(var(--background));
   padding: 10px 14px;
   transition: all 0.2s ease;
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  border-radius: 0;
 }
 
 .modern-select-trigger:hover {
@@ -197,6 +199,15 @@
   box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
 }
 
+/* Modern filter card styles */
+.modern-filter-card {
+  border: 2px solid hsl(220, 13%, 85%);
+  background: hsl(220, 13%, 96%);
+  padding: 16px;
+  border-radius: 0;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
+}
+
 /* Enhanced keyframes for mobile animations */
 @keyframes slideInRight {
   from {