Merge pull request #61 from MuhammadKhalilzadeh/register-page

Register page resolves #48

Client/src/Components/Check/Check.jsx

@@ -0,0 +1,28 @@
+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:
+ * <Check text="Your Text Here" />
+ *
+ * @returns {React.Element} The `Check` component with a check icon and a label, defined by the `text` prop.
+ */
+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;

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;
+}

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;

Client/src/Components/TextFields/Email/EmailTextField.jsx

@@ -6,20 +6,28 @@ 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:
+ * <EmailTextField id="email" variant="outlined" placeholder="Enter your email" />
+ *
+ * @returns {React.Element} The `EmailTextField` component with a text field for email input.
  */
+
 const EmailTextField = ({
   id,
-  label,
+  label = "Email",
   variant,
   placeholder,
   icon,
@@ -41,13 +49,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={{

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={{

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;