From b34c411eadb7ebcc87876604825820ec6d7ed3e9 Mon Sep 17 00:00:00 2001
From: MuhammadKhalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Wed, 29 May 2024 11:08:59 +0330
Subject: [PATCH] Check email page

---
 Client/src/App.jsx                    |   2 +
 Client/src/Pages/CheckEmail/index.css | 102 ++++++++++++++++++++++++++
 Client/src/Pages/CheckEmail/index.jsx |  58 +++++++++++++++
 Client/src/assets/Images/email.png    | Bin 0 -> 1729 bytes
 4 files changed, 162 insertions(+)
 create mode 100644 Client/src/Pages/CheckEmail/index.css
 create mode 100644 Client/src/Pages/CheckEmail/index.jsx
 create mode 100644 Client/src/assets/Images/email.png

diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index 8d1cdf097..4b9bc086a 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -12,6 +12,7 @@ import Status from "./Pages/Status";
 import Integrations from "./Pages/Integrations";
 import Settings from "./Pages/Settings";
 import ForgotPassword from "./Pages/ForgotPassword";
+import CheckEmail from "./Pages/CheckEmail";
 
 function App() {
   return (
@@ -30,6 +31,7 @@ function App() {
         <Route path="*" element={<NotFound />} />
         <Route path="/playground" element={<PlayGround />} />
         <Route path="/forgot-password" element={<ForgotPassword />} />
+        <Route path="/check-email" element={<CheckEmail />} />
       </Routes>
     </>
   );
diff --git a/Client/src/Pages/CheckEmail/index.css b/Client/src/Pages/CheckEmail/index.css
new file mode 100644
index 000000000..db564e0ec
--- /dev/null
+++ b/Client/src/Pages/CheckEmail/index.css
@@ -0,0 +1,102 @@
+:root {
+  --spacing-1: 15px;
+  --spacing-2: 20px;
+  --spacing-3: 25px;
+  --textfield-font-size: 13px;
+
+  --check-email-page-width-1: 100vw;
+  --check-email-page-height-1: 100vh;
+
+  --check-email-form-width-1: 360px;
+  --check-email-form-height-1: 526px;
+
+  --logo-width-1: 20px;
+  --check-email-font-size-medium: 13px;
+
+  --check-email-color-1: #101828;
+  --check-email-color-2: #1570ef;
+  --check-email-color-3: #475467;
+}
+
+.check-email-page {
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  min-height: 100vh;
+}
+
+.check-email-form {
+  width: 360px;
+  margin: 90px auto;
+}
+
+.check-email-form-header {
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.check-email-v-gap-large {
+  height: 32px;
+}
+
+.check-email-v-gap-medium {
+  height: 24px;
+}
+
+.check-email-v-gap-small {
+  height: 12px;
+}
+
+.check-email-form-heading {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--check-email-color-1);
+}
+
+.check-email-form-subheading {
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--check-email-color-3);
+}
+
+.check-email-form-subheading span {
+  font-weight: 700;
+}
+
+.check-email-body {
+  width: 360px;
+}
+
+.check-email-resend {
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--check-email-color-3);
+  text-align: center;
+  cursor: pointer;
+}
+
+.check-email-resend span {
+  font-weight: 700;
+  color: var(--check-email-color-2);
+}
+
+.check-email-back-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.check-email-back-button-img {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+  align-items: center;
+}
+
+.check-email-back-button-text {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--check-email-color-3);
+  align-items: center;
+}
diff --git a/Client/src/Pages/CheckEmail/index.jsx b/Client/src/Pages/CheckEmail/index.jsx
new file mode 100644
index 000000000..97cb2a5d9
--- /dev/null
+++ b/Client/src/Pages/CheckEmail/index.jsx
@@ -0,0 +1,58 @@
+import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
+import "./index.css";
+import React from "react";
+import EmailIcon from "../../assets/Images/email.png";
+import Button from "../../Components/Button";
+import LeftArrow from "../../assets/Images/arrow-left.png";
+
+const CheckEmail = () => {
+  return (
+    <div className="check-email-page">
+      <BackgroundPattern />
+      <div className="check-email-form">
+        <div className="check-email-form-header">
+          <img
+            className="check-email-form-header-logo"
+            src={EmailIcon}
+            alt="EmailIcon"
+          />
+          <div className="check-email-v-gap-medium"></div>
+          <div className="check-email-form-heading">Check your email</div>
+          <div className="check-email-v-gap-small"></div>
+          <div className="check-email-form-subheading">
+            We sent a password reset link to <span>username@email.com</span>
+          </div>
+        </div>
+        <div className="check-email-v-gap-large"></div>
+        <div className="check-email-body">
+          <Button
+            level="primary"
+            label="Open email app"
+            sx={{
+              width: "100%",
+              fontSize: "13px",
+              fontWeight: "200",
+              height: "44px",
+            }}
+          />
+        </div>
+        <div className="check-email-v-gap-large"></div>
+        <div className="check-email-resend">
+          Didn’t receive the email?
+          <span> Click to resend</span>
+        </div>
+        <div className="check-email-v-gap-large"></div>
+        <div className="check-email-back-button">
+          <img
+            className="check-email-back-button-img"
+            src={LeftArrow}
+            alt="LeftArrow"
+          />
+          <div className="check-email-back-button-text">Back to log in</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CheckEmail;
diff --git a/Client/src/assets/Images/email.png b/Client/src/assets/Images/email.png
new file mode 100644
index 0000000000000000000000000000000000000000..40b1f823251460898fbe5f19bc1ebf527a325447
GIT binary patch
literal 1729
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
XC)^dVyaiWp00000NkvXXu0mjfb($_a

literal 0
HcmV?d00001