Onboarding flow

components/OutOfCreditsSheet.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Image, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { Language } from '../types';
 import { useColors } from '../constants/Colors';
@@ -97,8 +97,12 @@ export function OutOfCreditsSheet({ visible, language, colors, isPro = false, re
         <View style={[styles.sheet, { backgroundColor: colors.surface }]} accessibilityViewIsModal>
           <View style={[styles.handle, { backgroundColor: colors.border }]} />
           <View style={styles.iconWrap}>
-            <View style={[styles.iconCircle, { backgroundColor: colors.primarySoft }]}>
-              <Ionicons name="leaf-outline" size={34} color={colors.primary} />
+            <View style={[styles.iconCircle, { backgroundColor: colors.primarySoft, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' }]}>
+              <Image
+                source={require('../assets/icon.png')}
+                style={{ width: 44, height: 44, borderRadius: 10 }}
+                resizeMode="contain"
+              />
             </View>
             <View style={[styles.zeroBadge, { backgroundColor: colors.danger }]}>
               <Text style={styles.zeroBadgeText}>0</Text>