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

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

@@ -122,7 +122,6 @@ 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}
@@ -132,7 +131,6 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
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

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);