From 56f129d7848231005e9cbe40a72fe8b1f7d7cc7c Mon Sep 17 00:00:00 2001 From: shancds Date: Fri, 4 Jul 2025 12:31:25 +0530 Subject: [PATCH] feat(TaskCard): implement end date selection and refine label styling - Added useEffect to set the selected date based on task's end date for improved date management. - Adjusted label styling for better visual consistency, including reduced border radius, padding, and updated color scheme based on theme mode. --- .../EnhancedKanbanBoardNativeDnD/TaskCard.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx index 2755abbd..2aca92b6 100644 --- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx +++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx @@ -68,6 +68,10 @@ const TaskCard: React.FC = memo(({ return new Date(d.getFullYear(), d.getMonth(), 1); }); + useEffect(() => { + setSelectedDate(task.end_date ? new Date(task.end_date) : null); + }, [task.end_date]); + // Close date picker when clicking outside useEffect(() => { const handleClickOutside = (event: MouseEvent) => { @@ -207,10 +211,10 @@ const TaskCard: React.FC = memo(({ style={{ backgroundColor: label.color_code, display: 'inline-block', - borderRadius: '4px', - padding: '2px 8px', - color: '#fff', - fontSize: 8, + borderRadius: '2px', + padding: '0px 4px', + color: themeMode === 'dark' ? '#181818' : '#fff', + fontSize: 10, marginRight: 4, whiteSpace: 'nowrap', minWidth: 0