iiitl#7 Implement Alert Box for Confirming Task Deletion

frontend/src/components/Modal.js

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+
+export const Modal = ({ handleClick }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  // console.log(handleClick);
+  const openModal = () => {
+    setIsOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsOpen(false);
+  };
+
+  const deleteTask = () => {
+    setIsOpen(false);
+    handleClick();
+  };
+
+  return (
+    <span>
+      <span className="material-symbols-outlined" onClick={openModal}>
+        delete
+      </span>
+      {isOpen && (
+        <div className="modal-overlay">
+          <div className="modal">
+            <h2>Are you sure you want to delete the task?</h2>
+            <div className="over-b">
+              <button className="button" onClick={deleteTask}>
+                Yes
+              </button>
+              <button className="button" onClick={closeModal}>
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </span>
+  );
+};

frontend/src/components/TaskDetails.js

@@ -1,6 +1,6 @@
 import { useTasksContext } from "../hooks/usetasksContext";
 import { useAuthContext } from "../hooks/useAuthContext";
-
+import { Modal } from "./Modal";
 const TaskDetails = ({ task }) => {
   const { dispatch } = useTasksContext();
   const { user } = useAuthContext();
@@ -35,9 +35,8 @@ const TaskDetails = ({ task }) => {
         <strong>Progress: </strong>
         {task.progress}
       </p>
-      <span className="material-symbols-outlined" onClick={handleClick}>
-        delete
-      </span>
+
+      <Modal handleClick={handleClick} />
     </div>
   );
 };

frontend/src/index.css

@@ -60,11 +60,6 @@ header a {
   position: absolute;
   top: 20px;
   right: 20px;
-  cursor: pointer;
-  background: #f1f1f1;
-  padding: 6px;
-  border-radius: 50%;
-  color: #333;
 }
 
 /* new task form */
@@ -119,4 +114,44 @@ form.signup, form.login {
   padding: 20px;
   background: #fff;
   border-radius: 4px;
+}
+
+
+.modal-overlay {
+  z-index: 999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black overlay */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal {
+  background-color: white;
+  padding: 20px;
+  border-radius: 5px;
+}
+
+.button{
+  background: #fff;
+  color: var(--primary);
+  border: 2px solid var(--primary);
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-family: "Poppins";
+  cursor: pointer;
+  font-size: 1em;
+
+}
+
+.over-b{
+display: flex;
+justify-content: space-evenly;
+}
+.material-symbols-outlined{
+  cursor: pointer;
 }