From e33e3e8cb50b4f89a1b18ccba78b1d1055fef839 Mon Sep 17 00:00:00 2001
From: paul-nothaft <40865108-paul-nothaft@users.noreply.replit.com>
Date: Thu, 11 Sep 2025 10:27:25 +0000
Subject: [PATCH] Improve calendar day highlighting to better distinguish
 weekends

Refactor `TasksWithCalendar.tsx` to apply specific styling for weekends and today's date, enhancing visual clarity.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/0tPSQjg
---
 .replit                                     |  4 ----
 client/src/components/TasksWithCalendar.tsx | 25 ++++++++++++---------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/.replit b/.replit
index 2a7479f..930416a 100644
--- a/.replit
+++ b/.replit
@@ -14,10 +14,6 @@ run = ["npm", "run", "start"]
 localPort = 5000
 externalPort = 80
 
-[[ports]]
-localPort = 39581
-externalPort = 3001
-
 [[ports]]
 localPort = 41353
 externalPort = 3000
diff --git a/client/src/components/TasksWithCalendar.tsx b/client/src/components/TasksWithCalendar.tsx
index 90e09ba..66cb5a4 100644
--- a/client/src/components/TasksWithCalendar.tsx
+++ b/client/src/components/TasksWithCalendar.tsx
@@ -334,18 +334,19 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
               const isWeekend = date.getDay() === 0 || date.getDay() === 6;
               const isHovered = hoveredDate && isSameDay(date, hoveredDate);
               
+              
+              // Use important modifier to ensure weekend styling overrides any conflicting CSS
+              const weekendClasses = isWeekend ? '!bg-muted/80 border-muted-foreground/30 shadow-sm' : '';
+              const todayClasses = isToday ? 'border-primary ring-1 ring-primary ring-offset-1 ring-offset-background' : 'border-border';
+              const hoverClasses = isHovered && draggedTask ? 'ring-2 ring-primary bg-primary/15 border-primary shadow-lg' : '';
+              const dragClasses = draggedTask && !isHovered ? 'border-dashed border-primary/30' : '';
+              
+              const finalClassName = `p-2 min-h-[100px] transition-all border-2 ${todayClasses} ${weekendClasses} ${hoverClasses} ${dragClasses}`;
+              
               return (
                 <Card 
                   key={index}
-                  className={`p-2 min-h-[100px] transition-all border-2 ${
-                    isToday ? 'border-primary ring-1 ring-primary ring-offset-1 ring-offset-background' : 'border-border'
-                  } ${
-                    isWeekend ? 'bg-muted/50 border-muted' : ''
-                  } ${
-                    isHovered && draggedTask ? 'ring-2 ring-primary bg-primary/15 border-primary shadow-lg' : ''
-                  } ${
-                    draggedTask && !isHovered ? 'border-dashed border-primary/30' : ''
-                  }`}
+                  className={finalClassName}
                   onDragOver={handleDragOver}
                   onDragEnter={() => handleDragEnter(date)}
                   onDragLeave={handleDragLeave}
@@ -357,11 +358,13 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
                   data-testid={`calendar-date-${format(date, 'yyyy-MM-dd')}`}
                 >
                   <div className="text-center mb-2">
-                    <div className="text-xs text-muted-foreground font-medium">
+                    <div className={`text-xs font-medium ${
+                      isWeekend ? 'text-muted-foreground font-semibold' : 'text-muted-foreground'
+                    }`}>
                       {format(date, 'EEE')}
                     </div>
                     <div className={`text-xs font-semibold ${
-                      isToday ? 'text-primary' : ''
+                      isToday ? 'text-primary' : isWeekend ? 'text-primary/80' : ''
                     }`}>
                       {format(date, 'MMM d')}
                     </div>