Update HiddenField mobile app UI (#1404)

apps/mobile-app/components/form/HiddenField.tsx

@@ -1,11 +1,10 @@
 import MaterialIcons from '@expo/vector-icons/MaterialIcons';
 import React, { useState } from 'react';
-import { View, TextInput, StyleSheet } from 'react-native';
+import { View, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
 
 import { useColors } from '@/hooks/useColorScheme';
 
 import { ThemedText } from '@/components/themed/ThemedText';
-import { RobustPressable } from '@/components/ui/RobustPressable';
 
 type HiddenFieldProps = {
   /** Field label */
@@ -26,7 +25,7 @@ type HiddenFieldProps = {
 
 /**
  * A form field for hidden/masked values like CVV, PIN, etc.
- * Includes a show/hide toggle button.
+ * Includes a show/hide toggle button inside the input field.
  */
 export const HiddenField: React.FC<HiddenFieldProps> = ({
   label,
@@ -45,25 +44,24 @@ export const HiddenField: React.FC<HiddenFieldProps> = ({
       marginBottom: 0,
     },
     input: {
-      backgroundColor: colors.background,
-      borderColor: colors.accentBorder,
-      borderRadius: 8,
-      borderWidth: 1,
       color: colors.text,
       flex: 1,
       fontSize: 16,
-      paddingHorizontal: 12,
+      paddingHorizontal: 10,
       paddingVertical: 10,
     },
     inputContainer: {
       alignItems: 'center',
+      backgroundColor: colors.background,
+      borderColor: colors.accentBorder,
+      borderRadius: 6,
+      borderWidth: 1,
       flexDirection: 'row',
     },
     label: {
-      color: colors.text,
-      fontSize: 14,
-      fontWeight: '600',
-      marginBottom: 6,
+      color: colors.textMuted,
+      fontSize: 12,
+      marginBottom: 4,
     },
     labelContainer: {
       alignItems: 'center',
@@ -74,8 +72,12 @@ export const HiddenField: React.FC<HiddenFieldProps> = ({
       padding: 4,
     },
     toggleButton: {
-      marginLeft: 8,
-      padding: 8,
+      alignItems: 'center',
+      borderLeftColor: colors.accentBorder,
+      borderLeftWidth: 1,
+      justifyContent: 'center',
+      paddingHorizontal: 12,
+      paddingVertical: 10,
     },
   });
 
@@ -84,9 +86,13 @@ export const HiddenField: React.FC<HiddenFieldProps> = ({
       <View style={styles.labelContainer}>
         <ThemedText style={styles.label}>{label}</ThemedText>
         {onRemove && (
-          <RobustPressable onPress={onRemove} style={styles.removeButton}>
+          <TouchableOpacity
+            style={styles.removeButton}
+            onPress={onRemove}
+            activeOpacity={0.7}
+          >
             <MaterialIcons name="close" size={18} color={colors.textMuted} />
-          </RobustPressable>
+          </TouchableOpacity>
         )}
       </View>
       <View style={styles.inputContainer}>
@@ -103,16 +109,17 @@ export const HiddenField: React.FC<HiddenFieldProps> = ({
           testID={testID}
           accessibilityLabel={testID}
         />
-        <RobustPressable
-          onPress={() => setIsVisible(!isVisible)}
+        <TouchableOpacity
           style={styles.toggleButton}
+          onPress={() => setIsVisible(!isVisible)}
+          activeOpacity={0.7}
         >
           <MaterialIcons
-            name={isVisible ? 'visibility' : 'visibility-off'}
-            size={24}
-            color={colors.textMuted}
+            name={isVisible ? 'visibility-off' : 'visibility'}
+            size={20}
+            color={colors.primary}
           />
-        </RobustPressable>
+        </TouchableOpacity>
       </View>
     </View>
   );