frontend: conditionally add padding when there's a password toggle
Parents:
35cadba1 file(s) changed
- frontend/components/ui/Input.tsx +3 -3
frontend/components/ui/Input.tsx
@@ -19,7 +19,7 @@ error?: string;
19 19 variant?: InputVariant;
20 20 }
21 21
22 - function useInputStyles(variant: InputVariant, error?: string) {
22 + function useInputStyles(variant: InputVariant, error?: string, hasPasswordToggle?: boolean) {
23 23 let backgroundColor = null;
24 24
25 25 const textColor = useThemeColor({}, 'text');
@@ -45,6 +45,7 @@ color: textColor,
45 45 backgroundColor: backgroundColor,
46 46 borderColor: error ? errorColor : borderColor,
47 47 borderWidth: isGhost || isDarkGhost ? 0 : 1,
48 + paddingRight: hasPasswordToggle ? 44 : 0
48 49 };
49 50
50 51 return { textColor, placeholderColor, errorColor, inputStyle };
@@ -70,7 +71,7 @@ textColor,
70 71 placeholderColor,
71 72 errorColor,
72 73 inputStyle
73 - } = useInputStyles(variant, error);
74 + } = useInputStyles(variant, error, showPasswordToggle);
74 75
75 76 const keyboardType = type === 'email' ? 'email-address' : 'default';
76 77 const secureTextEntry = type === 'password' && !showPassword;
@@ -194,7 +195,6 @@ },
194 195 input: {
195 196 height: 48,
196 197 paddingHorizontal: 12,
197 - paddingRight: 44,
198 198 borderWidth: 1,
199 199 borderRadius: 8,
200 200 fontSize: 16,