From dfdf2bf005beabc0db5151e186310161e27e6dbe Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Mon, 18 Aug 2025 13:28:49 +0000
Subject: [PATCH] Enhance calendar layout with clearer day separations and
 weekend highlighting

Update CalendarGrid component to use gap styling for day separation and apply a light gray background to weekend days for improved visual clarity.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cc2d271b-82f0-4d6a-9302-a0b067ffb429
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/cc2d271b-82f0-4d6a-9302-a0b067ffb429/FFLhsf1
---
 client/src/components/CalendarGrid.tsx | 12 ++++++------
 client/src/index.css                   |  5 +++++
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/client/src/components/CalendarGrid.tsx b/client/src/components/CalendarGrid.tsx
index d73b9d6..9e6e98e 100644
--- a/client/src/components/CalendarGrid.tsx
+++ b/client/src/components/CalendarGrid.tsx
@@ -389,7 +389,7 @@ export default function CalendarGrid({
       </div>
 
       {/* Calendar Days - Grid moderne sans arrondi */}
-      <div className="grid grid-cols-7">
+      <div className="grid grid-cols-7 gap-0.5 bg-gray-500 p-0.5">
         {paddedDays.map((date, index) => {
           const isCurrentMonth = isSameMonth(date, currentDate);
           const isTodayDate = isToday(date);
@@ -400,15 +400,15 @@ export default function CalendarGrid({
           return (
             <div
               key={index}
-              className={`h-32 relative group cursor-pointer transition-all duration-200 border-r border-b border-gray-400 ${
+              className={`h-32 relative group cursor-pointer transition-all duration-200 ${
                 isTodayDate
-                  ? "bg-blue-100 hover:bg-blue-200 border-2 border-blue-500"
+                  ? "bg-blue-100 hover:bg-blue-200 border-2 border-blue-600"
                   : isWeekend && isCurrentMonth
-                  ? "bg-gray-50 hover:bg-gray-100"
+                  ? "bg-gray-200 hover:bg-gray-300"
                   : isCurrentMonth
                   ? "bg-white hover:bg-gray-50"
-                  : "bg-gray-100"
-              } ${!isCurrentMonth ? 'opacity-50' : ''} last:border-r-0`}
+                  : "bg-gray-150"
+              } ${!isCurrentMonth ? 'opacity-50' : ''}`}
               onClick={() => onDateClick(date)}
             >
               <div className="p-3 h-full flex flex-col">
diff --git a/client/src/index.css b/client/src/index.css
index 1ee65ad..d15a0bd 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -380,3 +380,8 @@ button[data-day-weekend="true"],
 .hover\:to-gray-50:hover {
   --tw-gradient-to: #f9fafb var(--tw-gradient-to-position);
 }
+
+/* Couleur grise personnalisée pour les jours hors mois */
+.bg-gray-150 {
+  background-color: #f1f3f4;
+}