From 3532b0bbfb3b959bd8cb4c87a8c823e2cdc0c71b Mon Sep 17 00:00:00 2001
From: shancds <shancds1@gmail.com>
Date: Thu, 3 Jul 2025 19:24:17 +0530
Subject: [PATCH] feat(enhanced-kanban): enhance task card styling for improved
 UI

- Added a light border, box shadow, and background color to the EnhancedKanbanTaskCard for a more visually appealing design.
- Refactored the rendering of TaskCard components in KanbanGroup to eliminate unnecessary React.Fragment wrappers, improving code clarity.
---
 .../KanbanGroup.tsx                           | 22 +++++++++----------
 .../EnhancedKanbanTaskCard.css                |  6 +++++
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx
index 5d73437e..e7dd5591 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx
@@ -122,17 +122,15 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
                 )}
 
                 {group.tasks.map((task, idx) => (
-                    <React.Fragment key={task.id}>
-                        <TaskCard
-                            task={task}
-                            onTaskDragStart={onTaskDragStart}
-                            onTaskDragOver={onTaskDragOver}
-                            onTaskDrop={onTaskDrop}
-                            groupId={group.id}
-                            isDropIndicator={hoveredGroupId === group.id && hoveredTaskIdx === idx}
-                            idx={idx}
-                        />
-                    </React.Fragment>
+                    <TaskCard
+                        task={task}
+                        onTaskDragStart={onTaskDragStart}
+                        onTaskDragOver={onTaskDragOver}
+                        onTaskDrop={onTaskDrop}
+                        groupId={group.id}
+                        isDropIndicator={hoveredGroupId === group.id && hoveredTaskIdx === idx}
+                        idx={idx}
+                    />
                 ))}
                 {(isOwnerOrAdmin || isProjectManager) && !showNewCardTop && !showNewCardBottom && group.tasks.length > 0 && (
                     <Button
@@ -160,7 +158,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
                     <div className="drop-preview-indicator">
                         <div className="drop-line" />
                     </div>
-                )}  
+                )}
             </div>
         </div>
     );
diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanTaskCard.css b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanTaskCard.css
index 0425f61d..e7f7ae02 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanTaskCard.css
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanTaskCard.css
@@ -13,6 +13,12 @@
   position: relative;
 }
 
+html.light .enhanced-kanban-task-card {
+  border: 1.5px solid #e1e4e8 !important; /* Asana-like light border */
+  box-shadow: 0 1px 4px 0 rgba(60, 64, 67, 0.08), 0 0.5px 1.5px 0 rgba(60, 64, 67, 0.03);
+  background: #fff !important;
+}
+
 .enhanced-kanban-task-card:hover {
   box-shadow: 0 2px 6px var(--ant-color-shadow);
   transform: translateY(-1px);