From 2ab9dbfc9476d8d90143fc94209e6d11ff3d6392 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 9 Jul 2025 21:38:40 +0000
Subject: [PATCH] Improve the visibility of section labels and adjust logo
 placement

Refactors UI elements in `NewSaleForm.tsx` and `Dashboard.tsx` to enhance visual clarity and correct logo alignment issues.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 91318273-c764-4fd4-be04-bdc12c38af32
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/eb6cb90a-d30e-48de-af01-ee5dec256e37.jpg
---
 client/src/components/NewSaleForm.tsx | 28 +++++++++++++--------------
 client/src/pages/Dashboard.tsx        | 10 +++++-----
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/client/src/components/NewSaleForm.tsx b/client/src/components/NewSaleForm.tsx
index 0c0e7f9..b1de788 100644
--- a/client/src/components/NewSaleForm.tsx
+++ b/client/src/components/NewSaleForm.tsx
@@ -178,9 +178,9 @@ export default function NewSaleForm() {
           <form onSubmit={form.handleSubmit(onSubmit)} className="mobile-form-responsive">
             {/* Seller Information */}
             <div className="modern-card bg-muted bg-opacity-30 mobile-form-section rounded-xl border-l-4 border-primary">
-              <h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-2 sm:gap-3">
-                <div className="p-2 sm:p-3 bg-primary bg-opacity-20 rounded-lg flex items-center justify-center">
-                  <User className="h-5 w-5 sm:h-6 sm:w-6 text-primary" />
+              <h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-3">
+                <div className="w-8 h-8 sm:w-10 sm:h-10 bg-primary rounded-lg flex items-center justify-center shadow-sm">
+                  <User className="h-4 w-4 sm:h-5 sm:w-5 text-white" />
                 </div>
                 <span className="truncate">Informations Vendeur</span>
               </h3>
@@ -216,9 +216,9 @@ export default function NewSaleForm() {
 
             {/* Product Information */}
             <div className="modern-card bg-blue-50 bg-opacity-50 mobile-form-section rounded-xl border-l-4 border-blue-500">
-              <h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-2 sm:gap-3">
-                <div className="p-1.5 sm:p-2 bg-blue-500 bg-opacity-10 rounded-lg">
-                  <Package className="h-4 w-4 sm:h-5 sm:w-5 text-blue-600" />
+              <h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-3">
+                <div className="w-8 h-8 sm:w-10 sm:h-10 bg-blue-500 rounded-lg flex items-center justify-center shadow-sm">
+                  <Package className="h-4 w-4 sm:h-5 sm:w-5 text-white" />
                 </div>
                 <span className="truncate">Informations Produit</span>
               </h3>
@@ -317,10 +317,10 @@ export default function NewSaleForm() {
             </div>
 
             {/* Customer Information */}
-            <div className="modern-card bg-emerald-50/50 mobile-form-section rounded-xl border-l-4 border-emerald-500">
-              <h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-2 sm:gap-3">
-                <div className="p-1.5 sm:p-2 bg-emerald-500/10 rounded-lg">
-                  <Users className="h-4 w-4 sm:h-5 sm:w-5 text-emerald-600" />
+            <div className="modern-card bg-emerald-50 bg-opacity-50 mobile-form-section rounded-xl border-l-4 border-emerald-500">
+              <h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-3">
+                <div className="w-8 h-8 sm:w-10 sm:h-10 bg-emerald-500 rounded-lg flex items-center justify-center shadow-sm">
+                  <Users className="h-4 w-4 sm:h-5 sm:w-5 text-white" />
                 </div>
                 <span className="truncate">Informations Client</span>
               </h3>
@@ -405,10 +405,10 @@ export default function NewSaleForm() {
             </div>
 
             {/* Identity Information */}
-            <div className="modern-card bg-amber-50/50 mobile-form-section rounded-xl border-l-4 border-amber-500">
-              <h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-2 sm:gap-3">
-                <div className="p-1.5 sm:p-2 bg-amber-500/10 rounded-lg">
-                  <svg className="h-4 w-4 sm:h-5 sm:w-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div className="modern-card bg-amber-50 bg-opacity-50 mobile-form-section rounded-xl border-l-4 border-amber-500">
+              <h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-3">
+                <div className="w-8 h-8 sm:w-10 sm:h-10 bg-amber-500 rounded-lg flex items-center justify-center shadow-sm">
+                  <svg className="h-4 w-4 sm:h-5 sm:w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
                   </svg>
                 </div>
diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx
index f976295..3f13571 100644
--- a/client/src/pages/Dashboard.tsx
+++ b/client/src/pages/Dashboard.tsx
@@ -118,12 +118,12 @@ function DashboardContent() {
           <div className="mb-6 sm:mb-8 slide-in-up">
             <Card className="modern-card-elevated overflow-hidden">
               <CardContent className="mobile-card-content">
-                <div className="flex items-center gap-4 sm:gap-6">
-                  <div className="relative flex-shrink-0">
-                    <div className="p-3 sm:p-4 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl sm:rounded-2xl shadow-lg">
-                      <Building2 className="h-6 w-6 sm:h-8 sm:w-8 text-white" />
+                <div className="flex items-start gap-4 sm:gap-6">
+                  <div className="relative flex-shrink-0 mt-1">
+                    <div className="p-2 sm:p-3 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg sm:rounded-xl shadow-lg">
+                      <Building2 className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
                     </div>
-                    <div className="absolute -inset-2 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl sm:rounded-2xl blur opacity-20 -z-10"></div>
+                    <div className="absolute -inset-1 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg sm:rounded-xl blur opacity-20 -z-10"></div>
                   </div>
                   <div className="flex-1 min-w-0">
                     <h2 className="text-xl sm:text-2xl font-bold text-foreground mb-2 truncate">{selectedStore.name}</h2>