paul/task-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve calendar day highlighting to better distinguish weekends

Browse Source 
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
This commit is contained in:
paul-nothaft
2025-09-11 10:27:25 +00:00
parent 3a28cc7669
commit e33e3e8cb5
2 changed files with 14 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/TasksWithCalendar.tsx
+14 -11
View File
@@ -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>