From 72b813e849d23a9ca31e523b19c6e12bb76c61ca Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Fri, 9 Aug 2024 13:33:54 -0400
Subject: [PATCH] Added bluewave uptime favicon and inital design for login
 page

---
 Client/index.html                       |  24 ++---
 Client/public/bluewave_favicon.ico      | Bin 0 -> 4286 bytes
 Client/public/vite.svg                  |   1 -
 Client/src/Layouts/HomeLayout/index.css |   3 -
 Client/src/Pages/Auth/Login.jsx         | 132 +++++++++++++++++++++---
 Client/src/Pages/Auth/index.css         |  82 ++++++++++-----
 Client/src/Utils/Theme.js               |   1 +
 Client/src/assets/icons/bwu-icon.svg    |   4 +
 Client/src/assets/icons/mail.svg        |   4 +
 Client/src/index.css                    |   5 +
 10 files changed, 197 insertions(+), 59 deletions(-)
 create mode 100644 Client/public/bluewave_favicon.ico
 delete mode 100644 Client/public/vite.svg
 create mode 100644 Client/src/assets/icons/bwu-icon.svg
 create mode 100644 Client/src/assets/icons/mail.svg

diff --git a/Client/index.html b/Client/index.html
index 2b6c6b546..c2198aa5a 100644
--- a/Client/index.html
+++ b/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>
diff --git a/Client/public/bluewave_favicon.ico b/Client/public/bluewave_favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..487946975b025af198ebb1094af4bdf62c0ca5f1
GIT binary patch
literal 4286
zcmeHL+e;Kt7@z)v>}D5w5Q;Dgi!360@j-&1h@u<OL-m-Mnf4Hcsi{d9Gt<nXyOQ`|
zWLL5*i0lGM7|{hQ(C`-S?99&2W!;%y-#N3ZGrM_tS$b&C^3CPUIp6O)zw`UP11kuV
z=$Divu&dCJAP9+qAS9Dfmyk}z`gx;o^HOZHI|M;IFavRma}d`+NCVl^A!bh-#pv6Z
z`4XDDe=5YVF@Iyuacj?ecs``UrO{Tf1m2?yA?D7ueMkDFn7z4kARS*0U*$UZsy9JC
zlR<Nm37^F^fjDT4_OJ}5w-=`87fjJ%o-PD?KEY^jf^umG#Df$E^BanTVFune(Y$V0
zx(}A2!t#3%?CyYizr>E6@fsPo^PRry&ud^e3m7thfNq-^4D|z+DnV^LWc#9+m8-ic
z=AM!7G{@3pAUwx15$JdTDSy$}JUH+z)eC=pCVc1D!&kKdO6_)NPs(8_gB-^k=!8_X
zjQCDPu=fk^vvdXe%PUZ7Hbbsh3x8cEf<NC4$ECMaP|S&=bKu06e?u-=2{CIj?e`Sh
zi0?2zRzQQVW()icIYbC?MNNBFN&7M@G@dk=l>oUkZ8*MQ-&aV-QfzHIc@IB3@qL7U
zBF#OP{He`_9E;&A7q?P87wmV%1Nn4Dv^JT~)@pkU?TK8zCVI?h_@%4twU7^{Uy1k_
z`tg?g3if^D{2OgI_&d{`RJ_6+FY`-zsNOBG@eM!E4W64}Oy}LXe$ub;`WEz-bI_kw
z!gzI^^#7T2ZA$%I8%+Of3~T0K*97p@3FC98Q5OqCoo$rc8$%k39X`t+jq=uCzYqS~
z+0Y)Jf;sS==eF^temI|FwSMa_`d4bVQSN&=D{N0$osJoPr2Yv@%3ln#zmww!+V4Qj
zNsKLi*=pKns<DJ4Qf>Fw?Ir#dj?dQ3YH7^YPx&4A&<vyPCSlYe@bMAVbG!CghC(%W
z7tgI&;YUfIcUUl`UTF7<Am+{G+_2bKGwFO9KmW(eKRQb;@8mU2Z>^%bHDavxtBrY(
zPo~p;%(VA~_*bs&f&QX~a-|sFBMW$)a-DIc8+LxMI;ppurJ9u*U87tzD0Eh{^V(%p
n1KBx1{@nf@<D7mXpToW)`{VC!KI44E`S_1C5dI(FU)}!zl-%tm

literal 0
HcmV?d00001

diff --git a/Client/public/vite.svg b/Client/public/vite.svg
deleted file mode 100644
index e7b8dfb1b..000000000
--- a/Client/public/vite.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css
index d30ed9462..59b1adc4d 100644
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/Client/src/Layouts/HomeLayout/index.css
@@ -1,6 +1,3 @@
-.home-layout * {
-  box-sizing: border-box;
-}
 .home-layout {
   display: grid;
   position: relative;
diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index d40cb078b..42e7feb1a 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/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>
   );
 };
 
diff --git a/Client/src/Pages/Auth/index.css b/Client/src/Pages/Auth/index.css
index 4f2767f54..22e9ce96b 100644
--- a/Client/src/Pages/Auth/index.css
+++ b/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;
+}
diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js
index 72250bebb..c065798d2 100644
--- a/Client/src/Utils/Theme.js
+++ b/Client/src/Utils/Theme.js
@@ -98,6 +98,7 @@ const theme = createTheme({
     large: "24px",
     xl: "40px",
     xxl: "60px",
+    triplexl: "120px"
   },
   alert: {
     info: {
diff --git a/Client/src/assets/icons/bwu-icon.svg b/Client/src/assets/icons/bwu-icon.svg
new file mode 100644
index 000000000..80ab50ad9
--- /dev/null
+++ b/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>
diff --git a/Client/src/assets/icons/mail.svg b/Client/src/assets/icons/mail.svg
new file mode 100644
index 000000000..75c22b111
--- /dev/null
+++ b/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>
diff --git a/Client/src/index.css b/Client/src/index.css
index 8dc4222f5..0b3b7a9c7 100644
--- a/Client/src/index.css
+++ b/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;