Refine form appearance and labels to improve the user experience

Updates the NewSaleForm component to enhance UI elements and adjust background colors.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: e80fed01-7137-4997-b9af-dad57132d430
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/e80fed01-7137-4997-b9af-dad57132d430/Z9TXgng

client/src/components/NewSaleForm.tsx

@@ -370,7 +370,7 @@ export default function NewSaleForm() {
             <div className="section-vendor">
               <div className="section-header">
                 <User className="h-5 w-5" />
-                <span>Informations Vendeur</span>
+                <span>Informations vendeur</span>
               </div>
               <div className="grid grid-cols-1 gap-4">
                 <FormField
@@ -378,7 +378,7 @@ export default function NewSaleForm() {
                   name="vendeur"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Vendeur <span className="text-destructive">*</span></FormLabel>
+                      <FormLabel>Nom du vendeur <span className="text-destructive">*</span></FormLabel>
                       <FormControl>
                         <Input placeholder="Nom du vendeur" className="modern-input" {...field} />
                       </FormControl>
@@ -389,11 +389,14 @@ export default function NewSaleForm() {
               </div>
             </div>
 
-            {/* Section Produit */}
+            {/* Section Produits */}
             <div className="section-product">
               <div className="section-header">
                 <Package className="h-5 w-5" />
-                <span>Informations Produit</span>
+                <span>Produits</span>
+                {products.length > 1 && (
+                  <span className="text-sm text-gray-600 ml-2">({products.length} produits)</span>
+                )}
               </div>
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <FormField
@@ -487,7 +490,7 @@ export default function NewSaleForm() {
             <div className="section-client">
               <div className="section-header">
                 <Users className="h-5 w-5" />
-                <span>Informations Client</span>
+                <span>Informations client</span>
               </div>
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <FormField
@@ -573,7 +576,7 @@ export default function NewSaleForm() {
             <div className="section-identity">
               <div className="section-header">
                 <BadgeCheck className="h-5 w-5" />
-                <span>Pièce d'Identité</span>
+                <span>Pièce d'identité</span>
               </div>
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <FormField

client/src/index.css

@@ -409,21 +409,21 @@ body {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
 
-/* Fonds de couleur unis harmonisés avec des teintes distinctes */
+/* Fonds de couleur unis harmonisés selon la nouvelle interface */
 .section-vendor {
-  background: #f0f9ff !important; /* Fond bleu très clair */
+  background: #e0f2fe !important; /* Fond bleu clair comme l'image */
 }
 
 .section-product {
-  background: #f0fdf4 !important; /* Fond vert très clair */
+  background: #e8f5e8 !important; /* Fond vert clair comme l'image */
 }
 
 .section-client {
-  background: #fef3c7 !important; /* Fond jaune clair */
+  background: #f3e8ff !important; /* Fond violet clair comme l'image */
 }
 
 .section-identity {
-  background: #fce7f3 !important; /* Fond rose très clair */
+  background: #fff3e0 !important; /* Fond orange clair comme l'image */
 }
 
 /* S'assurer que tous les inputs ont un fond blanc dans toutes les sections */