From 9f7817362584cb86cfed5bec6eeffe11f58488ab Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 16 Jul 2024 12:55:08 -0400
Subject: [PATCH] Restructured forgot password page

---
 Client/src/Pages/ForgotPassword/index.css |  71 +++++-----------------
 Client/src/Pages/ForgotPassword/index.jsx |  59 ++++++++----------
 Client/src/assets/Images/key-password.png | Bin 1761 -> 0 bytes
 Client/src/assets/icons/key.svg           |  18 ++++++
 4 files changed, 59 insertions(+), 89 deletions(-)
 delete mode 100644 Client/src/assets/Images/key-password.png
 create mode 100644 Client/src/assets/icons/key.svg

diff --git a/Client/src/Pages/ForgotPassword/index.css b/Client/src/Pages/ForgotPassword/index.css
index 42600a77b..7ef02f4a0 100644
--- a/Client/src/Pages/ForgotPassword/index.css
+++ b/Client/src/Pages/ForgotPassword/index.css
@@ -3,70 +3,29 @@
   justify-content: center;
   height: var(--env-var-height-1);
 }
-
-.forgot-password-form {
-  width: var(--env-var-width-2);
-  margin: 90px auto;
+.forgot-password-page button:not(.MuiIconButton-root) {
+  height: 34px;
+  border-radius: var(--env-var-radius-2);
+  line-height: 0;
 }
-
-.forgot-password-form-header {
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.forgot-password-form-header-logo {
-  margin: 0 auto;
-}
-
-.forgot-password-v-gap-large {
-  height: var(--env-var-spacing-3);
-}
-
-.forgot-password-v-gap-medium {
-  height: var(--env-var-spacing-2);
-}
-
-.forgot-password-v-gap-small {
-  height: var(--env-var-spacing-1);
-}
-
-.forgot-password-form-heading {
+.forgot-password-page h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
-  font-weight: 700;
   color: var(--env-var-color-1);
+  font-weight: 600;
 }
-
-.forgot-password-form-subheading {
+.forgot-password-page p.MuiTypography-root,
+.forgot-password-page button {
   font-size: var(--env-var-font-size-medium);
-  font-weight: 500;
+}
+.forgot-password-page p.MuiTypography-root {
   color: var(--env-var-color-2);
 }
-
-.forgot-password-body {
-  width: var(--env-var-width-2);
-}
-
-#forgot-password-email-input {
-  width: 308px;
-  height: 11px;
-  font-size: var(--env-var-font-size-medium);
-}
-
-.forgot-password-back-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.forgot-password-back-button-img {
-  width: var(--env-var-img-width-1);
-  height: var(--env-var-img-width-1);
+.forgot-password-page button svg{
   margin-right: 5px;
 }
 
-.forgot-password-back-button-text {
-  font-size: var(--env-var-font-size-medium);
-  font-weight: 500;
-  color: var(--env-var-color-2);
+
+.forgot-password-form {
+  margin-top: 65px;
+  width: var(--env-var-width-2);
 }
diff --git a/Client/src/Pages/ForgotPassword/index.jsx b/Client/src/Pages/ForgotPassword/index.jsx
index 80bda6d4c..8b80557a3 100644
--- a/Client/src/Pages/ForgotPassword/index.jsx
+++ b/Client/src/Pages/ForgotPassword/index.jsx
@@ -1,8 +1,8 @@
 import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
 import "./index.css";
 import React from "react";
-import Logomark from "../../assets/Images/key-password.png";
-import LeftArrow from "../../assets/Images/arrow-left.png";
+import Logomark from "../../assets/icons/key.svg?react";
+import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import { useState } from "react";
 import { credentials } from "../../Validation/validation";
 import { useNavigate } from "react-router-dom";
@@ -11,10 +11,14 @@ import { createToast } from "../../Utils/toastUtils";
 import { useDispatch, useSelector } from "react-redux";
 import { forgotPassword } from "../../Features/Auth/authSlice";
 import ButtonSpinner from "../../Components/ButtonSpinner";
+import { Stack, Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import Button from "../../Components/Button";
 
 const ForgotPassword = () => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
+  const theme = useTheme();
 
   const { isLoading } = useSelector((state) => state.auth);
   const [errors, setErrors] = useState({});
@@ -96,22 +100,17 @@ const ForgotPassword = () => {
   return (
     <div className="forgot-password-page">
       <BackgroundPattern></BackgroundPattern>
-      <div className="forgot-password-form">
-        <div className="forgot-password-form-header">
-          <img
-            className="forgot-password-form-header-logo"
-            src={Logomark}
-            alt="Logomark"
-          />
-          <div className="forgot-password-v-gap-medium"></div>
-          <div className="forgot-password-form-heading">Forgot password?</div>
-          <div className="forgot-password-v-gap-small"></div>
-          <div className="forgot-password-form-subheading">
-            No worries, we’ll send you reset instructions.
-          </div>
-        </div>
-        <div className="forgot-password-v-gap-large"></div>
-        <div className="forgot-password-body">
+      <form className="forgot-password-form">
+        <Stack direction="column" alignItems="center" gap={theme.gap.small}>
+          <Logomark alt="Logomark" style={{ fill: "white" }} />
+          <Typography component="h1" sx={{ mt: theme.gap.ml }}>
+            Forgot password?
+          </Typography>
+          <Typography>
+            No worries, we'll send you reset instructions.
+          </Typography>
+        </Stack>
+        <Stack gap={theme.gap.ml} sx={{ mt: `calc(${theme.gap.ml}*2)` }}>
           <Field
             type="email"
             id="forgot-password-email-input"
@@ -122,29 +121,23 @@ const ForgotPassword = () => {
             onChange={handleChange}
             error={errors.email}
           />
-          <div className="forgot-password-v-gap-medium"></div>
           <ButtonSpinner
             disabled={errors.email !== undefined}
             onClick={handleSubmit}
             isLoading={isLoading}
             level="primary"
             label="Reset password"
-            sx={{
-              width: "100%",
-              fontSize: "13px",
-            }}
+            sx={{ mb: theme.gap.medium }}
           />
-        </div>
-        <div className="forgot-password-v-gap-large"></div>
-        <div className="forgot-password-back-button">
-          <img
-            className="forgot-password-back-button-img"
-            src={LeftArrow}
-            alt="LeftArrow"
+          <Button
+            level="tertiary"
+            label="Back to log in"
+            img={<ArrowBackRoundedIcon />}
+            sx={{ alignSelf: "center", width: "fit-content" }}
+            onClick={() => navigate("/login")}
           />
-          <div className="forgot-password-back-button-text">Back to log in</div>
-        </div>
-      </div>
+        </Stack>
+      </form>
     </div>
   );
 };
diff --git a/Client/src/assets/Images/key-password.png b/Client/src/assets/Images/key-password.png
deleted file mode 100644
index ed7fa653834949ec61f09ba829e4f8155ae1cafe..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1761
zcmV<71|Io|P)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH26jnAK~#7F<y*~e
z+eQ$cB`Fl~NlugW)~HBMDgq}}3*=Vn1yU8LfZUQCdd|-aNa+hSMUFk#xfNjA7(L`z
z(>WAHV>M1~7zJFwa(^PrvO@+aV4x<snIU&&nzn2vq-2Tyfb}l-huUvvc6N5T26%fg
z5e_OpEdQ`~K#cM?LY$Ye)m1w`HpXvq0G%@^Fkok42*4QFuE(D%3QXrPjE|2u4{dW$
z;o92T2a5X6B))k9IGa*5W~z{zA0I!l3PS+P+QNZ%3fr!CodefZhW%5#yK#s|!PeKU
zTkD(lN_+EFZDqyE!w8^*eO=$Mtu^fXo3vx?j#Y1O*ek7;Re%u#^_luk93ak=CCQE|
zSqVw{#hP^+4kAr+wzFwlqfAypk|s{Q>ag~PHAQn4G6I^@YaPpk{iIAIK_dbgf@N8G
zGGdF1f1i|jiinv9xeBhYCS(Y>JlTw~sdrD0-IRHfFleg!8B>)h$QT&+W|^XV$~pJd
zS`t=J%O^C@nvgMUt1!<v6zX*rp2t-cb)7>-5pb*d!lgf~Rx4(f><*T?5@yFk!c`TM
z%olUD3YmwlcSyogsK-IVKoSNGju0Q~U+B2@PvF)rk1_U&Kc6!nn$RDx?jHn6*g115
zpX%vCFCbCczL5)?-`gwR#7@+IHNSrVDS;$>=G2!cT*H+|EXp7V>v|>sA83y#NzWV@
zlH=2uv@zuI8NEGT5Y<fwoX_XYX&VwEAe_%((h({>7^@}8qUtskrd*$!F=iuGZhxd#
zuj8oKkhrb|^~;b7bPVQ>YuRsnf<!=&b-^t^-AmTTZ>BNjf?6i&Q+=WSDZuoNG7-jv
z0Rw>CcGgi%n=<pVezkz4o?&=&S+5i*Z{GZlRQ*PzT~h4$($zjM#AJ<8vIUZEBVvsH
z2Uo}FB8G|s+B4JyN&{JIA>}-^hlJ2|-H(03MxO;tOOJ@Bqh+MRn12b?j0OS?7q9KK
z^9@?JeG-`Fj!GkpzB(PW&Whx|7Wb)X%;!L>i^oE!$d0s60Nr1a1mS95mm_j2M6zec
zf5Ca{0lVQ~2xaFZ?Gxa%FVul}T3oEH><~$jdWWBpXoZtaWiSs3LB6zU0`EIvG&psP
zZeh1=2i&`H+tD&64c*+#!&yiOB<n-YVdw`0*&2~`ftAC{(Ltc43PQ^mq=H>WD}C%G
zYs6AZT7u9qnGw^#Y^3K?`*unT66vnPamWVit%s+Hv`YdTJCR4DRe?Z_sfzDQLwe{M
zE#YZ>3uz!OStK=sWb@(PFz~6`c%oRxrRp2#15!0w2a%O-BYIOLLE01$*?TC}rh?WR
zV_QXQJlDg=P7Yd!O(qE^c07bt-IpwtIlw0)P3q`A#<tqY;TtWUn&W|F{aXR}qI*#_
zmSr>;!5*018Z6nJb30+Q`g2T6TRS9(hKUQ03GU6A#z2Wm;C`WNr6GJ~n<j{C=mdi#
z-Grk<x>i~o!cmeo?eaGQ$ug$rnA`mMryo|~h(KFl1H~*<x|W7YlXWF0Ul*Z^qb3`M
zknmDskBhc=7xk-`G;pqk^GS_|fox>Ye|!$&`?`4;MhxUkYZxFo4(yors9_kL@V(BO
za$M#x!T;3K-msd%-NkI7WmyHf$s@iGcjqu;9Gb4XeGxJS&4Gf)`Ez+P>wkGD77f1b
zcuzdWb;uaFqFi&fogbt5%HzjRPLt?YtkJkR8y9pVcwynMa}fU2g5Z;r_g?~ve#}#D
zLPkJ0YF*Ua3m4vR?o(V-78aJz`8R2;3|uZn4jt6k<>h6PZm;FHs{Zq$bBEMmlu7%R
z895LaIK<b$LS1XMI$w<{X-W3q_U2vU0x>R$(}-v<+M9RCh_!;7<wFlLw!uw)s~Jc(
z9$5)r(u<3W=UeTU4`{^JH(yO6d3~5Jj|Z2)tqS(-Yr5D@ccUAPKhNX0;GSfAjsV?0
zEtktGeph8k{Ork-?_JSy+7&##nBWI|1so)Buf59AVd9=Q`^VDn_p!e=efY*cyU^n#
zHqJjuG2Cb{c?bqj!gx!hPjHzo7V#KiX$hZ;tXTXI)8yHd#A~*8{Z3F9Vql4vN+oDC
zwpgijf>TU+^1WDuWt3|8N3fBQ7;?9v2EkVw6$c~qTvbV(&{gf02kI4+;j^~8{@!wm
zMIG@TSwDEEP*=)RL<sMK`ieAvB;4ufzv}g>|5kVnrjS{s=1bHu00000NkvXXu0mjf
D4mCSg

diff --git a/Client/src/assets/icons/key.svg b/Client/src/assets/icons/key.svg
new file mode 100644
index 000000000..c6401e09f
--- /dev/null
+++ b/Client/src/assets/icons/key.svg
@@ -0,0 +1,18 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_137_18974)">
+<path d="M2.5 13C2.5 6.64873 7.64873 1.5 14 1.5H46C52.3513 1.5 57.5 6.64873 57.5 13V45C57.5 51.3513 52.3513 56.5 46 56.5H14C7.64873 56.5 2.5 51.3513 2.5 45V13Z" stroke="#EAECF0" shape-rendering="crispEdges"/>
+<path d="M35.8333 25.4999C35.8333 24.9028 35.6055 24.3057 35.1499 23.8501C34.6943 23.3945 34.0972 23.1667 33.5 23.1667M33.5 32.5C37.366 32.5 40.5 29.366 40.5 25.5C40.5 21.634 37.366 18.5 33.5 18.5C29.634 18.5 26.5 21.634 26.5 25.5C26.5 25.8193 26.5214 26.1336 26.5628 26.4415C26.6309 26.948 26.6649 27.2013 26.642 27.3615C26.6181 27.5284 26.5877 27.6184 26.5055 27.7655C26.4265 27.9068 26.2873 28.046 26.009 28.3243L20.0467 34.2866C19.845 34.4884 19.7441 34.5893 19.6719 34.707C19.608 34.8114 19.5608 34.9252 19.5322 35.0442C19.5 35.1785 19.5 35.3212 19.5 35.6065V37.6333C19.5 38.2867 19.5 38.6134 19.6272 38.863C19.739 39.0825 19.9175 39.261 20.137 39.3728C20.3866 39.5 20.7133 39.5 21.3667 39.5H24.1667V37.1667H26.5V34.8333H28.8333L30.6757 32.991C30.954 32.7127 31.0932 32.5735 31.2345 32.4945C31.3816 32.4123 31.4716 32.3819 31.6385 32.358C31.7987 32.3351 32.052 32.3691 32.5585 32.4372C32.8664 32.4786 33.1807 32.5 33.5 32.5Z" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_137_18974" x="0" y="0" width="60" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_137_18974"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_137_18974" result="shape"/>
+</filter>
+</defs>
+</svg>