Refactored textfield component

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

@@ -0,0 +1,49 @@
+.field {
+  min-width: 250px;
+}
+.field h1.MuiTypography-root,
+.field h5.MuiTypography-root,
+.field input,
+.field .input-error {
+  font-size: var(--env-var-font-size-medium);
+}
+.field h1.MuiTypography-root,
+.field h5.MuiTypography-root,
+.field input {
+  color: var(--env-var-color-5);
+}
+.field h1.MuiTypography-root {
+  font-weight: 600;
+}
+.field h1.MuiTypography-root span {
+  color: var(--env-var-color-19);
+  margin-left: 1px;
+}
+.field h5.MuiTypography-root {
+  position: relative;
+  opacity: 0.8;
+  padding: var(--env-var-spacing-1-minus);
+  padding-left: 0;
+  border-right: solid 1px var(--env-var-color-29);
+}
+.field .MuiInputBase-root {
+  height: 39px;
+  padding-right: var(--env-var-spacing-1-minus);
+}
+.field input {
+  padding: 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;
+}
+.field:has(.input-error) .MuiOutlinedInput-root fieldset {
+  border-color: #fda29b;
+}

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

@@ -0,0 +1,93 @@
+import { useTheme } from "@emotion/react";
+import {
+  IconButton,
+  InputAdornment,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
+import Visibility from "@mui/icons-material/Visibility";
+import "./index.css";
+
+const Field = ({
+  type,
+  id,
+  label,
+  isRequired,
+  isVisible,
+  setVisibility,
+  autoComplete,
+  placeholder,
+  value,
+  onChange,
+  error,
+  disabled,
+}) => {
+  const theme = useTheme();
+
+  return (
+    <Stack gap={theme.gap.xs} className={`field field-${type}`}>
+      {label && (
+        <Typography component="h1">
+          {label}
+          {isRequired ? <span>*</span> : ""}
+        </Typography>
+      )}
+      <TextField
+        type={
+          type === "password"
+            ? isVisible
+              ? "text"
+              : type
+            : type === "website"
+            ? "text"
+            : 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>
+                ),
+              }
+        }
+      />
+      {error && (
+        <Typography component="p" className="input-error" mt={theme.gap.xs}>
+          {error}
+        </Typography>
+      )}
+    </Stack>
+  );
+};
+
+export default Field;