From 487fb767767495319b421feccb88d373aa74af30 Mon Sep 17 00:00:00 2001
From: shancds <shancds1@gmail.com>
Date: Mon, 30 Jun 2025 17:09:17 +0530
Subject: [PATCH] feat(enhanced-kanban): enhance drag-and-drop overlays with
 theme-aware styling

- Added theme mode support to the drag-and-drop overlays for tasks and groups, improving visual consistency in dark and light modes.
- Updated the display of active tasks and groups during drag operations to enhance user experience and clarity.
---
 .../enhanced-kanban/EnhancedKanbanBoard.tsx   | 45 ++++++++++++----
 .../enhanced-kanban/EnhancedKanbanGroup.tsx   | 52 +++++++++----------
 2 files changed, 59 insertions(+), 38 deletions(-)

diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoard.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoard.tsx
index 28a70475..dfee2303 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoard.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoard.tsx
@@ -71,6 +71,7 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
   const groupBy = useSelector((state: RootState) => state.enhancedKanbanReducer.groupBy);
   const project = useAppSelector((state: RootState) => state.projectReducer.project);
   const { statusCategories, status: existingStatuses } = useAppSelector((state) => state.taskStatusReducer);
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
 
   // Load filter data
   useFilterDataLoader();
@@ -441,18 +442,42 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
 
             <DragOverlay>
               {activeTask && (
-                <EnhancedKanbanTaskCard
-                  task={activeTask}
-                  sectionId={activeTask.status_id || ''}
-                  isDragOverlay={true}
-                />
+                <div
+                  style={{
+                    background: themeMode === 'dark' ? '#23272f' : '#fff',
+                    borderRadius: 8,
+                    boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
+                    padding: '12px 20px',
+                    minWidth: 180,
+                    maxWidth: 340,
+                    opacity: 0.95,
+                    fontWeight: 600,
+                    fontSize: 16,
+                    color: themeMode === 'dark' ? '#fff' : '#23272f',
+                    display: 'flex',
+                    alignItems: 'center',
+                  }}
+                >
+                  {activeTask.name}
+                </div>
               )}
               {activeGroup && (
-                <div className="group-drag-overlay">
-                  <div className="group-header-content">
-                    <h3>{activeGroup.name}</h3>
-                    <span className="task-count">({activeGroup.tasks.length})</span>
-                  </div>
+                <div
+                  style={{
+                    background: themeMode === 'dark' ? '#23272f' : '#fff',
+                    borderRadius: 8,
+                    boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
+                    padding: '16px 24px',
+                    minWidth: 220,
+                    maxWidth: 320,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    opacity: 0.95,
+                  }}
+                >
+                  <h3 style={{ margin: 0, fontWeight: 600, fontSize: 18 }}>{activeGroup.name}</h3>
+                  <span style={{ fontSize: 15, color: '#888' }}>({activeGroup.tasks.length})</span>
                 </div>
               )}
             </DragOverlay>
diff --git a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanGroup.tsx b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanGroup.tsx
index 5d33a77a..5d7aa3f2 100644
--- a/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanGroup.tsx
+++ b/worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanGroup.tsx
@@ -342,18 +342,6 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
               e.stopPropagation();
             }}
           >
-            <Flex
-              align="center"
-              justify="center"
-              style={{
-                minWidth: 26,
-                height: 26,
-                borderRadius: 120,
-                backgroundColor: themeWiseColor('white', '#1e1e1e', themeMode),
-              }}
-            >
-              {group.tasks.length}
-            </Flex>
 
             {isLoading && <LoadingOutlined style={{ color: colors.darkGray }} />}
             {isEditable ? (
@@ -403,7 +391,7 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
                     e.stopPropagation();
                   }}
                 >
-                  {name}
+                  {name} ({group.tasks.length})
                 </Typography.Text>
               </Tooltip>
             )}
@@ -480,28 +468,36 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
           <SortableContext items={taskIds} strategy={verticalListSortingStrategy}>
             {group.tasks.map((task, index) => (
               <React.Fragment key={task.id}>
-                {/* Show drop indicator before task if this is the target position */}
-                {shouldShowDropIndicators && overId === task.id && (
-                  <div className="drop-preview-indicator">
-                    <div className="drop-line"></div>
-                  </div>
+                {/* Drop indicator before the card if this is the drop target */}
+                {overId === task.id && (
+                  <div
+                    style={{
+                      height: 20,
+                      background: themeMode === 'dark' ? '#444' : '#e0e0e0',
+                      borderRadius: 4,
+                      margin: '4px 0',
+                      transition: 'background 0.2s',
+                    }}
+                  />
                 )}
-
                 <EnhancedKanbanTaskCard
                   task={task}
                   sectionId={group.id}
                   isActive={task.id === activeTaskId}
                   isDropTarget={overId === task.id}
                 />
-
-                {/* Show drop indicator after last task if dropping at the end */}
-                {shouldShowDropIndicators &&
-                  index === group.tasks.length - 1 &&
-                  overId === group.id && (
-                    <div className="drop-preview-indicator">
-                      <div className="drop-line"></div>
-                    </div>
-                  )}
+                {/* Drop indicator at the end if dropping at the end of the group */}
+                {index === group.tasks.length - 1 && overId === group.id && (
+                  <div
+                    style={{
+                      height: 12,
+                      background: themeMode === 'dark' ? '#444' : '#e0e0e0',
+                      borderRadius: 4,
+                      margin: '8px 0',
+                      transition: 'background 0.2s',
+                    }}
+                  />
+                )}
               </React.Fragment>
             ))}
           </SortableContext>