Restructured login page

Client/src/Components/Button/index.jsx

@@ -63,6 +63,10 @@ const Button = ({ id, type, level, label, disabled, img, onClick, sx }) => {
         "&:focus": {
           outline: "none",
         },
+        "& .MuiTouchRipple-root": {
+          pointerEvents: "none",
+          display: "none",
+        },
         ...sx,
       }}
     >

Client/src/Pages/Login/index.css

@@ -3,78 +3,58 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: var(--env-var-height-1);
+  height: 100vh;
 }
-
-.login-form {
-  width: var(--env-var-width-2);
-  margin: 90px auto;
+.login-page svg rect {
+  fill: none;
 }
-
-.login-form-header {
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-#login-form-header-logo {
-  margin-bottom: 60px;
-}
-
-.login-form-v-spacing {
-  height: var(--env-var-spacing-1);
-}
-
-.login-form-v2-spacing {
-  height: var(--env-var-spacing-2);
-}
-
-.login-form-v3-spacing {
-  height: var(--env-var-spacing-3);
-}
-
-.login-form-heading {
-  font-size: var(--env-var-font-size-xlarge);
-  font-weight: 700;
+.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 {
+  font-size: var(--env-var-font-size-medium);
+}
+.login-page p.MuiTypography-root {
+  color: var(--env-var-color-2);
+  opacity: 0.8;
+}
+.login-page button {
+  height: 34px;
+  border-radius: var(--env-var-radius-2);
+  line-height: 0;
+}
+.login-page span:not(.MuiTypography-root):not(.MuiButtonBase-root) {
+  color: var(--env-var-color-3);
+  cursor: pointer;
+  font-weight: 600;
+}
+.login-page .MuiFormControlLabel-root {
+  margin: 0;
+}
+.login-page .MuiFormControlLabel-root .MuiButtonBase-root {
+  margin-right: 5px;
+}
+.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;
+}
 
 /* .login-form-inputs .field h3.MuiTypography-root{
   font-weight: 600;
 } */
 
-.login-form-password-options {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.login-form-forgot-password {
-  color: var(--env-var-color-3);
-  font-weight: 600;
-  cursor: pointer;
-  font-size: var(--env-var-font-size-medium);
-}
-
 .google-enter {
   width: var(--env-var-img-width-1);
   height: var(--env-var-img-width-1);
   margin-right: 10px;
-}
-
-.new-account-option {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--env-var-color-2);
-  font-size: var(--env-var-font-size-medium);
-  font-weight: 600;
-}
-
-.new-account-option-span {
-  margin-left: 5px;
-  color: var(--env-var-color-3);
-  font-size: var(--env-var-font-size-medium);
-  cursor: pointer;
-  font-weight: 700;
-}
+}

Client/src/Pages/Login/index.jsx

@@ -8,15 +8,24 @@ import CheckBox from "../../Components/Checkbox/Checkbox";
 import Button from "../../Components/Button";
 import Google from "../../assets/Images/Google.png";
 import axiosInstance from "../../Utils/axiosConfig";
-import { loginValidation, credentials } from "../../Validation/validation";
+import { credentials } from "../../Validation/validation";
 import { login } from "../../Features/Auth/authSlice";
 import { useDispatch } from "react-redux";
 import { createToast } from "../../Utils/toastUtils";
 import Field from "../../Components/Inputs/Field";
+import {
+  Checkbox,
+  Divider,
+  FormControlLabel,
+  Stack,
+  Typography,
+} from "@mui/material";
+import { useTheme } from "@emotion/react";
 
 const Login = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
+  const theme = useTheme();
 
   const idMap = {
     "login-email-input": "email",
@@ -115,15 +124,22 @@ const Login = () => {
   return (
     <div className="login-page">
       <BackgroundPattern></BackgroundPattern>
-      <form className="login-form" onSubmit={handleSubmit}>
-        <div className="login-form-header">
-          <Logomark id="login-form-header-logo" alt="Logomark" />
-          <div className="login-form-v-spacing" />
-          <div className="login-form-heading">Log in to your account</div>
-        </div>
-        <div className="login-form-v3-spacing" />
-
-        <div className="login-form-inputs">
+      <form
+        className="login-form"
+        onSubmit={handleSubmit}
+        style={{ marginBottom: theme.gap.xxl }}
+      >
+        <Stack gap={theme.gap.large} direction="column">
+          <Logomark alt="Logomark" />
+          <Button
+            level="secondary"
+            label="Sign in with Google"
+            sx={{ fontWeight: "600", mt: theme.gap.xxl }}
+            img={<img className="google-enter" src={Google} alt="Google" />}
+          />
+          <Divider>
+            <Typography>or</Typography>
+          </Divider>
           <Field
             type="email"
             id="login-email-input"
@@ -135,52 +151,56 @@ const Login = () => {
             onChange={handleChange}
             error={errors.email}
           />
-          <div className="login-form-v2-spacing" />
           <Field
             type="password"
             id="login-password-input"
             label="Password"
             isRequired={true}
-            placeholder="Enter your password"
+            placeholder="••••••••••"
             autoComplete="current-password"
             value={form.password}
             onChange={handleChange}
             error={errors.password}
           />
-        </div>
-        <div className="login-form-v3-spacing" />
-        <div className="login-form-password-options">
-          <CheckBox />
-          <div className="login-form-forgot-password">Forgot password</div>
-        </div>
-        <div className="login-form-v3-spacing" />
-        <div className="login-form-actions">
-          <Button
-            type="submit"
-            level="primary"
-            label="Sign in"
-            sx={{ width: "100%" }}
-          />
-          <div className="login-form-v-spacing" />
-          <Button
-            level="secondary"
-            label="Sign in with Google"
-            sx={{ width: "100%", color: "#344054", fontWeight: "700" }}
-            img={<img className="google-enter" src={Google} alt="Google" />}
-          />
-        </div>
-        <div className="login-form-v3-spacing" />
-        <div className="new-account-option">
-          Don’t have an account?
-          <span
-            onClick={() => {
-              navigate("/register");
-            }}
-            className="new-account-option-span"
+          <Stack direction="row" justifyContent="space-between">
+            <FormControlLabel
+              control={
+                <Checkbox
+                  size="small"
+                  sx={{
+                    padding: 0,
+                    "& .MuiTouchRipple-root": {
+                      pointerEvents: "none",
+                      display: "none",
+                    },
+                  }}
+                />
+              }
+              label="Remember me"
+            />
+            <span>Forgot password</span>
+          </Stack>
+        </Stack>
+        <Stack gap={theme.gap.ml} mt={theme.gap.large}>
+          <Button type="submit" level="primary" label="Sign in" />
+          <Stack
+            direction="row"
+            justifyContent="center"
+            gap="5px"
+            mt={theme.gap.ml}
           >
-            Sign up
-          </span>
-        </div>
+            <Typography component="p" sx={{ alignSelf: "center" }}>
+              Don't have an account?
+            </Typography>
+            <span
+              onClick={() => {
+                navigate("/register");
+              }}
+            >
+              Sign up
+            </span>
+          </Stack>
+        </Stack>
       </form>
     </div>
   );

Client/src/Utils/Theme.js

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