project view

hussaino03 · Dec 26, 2024 · 349285f · 349285f
1 parent 3938079
commit 349285f
Showing 1 changed file with 20 additions and 8 deletions.
diff --git a/client/src/components/Modal Management/View.js b/client/src/components/Modal Management/View.js
@@ -324,15 +324,27 @@ const Task = ({ task, removeTask, completeTask, isCompleted, updateTask }) => {
                 {task.subtasks.map((subtask, index) => (
                   <div key={index} className="flex items-center gap-2">
                     {!isCompleted && (
-                      <input
-                        type="checkbox"
-                        className="w-4 h-4 rounded border-gray-300 dark:border-gray-600 
-                                 text-blue-500 dark:text-blue-400 focus:ring-blue-500"
-                        checked={subtask.completed || false}
-                        onChange={() => handleSubtaskToggle(index)}
-                      />
+                      <div className="relative">
+                        <input
+                          type="checkbox"
+                          className="peer h-4 w-4 appearance-none rounded border border-gray-300 
+                                   dark:border-gray-600 bg-white dark:bg-gray-700 
+                                   checked:bg-blue-500 dark:checked:bg-blue-400
+                                   focus:outline-none focus:ring-2 focus:ring-blue-500/20
+                                   transition-all duration-200"
+                          checked={subtask.completed || false}
+                          onChange={() => handleSubtaskToggle(index)}
+                        />
+                        <div className="absolute inset-0 pointer-events-none">
+                          <div className="absolute top-1/2 w-full border-t 
+                                       border-white dark:border-gray-900
+                                       opacity-0 peer-checked:opacity-100
+                                       transition-opacity duration-200" />
+                        </div>
+                      </div>
                     )}
-                    <span className={`${(subtask.completed || isCompleted) ? 'line-through text-gray-400 dark:text-gray-500' : ''}`}>
+                    <span className={`${(subtask.completed || isCompleted) ? 'line-through text-gray-400 dark:text-gray-500' : ''} 
+                                      transition-all duration-200`}>
                       {subtask.name}
                     </span>
                   </div>