Improve Kanban UI

frontend/src/components/kanbanBoard/columnContainer.jsx

@@ -64,16 +64,10 @@ function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks
           setEditMode(true);
         }}
         className="
-      bg-mainBackgroundColor
+      ml-3
       text-md
-      h-[60px]
       cursor-grab
-      rounded-md
-      rounded-b-none
-      p-3
       font-bold
-      border-columnBackgroundColor
-      border-4
       flex
       items-center
       justify-between
@@ -113,7 +107,7 @@ function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks
       </div>
 
       {/* Column task container */}
-      <div className="flex flex-grow flex-col gap-4 p-2 overflow-x-hidden overflow-y-auto">
+      <div className="flex flex-grow flex-col gap-2 p-1 overflow-x-hidden overflow-y-auto">
         <SortableContext items={tasksIds}>
           {tasks.map(task => (
             <TaskCard key={task.id} task={task} deleteTask={deleteTask} updateTask={updateTask} />

frontend/src/components/kanbanBoard/columnContainerWrapper.jsx

@@ -2,7 +2,7 @@ import ColumnContainer from "./columnContainer";
 
 function ColumnContainerCard({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) {
   return (
-    <div className="card bg-[#f1f2f4] shadow p-4 my-2 border-2">
+    <div className="card bg-[#f1f2f4] shadow p-1 my-2 border-2">
       <ColumnContainer
         column={column}
         deleteColumn={deleteColumn}

frontend/src/components/kanbanBoard/kanbanBoard.jsx

@@ -4,8 +4,7 @@ import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@
 import { SortableContext, arrayMove } from "@dnd-kit/sortable";
 import { createPortal } from "react-dom";
 import TaskCard from "./taskCard";
-import { AiOutlinePlusCircle } from "react-icons/ai"
-
+import { AiOutlinePlusCircle } from "react-icons/ai";
 
 const defaultCols = [
   {
@@ -146,17 +145,19 @@ function KanbanBoard() {
                       w-[350px]
                       min-w-[350px]
                       cursor-pointer
-      rounded-lg
-      bg-mainBackgroundColor
+                      rounded-xl
+                      bg-[#f1f2f4]
                       border-2
-      border-columnBackgroundColor
                       p-4
-      ring-rose-500
-      hover:ring-2
+                      hover:bg-gray-200
                       flex
                       gap-2
+                      my-2
+                      bg-opacity-60
                       ">
+                        <div className="my-1">
             <AiOutlinePlusCircle />
+            </div>
             Add Column
           </button>
         </div>