Replaced textfield components in profile and password panels

Client/src/Components/TabPanels/Account/PasswordPanel.jsx

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { useTheme } from "@emotion/react";
 import { Box, Divider, Stack, Typography } from "@mui/material";
 import ButtonSpinner from "../../ButtonSpinner";
-import PasswordTextField from "../../TextFields/Password/PasswordTextField";
+import Field from "../../TextFields/Field";
 import { editPasswordValidation } from "../../../Validation/validation";
 import Alert from "../../Alert";
 import { update } from "../../../Features/Auth/authSlice";
@@ -120,76 +120,49 @@ const PasswordPanel = () => {
           <Stack>
             <Typography component="h1">Current password</Typography>
           </Stack>
-          <Stack>
-            <PasswordTextField
-              id="edit-current-password"
-              label={null}
-              placeholder="Enter your current password"
-              autoComplete="current-password"
-              visibility={showPassword}
-              setVisibility={setShowPassword}
-              value={localData.password}
-              onChange={handleChange}
-              error={errors[idToName["edit-current-password"]] ? true : false}
-            />
-            {errors[idToName["edit-current-password"]] ? (
-              <Typography component="p" className="input-error">
-                {errors[idToName["edit-current-password"]]}
-              </Typography>
-            ) : (
-              ""
-            )}
-          </Stack>
+          <Field
+            type="password"
+            id="edit-current-password"
+            placeholder="Enter your current password"
+            autoComplete="current-password"
+            isVisible={showPassword}
+            setVisibility={setShowPassword}
+            value={localData.password}
+            onChange={handleChange}
+            error={errors[idToName["edit-current-password"]]}
+          />
         </div>
         <div className="edit-password-form__wrapper">
           <Stack>
             <Typography component="h1">New password</Typography>
           </Stack>
-          <Stack>
-            <PasswordTextField
-              id="edit-new-password"
-              label={null}
-              placeholder="Enter your new password"
-              autoComplete="new-password"
-              visibility={showPassword}
-              setVisibility={setShowPassword}
-              value={localData.newPassword}
-              onChange={handleChange}
-              error={errors[idToName["edit-new-password"]] ? true : false}
-            />
-            {errors[idToName["edit-new-password"]] ? (
-              <Typography component="p" className="input-error">
-                {errors[idToName["edit-new-password"]]}
-              </Typography>
-            ) : (
-              ""
-            )}
-          </Stack>
+          <Field
+            type="password"
+            id="edit-new-password"
+            placeholder="Enter your new password"
+            autoComplete="new-password"
+            isVisible={showPassword}
+            setVisibility={setShowPassword}
+            value={localData.newPassword}
+            onChange={handleChange}
+            error={errors[idToName["edit-new-password"]]}
+          />
         </div>
         <div className="edit-password-form__wrapper">
           <Stack>
             <Typography component="h1">Confirm new password</Typography>
           </Stack>
-          <Stack>
-            <PasswordTextField
-              id="edit-confirm-password"
-              label={null}
-              placeholder="Reenter your new password"
-              autoComplete="new-password"
-              visibility={showPassword}
-              setVisibility={setShowPassword}
-              value={localData.confirm}
-              onChange={handleChange}
-              error={errors[idToName["edit-confirm-password"]] ? true : false}
-            />
-            {errors[idToName["edit-confirm-password"]] ? (
-              <Typography component="p" className="input-error">
-                {errors[idToName["edit-confirm-password"]]}
-              </Typography>
-            ) : (
-              ""
-            )}
-          </Stack>
+          <Field
+            type="password"
+            id="edit-confirm-password"
+            placeholder="Reenter your new password"
+            autoComplete="new-password"
+            isVisible={showPassword}
+            setVisibility={setShowPassword}
+            value={localData.confirm}
+            onChange={handleChange}
+            error={errors[idToName["edit-confirm-password"]]}
+          />
         </div>
         <div className="edit-password-form__wrapper">
           <Stack></Stack>

Client/src/Components/TabPanels/Account/ProfilePanel.jsx

@@ -4,9 +4,8 @@ import TabPanel from "@mui/lab/TabPanel";
 import { Box, Divider, Modal, Stack, Typography } from "@mui/material";
 import ButtonSpinner from "../../ButtonSpinner";
 import Button from "../../Button";
-import EmailTextField from "../../TextFields/Email/EmailTextField";
-import StringTextField from "../../TextFields/Text/TextField";
 import Avatar from "../../Avatar";
+import Field from "../../TextFields/Field";
 import {
   editProfileValidation,
   imageValidation,
@@ -219,47 +218,27 @@ const ProfilePanel = () => {
           <Stack>
             <Typography component="h1">First name</Typography>
           </Stack>
-          <Stack>
-            <StringTextField
-              id="edit-first-name"
-              label={null}
-              value={localData.firstname}
-              placeholder="Enter your first name"
-              autoComplete="given-name"
-              onChange={handleChange}
-              error={errors[idToName["edit-first-name"]] ? true : false}
-            />
-            {errors[idToName["edit-first-name"]] ? (
-              <Typography component="p" className="input-error">
-                {errors[idToName["edit-first-name"]]}
-              </Typography>
-            ) : (
-              ""
-            )}
-          </Stack>
+          <Field
+            id="edit-first-name"
+            value={localData.firstname}
+            placeholder="Enter your first name"
+            autoComplete="given-name"
+            onChange={handleChange}
+            error={errors[idToName["edit-first-name"]]}
+          />
         </div>
         <div className="edit-profile-form__wrapper">
           <Stack>
             <Typography component="h1">Last name</Typography>
           </Stack>
-          <Stack>
-            <StringTextField
-              id="edit-last-name"
-              label={null}
-              value={localData.lastname}
-              placeholder="Enter your last name"
-              autoComplete="family-name"
-              onChange={handleChange}
-              error={errors[idToName["edit-last-name"]] ? true : false}
-            />
-            {errors[idToName["edit-last-name"]] ? (
-              <Typography component="p" className="input-error">
-                {errors[idToName["edit-last-name"]]}
-              </Typography>
-            ) : (
-              ""
-            )}
-          </Stack>
+          <Field
+            id="edit-last-name"
+            placeholder="Enter your last name"
+            autoComplete="family-name"
+            value={localData.lastname}
+            onChange={handleChange}
+            error={errors[idToName["edit-last-name"]]}
+          />
         </div>
         <div className="edit-profile-form__wrapper">
           <Stack>
@@ -268,25 +247,15 @@ const ProfilePanel = () => {
               This is your current email address — it cannot be changed.
             </Typography>
           </Stack>
-          <Stack>
-            <EmailTextField
-              id="edit-email"
-              label={null}
-              value={user.email}
-              placeholder="Enter your email"
-              autoComplete="email"
-              // onChange={handleChange}
-              // error={errors[idToName["edit-email"]] ? true : false}
-              disabled={true}
-            />
-            {errors[idToName["edit-email"]] ? (
-              <Typography component="p" className="input-error">
-                {errors[idToName["edit-email"]]}
-              </Typography>
-            ) : (
-              ""
-            )}
-          </Stack>
+          <Field
+            id="edit-email"
+            value={user.email}
+            placeholder="Enter your email"
+            autoComplete="email"
+            // onChange={handleChange}
+            // error={errors[idToName["edit-email"]]}
+            disabled={true}
+          />
         </div>
         <div className="edit-profile-form__wrapper">
           <Stack>

Client/src/Components/TextFields/Field/index.css

@@ -1,21 +1,21 @@
 .field {
   min-width: 250px;
 }
-.field h1.MuiTypography-root,
+.field h3.MuiTypography-root,
 .field h5.MuiTypography-root,
 .field input,
 .field .input-error {
   font-size: var(--env-var-font-size-medium);
 }
-.field h1.MuiTypography-root,
+.field h3.MuiTypography-root,
 .field h5.MuiTypography-root,
 .field input {
   color: var(--env-var-color-5);
 }
-.field h1.MuiTypography-root {
-  font-weight: 600;
+.field h3.MuiTypography-root {
+  font-weight: 500;
 }
-.field h1.MuiTypography-root span {
+.field h3.MuiTypography-root span {
   color: var(--env-var-color-19);
   margin-left: 1px;
 }
@@ -27,19 +27,19 @@
   border-right: solid 1px var(--env-var-color-29);
 }
 .field .MuiInputBase-root {
-  height: 39px;
+  height: 35px;
+  overflow: hidden;
+}
+.field .MuiInputBase-root:has(.MuiInputAdornment-root) {
   padding-right: var(--env-var-spacing-1-minus);
 }
 .field input {
-  padding: var(--env-var-spacing-1-minus);
+  padding: 0 var(--env-var-spacing-1-minus);
 }
 .field .MuiOutlinedInput-root fieldset {
   border-color: var(--env-var-color-29);
   border-radius: var(--env-var-radius-1);
 }
-.field .MuiOutlinedInput-root:hover fieldset {
-  border-color: var(--env-var-color-25);
-}
 .field .input-error {
   color: var(--env-var-color-24);
   opacity: 0.8;

Client/src/Components/TextFields/Field/index.jsx

@@ -11,7 +11,7 @@ import Visibility from "@mui/icons-material/Visibility";
 import "./index.css";
 
 const Field = ({
-  type,
+  type = "text",
   id,
   label,
   isRequired,
@@ -29,60 +29,49 @@ const Field = ({
   return (
     <Stack gap={theme.gap.xs} className={`field field-${type}`}>
       {label && (
-        <Typography component="h1">
+        <Typography component="h3">
           {label}
           {isRequired ? <span>*</span> : ""}
         </Typography>
       )}
       <TextField
-        type={
-          type === "password"
-            ? isVisible
-              ? "text"
-              : type
-            : type === "website"
-            ? "text"
-            : type
-        }
+        type={type === "password" ? (isVisible ? "text" : type) : type}
         id={id}
         autoComplete={autoComplete}
         placeholder={placeholder}
         value={value}
         onChange={onChange}
         disabled={disabled}
-        InputProps={
-          type === "website"
-            ? {
-                startAdornment: <Typography component="h5">http://</Typography>,
-              }
-            : type === "password" && {
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <IconButton
-                      aria-label="toggle password visibility"
-                      onClick={() => setVisibility((show) => !show)}
-                      tabIndex={-1}
-                      sx={{
-                        color: theme.palette.section.borderColor,
-                        padding: theme.gap.xs,
-                        "&:focus": {
-                          outline: "none",
-                        },
-                        "& .MuiTouchRipple-root": {
-                          pointerEvents: "none",
-                          display: "none",
-                        },
-                      }}
-                    >
-                      {!isVisible ? <VisibilityOff /> : <Visibility />}
-                    </IconButton>
-                  </InputAdornment>
-                ),
-              }
-        }
+        InputProps={{
+          startAdornment: type === "url" && (
+            <Typography component="h5">https://</Typography>
+          ),
+          endAdornment: type === "password" && (
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="toggle password visibility"
+                onClick={() => setVisibility((show) => !show)}
+                tabIndex={-1}
+                sx={{
+                  color: theme.palette.section.borderColor,
+                  padding: theme.gap.xs,
+                  "&:focus": {
+                    outline: "none",
+                  },
+                  "& .MuiTouchRipple-root": {
+                    pointerEvents: "none",
+                    display: "none",
+                  },
+                }}
+              >
+                {!isVisible ? <VisibilityOff /> : <Visibility />}
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
       />
       {error && (
-        <Typography component="p" className="input-error" mt={theme.gap.xs}>
+        <Typography component="span" className="input-error" mt={theme.gap.xs}>
           {error}
         </Typography>
       )}

Client/src/Pages/Account/index.css

@@ -139,7 +139,7 @@
   }
 }
 
-.account .MuiStack-root:has(p.MuiTypography-root.input-error) {
+.account .MuiStack-root:has(span.MuiTypography-root.input-error) {
   position: relative;
 }
 .account .text-field-icon {
@@ -150,11 +150,9 @@
   height: 18px !important;
   opacity: 0.8;
 }
-.account p.MuiTypography-root.input-error {
-  color: var(--env-var-color-24);
-  opacity: 0.8;
+.account span.MuiTypography-root.input-error {
   position: absolute;
-  top: calc(100% + 5px);
+  top: 100%;
 }
 .account .email-text-field,
 .account .password-text-field {

Client/src/Pages/Demo/Demo.jsx

@@ -512,7 +512,7 @@ const Demo = () => {
           placeholder="Create a password"
         />
         <Field
-          type="website"
+          type="url"
           label="Website"
           placeholder="google.com"
         />