From f51242959af5cf93af0d6d519b756c0e7de2f004 Mon Sep 17 00:00:00 2001
From: Nicola Benaglia <nico.benaz@gmail.com>
Date: Sun, 6 Apr 2025 21:08:11 +0200
Subject: [PATCH] Add theme parameter

---
 .../PasswordField/PasswordField.tsx           | 134 +++++++++++-------
 1 file changed, 82 insertions(+), 52 deletions(-)

diff --git a/src/components/PasswordField/PasswordField.tsx b/src/components/PasswordField/PasswordField.tsx
index 89bc8b4..0c3e8b7 100644
--- a/src/components/PasswordField/PasswordField.tsx
+++ b/src/components/PasswordField/PasswordField.tsx
@@ -1,67 +1,97 @@
-import { Button, ButtonBase, InputAdornment, TextField, TextFieldProps, styled } from "@mui/material";
-import { forwardRef, useState } from 'react'
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-export const CustomInput = styled(TextField)({
-    width: "183px", // Adjust the width as needed
+import {
+  ButtonBase,
+  InputAdornment,
+  TextField,
+  TextFieldProps,
+  styled,
+} from "@mui/material";
+import { forwardRef, useState } from "react";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+
+export const CustomInput = styled(TextField)(({ theme }) => ({
+    width: "183px",
     borderRadius: "5px",
-    // backgroundColor: "rgba(30, 30, 32, 1)",
+    backgroundColor: theme.palette.background.paper,
     outline: "none",
     input: {
-        fontSize: 10,
-        fontFamily: "Inter",
-        fontWeight: 400,
-        color: "white",
-        "&::placeholder": {
-            fontSize: 16,
-            color: "rgba(255, 255, 255, 0.2)",
-        },
-        outline: "none",
-        padding: "10px",
+      fontSize: 10,
+      fontFamily: "Inter",
+      fontWeight: 400,
+      color: theme.palette.text.primary,
+      "&::placeholder": {
+        fontSize: 16,
+        color: theme.palette.text.disabled,
+      },
+      outline: "none",
+      padding: "10px",
     },
     "& .MuiOutlinedInput-root": {
-        "& fieldset": {
-            border: '0.5px solid rgba(255, 255, 255, 0.5)',
-        },
-        "&:hover fieldset": {
-            border: '0.5px solid rgba(255, 255, 255, 0.5)',
-        },
-        "&.Mui-focused fieldset": {
-            border: '0.5px solid rgba(255, 255, 255, 0.5)',
-        },
+      "& fieldset": {
+        border: `0.5px solid ${theme.palette.divider}`,
+      },
+      "&:hover fieldset": {
+        border: `0.5px solid ${theme.palette.divider}`,
+      },
+      "&.Mui-focused fieldset": {
+        border: `0.5px solid ${theme.palette.divider}`,
+      },
     },
     "& .MuiInput-underline:before": {
-        borderBottom: "none",
+      borderBottom: "none",
     },
     "& .MuiInput-underline:hover:not(.Mui-disabled):before": {
-        borderBottom: "none",
+      borderBottom: "none",
     },
     "& .MuiInput-underline:after": {
-        borderBottom: "none",
+      borderBottom: "none",
     },
-});
+  }));
 
-
-export const PasswordField = forwardRef<HTMLInputElement, TextFieldProps>( ({ ...props }, ref) => {
+export const PasswordField = forwardRef<HTMLInputElement, TextFieldProps>(
+  ({ ...props }, ref) => {
     const [canViewPassword, setCanViewPassword] = useState(false);
     return (
-            <CustomInput
-                type={canViewPassword ? 'text' : 'password'}
-                InputProps={{
-                    endAdornment: (
-                        <InputAdornment position="end" data-testid="toggle-view-password-btn" onClick={() => {
-                            setCanViewPassword((prevState) => !prevState)
-                        }}>
-                            {canViewPassword ? <ButtonBase data-testid="plain-text-indicator" sx={{ minWidth: 0, p: 0 }}><VisibilityOffIcon sx={{
-                                color: 'white'
-                            }}/></ButtonBase> : <ButtonBase data-testid="password-text-indicator" sx={{ minWidth: 0, p: 0 }}><VisibilityIcon sx={{
-                                color: 'white'
-                            }} /></ButtonBase>}
-                        </InputAdornment>
-                    )
-                }}
-                inputRef={ref}
-                {...props}
-            />
-    )
-});
\ No newline at end of file
+      <CustomInput
+        type={canViewPassword ? "text" : "password"}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment
+              position="end"
+              data-testid="toggle-view-password-btn"
+              onClick={() => {
+                setCanViewPassword((prevState) => !prevState);
+              }}
+            >
+              {canViewPassword ? (
+                <ButtonBase
+                  data-testid="plain-text-indicator"
+                  sx={{ minWidth: 0, p: 0 }}
+                >
+                  <VisibilityOffIcon
+                    sx={{
+                      color: "white",
+                    }}
+                  />
+                </ButtonBase>
+              ) : (
+                <ButtonBase
+                  data-testid="password-text-indicator"
+                  sx={{ minWidth: 0, p: 0 }}
+                >
+                  <VisibilityIcon
+                    sx={{
+                      color: "white",
+                    }}
+                  />
+                </ButtonBase>
+              )}
+            </InputAdornment>
+          ),
+        }}
+        inputRef={ref}
+        {...props}
+      />
+    );
+  }
+);