Use react-icons instead of svg icon

frontend/src/components/icons/plusIcon.jsx

@@ -1,17 +0,0 @@
-import React from "react";
-
-function PlusIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
-      className="w-6 h-6">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-    </svg>
-  );
-}
-
-export default PlusIcon;

frontend/src/components/icons/trashIcon.jsx

@@ -1,21 +0,0 @@
-import React from "react";
-
-function TrashIcon() {
-  return React.createElement(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      strokeWidth: 1.5,
-      className: "w-6 h-6",
-    },
-    React.createElement("path", {
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      d: "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0",
-    })
-  );
-}
-
-export default TrashIcon;

frontend/src/components/kanbanBoard/columnContainer.jsx

@@ -1,8 +1,8 @@
 import { SortableContext, useSortable } from "@dnd-kit/sortable";
-import TrashIcon from "../icons/trashIcon";
+import { BsFillTrashFill } from "react-icons/bs"
+import { AiOutlinePlusCircle } from "react-icons/ai"
 import { CSS } from "@dnd-kit/utilities";
 import { useMemo, useState } from "react";
-import PlusIcon from "../icons/plusIcon";
 import TaskCard from "./taskCard";
 
 function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) {
@@ -124,7 +124,7 @@ function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks
         px-1
         py-2
         ">
-          <TrashIcon />
+          <BsFillTrashFill />
         </button>
       </div>
 
@@ -142,7 +142,7 @@ function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks
         onClick={() => {
           createTask(column.id);
         }}>
-        <PlusIcon />
+        <AiOutlinePlusCircle />
         Add task
       </button>
     </div>

frontend/src/components/kanbanBoard/kanbanBoard.jsx

@@ -1,10 +1,11 @@
-import PlusIcon from "../icons/plusIcon";
 import { useMemo, useState } from "react";
 import ColumnContainer from "./columnContainer";
 import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, arrayMove } from "@dnd-kit/sortable";
 import { createPortal } from "react-dom";
 import TaskCard from "./taskCard";
+import { AiOutlinePlusCircle } from "react-icons/ai"
+
 
 const defaultCols = [
   {
@@ -155,7 +156,7 @@ function KanbanBoard() {
       flex
       gap-2
       ">
-            <PlusIcon />
+            <AiOutlinePlusCircle />
             Add Column
           </button>
         </div>

frontend/src/components/kanbanBoard/taskCard.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import TrashIcon from "../icons/trashIcon";
+import { BsFillTrashFill } from "react-icons/bs"
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 
@@ -33,7 +33,7 @@ function TaskCard({ task, deleteTask, updateTask }) {
         style={style}
         className="
         opacity-30
-      bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl border-2 border-rose-500  cursor-grab relative
+      bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl border-2 border-gray-400  cursor-grab relative
       "
       />
     );
@@ -46,11 +46,11 @@ function TaskCard({ task, deleteTask, updateTask }) {
         style={style}
         {...attributes}
         {...listeners}
-        className="bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset hover:ring-rose-500 cursor-grab relative">
+        className="bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset bg-zinc-400 ring-zinc-950 cursor-grab relative">
         <textarea
           className="
         h-[90%]
-        w-full resize-none border-none rounded bg-transparent text-white focus:outline-none
+        w-full resize-none border-none rounded bg-transparent focus:outline-none
         "
           value={task.content}
           autoFocus
@@ -74,14 +74,14 @@ function TaskCard({ task, deleteTask, updateTask }) {
       {...attributes}
       {...listeners}
       onClick={toggleEditMode}
-      className="bg-mainBackgroundColor p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset hover:ring-rose-500 cursor-grab relative task"
+      className="p-1 justify-center h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-gray-950 hover:bg-zinc-400 cursor-grab relative task"
       onMouseEnter={() => {
         setMouseIsOver(true);
       }}
       onMouseLeave={() => {
         setMouseIsOver(false);
       }}>
-      <p className="my-auto h-[90%] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap">{task.content}</p>
+      <p className="p-2.5 my-auto h-[100px] min-h-[100px] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-xl ring-2 ring-gray-950 bg-zinc-100">{task.content}</p>
 
       {mouseIsOver && (
         <button
@@ -89,7 +89,7 @@ function TaskCard({ task, deleteTask, updateTask }) {
             deleteTask(task.id);
           }}
           className="stroke-white absolute right-4 top-1/2 -translate-y-1/2 bg-columnBackgroundColor p-2 rounded opacity-60 hover:opacity-100 ">
-          <TrashIcon />
+          <BsFillTrashFill />
         </button>
       )}
     </div>

frontend/src/components/navigations/IconSideNav.jsx

@@ -1,11 +1,6 @@
 import { useState } from "react";
-import {
+import { AiOutlineHome, AiOutlineSchedule, AiOutlineUnorderedList, AiOutlinePieChart } from "react-icons/ai";
-  AiOutlineHome,
+import { PiStepsDuotone } from "react-icons/pi";
-  AiOutlineSchedule,
-  AiOutlineUnorderedList,
-  AiOutlinePieChart,
-  AiOutlinePlus,
-} from "react-icons/ai";
 import { AnimatePresence, motion } from "framer-motion";
 import { Link, useNavigate } from "react-router-dom";
 
@@ -14,7 +9,7 @@ const menuItems = [
   { id: 1, path: "/tasks", icon: <AiOutlineUnorderedList /> },
   { id: 2, path: "/calendar", icon: <AiOutlineSchedule /> },
   { id: 3, path: "/analytic", icon: <AiOutlinePieChart /> },
-  { id: 4, path: "/priority", icon: <AiOutlinePlus /> },
+  { id: 4, path: "/priority", icon: <PiStepsDuotone /> },
 ];
 
 const IconSideNav = () => {