From e52fc493ccee9c2e50a5de0a5bc3a5c67065863a Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Fri, 24 May 2024 18:32:40 +0330 Subject: [PATCH 1/3] 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 ( +
+ un-checked +
+ +
+ ); +}; + +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 (
-
Email
+
{label}
-
Password
+
{label}
{ + 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 ( +
+
{label}
+
+ +
+ {error && showIcon && ( + + )} + {error && !showIcon && ( + + )} + {!error && showIcon && ( + + )} +
+ + ), + }} + helperText={helperText} + onMouseEnter={handleMouseEnter} + onMouseLeave={handleMouseLeave} + /> +
+
+ ); +}; + +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 ( -
Register
- ) -} + return ( +
+ +
+
+ Logomark +
+
Create an account
+
+
+ Start your 30-day free trial. +
+
+
+
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+
+
+
+
+
+
+ ); +}; -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)i%7f!c2K&4h9z_bcnR!)W(8yk?7#sL9)J)dBm@FM z#6={?KEoVy4<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 Date: Fri, 24 May 2024 22:17:12 +0330 Subject: [PATCH 2/3] Adding JSDoc --- Client/src/Components/Check/Check.jsx | 13 ++++++++++ .../TextFields/Email/EmailTextField.jsx | 26 ++++++++++++------- 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/Client/src/Components/Check/Check.jsx b/Client/src/Components/Check/Check.jsx index 061600405..6daf90aa1 100644 --- a/Client/src/Components/Check/Check.jsx +++ b/Client/src/Components/Check/Check.jsx @@ -2,6 +2,19 @@ import "./check.css"; import React from "react"; import CheckGrey from "../../assets/Images/Check-icon-grey.png"; +/** + * `Check` is a functional React component that displays a check icon and a label. + * + * @component + * @param {Object} props - The properties that define the `Check` component. + * @param {string} props.text - The text to be displayed as the label next to the check icon. + * + * @example + * // To use this component, import it and use it in your JSX like this: + * + * + * @returns {React.Element} The `Check` component with a check icon and a label, defined by the `text` prop. + */ const Check = ({ text }) => { return (
diff --git a/Client/src/Components/TextFields/Email/EmailTextField.jsx b/Client/src/Components/TextFields/Email/EmailTextField.jsx index 3aabdc924..5273ba74b 100644 --- a/Client/src/Components/TextFields/Email/EmailTextField.jsx +++ b/Client/src/Components/TextFields/Email/EmailTextField.jsx @@ -6,17 +6,25 @@ import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; import { useTheme } from "@mui/material"; /** + * `EmailTextField` is a functional React component that renders a text field for email input. + * * @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 email text field component with dynamic icon display + * @param {Object} props - The properties that define the `EmailTextField` component. + * @param {string} props.id - The id of the text field. + * @param {string} [props.label="Email"] - The label of the text field. + * @param {string} props.variant - The variant of the text field. + * @param {string} props.placeholder - The placeholder of the text field. + * @param {React.Element} props.icon - The icon to be displayed in the text field. + * @param {string} props.helperText - The helper text to be displayed below the text field. + * @param {boolean} props.error - If true, the text field will indicate an error state. + * + * @example + * // To use this component, import it and use it in your JSX like this: + * + * + * @returns {React.Element} The `EmailTextField` component with a text field for email input. */ + const EmailTextField = ({ id, label = "Email", From 57a50e740f5d14e4026f4fefecf282cf99c9302a Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Sat, 25 May 2024 11:30:57 +0330 Subject: [PATCH 3/3] polishing --- Client/src/Pages/Login/index.css | 37 +++++++++++++++++++++----------- 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/Client/src/Pages/Login/index.css b/Client/src/Pages/Login/index.css index 57a37ffe6..c823e2a6a 100644 --- a/Client/src/Pages/Login/index.css +++ b/Client/src/Pages/Login/index.css @@ -3,19 +3,32 @@ --spacing-2: 20px; --spacing-3: 25px; --textfield-font-size: 13px; + + --login-page-width-1: 100vw; + --login-page-height-1: 100vh; + + --login-form-width-1: 360px; + --login-form-height-1: 526px; + + --logo-width-1: 20px; + --login-font-size-medium: 13px; + + --login-color-1: #101828; + --login-color-2: #1570ef; + --login-color-3: #475467; } .login-page { - width: 100vw; + width: var(--login-page-width-1); display: flex; justify-content: center; align-items: center; - height: 100vh; + min-height: var(--login-page-height-1); } .login-form { - width: 360px; - height: 526px; + width: var(--login-form-width-1); + height: var(--login-form-height-1); margin: 90px auto; } @@ -44,7 +57,7 @@ .login-form-heading { font-size: 30px; font-weight: 700; - color: #101828; + color: var(--login-color-1); } #login-email-input { @@ -60,15 +73,15 @@ } .login-form-forgot-password { - color: #1570ef; + color: var(--login-color-2); font-weight: 600; cursor: pointer; - font-size: 13px; + font-size: var(--login-font-size-medium); } .google-enter { - width: 20px; - height: 20px; + width: var(--logo-width-1); + height: var(--logo-width-1); margin-right: 10px; } @@ -76,14 +89,14 @@ display: flex; justify-content: center; align-items: center; - color: #475467; - font-size: 13px; + color: var(--login-color-3); + font-size: var(--login-font-size-medium); font-weight: 600; } .new-account-option-span { margin-left: 5px; - color: #1570ef; + color: var(--login-color-2); font-size: 14px; cursor: pointer; }