From 09ff19cda06af20238651325ace36d03d25a16b1 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Tue, 12 Aug 2025 12:31:42 +0000
Subject: [PATCH] Add a thin grey border around validation icons

Apply a border to various check and check circle icons across different modals and pages to visually distinguish them.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: b163d4c0-de5e-4f4e-a9c0-aed4c7049718
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/b163d4c0-de5e-4f4e-a9c0-aed4c7049718/93Mucz1
---
 client/src/components/modals/OrderDetailModal.tsx      | 4 ++--
 client/src/components/modals/ReconciliationModal.tsx   | 2 +-
 client/src/components/modals/ValidateDeliveryModal.tsx | 4 ++--
 client/src/components/ui/checkbox.tsx                  | 2 +-
 client/src/components/ui/context-menu.tsx              | 2 +-
 client/src/components/ui/dropdown-menu.tsx             | 2 +-
 client/src/pages/BLReconciliation.tsx                  | 2 +-
 client/src/pages/Deliveries.tsx                        | 2 +-
 client/src/pages/Tasks.tsx                             | 2 +-
 9 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/src/components/modals/OrderDetailModal.tsx b/client/src/components/modals/OrderDetailModal.tsx
index ea03454..7123969 100644
--- a/client/src/components/modals/OrderDetailModal.tsx
+++ b/client/src/components/modals/OrderDetailModal.tsx
@@ -394,7 +394,7 @@ export default function OrderDetailModal({
                 disabled={validateOrderMutation.isPending}
                 className="bg-green-600 hover:bg-green-700"
               >
-                <CheckCircle className="w-4 h-4 mr-2" />
+                <CheckCircle className="w-4 h-4 mr-2 border border-gray-300 rounded p-0.5" />
                 {validateOrderMutation.isPending ? 'Validation...' : 'Valider Commande'}
               </Button>
             )}
@@ -404,7 +404,7 @@ export default function OrderDetailModal({
                 onClick={handleValidateDelivery}
                 className="bg-secondary hover:bg-green-700"
               >
-                <Check className="w-4 h-4 mr-2" />
+                <Check className="w-4 h-4 mr-2 border border-gray-300 rounded p-0.5" />
                 Valider livraison
               </Button>
             )}
diff --git a/client/src/components/modals/ReconciliationModal.tsx b/client/src/components/modals/ReconciliationModal.tsx
index 0ee5fbf..13a5e26 100644
--- a/client/src/components/modals/ReconciliationModal.tsx
+++ b/client/src/components/modals/ReconciliationModal.tsx
@@ -255,7 +255,7 @@ export default function ReconciliationModal({
                 disabled={!canValidate || updateDeliveryMutation.isPending}
                 className="bg-green-600 hover:bg-green-700"
               >
-                <Check className="w-4 h-4 mr-2" />
+                <Check className="w-4 h-4 mr-2 border border-gray-300 rounded p-0.5" />
                 {updateDeliveryMutation.isPending ? "Validation..." : "Valider le rapprochement"}
               </Button>
             </div>
diff --git a/client/src/components/modals/ValidateDeliveryModal.tsx b/client/src/components/modals/ValidateDeliveryModal.tsx
index 025b95f..8de83c5 100644
--- a/client/src/components/modals/ValidateDeliveryModal.tsx
+++ b/client/src/components/modals/ValidateDeliveryModal.tsx
@@ -108,7 +108,7 @@ export default function ValidateDeliveryModal({
       <DialogContent className="sm:max-w-md" aria-describedby="validate-delivery-modal-description">
         <DialogHeader>
           <DialogTitle className="flex items-center space-x-2">
-            <Check className="w-5 h-5 text-green-600" />
+            <Check className="w-5 h-5 text-green-600 border border-gray-300 rounded p-0.5" />
             <span>Valider la livraison</span>
           </DialogTitle>
           <p id="validate-delivery-modal-description" className="text-sm text-gray-600 mt-1">
@@ -182,7 +182,7 @@ export default function ValidateDeliveryModal({
                 disabled={validateDeliveryMutation.isPending}
                 className="bg-green-600 hover:bg-green-700"
               >
-                <Check className="w-4 h-4 mr-2" />
+                <Check className="w-4 h-4 mr-2 border border-gray-300 rounded p-0.5" />
                 {validateDeliveryMutation.isPending ? "Validation..." : "Valider livraison"}
               </Button>
             </div>
diff --git a/client/src/components/ui/checkbox.tsx b/client/src/components/ui/checkbox.tsx
index 965e345..0d3781e 100644
--- a/client/src/components/ui/checkbox.tsx
+++ b/client/src/components/ui/checkbox.tsx
@@ -19,7 +19,7 @@ const Checkbox = forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <Check className="h-4 w-4" />
+      <Check className="h-4 w-4 border border-gray-300 rounded p-0.5" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))
diff --git a/client/src/components/ui/context-menu.tsx b/client/src/components/ui/context-menu.tsx
index ca283f3..4bf0109 100644
--- a/client/src/components/ui/context-menu.tsx
+++ b/client/src/components/ui/context-menu.tsx
@@ -102,7 +102,7 @@ const ContextMenuCheckboxItem = forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="h-4 w-4 border border-gray-300 rounded p-0.5" />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/client/src/components/ui/dropdown-menu.tsx b/client/src/components/ui/dropdown-menu.tsx
index d731b8a..82a81d0 100644
--- a/client/src/components/ui/dropdown-menu.tsx
+++ b/client/src/components/ui/dropdown-menu.tsx
@@ -105,7 +105,7 @@ const DropdownMenuCheckboxItem = forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="h-4 w-4 border border-gray-300 rounded p-0.5" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/client/src/pages/BLReconciliation.tsx b/client/src/pages/BLReconciliation.tsx
index 62392b7..18a3cc9 100644
--- a/client/src/pages/BLReconciliation.tsx
+++ b/client/src/pages/BLReconciliation.tsx
@@ -465,7 +465,7 @@ export default function BLReconciliation() {
                                         className="text-gray-600 hover:text-green-600 transition-colors duration-200 p-1 hover:bg-green-50 rounded"
                                         title="Valider le rapprochement"
                                       >
-                                        <Check className="w-4 h-4" />
+                                        <Check className="w-4 h-4 border border-gray-300 rounded p-0.5" />
                                       </button>
                                     )}
                                     {permissions.canDelete('reconciliation') && (
diff --git a/client/src/pages/Deliveries.tsx b/client/src/pages/Deliveries.tsx
index 73e630e..1c77056 100644
--- a/client/src/pages/Deliveries.tsx
+++ b/client/src/pages/Deliveries.tsx
@@ -449,7 +449,7 @@ export default function Deliveries() {
                                 className="text-green-600 hover:text-green-700"
                                 disabled={validateMutation.isPending}
                               >
-                                <Check className="w-4 h-4" />
+                                <Check className="w-4 h-4 border border-gray-300 rounded p-0.5" />
                               </Button>
                             )}
                             {canDelete && (
diff --git a/client/src/pages/Tasks.tsx b/client/src/pages/Tasks.tsx
index cf6fcc0..0717097 100644
--- a/client/src/pages/Tasks.tsx
+++ b/client/src/pages/Tasks.tsx
@@ -445,7 +445,7 @@ export default function Tasks() {
                                         {task.title}
                                       </h5>
                                       <Badge variant="secondary" className="flex items-center gap-1">
-                                        <CheckCircle className="w-3 h-3" />
+                                        <CheckCircle className="w-3 h-3 border border-gray-300 rounded p-0.5" />
                                         Terminée
                                       </Badge>
                                     </div>