Added bluewave uptime favicon and inital design for login page

Client/index.html

@@ -1,16 +1,14 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./public/bluewave_favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BlueWave Uptime</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>BlueWave Uptime</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.jsx"></script>
-</body>
-
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
 </html>

Client/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

Client/src/Layouts/HomeLayout/index.css

@@ -1,6 +1,3 @@
-.home-layout * {
-  box-sizing: border-box;
-}
 .home-layout {
   display: grid;
   position: relative;

Client/src/Pages/Auth/Login.jsx

@@ -1,18 +1,25 @@
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-
-import "./index.css";
-import Logomark from "../../assets/Images/bwl-logo-2.svg?react";
-import Button from "../../Components/Button";
-import background from "../../assets/Images/background_pattern_decorative.png";
-import axiosInstance from "../../Utils/axiosConfig";
+import {
+  Box,
+  Divider,
+  FormControlLabel,
+  Stack,
+  Typography,
+} from "@mui/material";
+import { useTheme } from "@emotion/react";
 import { credentials } from "../../Validation/validation";
 import { login } from "../../Features/Auth/authSlice";
 import { useDispatch } from "react-redux";
 import { createToast } from "../../Utils/toastUtils";
+import Button from "../../Components/Button";
+import axiosInstance from "../../Utils/axiosConfig";
 import Field from "../../Components/Inputs/Field";
-import { Checkbox, FormControlLabel, Stack, Typography } from "@mui/material";
-import { useTheme } from "@emotion/react";
+import background from "../../assets/Images/background_pattern_decorative.png";
+import Logo from "../../assets/icons/bwu-icon.svg?react";
+import Mail from "../../assets/icons/mail.svg?react";
+
+import "./index.css";
 
 const Login = () => {
   const dispatch = useDispatch();
@@ -105,19 +112,106 @@ const Login = () => {
     });
   };
 
+  const [step, setStep] = useState(0);
+  const LandingPage = () => {
+    return (
+      <>
+        <Stack gap={theme.gap.large} alignItems="center" textAlign="center">
+          <Box>
+            <Typography component="h1">Log In</Typography>
+            <Typography>We are pleased to see you again!</Typography>
+          </Box>
+          <Box width="100%">
+            <Button
+              level="secondary"
+              label="Continue with Email"
+              img={<Mail />}
+              onClick={() => setStep(1)}
+              sx={{
+                width: "100%",
+                "& svg": {
+                  mr: theme.gap.small,
+                },
+              }}
+            />
+            {/* <Divider sx={{ marginY: theme.spacing(1) }}>or</Divider>
+            <Button
+              level="secondary"
+              label="Continue with Google"
+              onClick={() => setStep(1)}
+              sx={{ width: "100%" }}
+            /> */}
+          </Box>
+          <Box maxWidth={400}>
+            <Typography className="tos-p">
+              By continuing, you agree to our{" "}
+              <Typography component="span">Terms of Service</Typography> and{" "}
+              <Typography component="span">Privacy Policy.</Typography>
+            </Typography>
+          </Box>
+        </Stack>
+      </>
+    );
+  };
+
   return (
-    <div className="login-page">
+    <Stack className="login-page" overflow="hidden">
       <img
         className="background-pattern-svg"
         src={background}
         alt="background pattern"
       />
-      <form className="login-form" onSubmit={handleSubmit}>
+      <Stack
+        direction="row"
+        alignItems="center"
+        px={theme.gap.large}
+        gap={theme.gap.small}
+      >
+        <Logo style={{ borderRadius: theme.shape.borderRadius }} />
+        <Typography>BlueWave Uptime</Typography>
+      </Stack>
+      <Stack
+        width="fit-content"
+        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,
+              lg: theme.gap.xxl,
+            },
+          },
+        }}
+      >
+        <LandingPage />
+      </Stack>
+      <Box textAlign="center" p={theme.gap.large}>
+        <Typography display="inline-block">Don't have an account? -</Typography>
+        <Typography
+          component="span"
+          ml={theme.gap.xs}
+          onClick={() => {
+            navigate("/register");
+          }}
+          sx={{ userSelect: "none" }}
+        >
+          Sign Up
+        </Typography>
+      </Box>
+      {/* <form className="login-form" onSubmit={handleSubmit}>
         <Stack gap={theme.gap.small} alignItems="center">
-          <Logomark alt="BlueWave Uptime Icon" />
           <Typography component="h1" sx={{ mt: theme.gap.xl }}>
-            Login to Your Account
+            Log In
           </Typography>
+          <Typography>We are pleased to see you again!</Typography>
         </Stack>
         <Stack gap={theme.gap.large} sx={{ mt: `calc(${theme.gap.ml}*2)` }}>
           <Field
@@ -158,7 +252,10 @@ const Login = () => {
               }
               label="Remember me"
             />
-            <Typography component="span" onClick={() => navigate("/forgot-password")}>
+            <Typography
+              component="span"
+              onClick={() => navigate("/forgot-password")}
+            >
               Forgot password
             </Typography>
           </Stack>
@@ -176,10 +273,11 @@ const Login = () => {
             gap="5px"
             mt={theme.gap.ml}
           >
-            <Typography component="p" sx={{ alignSelf: "center" }}>
+            <Typography sx={{ alignSelf: "center" }}>
               Don't have an account?
             </Typography>
-            <Typography component="span"
+            <Typography
+              component="span"
               onClick={() => {
                 navigate("/register");
               }}
@@ -188,8 +286,8 @@ const Login = () => {
             </Typography>
           </Stack>
         </Stack>
-      </form>
-    </div>
+      </form> */}
+    </Stack>
   );
 };
 

Client/src/Pages/Auth/index.css

@@ -2,7 +2,6 @@
 /* SHARED */
 /* ////// */
 .register-page,
-.login-page,
 .set-new-password-page,
 .password-confirmed-page,
 .forgot-password-page,
@@ -12,7 +11,6 @@
   height: var(--env-var-height-1);
 }
 .register-page h1.MuiTypography-root,
-.login-page h1.MuiTypography-root,
 .set-new-password-page h1.MuiTypography-root,
 .password-confirmed-page h1.MuiTypography-root,
 .forgot-password-page h1.MuiTypography-root,
@@ -24,8 +22,6 @@
 .register-page p.MuiTypography-root,
 .register-page span,
 .register-page button,
-.login-page p.MuiTypography-root,
-.login-page span,
 .login-page button,
 .set-new-password-page p.MuiTypography-root,
 .set-new-password-page button,
@@ -38,13 +34,11 @@
 .check-email-page span.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
 }
-.register-page p.MuiTypography-root,
-.login-page p.MuiTypography-root {
+.register-page p.MuiTypography-root {
   color: var(--env-var-color-2);
   opacity: 0.8;
 }
 .register-page button:not(.MuiIconButton-root),
-.login-page button:not(.MuiIconButton-root),
 .set-new-password-page button:not(.MuiIconButton-root),
 .password-confirmed-page button:not(.MuiIconButton-root),
 .forgot-password-page button:not(.MuiIconButton-root),
@@ -54,12 +48,10 @@
   line-height: 0;
 }
 
-.register-page svg rect,
-.login-page svg rect {
+.register-page svg rect {
   fill: none;
 }
-.register-form,
-.login-form {
+.register-form {
   margin-top: 95px;
 }
 
@@ -77,7 +69,6 @@
   color: var(--env-var-color-2);
 }
 
-.login-page .MuiFormControlLabel-root .MuiButtonBase-root,
 .set-new-password-page button:not(.MuiIconButton-root) svg,
 .password-confirmed-page button:not(.MuiIconButton-root) svg,
 .forgot-password-page button svg,
@@ -108,19 +99,6 @@
   cursor: pointer;
   font-weight: 600;
 }
-.login-page .MuiFormControlLabel-root {
-  margin: 0;
-}
-.login-page .MuiFormControlLabel-root span:not(.Mui-checked) svg {
-  fill: var(--env-var-color-4);
-}
-.login-page .MuiFormControlLabel-root svg {
-  margin-bottom: 1px;
-}
-.login-page .MuiFormControlLabel-root .MuiTypography-root {
-  color: var(--env-var-color-5);
-  user-select: none;
-}
 
 /* /////////// */
 /* Check Email */
@@ -128,3 +106,57 @@
 .check-email-page span.MuiTypography-root {
   font-weight: 600;
 }
+
+.login-page {
+  height: 100vh;
+}
+.login-page h1 {
+  font-size: 37px;
+  font-weight: 600;
+  color: var(--env-var-color-3);
+}
+
+.login-page p {
+  font-size: var(--env-var-font-size-large);
+  color: var(--env-var-color-2-light);
+}
+.login-page .tos-p {
+  font-size: var(--env-var-font-size-medium-plus);
+}
+.login-page span {
+  font-size: inherit;
+}
+.login-page p + span {
+  color: var(--env-var-color-3);
+  opacity: 0.8;
+  cursor: pointer;
+  transition: opacity 300ms ease-in;
+}
+.login-page p > span {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+  transition: all 200ms;
+}
+.login-page p > span:hover {
+  color: var(--env-var-color-2);
+  text-underline-offset: 4px;
+}
+.login-page p + span:hover {
+  opacity: 1;
+}
+.login-page button:not(.MuiIconButton-root) {
+  font-size: var(--env-var-font-size-medium-plus);
+  height: 40px;
+  border-radius: var(--env-var-radius-2);
+}
+
+.login-page > .MuiStack-root:nth-of-type(1) {
+  height: var(--env-var-nav-bar-height);
+}
+
+.login-page .background-pattern-svg {
+  top: 14%;
+  width: 100%;
+  max-width: 800px;
+}

Client/src/Utils/Theme.js

@@ -98,6 +98,7 @@ const theme = createTheme({
     large: "24px",
     xl: "40px",
     xxl: "60px",
+    triplexl: "120px"
   },
   alert: {
     info: {

Client/src/assets/icons/bwu-icon.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" fill="#1570EF"/>
+<path d="M4.43466 24V9.45455H10.0028C11.054 9.45455 11.9276 9.62026 12.6236 9.9517C13.3243 10.2784 13.8475 10.7259 14.1932 11.294C14.5436 11.8622 14.7188 12.5062 14.7188 13.2259C14.7188 13.8177 14.6051 14.3243 14.3778 14.7457C14.1506 15.1624 13.8452 15.5009 13.4616 15.7614C13.0781 16.0218 12.6496 16.2088 12.1761 16.3224V16.4645C12.6922 16.4929 13.187 16.6515 13.6605 16.9403C14.1387 17.2244 14.5294 17.6269 14.8324 18.1477C15.1354 18.6686 15.2869 19.2983 15.2869 20.0369C15.2869 20.7898 15.1046 21.4669 14.7401 22.0682C14.3755 22.6648 13.8262 23.1359 13.0923 23.4815C12.3584 23.8272 11.4351 24 10.3224 24H4.43466ZM7.0696 21.7983H9.90341C10.8598 21.7983 11.5488 21.616 11.9702 21.2514C12.3963 20.8821 12.6094 20.4086 12.6094 19.831C12.6094 19.4001 12.5028 19.0118 12.2898 18.6662C12.0767 18.3158 11.7737 18.0412 11.3807 17.8423C10.9877 17.6387 10.5189 17.5369 9.97443 17.5369H7.0696V21.7983ZM7.0696 15.6406H9.67614C10.1307 15.6406 10.5402 15.5578 10.9048 15.392C11.2694 15.2216 11.5559 14.9825 11.7642 14.6747C11.9773 14.3622 12.0838 13.9929 12.0838 13.5668C12.0838 13.0033 11.8849 12.5393 11.4872 12.1747C11.0942 11.8101 10.5095 11.6278 9.73295 11.6278H7.0696V15.6406ZM25.5482 9.45455H28.1832V18.9574C28.1832 19.9991 27.937 20.9152 27.4445 21.706C26.9568 22.4967 26.2703 23.1146 25.3849 23.5597C24.4995 24 23.4649 24.2202 22.2812 24.2202C21.0927 24.2202 20.0558 24 19.1704 23.5597C18.285 23.1146 17.5984 22.4967 17.1107 21.706C16.623 20.9152 16.3792 19.9991 16.3792 18.9574V9.45455H19.0141V18.7372C19.0141 19.3433 19.1467 19.883 19.4119 20.3565C19.6817 20.83 20.0605 21.2017 20.5482 21.4716C21.0359 21.7367 21.6136 21.8693 22.2812 21.8693C22.9488 21.8693 23.5264 21.7367 24.0141 21.4716C24.5066 21.2017 24.8853 20.83 25.1505 20.3565C25.4156 19.883 25.5482 19.3433 25.5482 18.7372V9.45455Z" fill="white"/>
+</svg>

Client/src/assets/icons/mail.svg

@@ -0,0 +1,4 @@
+
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.5 18L14.8571 12M9.14286 12L2.50003 18M2 7L10.1649 12.7154C10.8261 13.1783 11.1567 13.4097 11.5163 13.4993C11.8339 13.5785 12.1661 13.5785 12.4837 13.4993C12.8433 13.4097 13.1739 13.1783 13.8351 12.7154L22 7M6.8 20H17.2C18.8802 20 19.7202 20 20.362 19.673C20.9265 19.3854 21.3854 18.9265 21.673 18.362C22 17.7202 22 16.8802 22 15.2V8.8C22 7.11984 22 6.27976 21.673 5.63803C21.3854 5.07354 20.9265 4.6146 20.362 4.32698C19.7202 4 18.8802 4 17.2 4H6.8C5.11984 4 4.27976 4 3.63803 4.32698C3.07354 4.6146 2.6146 5.07354 2.32698 5.63803C2 6.27976 2 7.11984 2 8.8V15.2C2 16.8802 2 17.7202 2.32698 18.362C2.6146 18.9265 3.07354 19.3854 3.63803 19.673C4.27976 20 5.11984 20 6.8 20Z" stroke="#475467" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

Client/src/index.css

@@ -1,5 +1,9 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
 
+* {
+  box-sizing: border-box;
+}
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   font-weight: 400;
@@ -19,6 +23,7 @@
 
   --env-var-color-1: #101828;
   --env-var-color-2: #475467;
+  --env-var-color-2-light: #838c99;
   --env-var-color-3: #1570ef;
 
   --env-var-color-4: #d0d5dd;