From c2041dbd83907ce0a069b2d1316772d10238fd15 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Thu, 10 Jul 2025 08:44:27 +0000
Subject: [PATCH] Improve appearance of sales form by adding color and
 adjusting borders

Updates CSS to add background colors to sections and borders to buttons.

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/b39a7717-3ed7-4878-8c98-860b63e6a758.jpg
---
 client/src/index.css | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/client/src/index.css b/client/src/index.css
index 0e6d771..9b186b9 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -180,12 +180,15 @@ body {
 .modern-button-secondary {
   background: hsl(var(--secondary));
   color: hsl(var(--secondary-foreground));
-  border: 1px solid hsl(var(--border));
+  border: 2px solid #6b7280 !important; /* Cadre visible pour bouton secondaire */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .modern-button-secondary:hover {
   background: hsl(var(--secondary) / 0.8);
+  border-color: #4b5563 !important;
   transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 
 .modern-button-success {
@@ -394,37 +397,33 @@ body {
   animation: slideIn 0.3s ease-out;
 }
 
-/* Sections avec cadres plus fins et fonds colorés */
+/* Sections avec fonds colorés sans bordures */
 .section-vendor,
 .section-product,
 .section-client,
 .section-identity {
-  border: 2px solid #6b7280 !important; /* Bordure plus fine */
+  border: none !important; /* Suppression des bordures */
   border-radius: 12px;
-  padding: 20px;
+  padding: 24px;
   margin-bottom: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
 
-/* Fonds de couleur très légers pour chaque catégorie */
+/* Fonds de couleur pour chaque catégorie */
 .section-vendor {
-  background: linear-gradient(135deg, hsl(var(--vendor-accent) / 0.08) 0%, hsl(var(--vendor-accent) / 0.03) 100%) !important;
-  border-left: 4px solid hsl(var(--vendor-accent)) !important;
+  background: linear-gradient(135deg, hsl(var(--vendor-accent) / 0.12) 0%, hsl(var(--vendor-accent) / 0.06) 100%) !important;
 }
 
 .section-product {
-  background: linear-gradient(135deg, hsl(var(--product-accent) / 0.08) 0%, hsl(var(--product-accent) / 0.03) 100%) !important;
-  border-left: 4px solid hsl(var(--product-accent)) !important;
+  background: linear-gradient(135deg, hsl(var(--product-accent) / 0.12) 0%, hsl(var(--product-accent) / 0.06) 100%) !important;
 }
 
 .section-client {
-  background: linear-gradient(135deg, hsl(var(--client-accent) / 0.08) 0%, hsl(var(--client-accent) / 0.03) 100%) !important;
-  border-left: 4px solid hsl(var(--client-accent)) !important;
+  background: linear-gradient(135deg, hsl(var(--client-accent) / 0.12) 0%, hsl(var(--client-accent) / 0.06) 100%) !important;
 }
 
 .section-identity {
-  background: linear-gradient(135deg, hsl(var(--identity-accent) / 0.08) 0%, hsl(var(--identity-accent) / 0.03) 100%) !important;
-  border-left: 4px solid hsl(var(--identity-accent)) !important;
+  background: linear-gradient(135deg, hsl(var(--identity-accent) / 0.12) 0%, hsl(var(--identity-accent) / 0.06) 100%) !important;
 }
 
 /* Responsive design */