From 74ccd3f374b321d3a2a08fd6becbdb070bd50ce4 Mon Sep 17 00:00:00 2001
From: ChristineWest <christinewwwest@gmail.com>
Date: Wed, 14 Dec 2022 12:55:00 -0500
Subject: [PATCH] added font awesome icon to cancel request

---
 package-lock.json      | 15 +++++++++++++++
 package.json           |  1 +
 src/pages/Cancel.js    | 13 ++++++++++++-
 src/styles/cancel.scss | 20 +++++++++++---------
 4 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 142be03..93af82b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,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",
@@ -14972,6 +14973,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -28572,6 +28581,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index f90fc3f..30d550a 100644
--- a/package.json
+++ b/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",
diff --git a/src/pages/Cancel.js b/src/pages/Cancel.js
index 99db249..5979e08 100644
--- a/src/pages/Cancel.js
+++ b/src/pages/Cancel.js
@@ -1,5 +1,11 @@
 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">
@@ -7,7 +13,12 @@ function Cancel() {
       </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>
     </>
diff --git a/src/styles/cancel.scss b/src/styles/cancel.scss
index ca111c6..07311a3 100644
--- a/src/styles/cancel.scss
+++ b/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;
+  }
 }