Modal Alert added for Deleting

Author: AswinAsok

package-lock.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
     "react": "^17.0.2",
+    "react-confirm-alert": "^2.8.0",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
     "react-speech-recognition": "^3.9.0",

package.json

@@ -31,3 +31,41 @@ a {
 .option:hover {
   color: #3a3a3a;
 }
+
+.mheading {
+  font-size: 1.5rem;
+  font-family: "Montserrat Alternates", sans-serif;
+  font-weight: bold;
+}
+
+.mtagline {
+  font-family: "Poppins", sans-serif;
+  margin-top: 1vh;
+}
+
+.mbtns {
+  margin-top: 2vh;
+}
+
+.mno,
+.myes {
+  margin-right: 0.5rem;
+  font-size: 1.05rem;
+  padding: 0.25rem 0.75rem;
+}
+
+.mno {
+  background-color: #940eff;
+  color: white;
+  border: none;
+  font-family: "Poppins", sans-serif;
+  border-radius: 5px;
+}
+
+.myes {
+  border: 2px solid #940eff;
+  color: #940eff;
+  background-color: white;
+  border-radius: 5px;
+  font-family: "Poppins", sans-serif;
+}

src/Components/Options/Options.css

@@ -1,45 +1,76 @@
-import React from "react";
+import React, { useState } from "react";
 import "./Options.css";
-import headset from "./assets/headset.png";
-import headset_on from "./assets/headset_on.png";
-import trash from "./assets/trash.png";
-import star from "./assets/star.png";
+
+import ReactConfirmAlert, { confirmAlert } from "react-confirm-alert";
+import "react-confirm-alert/src/react-confirm-alert.css";
 
 import SpeechRecognition from "react-speech-recognition";
 
 const Options = ({ setText, listening }) => {
+  const [showDialog, setShowDialog] = useState(false);
   return (
-    <div className="options-container">
-      <div className="options">
-        {(() => {
-          if (!listening) {
-            return (
-              <i
-                className="fi fi-rr-headset option"
-                onClick={SpeechRecognition.startListening}
-              ></i>
-            );
-          } else {
-            return (
-              <i
-                className="fi fi-sr-headset option"
-                onClick={SpeechRecognition.stopListening}
-              ></i>
-            );
-          }
-        })()}
+    <>
+      <div className="options-container">
+        <div className="options">
+          {(() => {
+            if (!listening) {
+              return (
+                <i
+                  className="fi fi-rr-headset option"
+                  onClick={SpeechRecognition.startListening}
+                ></i>
+              );
+            } else {
+              return (
+                <i
+                  className="fi fi-sr-headset option"
+                  onClick={SpeechRecognition.stopListening}
+                ></i>
+              );
+            }
+          })()}
+
+          <i
+            className="fi fi-rr-trash option"
+            onClick={() => {
+              setShowDialog(true);
+            }}
+          ></i>
+          <a target="_blank" href="https://github.com/AswinAsok/editr">
+            <i className="fi fi-rr-star option"></i>
+          </a>
+        </div>
+      </div>
 
-        <i
-          className="fi fi-rr-trash option"
-          onClick={() => {
-            setText("");
-          }}
-        ></i>
-        <a target="_blank" href="https://github.com/AswinAsok/editr">
-          <i className="fi fi-rr-star option"></i>
-        </a>
+      <div>
+        {showDialog &&
+          confirmAlert({
+            customUI: ({ onClose }) => {
+              return (
+                <div className="modal-container">
+                  <p className="mheading">Are you sure?</p>
+                  <p className="mtagline">You want to delete this Text?</p>
+                  <div className="mbtns">
+                    <button className="mno" onClick={onClose}>
+                      No
+                    </button>
+                    <button
+                      className="myes"
+                      onClick={() => {
+                        setShowDialog(false);
+                        setText("");
+                        onClose();
+                      }}
+                    >
+                      Yes, Delete it!
+                    </button>
+                  </div>
+                </div>
+              );
+            },
+          })}
       </div>
-    </div>
+    </>
   );
 };