V2

Client/App.tsx

@@ -22,8 +22,8 @@ export default function App() {
     <>
       <AppNavigator />
       <StatusBar 
-        style="dark" 
-        backgroundColor="#F8FAFC"
+        style="light" 
+        backgroundColor="#1E293B"
         translucent={Platform.OS === 'android'}
       />
     </>

Client/app.json

@@ -2,25 +2,23 @@
   "expo": {
     "name": "Splitlyr",
     "slug": "splitlyr",
-    "version": "1.0.0",
+    "version": "2.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
     "backgroundColor": "#F8FAFC",
     "newArchEnabled": true,
     "splash": {
-      "image": "./assets/splash-icon.png",
-      "resizeMode": "contain"
+      "image": "./assets/icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#FFFFFF"
     },
     "android": {
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#F8FAFC"
-      },
+      "icon": "./assets/icon.png",
       "edgeToEdgeEnabled": true,
       "package": "com.clestiq.splitlyr.app",
       "predictiveBackGestureEnabled": false,
-      "versionCode": 1,
+      "versionCode": 2,
       "permissions": [
         "android.permission.READ_CONTACTS"
       ]

Client/package.json

@@ -1,11 +1,11 @@
 {
   "name": "splitlyr",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "main": "index.ts",
   "scripts": {
     "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
     "web": "expo start --web"
   },
   "dependencies": {

Client/src/components/AddPersonModal.tsx

@@ -124,6 +124,7 @@ const AddPersonModal: React.FC<AddPersonModalProps> = ({
                   value={name}
                   onChangeText={setName}
                   placeholder="Enter full name"
+                  placeholderTextColor={colors.text.quaternary}
                   autoCapitalize="words"
                 />
               </View>
@@ -135,6 +136,7 @@ const AddPersonModal: React.FC<AddPersonModalProps> = ({
                   value={email}
                   onChangeText={setEmail}
                   placeholder="Enter email address"
+                  placeholderTextColor={colors.text.quaternary}
                   keyboardType="email-address"
                   autoCapitalize="none"
                 />
@@ -147,6 +149,7 @@ const AddPersonModal: React.FC<AddPersonModalProps> = ({
                   value={phoneNumber}
                   onChangeText={setPhoneNumber}
                   placeholder="Enter phone number"
+                  placeholderTextColor={colors.text.quaternary}
                   keyboardType="phone-pad"
                 />
               </View>
@@ -224,6 +227,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 12,
     fontSize: 16,
+    color: colors.text.primary,
     borderWidth: 1,
     borderColor: colors.border.medium,
   },

Client/src/screens/friends/AddExpenseScreen.tsx

@@ -8,11 +8,10 @@ import {
     TextInput,
     ActivityIndicator,
     Alert,
-    StatusBar,
     Image,
 } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
-import { useSafeAreaInsets, SafeAreaView } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import colors from '../../theme/colors';
 import { getProfileImageUri } from '../../utils/defaultImage';
@@ -394,11 +393,9 @@ const AddExpenseScreen: React.FC = () => {
     };
 
     return (
-        <SafeAreaView style={styles.container}>
-            <StatusBar backgroundColor={colors.background.body} barStyle="dark-content" />
-
+        <View style={styles.container}>
             {/* Header */}
-            <View style={[styles.header, { paddingTop: insets.top - 16 }]}>
+            <View style={[styles.header, { paddingTop: insets.top + 15 }]}>
                 <TouchableOpacity
                     style={styles.backButton}
                     onPress={() => navigation.goBack()}
@@ -470,6 +467,7 @@ const AddExpenseScreen: React.FC = () => {
                                 <TextInput
                                     style={styles.searchInput}
                                     placeholder="Search friends..."
+                                    placeholderTextColor={colors.text.quaternary}
                                     value={searchQuery}
                                     onChangeText={setSearchQuery}
                                     autoFocus
@@ -520,6 +518,7 @@ const AddExpenseScreen: React.FC = () => {
                         <TextInput
                             style={styles.textInput}
                             placeholder="Enter expense title"
+                            placeholderTextColor={colors.text.quaternary}
                             value={title}
                             onChangeText={setTitle}
                             maxLength={100}
@@ -531,6 +530,7 @@ const AddExpenseScreen: React.FC = () => {
                         <TextInput
                             style={[styles.textInput, styles.textArea]}
                             placeholder="Add a description (optional)"
+                            placeholderTextColor={colors.text.quaternary}
                             value={description}
                             onChangeText={setDescription}
                             multiline
@@ -546,6 +546,7 @@ const AddExpenseScreen: React.FC = () => {
                             <TextInput
                                 style={styles.amountInput}
                                 placeholder="0.00"
+                                placeholderTextColor={colors.text.quaternary}
                                 value={amount}
                                 onChangeText={setAmount}
                                 keyboardType="decimal-pad"
@@ -672,6 +673,7 @@ const AddExpenseScreen: React.FC = () => {
                                                     onChangeText={(value) => updateSplitPercentage(split.userId, value)}
                                                     keyboardType="decimal-pad"
                                                     placeholder="0"
+                                                    placeholderTextColor={colors.text.quaternary}
                                                 />
                                             ) : (
                                                 <TextInput
@@ -681,6 +683,7 @@ const AddExpenseScreen: React.FC = () => {
                                                     keyboardType="decimal-pad"
                                                     editable={splitType !== 'equal'}
                                                     placeholder="0"
+                                                    placeholderTextColor={colors.text.quaternary}
                                                 />
                                             )}
                                         </View>
@@ -707,7 +710,7 @@ const AddExpenseScreen: React.FC = () => {
                     )}
                 </TouchableOpacity>
             </View>
-        </SafeAreaView>
+        </View>
     );
 };
 

Client/src/screens/friends/AddFriendScreen.tsx

@@ -9,10 +9,9 @@ import {
   Alert,
   ActivityIndicator,
   Image,
-  StatusBar,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { useSafeAreaInsets, SafeAreaView } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import colors from '../../theme/colors';
 import { friendsService, Contact, AppUser } from '../../services/friends';
@@ -246,16 +245,10 @@ const AddFriendScreen: React.FC = () => {
     navigation.navigate('ReviewFriends', { pendingFriends });
   };
 
-
-
-
-
   return (
-    <SafeAreaView style={styles.container}>
-      <StatusBar backgroundColor={colors.background.body} barStyle="dark-content" />
-
+    <View style={styles.container}>
       {/* Header */}
-      <View style={[styles.header, { paddingTop: insets.top -1 }]}>
+      <View style={[styles.header, { paddingTop: insets.top + 15 }]}>
         <TouchableOpacity onPress={() => navigation.goBack()}>
           <Ionicons name="arrow-back" size={24} color={colors.text.primary} />
         </TouchableOpacity>
@@ -286,6 +279,7 @@ const AddFriendScreen: React.FC = () => {
                 <TextInput
                   style={styles.searchInput}
                   placeholder={pendingFriends.length > 0 ? "Add more..." : "Search by name, email, or phone"}
+                  placeholderTextColor={colors.text.quaternary}
                   value={searchQuery}
                   onChangeText={setSearchQuery}
                   multiline={false}
@@ -397,7 +391,7 @@ const AddFriendScreen: React.FC = () => {
         onSubmit={handleAddPersonModalSubmit}
         initialQuery={searchQuery}
       />
-    </SafeAreaView>
+    </View>
   );
 };