Fixing merge issues

frontend/src/components/taskCard.css

@@ -46,3 +46,33 @@ span {
     height: 30px;
     margin-right: 10px;
 }
+
+
+/* Style for the "Modify" link */
+.taskCard__actions__modify {
+    padding: 0.5rem 1rem;
+    margin-left: 1rem;
+    background-color: var(--colour-3); /* Use a consistent color from your theme */
+    color: white;
+    font-weight: bold;
+    font-size: 0.9rem;
+    text-decoration: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    display: inline-block; /* Ensure proper alignment */
+}
+
+.taskCard__actions__modify:hover {
+    background-color: var(--colour-2); /* Lighter or contrasting hover color */
+    transform: scale(1.05); /* Slight zoom effect on hover */
+}
+
+.taskCard__actions__modify:active {
+    transform: scale(0.95); /* Pressed button effect */
+}
+
+.taskCard__actions__modify--disabled {
+    background-color: gray; /* Disabled state color */
+    cursor: not-allowed;
+}

frontend/src/components/taskCard.tsx

@@ -52,6 +52,12 @@ const TaskCard = ({task}: TaskCardProps) => {
     navigate(`/camera/${task.id}`)
   }
 
+  const handleModifyClick = (e: React.MouseEvent) => {
+    e.preventDefault(); // Prevent the default anchor behavior
+    e.stopPropagation(); // Prevent triggering the card's onClick handler
+    navigate(`/edit-task/${task.id}`);
+  };
+
   return (
     <div className={`taskCard ${hasCompletedToday ? '__completed' : ''}`}
          onClick={handleTaskCardClick}>
@@ -71,6 +77,14 @@ const TaskCard = ({task}: TaskCardProps) => {
           className={`taskCard__actions__flame ${!hasCompletedToday ? 'taskCard__actions__flame--greyscale' : ''}`}
         />
         <span>{currentStreak}</span>
+        <a
+          href="#"
+          onClick={handleModifyClick}
+          className="taskCard__actions__modify"
+        >
+          Modify
+        </a>
+
       </div>
     </div>
   );

frontend/src/routes/editTask.tsx

@@ -63,29 +63,56 @@ const EditTask = () => {
       });
   };
 
+  const deleteTask = () => {
+    if (window.confirm('Are you sure you want to delete this task?')) {
+      fetch(`/api/tasks/${taskId}`, {
+        method: 'DELETE',
+      })
+        .then((response) => {
+          if (!response.ok) {
+            return response.json().then((data) => {
+              throw new Error(data.message || 'Failed to delete task.');
+            });
+          }
+          return response.json();
+        })
+        .then(() => {
+          toast.success('Task deleted successfully.');
+          navigate('/'); // Redirect to the tasks list after deletion
+        })
+        .catch((error) => {
+          console.error('Error:', error);
+          toast.error(error.message || 'Failed to delete task.');
+        });
+    }
+  };
 
 
   return (
-    <form onSubmit={handleSubmit}>
-      <label>
-        Title:
-        <input
-          type="text"
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-        />
-      </label>
-      <label>
-        Description:
-        <textarea
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-        />
-      </label>
-      <button type="submit" disabled={isSaving}>
-        {isSaving ? 'Saving...' : 'Save Task'}
-      </button>
-    </form>
+    <>
+        <form onSubmit={handleSubmit}>
+        <label>
+            Title:
+            <input
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            />
+        </label>
+        <label>
+            Description:
+            <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            />
+        </label>
+        <button type="submit" disabled={isSaving}>
+            {isSaving ? 'Saving...' : 'Save Task'}
+        </button>
+        </form>
+
+        <button onClick={deleteTask}>Delete task</button>
+    </>
   );
 };