Restructured forgot password page

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);
 }

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>
   );
 };

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>