Onboarding

app/auth/login.tsx

@@ -14,18 +14,25 @@ import {
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { Ionicons } from '@expo/vector-icons';
 import { router } from 'expo-router';
-import { useApp } from '../../context/AppContext';
-import { useColors } from '../../constants/Colors';
-import { ThemeBackdrop } from '../../components/ThemeBackdrop';
+import { useApp } from '../../context/AppContext';
+import { useColors } from '../../constants/Colors';
 import { AuthService } from '../../services/authService';
 import * as AppleAuthentication from 'expo-apple-authentication';
 import Constants from 'expo-constants';
 import { usePostHog } from 'posthog-react-native';
 
+const ONBOARDING_AUTH_BACKGROUND = {
+  light: '#fbfaf3',
+  dark: '#0a110b',
+};
+
 export default function LoginScreen() {
   const { isDarkMode, colorPalette, hydrateSession, t } = useApp();
   const colors = useColors(isDarkMode, colorPalette);
   const posthog = usePostHog();
+  const screenBackground = isDarkMode
+    ? ONBOARDING_AUTH_BACKGROUND.dark
+    : ONBOARDING_AUTH_BACKGROUND.light;
 
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -112,7 +119,7 @@ export default function LoginScreen() {
         await AsyncStorage.setItem('greenlens_show_tour', 'true');
       }
       posthog.capture('apple_login_succeeded', { surface: 'login' });
-      router.replace(session.isNewUser ? '/profile/billing' : '/(tabs)');
+      router.replace(session.isNewUser ? '/onboarding/source' : '/(tabs)');
     } catch (e: any) {
       if (e?.code === 'ERR_REQUEST_CANCELED') {
         return;
@@ -130,21 +137,26 @@ export default function LoginScreen() {
   };
 
   return (
-    <KeyboardAvoidingView
-      style={[styles.flex, { backgroundColor: colors.background }]}
-      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-    >
-      <ThemeBackdrop colors={colors} />
-      <ScrollView
+    <KeyboardAvoidingView
+      style={[styles.flex, { backgroundColor: screenBackground }]}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
+      <ScrollView
         contentContainerStyle={styles.scroll}
         keyboardShouldPersistTaps="handled"
         showsVerticalScrollIndicator={false}
       >
-        {/* Logo / Header */}
-        <View style={styles.header}>
-          <Image
-            source={require('../../assets/icon.png')}
-            style={styles.logoIcon}
+        {/* Logo / Header */}
+        <View style={styles.header}>
+          <TouchableOpacity
+            style={[styles.backBtn, { backgroundColor: colors.surface, borderColor: colors.border }]}
+            onPress={() => router.back()}
+          >
+            <Ionicons name="arrow-back" size={20} color={colors.text} />
+          </TouchableOpacity>
+          <Image
+            source={require('../../assets/icon.png')}
+            style={styles.logoIcon}
             resizeMode="contain"
           />
           <Text style={[styles.appName, { color: colors.text }]}>GreenLens</Text>
@@ -274,16 +286,27 @@ const styles = StyleSheet.create({
     paddingHorizontal: 24,
     paddingVertical: 48,
   },
-  header: {
-    alignItems: 'center',
-    marginBottom: 32,
-  },
-  logoIcon: {
-    width: 56,
-    height: 56,
-    borderRadius: 14,
-    marginBottom: 16,
-  },
+  header: {
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+  backBtn: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    borderWidth: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  logoIcon: {
+    width: 84,
+    height: 84,
+    borderRadius: 20,
+    marginBottom: 16,
+  },
   appName: {
     fontSize: 30,
     fontWeight: '700',