Restructured password confirmed page

Client/src/Pages/NewPasswordConfirmed/index.css

@@ -1,67 +1,36 @@
 .password-confirmed-page {
-  width: var(--env-var-width-1);
   display: flex;
   justify-content: center;
-  min-height: var(--env-var-height-1);
+  height: var(--env-var-height-1);
+}
+.password-confirmed-page button:not(.MuiIconButton-root) {
+  height: 34px;
+  border-radius: var(--env-var-radius-2);
+  line-height: 0;
+}
+.password-confirmed-page h1.MuiTypography-root {
+  font-size: var(--env-var-font-size-large);
+  color: var(--env-var-color-1);
+  font-weight: 600;
+}
+.password-confirmed-page p.MuiTypography-root,
+.password-confirmed-page button {
+  font-size: var(--env-var-font-size-medium);
+}
+.password-confirmed-page p.MuiTypography-root {
+  color: var(--env-var-color-2);
+}
+.password-confirmed-page button:not(.MuiIconButton-root) svg {
+  margin-right: 5px;
+}
+.password-confirmed-page
+  .MuiFormControl-root:has(#register-password-input)
+  + span.MuiTypography-root {
+    display: none;
+    visibility: hidden;
 }
 
 .password-confirmed-form {
-  width: var(--env-var-width-2);
-  margin: 90px auto;
-}
-
-.password-confirmed-form-header {
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.password-confirmed-v-gap-large {
-  height: var(--env-var-spacing-3);
-}
-
-.password-confirmed-v-gap-medium {
-  height: var(--env-var-spacing-2);
-}
-
-.password-confirmed-v-gap-small {
-  height: var(--env-var-spacing-1);
-}
-
-.password-confirmed-form-heading {
-  font-size: var(--env-var-font-size-large);
-  font-weight: 700;
-  color: var(--env-var-color-1);
-}
-
-.password-confirmed-form-subheading {
-  font-size: var(--env-var-font-size-medium);
-  font-weight: 600;
-  color: var(--env-var-color-2);
-}
-
-.password-confirmed-body {
+  margin-top: 65px;
   width: var(--env-var-width-2);
 }
-
-.password-confirmed-back-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.password-confirmed-back-button-img {
-  width: var(--env-var-img-width-1);
-  height: var(--env-var-img-width-1);
-  margin-right: 5px;
-  align-items: center;
-}
-
-.password-confirmed-back-button-text {
-  height: var(--env-var-img-width-1);
-  font-size: var(--env-var-font-size-medium);
-  font-weight: 600;
-  color: var(--env-var-color-2);
-  text-align: center;
-}

Client/src/Pages/NewPasswordConfirmed/index.jsx

@@ -1,54 +1,41 @@
 import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
 import "./index.css";
-import React from "react";
-import SuccessIcon from "../../assets/Images/success-icon.png";
+import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
+import ConfirmIcon from "../../assets/icons/confirm-icon.svg?react";
 import Button from "../../Components/Button";
-import LeftArrow from "../../assets/Images/arrow-left.png";
+import { Stack, Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import { useNavigate } from "react-router";
 
 const NewPasswordConfirmed = () => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+
   return (
     <div className="password-confirmed-page">
       <BackgroundPattern />
-      <div className="password-confirmed-form">
-        <div className="password-confirmed-form-header">
-          <img
-            className="password-confirmed-form-header-logo"
-            src={SuccessIcon}
-            alt="SuccessIcon"
-          />
-          <div className="password-confirmed-v-gap-medium"></div>
-          <div className="password-confirmed-form-heading">Password reset</div>
-          <div className="password-confirmed-v-gap-small"></div>
-          <div className="password-confirmed-form-subheading">
+      <form className="password-confirmed-form">
+        <Stack direction="column" alignItems="center" gap={theme.gap.small}>
+          <ConfirmIcon alt="confirm icon" style={{ fill: "white" }} />
+          <Typography component="h1" sx={{ mt: theme.gap.ml }}>
+            Password reset
+          </Typography>
+          <Typography sx={{ textAlign: "center" }}>
             Your password has been successfully reset. Click below to log in
             magically.
-          </div>
-        </div>
-        <div className="password-confirmed-v-gap-large"></div>
-        <div className="password-confirmed-body">
+          </Typography>
+        </Stack>
+        <Stack gap={theme.gap.large} sx={{ mt: `calc(${theme.gap.ml}*2)` }}>
+          <Button level="primary" label="Continue" />
           <Button
-            level="primary"
-            label="Continue"
-            sx={{
-              width: "100%",
-              fontSize: "13px",
-              fontWeight: "200",
-              height: "44px",
-            }}
+            level="tertiary"
+            label="Back to log in"
+            img={<ArrowBackRoundedIcon />}
+            sx={{ alignSelf: "center", width: "fit-content" }}
+            onClick={() => navigate("/login")}
           />
-        </div>
-        <div className="password-confirmed-v-gap-large"></div>
-        <div className="password-confirmed-back-button">
-          <img
-            className="password-confirmed-back-button-img"
-            src={LeftArrow}
-            alt="LeftArrow"
-          />
-          <div className="password-confirmed-back-button-text">
-            Back to log in
-          </div>
-        </div>
-      </div>
+        </Stack>
+      </form>
     </div>
   );
 };

Client/src/assets/icons/confirm-icon.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_19027)">
+<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="M24.7499 28.9999L28.2499 32.4999L35.2499 25.4999M41.6666 28.9999C41.6666 35.4432 36.4432 40.6666 29.9999 40.6666C23.5566 40.6666 18.3333 35.4432 18.3333 28.9999C18.3333 22.5566 23.5566 17.3333 29.9999 17.3333C36.4432 17.3333 41.6666 22.5566 41.6666 28.9999Z" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_137_19027" 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_19027"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_137_19027" result="shape"/>
+</filter>
+</defs>
+</svg>