Fix Settings screen React Native Web compatibility

Issues Fixed:
1. Alert.alert() with button arrays doesn't work on React Native Web
   - Created FontSizeModal to replace Alert-based font size selector
   - Simplified biometric toggle to avoid confirmation dialog with buttons

2. TypeScript errors with modal props
   - Removed invalid onAccept prop from TermsOfServiceModal and PrivacyPolicyModal calls

3. Web compatibility improvements
   - All interactive elements now use proper modals or simple alerts
   - Font size selection shows professional modal with preview
   - Biometric auth directly prompts for authentication

Files Changed:
- src/screens/SettingsScreen.tsx: Fixed Alert.alert() usage, added FontSizeModal
- src/components/FontSizeModal.tsx: NEW - Professional font size selector
- PHASE_1_COMPLETE.md: Updated documentation with fixes

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

mobile/src/screens/SettingsScreen.tsx

@@ -17,6 +17,7 @@ import TermsOfServiceModal from '../components/TermsOfServiceModal';
 import PrivacyPolicyModal from '../components/PrivacyPolicyModal';
 import EmailNotificationsModal from '../components/EmailNotificationsModal';
 import ChangePasswordModal from '../components/ChangePasswordModal';
+import FontSizeModal from '../components/FontSizeModal';
 import { useTheme } from '../contexts/ThemeContext';
 import { useBiometricAuth } from '../contexts/BiometricAuthContext';
 import { useAuth } from '../contexts/AuthContext';
@@ -36,10 +37,19 @@ const SettingsScreen: React.FC = () => {
   const [showPrivacy, setShowPrivacy] = useState(false);
   const [showEmailPrefs, setShowEmailPrefs] = useState(false);
   const [showChangePassword, setShowChangePassword] = useState(false);
+  const [showFontSize, setShowFontSize] = useState(false);
 
   // Create styles with current theme colors
   const styles = React.useMemo(() => createStyles(colors), [colors]);
 
+  React.useEffect(() => {
+    console.log('[Settings] Screen mounted');
+    console.log('[Settings] isDarkMode:', isDarkMode);
+    console.log('[Settings] fontSize:', fontSize);
+    console.log('[Settings] isBiometricEnabled:', isBiometricEnabled);
+    console.log('[Settings] styles:', styles ? 'DEFINED' : 'UNDEFINED');
+  }, []);
+
   const handleBiometryToggle = async (value: boolean) => {
     if (value) {
       // Check if biometric is available
@@ -51,24 +61,13 @@ const SettingsScreen: React.FC = () => {
         return;
       }
 
-      Alert.alert(
-        t('biometricAuth'),
-        t('settingsScreen.biometricAlerts.prompt'),
-        [
-          { text: t('common.cancel'), style: 'cancel' },
-          {
-            text: t('common.confirm'),
-            onPress: async () => {
-              const success = await enableBiometric();
-              if (success) {
-                Alert.alert(t('settingsScreen.biometricAlerts.successTitle'), t('settingsScreen.biometricAlerts.enabled'));
-              } else {
-                Alert.alert('Error', 'Failed to enable biometric authentication. Please try again.');
-              }
-            },
-          },
-        ]
-      );
+      // Try to enable biometric directly
+      const success = await enableBiometric();
+      if (success) {
+        Alert.alert(t('settingsScreen.biometricAlerts.successTitle'), t('settingsScreen.biometricAlerts.enabled'));
+      } else {
+        Alert.alert('Error', 'Failed to enable biometric authentication. Please try again.');
+      }
     } else {
       await disableBiometric();
       Alert.alert(t('settingsScreen.biometricAlerts.successTitle'), t('settingsScreen.biometricAlerts.disabled'));
@@ -88,7 +87,13 @@ const SettingsScreen: React.FC = () => {
     onPress: () => void;
     showArrow?: boolean;
   }) => (
-    <TouchableOpacity style={styles.settingItem} onPress={onPress}>
+    <TouchableOpacity
+      style={styles.settingItem}
+      onPress={() => {
+        console.log(`[Settings] Button pressed: ${title}`);
+        onPress();
+      }}
+    >
       <View style={styles.settingIcon}>
         <Text style={styles.settingIconText}>{icon}</Text>
       </View>
@@ -162,27 +167,7 @@ const SettingsScreen: React.FC = () => {
             icon="📏"
             title="Font Size"
             subtitle={`Current: ${fontSize.charAt(0).toUpperCase() + fontSize.slice(1)}`}
-            onPress={() => {
-              Alert.alert(
-                'Font Size',
-                'Choose your preferred font size',
-                [
-                  {
-                    text: 'Small',
-                    onPress: async () => await setFontSize('small'),
-                  },
-                  {
-                    text: 'Medium',
-                    onPress: async () => await setFontSize('medium'),
-                  },
-                  {
-                    text: 'Large',
-                    onPress: async () => await setFontSize('large'),
-                  },
-                  { text: t('common.cancel'), style: 'cancel' },
-                ]
-              );
-            }}
+            onPress={() => setShowFontSize(true)}
           />
         </View>
 
@@ -274,13 +259,11 @@ const SettingsScreen: React.FC = () => {
       <TermsOfServiceModal
         visible={showTerms}
         onClose={() => setShowTerms(false)}
-        onAccept={() => setShowTerms(false)}
       />
 
       <PrivacyPolicyModal
         visible={showPrivacy}
         onClose={() => setShowPrivacy(false)}
-        onAccept={() => setShowPrivacy(false)}
       />
 
       <EmailNotificationsModal
@@ -292,6 +275,11 @@ const SettingsScreen: React.FC = () => {
         visible={showChangePassword}
         onClose={() => setShowChangePassword(false)}
       />
+
+      <FontSizeModal
+        visible={showFontSize}
+        onClose={() => setShowFontSize(false)}
+      />
     </SafeAreaView>
   );
 };