diff --git a/Client/src/Pages/Auth/CheckEmail.jsx b/Client/src/Pages/Auth/CheckEmail.jsx index d6ff54fef..43bd11196 100644 --- a/Client/src/Pages/Auth/CheckEmail.jsx +++ b/Client/src/Pages/Auth/CheckEmail.jsx @@ -1,15 +1,15 @@ -import "./index.css"; -import background from "../../assets/Images/background_pattern_decorative.png"; -import React, { useEffect, useState } from "react"; -import EmailIcon from "../../assets/icons/email.svg?react"; -import Button from "../../Components/Button"; -import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded"; -import { Stack, Typography } from "@mui/material"; +import { Box, Stack, Typography } from "@mui/material"; +import { useEffect, useState } from "react"; import { useTheme } from "@emotion/react"; import { useDispatch } from "react-redux"; import { useNavigate } from "react-router"; import { createToast } from "../../Utils/toastUtils"; import { forgotPassword } from "../../Features/Auth/authSlice"; +import Button from "../../Components/Button"; +import background from "../../assets/Images/background_pattern_decorative.png"; +import EmailIcon from "../../assets/icons/email.svg?react"; +import Logo from "../../assets/icons/bwu-icon.svg?react"; +import "./index.css"; const CheckEmail = () => { const theme = useTheme(); @@ -80,13 +80,56 @@ const CheckEmail = () => { }; return ( -
+ background pattern -
+ + + BlueWave Uptime + + .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, + }, + }, + }} + > + + Go back to — + { + navigate("/login"); + }} + sx={{ userSelect: "none" }} + > + Log In + + + {/* @@ -127,8 +170,8 @@ const CheckEmail = () => { onClick={() => navigate("/login")} /> -
-
+ */} + ); }; diff --git a/Client/src/Pages/Auth/index.css b/Client/src/Pages/Auth/index.css index 577f27799..4ea19f71e 100644 --- a/Client/src/Pages/Auth/index.css +++ b/Client/src/Pages/Auth/index.css @@ -2,17 +2,13 @@ /* SHARED */ /* ////// */ .set-new-password-page, -.password-confirmed-page, -.forgot-password-page, -.check-email-page { +.password-confirmed-page { display: flex; justify-content: center; height: var(--env-var-height-1); } .set-new-password-page h1.MuiTypography-root, -.password-confirmed-page h1.MuiTypography-root, -.forgot-password-page h1.MuiTypography-root, -.check-email-page h1.MuiTypography-root { +.password-confirmed-page h1.MuiTypography-root { font-size: var(--env-var-font-size-large); color: var(--env-var-color-1); font-weight: 600; @@ -20,41 +16,28 @@ .set-new-password-page p.MuiTypography-root, .set-new-password-page button, .password-confirmed-page p.MuiTypography-root, -.password-confirmed-page button, -.forgot-password-page p.MuiTypography-root, -.forgot-password-page button, -.check-email-page p.MuiTypography-root, -.check-email-page button, -.check-email-page span.MuiTypography-root { +.password-confirmed-page button { font-size: var(--env-var-font-size-medium); } .set-new-password-page button:not(.MuiIconButton-root), -.password-confirmed-page button:not(.MuiIconButton-root), -.forgot-password-page button:not(.MuiIconButton-root), -.check-email-page button:not(.MuiIconButton-root) { +.password-confirmed-page button:not(.MuiIconButton-root) { height: 34px; border-radius: var(--env-var-radius-2); line-height: 0; } .set-new-password-form, -.password-confirmed-form, -.forgot-password-form, -.check-email-form { +.password-confirmed-form { margin-top: 65px; width: var(--env-var-width-2); } .set-new-password-page p.MuiTypography-root, -.password-confirmed-page p.MuiTypography-root, -.forgot-password-page p.MuiTypography-root, -.check-email-page p.MuiTypography-root { +.password-confirmed-page p.MuiTypography-root { color: var(--env-var-color-2); } .set-new-password-page button:not(.MuiIconButton-root) svg, -.password-confirmed-page button:not(.MuiIconButton-root) svg, -.forgot-password-page button svg, -.check-email-page button svg { +.password-confirmed-page button:not(.MuiIconButton-root) svg { margin-right: 5px; } @@ -68,13 +51,6 @@ visibility: hidden; } -/* /////////// */ -/* Check Email */ -/* /////////// */ -.check-email-page span.MuiTypography-root { - font-weight: 600; -} - /* AUTH */ .auth { height: 100vh; @@ -144,3 +120,8 @@ width: 100%; max-width: 800px; } + +.forgot-password-page h1, +.check-email-page h1 { + font-size: var(--env-var-font-size-large-plus); +}