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
This commit is contained in:
michaelschal committed 2025-07-19 12:36:53 +00:00
1 parent e0f15ad15d
commit ad034134d0
3 files changed
+14 -11

No files matched your search

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

+9 -6
View File
@@ -370,7 +370,7 @@ export default function NewSaleForm() {
<div className="section-vendor"> <div className="section-vendor">
<div className="section-header"> <div className="section-header">
<User className="h-5 w-5" /> <User className="h-5 w-5" />
<span>Informations Vendeur</span> <span>Informations vendeur</span>
</div> </div>
<div className="grid grid-cols-1 gap-4"> <div className="grid grid-cols-1 gap-4">
<FormField <FormField
@@ -378,7 +378,7 @@ export default function NewSaleForm() {
name="vendeur" name="vendeur"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Vendeur <span className="text-destructive">*</span></FormLabel> <FormLabel>Nom du vendeur <span className="text-destructive">*</span></FormLabel>
<FormControl> <FormControl>
<Input placeholder="Nom du vendeur" className="modern-input" {...field} /> <Input placeholder="Nom du vendeur" className="modern-input" {...field} />
</FormControl> </FormControl>
@@ -389,11 +389,14 @@ export default function NewSaleForm() {
</div> </div>
</div> </div>
{/* Section Produit */} {/* Section Produits */}
<div className="section-product"> <div className="section-product">
<div className="section-header"> <div className="section-header">
<Package className="h-5 w-5" /> <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>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<FormField <FormField
@@ -487,7 +490,7 @@ export default function NewSaleForm() {
<div className="section-client"> <div className="section-client">
<div className="section-header"> <div className="section-header">
<Users className="h-5 w-5" /> <Users className="h-5 w-5" />
<span>Informations Client</span> <span>Informations client</span>
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<FormField <FormField
@@ -573,7 +576,7 @@ export default function NewSaleForm() {
<div className="section-identity"> <div className="section-identity">
<div className="section-header"> <div className="section-header">
<BadgeCheck className="h-5 w-5" /> <BadgeCheck className="h-5 w-5" />
<span>Pièce d'Identité</span> <span>Pièce d'identité</span>
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<FormField <FormField
+5 -5
View File
@@ -409,21 +409,21 @@ body {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); 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 { .section-vendor {
background: #f0f9ff !important; /* Fond bleu très clair */ background: #e0f2fe !important; /* Fond bleu clair comme l'image */
} }
.section-product { .section-product {
background: #f0fdf4 !important; /* Fond vert très clair */ background: #e8f5e8 !important; /* Fond vert clair comme l'image */
} }
.section-client { .section-client {
background: #fef3c7 !important; /* Fond jaune clair */ background: #f3e8ff !important; /* Fond violet clair comme l'image */
} }
.section-identity { .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 */ /* S'assurer que tous les inputs ont un fond blanc dans toutes les sections */