From 2f2e5a27302801978b56de857b340d43bb2d7215 Mon Sep 17 00:00:00 2001
From: Uruk <contact@uruk.dev>
Date: Mon, 1 Sep 2025 16:00:04 +0200
Subject: [PATCH] feat: add customizable icon color to PasswordInput

Adds iconColor prop with white default to allow customization of the eye/eye-off toggle icon color.

Also simplifies top position class construction by using template literal instead of conditional logic.
---
 components/PasswordInput.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/PasswordInput.tsx b/components/PasswordInput.tsx
index 932d8287..90938ef9 100644
--- a/components/PasswordInput.tsx
+++ b/components/PasswordInput.tsx
@@ -27,6 +27,7 @@ interface PasswordInputProps {
     | "url"
     | "off";
   autoCorrect?: boolean;
+  iconColor?: string;
 }
 
 export const PasswordInput: React.FC<PasswordInputProps> = ({
@@ -44,6 +45,7 @@ export const PasswordInput: React.FC<PasswordInputProps> = ({
   editable = true,
   autoComplete,
   autoCorrect,
+  iconColor = "white",
 }) => {
   const { t } = useTranslation();
   const [internalShowPassword, setInternalShowPassword] = useState(false);
@@ -52,7 +54,8 @@ export const PasswordInput: React.FC<PasswordInputProps> = ({
   const showPassword = controlledShowPassword ?? internalShowPassword;
   const setShowPassword = onShowPasswordChange ?? setInternalShowPassword;
 
-  const topClass = topPosition === "4" ? "top-4" : "top-3.5";
+  // Construct Tailwind class from validated topPosition
+  const topClass = `top-${topPosition}`;
 
   return (
     <View className={`relative ${className}`}>
@@ -93,7 +96,7 @@ export const PasswordInput: React.FC<PasswordInputProps> = ({
         <Ionicons
           name={showPassword ? "eye-off" : "eye"}
           size={24}
-          color='white'
+          color={iconColor}
         />
       </TouchableOpacity>
     </View>