Login page ui implemented

Client/src/App.jsx

@@ -1,23 +1,26 @@
-import { Routes, Route } from "react-router-dom";
-import "./App.css";
-import NotFound from "./Pages/NotFound";
+// import { Routes, Route } from "react-router-dom";
+// import "./App.css";
+// import NotFound from "./Pages/NotFound";
+// import Login from "./Pages/Login";
+// import Register from "./Pages/Register";
+// import HomeLayout from "./Layouts/HomeLayout";
+// import Demo from "./Pages/Demo/Demo";
+// import PlayGround from "./Pages/PlayGround/PlayGround";
+
 import Login from "./Pages/Login";
-import Register from "./Pages/Register";
-import HomeLayout from "./Layouts/HomeLayout";
-import Demo from "./Pages/Demo/Demo";
-import PlayGround from "./Pages/PlayGround/PlayGround";
 
 function App() {
   return (
     <>
-      <Routes>
+      {/* <Routes>
         <Route exact path="/" element={<HomeLayout />} />
         <Route exact path="/register" element={<Register />} />
         <Route exact path="/login" element={<Login />} />
         <Route exact path="/demo" element={<Demo />} />
         <Route path="*" element={<NotFound />} />
         <Route path="/playground" element={<PlayGround />} />
-      </Routes>
+      </Routes> */}
+      <Login />
     </>
   );
 }

Client/src/Components/BackgroundPattern/BackgroundPattern.jsx

@@ -0,0 +1,9 @@
+import "./backgroundPattern.css";
+import React from "react";
+import Pattern from "../../assets/Images/background_pattern_decorative.png";
+
+const BackgroundPattern = () => {
+  return <img className="background-pattern" src={Pattern} alt="Pattern" />;
+};
+
+export default BackgroundPattern;

Client/src/Components/BackgroundPattern/backgroundPattern.css

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

Client/src/Components/Checkbox/Checkbox.css

@@ -0,0 +1,21 @@
+.checkbox-holder {
+  height: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.checkbox {
+  width: 13px;
+  height: 13px;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+.checkbox-label {
+  margin-left: 5px;
+  font-size: 14px;
+  color: #344054;
+  font-weight: 600;
+  cursor: pointer;
+}

Client/src/Components/Checkbox/Checkbox.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import "./Checkbox.css";
+
+const CheckBox = () => {
+  return (
+    <div className="checkbox-holder">
+      <input className="checkbox" type="checkbox" id="checkbox" />
+      <label className="checkbox-label">Remember for 30 days</label>
+    </div>
+  );
+};
+
+export default CheckBox;

Client/src/Components/TextFields/Email/emailTextField.css

@@ -4,7 +4,7 @@
 
 .email-text-field {
   position: relative;
-  margin: 10px 20px;
+  margin-top: 10px;
 }
 
 #outlined-basic {
@@ -15,8 +15,6 @@
 }
 
 .email-text-field-title {
-  margin: 0 20px;
-  margin-top: 30px;
   font-size: 13px;
   color: var(--textfield-color-0);
   font-weight: bold;

Client/src/Components/TextFields/Password/PasswordTextField.jsx

@@ -0,0 +1,89 @@
+import "./passwordTextField.css";
+import React, { useState } from "react";
+import { InputAdornment, TextField } from "@mui/material";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
+import { useTheme } from "@mui/material";
+
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.id - Unique ID for the text field (optional)
+ * @param {string} props.label - The label text displayed above the text field (optional)
+ * @param {"standard" | "outlined" | "filled"} props.variant - The variant of the text field (e.g., "outlined") (optional)
+ * @param {string} props.placeholder - The placeholder text displayed within the text field (optional)
+ * @param {"error" | "help"} [props.icon] - The type of icon to display (error or help) (optional)
+ * @param {string} props.helperText - The helper text displayed below the text field (optional)
+ * @param {boolean} props.error - A flag indicating if the text field has an error (required)
+ * @returns {JSX.Element} - Renders the password text field component with dynamic icon display
+ */
+const PasswordTextField = ({
+  id,
+  label,
+  variant,
+  placeholder,
+  icon,
+  helperText,
+  error,
+}) => {
+  const theme = useTheme();
+
+  const fontLookup = {
+    default: theme.font.default.font,
+  };
+
+  const fontFamily = fontLookup["default"];
+
+  const [showIcon, setShowIcon] = useState(false);
+
+  const handleMouseEnter = () => setShowIcon(true);
+  const handleMouseLeave = () => setShowIcon(false);
+
+  return (
+    <div style={{ fontFamily: fontFamily }}>
+      <div className="password-text-field-title">Password</div>
+      <div className="password-text-field">
+        <TextField
+          type="password"
+          error={error}
+          className="password-text-field-input"
+          id={id}
+          label={label}
+          variant={variant}
+          placeholder={placeholder}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <div className="icon-holder">
+                  {error && showIcon && (
+                    <ErrorOutlineIcon
+                      className="text-field-icon"
+                      style={{ fill: "red", width: "16px", height: "16px" }}
+                    />
+                  )}
+                  {error && !showIcon && (
+                    <ErrorOutlineIcon
+                      className="text-field-icon"
+                      style={{ fill: "red", width: "16px", height: "16px" }}
+                    />
+                  )}
+                  {!error && showIcon && (
+                    <HelpOutlineIcon
+                      className="text-field-icon"
+                      style={{ width: "16px", height: "16px" }}
+                    />
+                  )}
+                </div>
+              </InputAdornment>
+            ),
+          }}
+          helperText={helperText}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PasswordTextField;

Client/src/Components/TextFields/Password/passwordTextField.css

@@ -0,0 +1,39 @@
+:root {
+  --textfield-color-0: #344054;
+}
+
+.password-text-field {
+  position: relative;
+  margin-top: 10px;
+}
+
+#outlined-basic {
+  width: 320px;
+  height: 14px;
+  font-size: 13px;
+  padding: 8px 12px;
+}
+
+.password-text-field-title {
+  font-size: 13px;
+  color: var(--textfield-color-0);
+  font-weight: bold;
+}
+
+#outlined-basic-helper-text {
+  margin-left: 0;
+  margin-top: 10px;
+  font-size: 11px;
+}
+
+.text-field-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.icon-holder {
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  margin: 0;
+}

Client/src/Pages/Login/index.css

@@ -1 +1,86 @@
-/*Login styles*/
+:root {
+  --spacing-1: 15px;
+  --spacing-2: 20px;
+  --spacing-3: 25px;
+}
+
+.login-page {
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.login-form {
+  width: 360px;
+  height: 526px;
+  margin: 90px auto;
+}
+
+.login-form-header {
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.login-form-header-logo {
+  margin: 0 auto;
+}
+
+.login-form-v-spacing {
+  height: var(--spacing-1);
+}
+
+.login-form-v2-spacing {
+  height: var(--spacing-2);
+}
+
+.login-form-v3-spacing {
+  height: var(--spacing-3);
+}
+
+.login-form-heading {
+  font-size: 30px;
+  font-weight: 700;
+  color: #101828;
+}
+
+#login-email-input {
+  width: 308px;
+  height: 11px;
+}
+
+.login-form-password-options {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.login-form-forgot-password {
+  color: #1570ef;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.google-enter {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+}
+
+.new-account-option {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #475467;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.new-account-option-span {
+  margin-left: 5px;
+  color: #1570ef;
+  font-size: 14px;
+  cursor: pointer;
+}

Client/src/Pages/Login/index.jsx

@@ -1,10 +1,65 @@
-import React from 'react'
-import './index.css'
+import React from "react";
+import "./index.css";
+import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
+import Logomark from "../../assets/Images/Logomark.png";
+import EmailTextField from "../../Components/TextFields/Email/EmailTextField";
+import CheckBox from "../../Components/Checkbox/Checkbox";
+import Button from "../../Components/Button";
+import Google from "../../assets/Images/Google.png";
+import PasswordTextField from "../../Components/TextFields/Password/PasswordTextField";
 
 const Login = () => {
-    return (
-        <div>Login</div>
-    )
-}
+  return (
+    <div className="login-page">
+      <BackgroundPattern></BackgroundPattern>
+      <div className="login-form">
+        <div className="login-form-header">
+          <img
+            className="login-form-header-logo"
+            src={Logomark}
+            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">
+          <EmailTextField
+            error={false}
+            placeholder="Enter your email"
+            id="login-email-input"
+          />
+          <div className="login-form-v2-spacing" />
+          <PasswordTextField
+            error={false}
+            placeholder="Password"
+            id="login-email-input"
+          />
+        </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 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 className="new-account-option-span">Sign up</span>
+        </div>
+      </div>
+    </div>
+  );
+};
 
-export default Login
+export default Login;