From e52fc493ccee9c2e50a5de0a5bc3a5c67065863a Mon Sep 17 00:00:00 2001
From: MuhammadKhalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Fri, 24 May 2024 18:32:40 +0330
Subject: [PATCH] Register Page UI

---
 Client/src/Components/Check/Check.jsx         |  15 +++
 Client/src/Components/Check/check.css         |  20 ++++
 Client/src/Components/Checkbox/Checkbox.css   |   2 +-
 .../TextFields/Email/EmailTextField.jsx       |   5 +-
 .../TextFields/Password/PasswordTextField.jsx |   5 +-
 .../Components/TextFields/Text/TextField.jsx  |  86 +++++++++++++++++
 .../Components/TextFields/Text/textField.css  |   0
 Client/src/Pages/Login/index.css              |   1 +
 Client/src/Pages/Register/index.css           |  77 +++++++++++++++-
 Client/src/Pages/Register/index.jsx           |  87 ++++++++++++++++--
 Client/src/assets/Images/Check-icon-grey.png  | Bin 0 -> 571 bytes
 11 files changed, 284 insertions(+), 14 deletions(-)
 create mode 100644 Client/src/Components/Check/Check.jsx
 create mode 100644 Client/src/Components/Check/check.css
 create mode 100644 Client/src/Components/TextFields/Text/TextField.jsx
 create mode 100644 Client/src/Components/TextFields/Text/textField.css
 create mode 100644 Client/src/assets/Images/Check-icon-grey.png

diff --git a/Client/src/Components/Check/Check.jsx b/Client/src/Components/Check/Check.jsx
new file mode 100644
index 000000000..061600405
--- /dev/null
+++ b/Client/src/Components/Check/Check.jsx
@@ -0,0 +1,15 @@
+import "./check.css";
+import React from "react";
+import CheckGrey from "../../assets/Images/Check-icon-grey.png";
+
+const Check = ({ text }) => {
+  return (
+    <div className="check">
+      <img className="check-icon" src={CheckGrey} alt="un-checked" />
+      <div className="check-h-spacing" />
+      <label className="check-label">{text}</label>
+    </div>
+  );
+};
+
+export default Check;
diff --git a/Client/src/Components/Check/check.css b/Client/src/Components/Check/check.css
new file mode 100644
index 000000000..284b79bda
--- /dev/null
+++ b/Client/src/Components/Check/check.css
@@ -0,0 +1,20 @@
+.check {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+
+.check-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.check-h-spacing {
+  margin-right: 8px;
+}
+
+.check-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #475467;
+}
diff --git a/Client/src/Components/Checkbox/Checkbox.css b/Client/src/Components/Checkbox/Checkbox.css
index b8b092276..b77eac3d6 100644
--- a/Client/src/Components/Checkbox/Checkbox.css
+++ b/Client/src/Components/Checkbox/Checkbox.css
@@ -14,7 +14,7 @@
 
 .checkbox-label {
   margin-left: 5px;
-  font-size: 14px;
+  font-size: 13px;
   color: #344054;
   font-weight: 600;
   cursor: pointer;
diff --git a/Client/src/Components/TextFields/Email/EmailTextField.jsx b/Client/src/Components/TextFields/Email/EmailTextField.jsx
index b1428e1c5..3aabdc924 100644
--- a/Client/src/Components/TextFields/Email/EmailTextField.jsx
+++ b/Client/src/Components/TextFields/Email/EmailTextField.jsx
@@ -19,7 +19,7 @@ import { useTheme } from "@mui/material";
  */
 const EmailTextField = ({
   id,
-  label,
+  label = "Email",
   variant,
   placeholder,
   icon,
@@ -41,13 +41,12 @@ const EmailTextField = ({
 
   return (
     <div style={{ fontFamily: fontFamily }}>
-      <div className="email-text-field-title">Email</div>
+      <div className="email-text-field-title">{label}</div>
       <div className="email-text-field">
         <TextField
           error={error}
           className="email-text-field-input"
           id={id}
-          label={label}
           variant={variant}
           placeholder={placeholder}
           InputProps={{
diff --git a/Client/src/Components/TextFields/Password/PasswordTextField.jsx b/Client/src/Components/TextFields/Password/PasswordTextField.jsx
index 61c612d13..64a35bafb 100644
--- a/Client/src/Components/TextFields/Password/PasswordTextField.jsx
+++ b/Client/src/Components/TextFields/Password/PasswordTextField.jsx
@@ -19,7 +19,7 @@ import { useTheme } from "@mui/material";
  */
 const PasswordTextField = ({
   id,
-  label,
+  label = "Password",
   variant,
   placeholder,
   icon,
@@ -41,14 +41,13 @@ const PasswordTextField = ({
 
   return (
     <div style={{ fontFamily: fontFamily }}>
-      <div className="password-text-field-title">Password</div>
+      <div className="password-text-field-title">{label}</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={{
diff --git a/Client/src/Components/TextFields/Text/TextField.jsx b/Client/src/Components/TextFields/Text/TextField.jsx
new file mode 100644
index 000000000..f1d7b415b
--- /dev/null
+++ b/Client/src/Components/TextFields/Text/TextField.jsx
@@ -0,0 +1,86 @@
+import "./textField.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";
+
+/**
+ * @param {Object} props - The component props.
+ * @param {string} props.id - The ID of the text field.
+ * @param {string} props.label - The label text for the text field.
+ * @param {string} props.variant - The variant of the text field.
+ * @param {string} props.placeholder - The placeholder text for the text field.
+ * @param {ReactNode} props.icon - The icon to display in the text field.
+ * @param {string} props.helperText - The helper text for the text field.
+ * @param {boolean} props.error - Whether the text field has an error.
+ * @returns {JSX.Element} The rendered component.
+ */
+const StringTextField = ({
+  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="email-text-field-title">{label}</div>
+      <div className="email-text-field">
+        <TextField
+          error={error}
+          className="email-text-field-input"
+          id={id}
+          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 StringTextField;
diff --git a/Client/src/Components/TextFields/Text/textField.css b/Client/src/Components/TextFields/Text/textField.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/Client/src/Pages/Login/index.css b/Client/src/Pages/Login/index.css
index c5b6d8f8e..57a37ffe6 100644
--- a/Client/src/Pages/Login/index.css
+++ b/Client/src/Pages/Login/index.css
@@ -63,6 +63,7 @@
   color: #1570ef;
   font-weight: 600;
   cursor: pointer;
+  font-size: 13px;
 }
 
 .google-enter {
diff --git a/Client/src/Pages/Register/index.css b/Client/src/Pages/Register/index.css
index 0a52fcec9..10b1694d5 100644
--- a/Client/src/Pages/Register/index.css
+++ b/Client/src/Pages/Register/index.css
@@ -1 +1,76 @@
-/*REgister styles*/
\ No newline at end of file
+:root {
+  --dimension-width-1: 100vw;
+  --dimension-width-2: 360px;
+
+  --dimension-height-1: 100vh;
+
+  --spacing-small: 12px;
+  --spacing-medium: 24px;
+  --spacing-large: 40px;
+
+  --font-size-small: 13px;
+  --font-size-medium: 16px;
+
+  --register-form-heading-color-1: #101828;
+  --register-form-subheading-color-1: #475467;
+}
+
+.register-page {
+  width: var(--dimension-width-1);
+  display: flex;
+  justify-content: center;
+  min-height: var(--dimension-height-1);
+}
+
+.register-form {
+  width: var(--dimension-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-24px {
+  height: var(--spacing-medium);
+}
+
+.register-form-v-spacing-12px {
+  height: var(--spacing-small);
+}
+
+.register-form-v-spacing-40px {
+  height: var(--spacing-large);
+}
+
+.register-form-heading {
+  font-size: var(--spacing-medium);
+  font-weight: 700;
+  color: var(--register-form-heading-color-1);
+}
+
+.register-form-subheading {
+  font-size: var(--spacing-small);
+  color: var(--register-form-subheading-color-1);
+  font-weight: 600;
+}
+
+#register-firstname-input,
+#register-lastname-input,
+#register-email-input,
+#register-password-input {
+  font-size: var(--spacing-small);
+  width: 294px;
+  height: 11px;
+  padding: 12px 14px;
+}
+
+.register-bottom-spacing {
+  height: 50px;
+}
diff --git a/Client/src/Pages/Register/index.jsx b/Client/src/Pages/Register/index.jsx
index 6429ae2c0..6409ad536 100644
--- a/Client/src/Pages/Register/index.jsx
+++ b/Client/src/Pages/Register/index.jsx
@@ -1,9 +1,84 @@
-import React from 'react'
+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 PasswordTextField from "../../Components/TextFields/Password/PasswordTextField";
+import StringTextField from "../../Components/TextFields/Text/TextField";
+import Check from "../../Components/Check/Check";
+import Button from "../../Components/Button";
+import Google from "../../assets/Images/Google.png";
 
 const Register = () => {
-    return (
-        <div>Register</div>
-    )
-}
+  return (
+    <div className="register-page">
+      <BackgroundPattern></BackgroundPattern>
+      <div className="register-form">
+        <div className="register-form-header">
+          <img
+            className="register-form-header-logo"
+            src={Logomark}
+            alt="Logomark"
+          />
+          <div className="register-form-v-spacing-24px" />
+          <div className="register-form-heading">Create an account</div>
+          <div className="register-form-v-spacing-12px"></div>
+          <div className="register-form-subheading">
+            Start your 30-day free trial.
+          </div>
+        </div>
+        <div className="register-form-v-spacing-40px" />
+        <div className="register-form-inputs">
+          <StringTextField
+            error={false}
+            label="First name*"
+            placeholder="Enter your first name"
+            id="register-firstname-input"
+          />
+          <div className="login-form-v2-spacing" />
+          <StringTextField
+            error={false}
+            label="Last name*"
+            placeholder="Enter your last name"
+            id="register-lastname-input"
+          />
+          <div className="login-form-v2-spacing" />
+          <EmailTextField
+            label="Email*"
+            error={false}
+            placeholder="Enter your email"
+            id="register-email-input"
+          />
+          <div className="login-form-v2-spacing" />
+          <PasswordTextField
+            label="Password*"
+            error={false}
+            placeholder="Create a password"
+            id="register-password-input"
+          />
+        </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-12px"></div>
+          <Check text="Must contain one special character" />
+        </div>
+        <div className="login-form-v2-spacing" />
+        <div className="register-form-actions">
+          <Button level="primary" label="Get started" sx={{ width: "100%" }} />
+          <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>
+      </div>
+      <div className="register-bottom-spacing"></div>
+    </div>
+  );
+};
 
-export default Register
\ No newline at end of file
+export default Register;
diff --git a/Client/src/assets/Images/Check-icon-grey.png b/Client/src/assets/Images/Check-icon-grey.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf526770eae9250f39e92ddac44f50c9e6516302
GIT binary patch
literal 571
zcmV-B0>u4^P)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0nkZAK~#7FrIcGv
z+fWdO|2Ymx`%pD)gj%H+ISOq>i%7f!c2K&4h9z_bcnR!)W(8yk?7#sL9)J)dBm@FM
z#6={?KEoVy4<<O|la6eUJ)g%unjysCd9AF<;4ibD0-+3seRYTH0Qsa;tu$V!#^ur@
z+49CTS!!OAv*-tjn8@uFs|T``<{VkH@T@E<mTlJhzt>oIV=MF;O;;{v@dAi2SNd7}
zcPsQ(HY!s7JcfY7;Eyx;qZSG4tD7zJ2^fwxUmO>#s5+oBNakqnErK9KsP+BuE0xOZ
zD*4pk7=W+&QRF}5qSXsCrev4NMna72UG@#aP-E}lDDIK62)W!F{q!-1@o!)7I+Ko-
zHMe$f-nobq+A1y@NK$%a1VuX^NfXK<QnGwwz8~D%KN4XI??v*x_&JItk(t&s71rZ!
zZSU;kuzfOs%s_sMNG-|`n0`unde%Xw+f5)79dnJ$WT7;-67_F?{PM42K{-yL&7q#b
zkVti|IYzteOpet|gX4urr@5txvFi2t9ZQYYEJM2(0AiUm6IYYwk<j2RuT{vh%owx#
zt7I62!Hk(O4_@%p)7N6@b2EkLrki|Ob@@Gux_ex89H-rzcL{rV!ds-@)zkn0002ov
JPDHLkV1kV?{KNnN

literal 0
HcmV?d00001