added font awesome icon to cancel request

package.json

@@ -9,6 +9,7 @@
     "firebase": "^9.14.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
     "react-router-dom": "^6.4.5",
     "react-scripts": "5.0.1",
     "sass": "^1.56.2",

src/pages/Cancel.js

@@ -1,13 +1,24 @@
 import Home from "./Home";
+import { useNavigate } from "react-router-dom";
+import { FaFontAwesome, FaRegTimesCircle } from "react-icons/fa";
 function Cancel() {
+  const navigate = useNavigate();
+  const goHome = () => {
+    navigate("/");
+  };
   return (
     <>
       <div className="home-wrapper">
         <Home />
       </div>
       <div className="wrapper">
         <div className="cancel-msg">
-          <p>Your request has been cancelled. Hope to see you soon!</p>
+          <div onClick={goHome}>
+            <FaRegTimesCircle />
+          </div>
+          <div className="cancel-text">
+            <p>Your request has been cancelled. Hope to see you soon!</p>
+          </div>
         </div>
       </div>
     </>

src/styles/cancel.scss

@@ -2,17 +2,19 @@
   opacity: 0.3;
 }
 .cancel-msg {
-  width: 660px;
-  height: 240px;
-  background-color: $popup;
-  border-radius: 10px 10px 10px 10px;
-  text-align: center;
   position: absolute;
-  left: 25%;
+  left: 33%;
   top: 347px;
   z-index: 10;
   opacity: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  .cancel-text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 660px;
+    height: 240px;
+    background-color: $popup;
+    border-radius: 10px 10px 10px 10px;
+    text-align: center;
+  }
 }