Format all task components

src/components/task/TaskDisplayMode.tsx

@@ -13,13 +13,13 @@ const TaskDisplayMode = ({ task, onEdit }: Props) => {
   const { deleteTask, toggleCompletion, toggleImportance } = useTaskStore();
 
   return (
-    <div className="flex items-center justify-between p-2 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition">
+    <div className="flex items-center justify-between rounded-lg bg-gray-200 p-2 shadow-sm transition hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-600">
       <span
         className={cn(
-          "text-sm overflow-auto mr-1",
+          "mr-1 overflow-auto text-sm",
           task.isCompleted
-            ? "line-through text-gray-400"
-            : "no-underline text-gray-800 dark:text-gray-200"
+            ? "text-gray-400 line-through"
+            : "text-gray-800 no-underline dark:text-gray-200",
         )}
       >
         {task.name}
@@ -35,7 +35,7 @@ const TaskDisplayMode = ({ task, onEdit }: Props) => {
           onClick={() => toggleImportance(task.id)}
           className={cn(
             "text-gray-400",
-            task.isImportant && "text-red-300 dark:text-red-300"
+            task.isImportant && "text-red-300 dark:text-red-300",
           )}
         />
         <FaRegEdit onClick={onEdit} className="dark:text-gray-50" />

src/components/task/TaskEditMode.tsx

@@ -24,13 +24,13 @@ const TaskEditMode = ({ task, onRestEdit }: Props) => {
   };
 
   return (
-    <div className="flex items-center gap-x-2 p-2 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-sm">
+    <div className="flex items-center gap-x-2 rounded-lg bg-gray-200 p-2 shadow-sm dark:bg-gray-800">
       <input
         type="text"
         value={newTaskName}
         onChange={(e) => setNewTaskName(e.target.value)}
         autoFocus
-        className="w-full bg-transparent dark:text-white text-sm outline-none overflow-scroll"
+        className="w-full overflow-scroll bg-transparent text-sm outline-none dark:text-white"
       />
 
       <MdDone onClick={handleSaveEdit} className="text-green-500" size={18} />

src/components/task/TaskFilter.tsx

@@ -13,10 +13,10 @@ const TaskFilter = () => {
       <button
         key="all"
         className={cn(
-          "p-1.5 rounded text-sm",
+          "rounded p-1.5 text-sm",
           !filterBy
             ? "bg-blue-500 text-white"
-            : "bg-gray-300 text-black dark:bg-gray-600 dark:text-white"
+            : "bg-gray-300 text-black dark:bg-gray-600 dark:text-white",
         )}
         onClick={() => setFilter(null)}
       >
@@ -26,10 +26,10 @@ const TaskFilter = () => {
         <button
           key={filter}
           className={cn(
-            "p-1.5 rounded text-sm",
+            "rounded p-1.5 text-sm",
             filterBy === filter
               ? "bg-blue-500 text-white"
-              : "bg-gray-300 text-black dark:bg-gray-600 dark:text-white"
+              : "bg-gray-300 text-black dark:bg-gray-600 dark:text-white",
           )}
           onClick={() => setFilter(filter)}
         >

src/components/task/TaskForm.tsx

@@ -9,7 +9,7 @@ const TaskForm = () => {
   const categories = useCategoryStore((s) => s.categories);
   const [taskName, setTaskName] = useState("");
   const [newCategoryId, setNewCategoryId] = useState<string | null>(
-    categoryId ?? null
+    categoryId ?? null,
   );
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -22,21 +22,21 @@ const TaskForm = () => {
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex w-4/5 max-md:w-full p-4 max-md:flex-col mx-auto gap-x-2 max-md:gap-y-2  bg-white rounded-lg shadow-md dark:bg-gray-700"
+      className="mx-auto flex w-4/5 gap-x-2 rounded-lg bg-white p-4 shadow-md max-md:w-full max-md:flex-col max-md:gap-y-2 dark:bg-gray-700"
     >
       <input
         type="text"
         value={taskName}
         onChange={(e) => setTaskName(e.target.value)}
         placeholder="Task name"
         required
-        className="text-sm w-full border border-gray-300 rounded p-2 outline-gray-400 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:outline-gray-500"
+        className="w-full rounded border border-gray-300 p-2 text-sm outline-gray-400 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:outline-gray-500"
       />
       {!categoryId && (
         <select
           onChange={(e) => setNewCategoryId(e.target.value)}
           value={newCategoryId || ""}
-          className="border border-gray-300 text-sm rounded p-2 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+          className="rounded border border-gray-300 p-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white"
         >
           <option value="">Select Category</option>
           {categories.map((cat) => (
@@ -48,7 +48,7 @@ const TaskForm = () => {
       )}
       <button
         type="submit"
-        className="bg-blue-500 text-sm text-white text-nowrap rounded px-4 py-2 hover:bg-blue-600 transition dark:bg-blue-600 dark:hover:bg-blue-700"
+        className="text-nowrap rounded bg-blue-500 px-4 py-2 text-sm text-white transition hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700"
       >
         Add Task
       </button>

src/components/task/TaskList.tsx

@@ -5,9 +5,9 @@ const TaskList = () => {
   const tasks = useTasks();
 
   return (
-    <ul className="flex-grow overflow-y-auto h-[calc(100vh-185px)] max-md:h-[calc(100vh-241px)] w-full my-auto bg-white rounded-lg shadow-sm dark:bg-gray-700 scrollbar-light dark:scrollbar-dark">
+    <ul className="scrollbar-light dark:scrollbar-dark my-auto h-[calc(100vh-185px)] w-full flex-grow overflow-y-auto rounded-lg bg-white shadow-sm max-md:h-[calc(100vh-241px)] dark:bg-gray-700">
       {tasks.length === 0 && (
-        <p className="w-full text-center pt-20 text-xl max-md:text-lg max-sm:text-base dark:text-white">
+        <p className="w-full pt-20 text-center text-xl max-md:text-lg max-sm:text-base dark:text-white">
           No tasks
         </p>
       )}