bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(enhanced-kanban): enhance task card styling for improved UI

Browse Source 
- 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.
This commit is contained in:
shancds
2025-07-03 19:24:17 +05:30
parent 6d4d851f1d
commit 3532b0bbfb
2 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx
View File

@@ -122,17 +122,15 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
)} )}
{group.tasks.map((task, idx) => ( {group.tasks.map((task, idx) => (
<React.Fragment key={task.id}> <TaskCard
<TaskCard task={task}
task={task} onTaskDragStart={onTaskDragStart}
onTaskDragStart={onTaskDragStart} onTaskDragOver={onTaskDragOver}
onTaskDragOver={onTaskDragOver} onTaskDrop={onTaskDrop}
onTaskDrop={onTaskDrop} groupId={group.id}
groupId={group.id} isDropIndicator={hoveredGroupId === group.id && hoveredTaskIdx === idx}
isDropIndicator={hoveredGroupId === group.id && hoveredTaskIdx === idx} idx={idx}
idx={idx} />
/>
</React.Fragment>
))} ))}
{(isOwnerOrAdmin || isProjectManager) && !showNewCardTop && !showNewCardBottom && group.tasks.length > 0 && ( {(isOwnerOrAdmin || isProjectManager) && !showNewCardTop && !showNewCardBottom && group.tasks.length > 0 && (
<Button <Button
@@ -160,7 +158,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
<div className="drop-preview-indicator"> <div className="drop-preview-indicator">
<div className="drop-line" /> <div className="drop-line" />
</div> </div>
)} )}
</div> </div>
</div> </div>
); );

6
worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanTaskCard.css
View File

@@ -13,6 +13,12 @@
position: relative; 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 { .enhanced-kanban-task-card:hover {
box-shadow: 0 2px 6px var(--ant-color-shadow); box-shadow: 0 2px 6px var(--ant-color-shadow);
transform: translateY(-1px); transform: translateY(-1px);