From a0ffcbcd19c217bf9f0bdd3b2a40d3dff6896bda Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Fri, 17 Nov 2023 03:21:00 +0700
Subject: [PATCH] Improve Kanban UI

---
 .../kanbanBoard/columnContainer.jsx           | 10 ++----
 .../kanbanBoard/columnContainerWrapper.jsx    |  2 +-
 .../components/kanbanBoard/kanbanBoard.jsx    | 33 ++++++++++---------
 3 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/kanbanBoard/columnContainer.jsx b/frontend/src/components/kanbanBoard/columnContainer.jsx
index 8cf6f59..80bd445 100644
--- a/frontend/src/components/kanbanBoard/columnContainer.jsx
+++ b/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} />
diff --git a/frontend/src/components/kanbanBoard/columnContainerWrapper.jsx b/frontend/src/components/kanbanBoard/columnContainerWrapper.jsx
index 60fbeb1..478a529 100644
--- a/frontend/src/components/kanbanBoard/columnContainerWrapper.jsx
+++ b/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}
diff --git a/frontend/src/components/kanbanBoard/kanbanBoard.jsx b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
index 3229f38..fb3d7ef 100644
--- a/frontend/src/components/kanbanBoard/kanbanBoard.jsx
+++ b/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 = [
   {
@@ -142,21 +141,23 @@ function KanbanBoard() {
               createNewColumn();
             }}
             className="
-      h-[60px]
-      w-[350px]
-      min-w-[350px]
-      cursor-pointer
-      rounded-lg
-      bg-mainBackgroundColor
-      border-2
-      border-columnBackgroundColor
-      p-4
-      ring-rose-500
-      hover:ring-2
-      flex
-      gap-2
-      ">
+                      h-[60px]
+                      w-[350px]
+                      min-w-[350px]
+                      cursor-pointer
+                      rounded-xl
+                      bg-[#f1f2f4]
+                      border-2
+                      p-4
+                      hover:bg-gray-200
+                      flex
+                      gap-2
+                      my-2
+                      bg-opacity-60
+                      ">
+                        <div className="my-1">
             <AiOutlinePlusCircle />
+            </div>
             Add Column
           </button>
         </div>