Restructured register page

Client/src/Components/BackgroundPattern/backgroundPattern.css

@@ -1,6 +1,6 @@
 .background-pattern {
   position: absolute;
-  top: 10%;
+  top: 0%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: -1;

Client/src/Pages/Login/index.css

@@ -2,17 +2,11 @@
   width: var(--env-var-width-1);
   display: flex;
   justify-content: center;
-  align-items: center;
   height: 100vh;
 }
 .login-page svg rect {
   fill: none;
 }
-.login-page h1.MuiTypography-root {
-  font-size: 30px;
-  font-weight: 600;
-  color: var(--env-var-color-1);
-}
 .login-page p.MuiTypography-root,
 .login-page span,
 .login-page button {
@@ -53,6 +47,10 @@
   font-weight: 600;
 } */
 
+.login-form{
+  margin-top: 102px;
+}
+
 .google-enter {
   width: var(--env-var-img-width-1);
   height: var(--env-var-img-width-1);

Client/src/Pages/Login/index.jsx

@@ -123,13 +123,9 @@ const Login = () => {
   return (
     <div className="login-page">
       <BackgroundPattern></BackgroundPattern>
-      <form
-        className="login-form"
-        onSubmit={handleSubmit}
-        style={{ marginBottom: theme.gap.xxl }}
-      >
+      <form className="login-form" onSubmit={handleSubmit}>
         <Stack gap={theme.gap.large} direction="column">
-          <Logomark alt="Logomark" />
+          <Logomark alt="BlueWave Uptime Icon" />
           <Button
             level="secondary"
             label="Sign in with Google"

Client/src/Pages/Register/index.css

@@ -1,44 +1,32 @@
 .register-page {
   display: flex;
   justify-content: center;
-  min-height: var(--env-var-height-1);
+  height: var(--env-var-height-1);
+}
+.register-page h1.MuiTypography-root {
+  font-size: var(--env-var-font-size-large);
+  color: var(--env-var-color-1);
+  font-weight: 600;
+  opacity: 0.5;
+}
+.register-page p.MuiTypography-root,
+.register-page span,
+.register-page button {
+  font-size: var(--env-var-font-size-medium);
+}
+.register-page p.MuiTypography-root {
+  color: var(--env-var-color-2);
+  opacity: 0.8;
+}
+.register-page button {
+  height: 34px;
+  border-radius: var(--env-var-radius-2);
+  line-height: 0;
+}
+.register-page svg rect {
+  fill: none;
 }
 
 .register-form {
-  width: var(--env-var-width-2);
-  margin: 140px auto;
-}
-
-.register-form-header {
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.register-form-header-logo {
-  margin: 0 auto;
-}
-
-.register-form-v-spacing-large {
-  height: var(--env-var-spacing-3);
-}
-
-.register-form-v-spacing-small {
-  height: var(--env-var-spacing-1);
-}
-
-.register-form-heading {
-  font-size: var(--env-var-font-size-large);
-  font-weight: 700;
-  color: var(--env-var-color-1);
-}
-
-.register-form-subheading {
-  font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-2);
-  font-weight: 600;
-}
-
-.register-bottom-spacing {
-  height: 50px;
+  margin-top: 102px;
 }

Client/src/Pages/Register/index.jsx

@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 
 import "./index.css";
 import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
-import Logomark from "../../assets/Images/Logomark.png";
+import Logomark from "../../assets/Images/bwl-logo-2.svg?react";
 import Check from "../../Components/Check/Check";
 import Button from "../../Components/Button";
 import Google from "../../assets/Images/Google.png";
@@ -14,6 +14,7 @@ import { register } from "../../Features/Auth/authSlice";
 import { createToast } from "../../Utils/toastUtils";
 import Field from "../../Components/Inputs/Field";
 import { useTheme } from "@emotion/react";
+import { Divider, Stack, Typography } from "@mui/material";
 
 const Register = () => {
   const dispatch = useDispatch();
@@ -133,54 +134,48 @@ const Register = () => {
     <div className="register-page">
       <BackgroundPattern></BackgroundPattern>
       <form className="register-form" onSubmit={handleSubmit} noValidate>
-        <div className="register-form-header">
-          <img
-            className="register-form-header-logo"
-            src={Logomark}
-            alt="Logomark"
+        <Stack gap={theme.gap.large} direction="column">
+          <Logomark alt="BlueWave Uptime Icon" />
+          <Button
+            level="secondary"
+            label="Sign up with Google"
+            sx={{ fontWeight: 600, mt: theme.gap.xxl }}
+            img={<img className="google-enter" src={Google} alt="Google" />}
           />
-          <div className="register-form-v-spacing-large" />
-          <div className="register-form-heading">
-            Create Uptime Manager admin account
-          </div>
-          <div className="register-form-v-spacing-large"></div>
-        </div>
-        <div className="register-form-v-spacing-40px" />
-        <div className="register-form-inputs">
+          <Divider>
+            <Typography>or</Typography>
+          </Divider>
           <Field
             id="register-firstname-input"
             label="Name"
             isRequired={true}
-            placeholder="Talha"
+            placeholder="Daniel"
             autoComplete="given-name"
             value={form.firstname}
             onChange={handleChange}
             error={errors.firstname}
           />
-          <div className="login-form-v2-spacing" />
           <Field
             id="register-lastname-input"
             label="Surname"
             isRequired={true}
-            placeholder="Bolat"
+            placeholder="Cojocea"
             autoComplete="family-name"
             value={form.lastname}
             onChange={handleChange}
             error={errors.lastname}
           />
-          <div className="login-form-v2-spacing" />
           <Field
             type="email"
             id="register-email-input"
             label="Email"
             isRequired={true}
-            placeholder="name.surname@companyname.com"
+            placeholder="daniel.cojocea@domain.com"
             autoComplete="email"
             value={form.email}
             onChange={handleChange}
             error={errors.email}
           />
-          <div className="login-form-v2-spacing" />
           <Field
             type="password"
             id="register-password-input"
@@ -192,8 +187,6 @@ const Register = () => {
             onChange={handleChange}
             error={errors.password}
           />
-          <div className="login-form-v2-spacing" />
-          {/* TODO - hook up to form state and run checks */}
           <Field
             type="password"
             id="register-confirm-input"
@@ -205,32 +198,19 @@ const Register = () => {
             onChange={handleChange}
             error={errors.confirm}
           />
-        </div>
-        <div className="login-form-v2-spacing" />
-        <div className="register-form-checks">
-          <Check text="Must be at least 8 characters" />
-          <div className="register-form-v-spacing-small"></div>
-          <Check text="Must contain one special character" />
-        </div>
-        <div className="login-form-v2-spacing" />
-        <div className="register-form-actions">
+          <Stack gap={theme.gap.small}>
+            <Check text="Must be at least 8 characters" />
+            <Check text="Must contain one special character" />
+            <Check text="Must contain at least one upper and lower character" />
+          </Stack>
           <Button
             type="submit"
             level="primary"
             label="Get started"
-            sx={{ width: "100%" }}
+            sx={{ marginBottom: theme.gap.large }}
           />
-          <div className="login-form-v-spacing" />
-          <Button
-            disabled={true}
-            level="secondary"
-            label="Sign up with Google"
-            sx={{ width: "100%", color: "#344054", fontWeight: "700" }}
-            img={<img className="google-enter" src={Google} alt="Google" />}
-          />
-        </div>
+        </Stack>
       </form>
-      <div className="register-bottom-spacing"></div>
     </div>
   );
 };