Added bluewave icon, initial design and removed redundant css code

Client/src/Pages/Auth/SetNewPassword.jsx

@@ -1,20 +1,20 @@
-import "./index.css";
-import background from "../../assets/Images/background_pattern_decorative.png";
-import LockIcon from "../../assets/icons/lock-button-icon.svg?react";
-import Check from "../../Components/Check/Check";
-import ButtonSpinner from "../../Components/ButtonSpinner";
-import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
+import { useDispatch, useSelector } from "react-redux";
+import { setNewPassword } from "../../Features/Auth/authSlice";
+import { createToast } from "../../Utils/toastUtils";
+import { Box, Stack, Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
 import { useParams } from "react-router-dom";
 import { useState } from "react";
 import { credentials } from "../../Validation/validation";
 import { useNavigate } from "react-router-dom";
+import Check from "../../Components/Check/Check";
+import ButtonSpinner from "../../Components/ButtonSpinner";
 import Field from "../../Components/Inputs/Field";
-import { useDispatch, useSelector } from "react-redux";
-import { setNewPassword } from "../../Features/Auth/authSlice";
-import { createToast } from "../../Utils/toastUtils";
-import { Stack, Typography } from "@mui/material";
-import { useTheme } from "@emotion/react";
+import LockIcon from "../../assets/icons/lock-button-icon.svg?react";
 import Button from "../../Components/Button";
+import background from "../../assets/Images/background_pattern_decorative.png";
+import Logo from "../../assets/icons/bwu-icon.svg?react";
+import "./index.css";
 
 const SetNewPassword = () => {
   const navigate = useNavigate();
@@ -105,13 +105,54 @@ const SetNewPassword = () => {
   };
 
   return (
-    <div className="set-new-password-page">
+    <Stack className="set-new-password-page auth" overflow="hidden">
       <img
         className="background-pattern-svg"
         src={background}
         alt="background pattern"
       />
-      <form className="set-new-password-form" onSubmit={handleSubmit}>
+      <Stack
+        direction="row"
+        alignItems="center"
+        px={theme.gap.large}
+        gap={theme.gap.small}
+      >
+        <Logo style={{ borderRadius: theme.shape.borderRadius }} />
+        <Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
+      </Stack>
+      <Stack
+        width="100%"
+        maxWidth={600}
+        flex={1}
+        justifyContent="center"
+        p={theme.gap.xl}
+        pb={theme.gap.triplexl}
+        mx="auto"
+        sx={{
+          "& > .MuiStack-root": {
+            border: 1,
+            borderRadius: theme.shape.borderRadius,
+            borderColor: theme.palette.otherColors.graishWhite,
+            backgroundColor: theme.palette.otherColors.white,
+            padding: {
+              xs: theme.gap.large,
+              sm: theme.gap.xl,
+            },
+          },
+        }}
+      ></Stack>
+      <Box textAlign="center" p={theme.gap.large}>
+        <Typography display="inline-block">Go back to —</Typography>
+        <Typography
+          component="span"
+          ml={theme.gap.xs}
+          onClick={() => navigate("/login")}
+          sx={{ userSelect: "none" }}
+        >
+          Log In
+        </Typography>
+      </Box>
+      {/* <form className="set-new-password-form" onSubmit={handleSubmit}>
         <Stack direction="column" alignItems="center" gap={theme.gap.small}>
           <LockIcon alt="lock icon" style={{ fill: "white" }} />
           <Typography component="h1" sx={{ mt: theme.gap.ml }}>
@@ -197,8 +238,8 @@ const SetNewPassword = () => {
             onClick={() => navigate("/login")}
           />
         </Stack>
-      </form>
-    </div>
+      </form> */}
+    </Stack>
   );
 };
 

Client/src/Pages/Auth/index.css

@@ -1,46 +1,3 @@
-/* ////// */
-/* SHARED */
-/* ////// */
-.set-new-password-page {
-  display: flex;
-  justify-content: center;
-  height: var(--env-var-height-1);
-}
-.set-new-password-page h1.MuiTypography-root {
-  font-size: var(--env-var-font-size-large);
-  color: var(--env-var-color-1);
-  font-weight: 600;
-}
-.set-new-password-page p.MuiTypography-root,
-.set-new-password-page button {
-  font-size: var(--env-var-font-size-medium);
-}
-.set-new-password-page button:not(.MuiIconButton-root) {
-  height: 34px;
-  border-radius: var(--env-var-radius-2);
-  line-height: 0;
-}
-
-.set-new-password-form,
-.password-confirmed-form {
-  margin-top: 65px;
-  width: var(--env-var-width-2);
-}
-.set-new-password-page p.MuiTypography-root {
-  color: var(--env-var-color-2);
-}
-
-.set-new-password-page button:not(.MuiIconButton-root) svg {
-  margin-right: 5px;
-}
-
-.set-new-password-page
-  .MuiFormControl-root:has(#register-password-input)
-  + span.MuiTypography-root {
-  display: none;
-  visibility: hidden;
-}
-
 /* AUTH */
 .auth {
   height: 100vh;
@@ -120,6 +77,7 @@
 
 .forgot-password-page h1,
 .check-email-page h1,
-.password-confirmed-page h1 {
+.password-confirmed-page h1,
+.set-new-password-page h1 {
   font-size: var(--env-var-font-size-large-plus);
 }