Improve the visual appearance of the new sale form for better user experience

Enhance UI by adjusting section background colors, border sizes in index.css, and button styles, also update replit.md file.

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/ecc2b161-5a3c-4a56-be92-3bd912beb968.jpg
This commit is contained in:
michaelschal committed 2025-07-10 08:42:53 +00:00
1 parent 68e77c41c9
commit bf9c76b62c
2 files changed
+33 -39

No files matched your search

+30 -39
View File
@@ -86,38 +86,7 @@ body {
transform: translateY(-1px);
}
/* Sections avec couleurs d'accent */
.section-vendor {
background: linear-gradient(135deg, hsl(var(--vendor-accent) / 0.05) 0%, hsl(var(--vendor-accent) / 0.02) 100%);
border-left: 4px solid hsl(var(--vendor-accent));
border-radius: 8px;
padding: 24px;
margin-bottom: 24px;
}
.section-product {
background: linear-gradient(135deg, hsl(var(--product-accent) / 0.05) 0%, hsl(var(--product-accent) / 0.02) 100%);
border-left: 4px solid hsl(var(--product-accent));
border-radius: 8px;
padding: 24px;
margin-bottom: 24px;
}
.section-client {
background: linear-gradient(135deg, hsl(var(--client-accent) / 0.05) 0%, hsl(var(--client-accent) / 0.02) 100%);
border-left: 4px solid hsl(var(--client-accent));
border-radius: 8px;
padding: 24px;
margin-bottom: 24px;
}
.section-identity {
background: linear-gradient(135deg, hsl(var(--identity-accent) / 0.05) 0%, hsl(var(--identity-accent) / 0.02) 100%);
border-left: 4px solid hsl(var(--identity-accent));
border-radius: 8px;
padding: 24px;
margin-bottom: 24px;
}
/* Sections avec couleurs d'accent - styles de base (remplacés par les styles plus spécifiques) */
/* En-têtes de section élégants */
.section-header {
@@ -220,13 +189,15 @@ body {
}
.modern-button-success {
background: hsl(var(--success));
color: hsl(var(--success-foreground));
background: #059669 !important; /* Vert plus prononcé */
color: white !important;
border: none !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-weight: 600;
}
.modern-button-success:hover {
background: hsl(var(--success) / 0.9);
background: #047857 !important; /* Vert foncé au survol */
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
@@ -423,17 +394,37 @@ body {
animation: slideIn 0.3s ease-out;
}
/* Sections avec cadres bien visibles */
/* Sections avec cadres plus fins et fonds colorés */
.section-vendor,
.section-product,
.section-client,
.section-identity {
border: 3px solid #4b5563 !important; /* Bordure épaisse et bien visible */
border: 2px solid #6b7280 !important; /* Bordure plus fine */
border-radius: 12px;
padding: 20px;
margin-bottom: 24px;
background: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Fonds de couleur très légers 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;
}
.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;
}
.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;
}
.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;
}
/* Responsive design */
+3
View File
@@ -233,6 +233,9 @@ Preferred communication style: Simple, everyday language.
- ✅ Improved responsive design for mobile and tablet devices
- ✅ Modern search interface with clear result counting and active search indicators
- ✅ Dual export options (PDF and CSV) for regulatory compliance reporting
- ✅ Enhanced save button with more prominent green color for better visibility
- ✅ Added subtle background colors to each form category (vendor, product, client, identity)
- ✅ Optimized border thickness for better balance between visibility and aesthetics
### Docker Configuration & Cleanup (January 9, 2025)
- ✅ Complete Docker setup optimized for external PostgreSQL database