fix: force input text color to black for dark mode visibility

formulus/src/screens/SettingsScreen.tsx

@@ -15,7 +15,7 @@ import {SafeAreaView} from 'react-native-safe-area-context';
 import {useNavigation} from '@react-navigation/native';
 import {BottomTabNavigationProp} from '@react-navigation/bottom-tabs';
 import * as Keychain from 'react-native-keychain';
-import {login} from '../api/synkronus/Auth';
+import {login, getUserInfo, UserInfo} from '../api/synkronus/Auth';
 import {serverConfigService} from '../services/ServerConfigService';
 import QRScannerModal from '../components/QRScannerModal';
 import {QRSettingsService} from '../services/QRSettingsService';
@@ -25,6 +25,7 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {ToastService} from '../services/ToastService';
 import {serverSwitchService} from '../services/ServerSwitchService';
 import {syncService} from '../services/SyncService';
+import { tokens } from '@ode/tokens/dist/react-native/tokens';
 
 type SettingsScreenNavigationProp = BottomTabNavigationProp<
   MainTabParamList,
@@ -40,6 +41,7 @@ const SettingsScreen = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [isLoggingIn, setIsLoggingIn] = useState(false);
   const [showQRScanner, setShowQRScanner] = useState(false);
+  const [_loggedInUser, setLoggedInUser] = useState<UserInfo | null>(null);
 
   useEffect(() => {
     loadSettings();
@@ -96,15 +98,15 @@ const SettingsScreen = () => {
             ? [
                 {
                   text: 'Cancel',
-                  style: 'cancel' as const,
+                  style: 'cancel',
                   onPress: () => {
                     setServerUrl(initialServerUrl);
                     resolve(false);
                   },
                 },
                 {
                   text: 'Proceed without syncing',
-                  style: 'destructive' as const,
+                  style: 'destructive',
                   onPress: () => {
                     (async () => {
                       try {
@@ -137,15 +139,15 @@ const SettingsScreen = () => {
             : [
                 {
                   text: 'Cancel',
-                  style: 'cancel' as const,
+                  style: 'cancel',
                   onPress: () => {
                     setServerUrl(initialServerUrl);
                     resolve(false);
                   },
                 },
                 {
                   text: 'Yes, wipe & switch',
-                  style: 'destructive' as const,
+                  style: 'destructive',
                   onPress: () => {
                     (async () => {
                       try {
@@ -187,6 +189,9 @@ const SettingsScreen = () => {
         setUsername(credentials.username);
         setPassword(credentials.password);
       }
+
+      const userInfo = await getUserInfo();
+      setLoggedInUser(userInfo);
     } catch (error) {
       console.error('Failed to load settings:', error);
     } finally {
@@ -207,7 +212,8 @@ const SettingsScreen = () => {
     setIsLoggingIn(true);
     try {
       await Keychain.setGenericPassword(username, password);
-      await login(username, password);
+      const userInfo = await login(username, password);
+      setLoggedInUser(userInfo);
       ToastService.showShort('Successfully logged in!');
       navigation.navigate('Home');
     } catch (error: any) {
@@ -250,7 +256,8 @@ const SettingsScreen = () => {
             settings.password,
           );
           try {
-            await login(settings.username, settings.password);
+            const userInfo = await login(settings.username, settings.password);
+            setLoggedInUser(userInfo);
             ToastService.showShort('Successfully logged in!');
             navigation.navigate('Home');
           } catch (error: any) {
@@ -350,36 +357,24 @@ const SettingsScreen = () => {
           />
         </View>
 
-        {(() => {
-          const isFieldsEmpty =
-            !serverUrl.trim() || !username.trim() || !password.trim();
-          const isButtonDisabled = isFieldsEmpty || isLoggingIn;
-
-          return (
-            <TouchableOpacity
-              style={[
-                styles.nextButton,
-                isButtonDisabled && styles.nextButtonDisabled,
-              ]}
-              onPress={handleLogin}
-              disabled={!!isButtonDisabled}>
-              <Icon
-                name="arrow-right"
-                size={20}
-                color={
-                  isButtonDisabled ? colors.neutral[500] : colors.neutral.white
-                }
-              />
-              <Text
-                style={[
-                  styles.nextButtonText,
-                  isButtonDisabled && styles.nextButtonTextDisabled,
-                ]}>
-                {isLoggingIn ? 'Logging in...' : 'Login'}
-              </Text>
-            </TouchableOpacity>
-          );
-        })()}
+        <TouchableOpacity
+          style={[
+            styles.nextButton,
+            (!serverUrl.trim() || !username.trim() || !password.trim()) &&
+              styles.nextButtonDisabled,
+          ]}
+          onPress={handleLogin}
+          disabled={
+            !serverUrl.trim() ||
+            !username.trim() ||
+            !password.trim() ||
+            isLoggingIn
+          }>
+          <Icon name="arrow-right" size={20} color={colors.neutral[500]} />
+          <Text style={styles.nextButtonText}>
+            {isLoggingIn ? 'Logging in...' : 'Login'}
+          </Text>
+        </TouchableOpacity>
       </ScrollView>
 
       <QRScannerModal
@@ -456,7 +451,7 @@ const styles = StyleSheet.create({
     height: 56,
     paddingHorizontal: 12,
     fontSize: 16,
-    color: colors.neutral[900],
+    color: tokens.color.neutral.black,
     backgroundColor: 'transparent',
   },
   qrButton: {
@@ -469,7 +464,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     height: 56,
     borderRadius: 8,
-    backgroundColor: colors.brand.primary[500],
+    backgroundColor: colors.neutral[200],
     justifyContent: 'center',
     alignItems: 'center',
     gap: 8,
@@ -484,9 +479,6 @@ const styles = StyleSheet.create({
   nextButtonText: {
     fontSize: 16,
     fontWeight: '600',
-    color: colors.neutral.white,
-  },
-  nextButtonTextDisabled: {
     color: colors.neutral[500],
   },
 });