@oxyhq/services 19.0.0 → 19.1.0

package/src/ui/screens/HistoryViewScreen.tsx

@@ -3,8 +3,8 @@ import { View, ScrollView } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '@oxyhq/bloom';
 import Header from '../components/Header';
-import LoadingState from '../components/LoadingState';
-import EmptyState from '../components/EmptyState';
+import { Loading } from '@oxyhq/bloom/loading';
+import { Text } from '@oxyhq/bloom/typography';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
@@ -110,8 +110,8 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
                         />
                     </SettingsListGroup>
                     <SettingsListGroup title={t('history.recent') || 'Recent History'}>
-                        {isLoading ? <LoadingState message={t('history.loading') || 'Loading history...'} color={bloomTheme.colors.text} />
-                         : history.length === 0 ? <EmptyState message={t('history.empty') || 'No history yet'} textColor={bloomTheme.colors.text} />
+                        {isLoading ? <Loading size="large" color={bloomTheme.colors.text} text={t('history.loading') || 'Loading history...'} />
+                         : history.length === 0 ? <Text className="text-text-secondary text-center p-space-40">{t('history.empty') || 'No history yet'}</Text>
                          : history.map(item => (
                             <SettingsListItem
                                 key={item.id}

package/src/ui/screens/LanguageSelectorScreen.tsx

@@ -111,7 +111,6 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
             <Header
                 title=""
                 subtitle=""
-                theme={normalizedTheme}
                 onBack={onClose || goBack}
                 variant="minimal"
                 elevation="none"

package/src/ui/screens/LegalDocumentsScreen.tsx

@@ -6,7 +6,7 @@ import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list'
 import { logger } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
 import Header from '../components/Header';
-import LoadingState from '../components/LoadingState';
+import { Loading } from '@oxyhq/bloom/loading';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 
@@ -114,9 +114,10 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
                     variant="minimal"
                     elevation="subtle"
                 />
-                <LoadingState
-                    message={t('legal.opening') || 'Opening document...'}
+                <Loading
+                    size="large"
                     color={bloomTheme.colors.text}
+                    text={t('legal.opening') || 'Opening document...'}
                 />
             </View>
         );

package/src/ui/screens/ManageAccountScreen.tsx

@@ -5,14 +5,13 @@ import {
     ScrollView,
     StyleSheet,
     ActivityIndicator,
-    TouchableOpacity,
     RefreshControl,
     Platform,
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { H4, Text } from '@oxyhq/bloom/typography';
+import { Text } from '@oxyhq/bloom/typography';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import {
     getAccountDisplayName,
@@ -22,7 +21,7 @@ import {
 } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
 import Header from '../components/Header';
-import Avatar from '../components/Avatar';
+import ProfileSummaryCard from '../components/ProfileSummaryCard';
 import { SettingsIcon } from '../components/SettingsIcon';
 import DeleteAccountModal from '../components/modals/DeleteAccountModal';
 import { useOxy } from '../context/OxyContext';
@@ -340,36 +339,18 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
                 }
             >
                 {/* Profile card */}
-                <View className="items-center bg-fill-secondary rounded-radius-20 px-space-20 py-space-24 mb-space-16">
-                    <TouchableOpacity
-                        onPress={openAvatarPicker}
-                        accessibilityRole="button"
-                        accessibilityLabel={t('editProfile.changeAvatar') || 'Change avatar'}
-                        style={styles.avatarTouchable}
-                        className="mb-space-12"
-                    >
-                        <Avatar uri={avatarUri} name={displayName} size={AVATAR_SIZE} />
-                        <View
-                            style={styles.avatarBadge}
-                            className="bg-fill-brand border-border-image"
-                        >
-                            <Ionicons name="camera" size={14} color={bloomTheme.colors.primaryForeground} />
-                        </View>
-                    </TouchableOpacity>
-                    <H4 className="text-text" numberOfLines={1}>
-                        {displayName}
-                    </H4>
-                    {handle ? (
-                        <Text className="text-text-secondary text-sm mt-space-2" numberOfLines={1}>
-                            {user?.username ? `@${handle}` : handle}
-                        </Text>
-                    ) : null}
-                    {user?.email ? (
-                        <Text className="text-text-secondary text-sm mt-space-2" numberOfLines={1}>
-                            {user.email}
-                        </Text>
-                    ) : null}
-                </View>
+                <ProfileSummaryCard
+                    displayName={displayName}
+                    avatarUri={avatarUri}
+                    avatarSize={AVATAR_SIZE}
+                    onAvatarPress={openAvatarPicker}
+                    showCameraBadge
+                    avatarAccessibilityLabel={t('editProfile.changeAvatar') || 'Change avatar'}
+                    lines={[
+                        handle ? (user?.username ? `@${handle}` : handle) : null,
+                        user?.email || null,
+                    ]}
+                />
 
                 {/* Profile section */}
                 <SettingsListGroup title={t('manageAccount.sections.profile') || 'Profile'}>
@@ -1016,20 +997,6 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
     },
-    avatarTouchable: {
-        position: 'relative',
-    },
-    avatarBadge: {
-        position: 'absolute',
-        right: 0,
-        bottom: 0,
-        width: 28,
-        height: 28,
-        borderRadius: 14,
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderWidth: 2,
-    },
     footerSpacer: {
         height: 24,
     },

package/src/ui/screens/PaymentGatewayScreen.tsx

@@ -8,8 +8,6 @@ import {
     useWindowDimensions,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { useThemeColors } from '../styles/theme';
-import { normalizeTheme } from '@oxyhq/core';
 import { Button } from '@oxyhq/bloom/button';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { H4 } from '@oxyhq/bloom/typography';
@@ -45,7 +43,6 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
     const {
         navigate,
         goBack,
-        theme,
         onPaymentResult,
         amount,
         currency = 'FAIR',
@@ -76,11 +73,10 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
     const scaleAnim = useRef(new Animated.Value(1)).current;
     const progressAnim = useRef(new Animated.Value(0.2)).current;
 
-    const normalizedTheme = normalizeTheme(theme);
-    // `colors` (PaymentColors) is the contract the wizard step components consume.
-    const colors = useThemeColors(normalizedTheme);
-    // Bloom theme drives screen-shell icon roles (no hardcoded hex).
+    // Bloom theme drives all payment colors — the wizard step components consume
+    // `colors` (PaymentColors === bloom ThemeColors) directly, no mapper.
     const bloomTheme = useTheme();
+    const colors = bloomTheme.colors;
     const { t } = useI18n();
 
     // Determine if the payment is for a recurring item (subscription)

package/src/ui/screens/PremiumSubscriptionScreen.tsx

@@ -6,6 +6,8 @@ import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Button } from '@oxyhq/bloom/button';
 import { Chip } from '@oxyhq/bloom/chip';
+import { Badge } from '@oxyhq/bloom/badge';
+import { Card, CardBody } from '@oxyhq/bloom/card';
 import { H2, H4, H5, Text } from '@oxyhq/bloom/typography';
 import { BenefitList, BenefitRow } from '@oxyhq/bloom/benefit-list';
 import {
@@ -568,7 +570,8 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                     {t('premium.current.title') || 'Current Subscription'}
                 </H5>
 
-                <View className="bg-fill border border-border-image rounded-radius-20 p-space-20 shadow-s">
+                <Card variant="outlined">
+                  <CardBody style={{ padding: 20 }}>
                     <View className="flex-row justify-between items-start mb-space-12">
                         <View className="flex-1 pr-space-12">
                             <H4 className="text-text" numberOfLines={1}>{currentPlan.name}</H4>
@@ -576,9 +579,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                                 {`$${currentPlan.price}/month`}
                             </Text>
                         </View>
-                        <Chip variant="soft" color={statusChipColor} size="small">
-                            {subscription.status.toUpperCase()}
-                        </Chip>
+                        <Badge variant="subtle" color={statusChipColor} size="large" content={subscription.status.toUpperCase()} />
                     </View>
 
                     <Text className="text-text-secondary text-sm mb-space-16">
@@ -624,7 +625,8 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                             {t('premium.actions.manageBilling') || 'Manage Billing'}
                         </Button>
                     </View>
-                </View>
+                  </CardBody>
+                </Card>
             </View>
         );
     };
@@ -689,31 +691,29 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         const availability = getAvailabilityStatus();
 
         return (
-            <View
+            <Card
                 key={plan.id}
-                className={`bg-fill border border-border-image rounded-radius-20 p-space-20 mb-space-16 shadow-s ${!availability.available ? 'opacity-60' : ''}`}
-                style={
-                    isSelected || plan.isPopular
-                        ? { borderColor: colors.primary, borderWidth: 2 }
-                        : undefined
-                }
+                variant="outlined"
+                style={[
+                    { marginBottom: 16 },
+                    !availability.available ? { opacity: 0.6 } : null,
+                    (isSelected || plan.isPopular) ? { borderColor: colors.primary, borderWidth: 2 } : null,
+                ]}
             >
+              <CardBody style={{ padding: 20 }}>
                 <View className="flex-row flex-wrap gap-space-8 mb-space-12">
                     {plan.isPopular && (
-                        <Chip variant="solid" color="primary" size="small">
-                            {t('premium.plan.badge.mostPopular') || 'Most Popular'}
-                        </Chip>
+                        <Badge variant="solid" color="primary" size="large" content={t('premium.plan.badge.mostPopular') || 'Most Popular'} />
                     )}
                     {isAppSpecific && (
-                        <Chip
-                            variant="soft"
+                        <Badge
+                            variant="subtle"
                             color={isAvailableForCurrentApp ? 'success' : 'warning'}
-                            size="small"
-                        >
-                            {isAvailableForCurrentApp
+                            size="large"
+                            content={isAvailableForCurrentApp
                                 ? (t('premium.plan.badge.appExclusive') || 'App Exclusive')
                                 : (t('premium.plan.badge.notAvailable') || 'Not Available')}
-                        </Chip>
+                        />
                     )}
                 </View>
 
@@ -780,7 +780,8 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         {t('premium.actions.subscribeTo', { name: plan.name }) || `Subscribe to ${plan.name}`}
                     </Button>
                 )}
-            </View>
+              </CardBody>
+            </Card>
         );
     };
 
@@ -842,17 +843,19 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
         };
 
         return (
-            <View
+            <Card
                 key={feature.id}
-                className="bg-fill border border-border-image rounded-radius-12 p-space-16 mb-space-12 shadow-s"
-                style={
+                variant="outlined"
+                style={[
+                    { marginBottom: 12 },
                     isIncludedInCurrentPlan
                         ? { borderColor: colors.primary, borderWidth: 2 }
                         : isSubscribed
                             ? { borderColor: colors.success, borderWidth: 2 }
-                            : undefined
-                }
+                            : null,
+                ]}
             >
+              <CardBody style={{ padding: 16 }}>
                 <View className="flex-row items-start mb-space-12">
                     <View
                         className="bg-fill-secondary rounded-radius-max items-center justify-center mr-space-12"
@@ -868,9 +871,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         <View className="flex-row items-center justify-between mb-space-4">
                             <H5 className="text-text flex-1 pr-space-8" numberOfLines={1}>{feature.name}</H5>
                             {isIncludedInCurrentPlan && (
-                                <Chip variant="solid" color="primary" size="small">
-                                    {t('premium.feature.included') || 'Included'}
-                                </Chip>
+                                <Badge variant="solid" color="primary" size="large" content={t('premium.feature.included') || 'Included'} />
                             )}
                         </View>
                         <Text className="text-text-secondary text-sm">
@@ -942,7 +943,8 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         {t('premium.feature.plansOnly') || 'Only available in subscription plans'}
                     </Button>
                 )}
-            </View>
+              </CardBody>
+            </Card>
         );
     };
 

package/src/ui/screens/PrivacySettingsScreen.tsx

@@ -7,9 +7,9 @@ import { Switch } from '@oxyhq/bloom/switch';
 import { Button } from '@oxyhq/bloom/button';
 import { useTheme } from '@oxyhq/bloom/theme';
 import Header from '../components/Header';
-import Avatar from '../components/Avatar';
-import LoadingState from '../components/LoadingState';
-import EmptyState from '../components/EmptyState';
+import { Avatar } from '@oxyhq/bloom/avatar';
+import { Loading } from '@oxyhq/bloom/loading';
+import { Text } from '@oxyhq/bloom/typography';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useSettingToggles } from '../hooks/useSettingToggle';
@@ -212,7 +212,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                     variant="minimal"
                     elevation="subtle"
                 />
-                <LoadingState color={bloomTheme.colors.text} />
+                <Loading size="large" color={bloomTheme.colors.text} />
             </View>
         );
     }
@@ -359,12 +359,11 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                     {/* Blocked Users */}
                     <SettingsListGroup title={t('privacySettings.sections.blockedUsers') || 'BLOCKED USERS'}>
                         {isLoadingUsers ? (
-                            <LoadingState color={bloomTheme.colors.text} size="small" />
+                            <Loading size="small" color={bloomTheme.colors.text} />
                         ) : blockedUsers.length === 0 ? (
-                            <EmptyState
-                                message={t('privacySettings.noBlockedUsers') || 'No blocked users'}
-                                textColor={bloomTheme.colors.textSecondary}
-                            />
+                            <Text className="text-text-secondary text-center p-space-40">
+                                {t('privacySettings.noBlockedUsers') || 'No blocked users'}
+                            </Text>
                         ) : (
                             blockedUsers.map((blocked) => {
                                 const { userId, displayName, avatar } = extractUserInfo(blocked, 'blockedId');
@@ -372,7 +371,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                                 return (
                                     <SettingsListItem
                                         key={userId}
-                                        icon={<Avatar uri={avatarUri} name={displayName} size={20} />}
+                                        icon={<Avatar source={avatarUri} name={displayName} size={20} />}
                                         title={displayName}
                                         rightElement={
                                             <Button
@@ -393,12 +392,11 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                     {/* Restricted Users */}
                     <SettingsListGroup title={t('privacySettings.sections.restrictedUsers') || 'RESTRICTED USERS'}>
                         {isLoadingUsers ? (
-                            <LoadingState color={bloomTheme.colors.text} size="small" />
+                            <Loading size="small" color={bloomTheme.colors.text} />
                         ) : restrictedUsers.length === 0 ? (
-                            <EmptyState
-                                message={t('privacySettings.noRestrictedUsers') || 'No restricted users'}
-                                textColor={bloomTheme.colors.textSecondary}
-                            />
+                            <Text className="text-text-secondary text-center p-space-40">
+                                {t('privacySettings.noRestrictedUsers') || 'No restricted users'}
+                            </Text>
                         ) : (
                             restrictedUsers.map((restricted) => {
                                 const { userId, displayName, avatar } = extractUserInfo(restricted, 'restrictedId');
@@ -406,7 +404,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                                 return (
                                     <SettingsListItem
                                         key={userId}
-                                        icon={<Avatar uri={avatarUri} name={displayName} size={20} />}
+                                        icon={<Avatar source={avatarUri} name={displayName} size={20} />}
                                         title={displayName}
                                         description={t('privacySettings.restrictedDescription') || 'Limited interactions'}
                                         rightElement={

package/src/ui/screens/ProfileScreen.tsx

@@ -6,7 +6,7 @@ import { useTheme } from '@oxyhq/bloom/theme';
 import { Button } from '@oxyhq/bloom/button';
 import { H2, Text } from '@oxyhq/bloom/typography';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
-import Avatar from '../components/Avatar';
+import { Avatar } from '@oxyhq/bloom/avatar';
 import FollowButton from '../components/FollowButton';
 import { useFollow } from '../hooks/useFollow';
 import { Ionicons } from '@expo/vector-icons';
@@ -202,7 +202,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                 <View style={styles.avatarRow} className="px-screen-margin">
                     <View style={styles.avatarWrapper} className="border-bg bg-bg rounded-radius-max">
                         <Avatar
-                            uri={profile?.avatar ? oxyServices.getFileDownloadUrl(profile.avatar, 'thumb') : undefined}
+                            source={profile?.avatar ? oxyServices.getFileDownloadUrl(profile.avatar, 'thumb') : undefined}
                             name={displayName || username}
                             size={AVATAR_SIZE}
                         />
@@ -306,7 +306,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                 {/* All Stats in one row */}
                 <View style={styles.statsRow} className="px-screen-margin">
                     <View style={styles.statItem}>
-                        <Text style={styles.statAmount} className="text-text-inverse">{reputationTotal !== null && reputationTotal !== undefined ? reputationTotal : '--'}</Text>
+                        <Text style={styles.statAmount} className="text-text">{reputationTotal !== null && reputationTotal !== undefined ? reputationTotal : '--'}</Text>
                         <Text style={styles.statLabel} className="text-text-secondary">{t('profile.reputation') || 'Reputation'}</Text>
                     </View>
                     <View style={styles.statItem}>

package/src/ui/screens/SavesCollectionsScreen.tsx

@@ -10,8 +10,8 @@ import {
 import { useTheme } from '@oxyhq/bloom/theme';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import Header from '../components/Header';
-import LoadingState from '../components/LoadingState';
-import EmptyState from '../components/EmptyState';
+import { Loading } from '@oxyhq/bloom/loading';
+import { Text } from '@oxyhq/bloom/typography';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useOxy } from '../context/OxyContext';
@@ -119,16 +119,16 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
             <ScrollView className="flex-1">
                 <View className="px-screen-margin pb-space-24">
                     {isLoading ? (
-                        <LoadingState
-                            message={t('saves.loading') || 'Loading...'}
+                        <Loading
+                            size="large"
                             color={bloomTheme.colors.text}
+                            text={t('saves.loading') || 'Loading...'}
                         />
                     ) : activeTab === 'saves' ? (
                         savedItems.length === 0 ? (
-                            <EmptyState
-                                message={t('saves.empty') || 'No saved items yet'}
-                                textColor={bloomTheme.colors.text}
-                            />
+                            <Text className="text-text-secondary text-center p-space-40">
+                                {t('saves.empty') || 'No saved items yet'}
+                            </Text>
                         ) : (
                             <SettingsListGroup title={t('saves.savedItems') || 'Saved Items'}>
                                 {savedItems.map((item) => (
@@ -148,10 +148,9 @@ const SavesCollectionsScreen: React.FC<BaseScreenProps> = ({
                         )
                     ) : (
                         collections.length === 0 ? (
-                            <EmptyState
-                                message={t('saves.noCollections') || 'No collections yet'}
-                                textColor={bloomTheme.colors.text}
-                            />
+                            <Text className="text-text-secondary text-center p-space-40">
+                                {t('saves.noCollections') || 'No collections yet'}
+                            </Text>
                         ) : (
                             <SettingsListGroup title={t('saves.collections') || 'Collections'}>
                                 {collections.map((collection) => (

package/src/ui/screens/SearchSettingsScreen.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { View, ScrollView } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import Header from '../components/Header';
-import LoadingState from '../components/LoadingState';
+import { Loading } from '@oxyhq/bloom/loading';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { Switch } from '@oxyhq/bloom/switch';
 import { useTheme } from '@oxyhq/bloom/theme';
@@ -86,7 +86,7 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
                     variant="minimal"
                     elevation="subtle"
                 />
-                <LoadingState color={bloomTheme.colors.text} />
+                <Loading size="large" color={bloomTheme.colors.text} />
             </View>
         );
     }

package/src/ui/screens/UserListScreen.tsx

@@ -13,7 +13,7 @@ import { useTheme } from '@oxyhq/bloom/theme';
 import { H6, Text } from '@oxyhq/bloom/typography';
 import { Button } from '@oxyhq/bloom/button';
 import Header from '../components/Header';
-import Avatar from '../components/Avatar';
+import { Avatar } from '@oxyhq/bloom/avatar';
 import FollowButton from '../components/FollowButton';
 import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../hooks/useI18n';
@@ -161,7 +161,7 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
           accessibilityLabel={displayName}
         >
           <Avatar
-            uri={
+            source={
               item.avatar
                 ? oxyServices.getFileDownloadUrl(item.avatar, 'thumb')
                 : undefined

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -3,7 +3,7 @@ import { useCallback, useMemo, useRef, useState, useEffect } from 'react';
 import { View, StyleSheet, Platform, Animated } from 'react-native';
 import AnimatedReanimated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
 import type { BaseScreenProps } from '../types/navigation';
-import Avatar from '../components/Avatar';
+import { Avatar } from '@oxyhq/bloom/avatar';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '@oxyhq/bloom';
 import { useAuthStore } from '../stores/authStore';
@@ -303,15 +303,15 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
             <Animated.View style={{ opacity: fadeAnim, transform: [{ translateX: slideAnim }] }}>
                 <View style={[styles.scrollInner, styles.contentContainer]}>
                     <View style={[styles.header, styles.sectionSpacing]}>
-                        <H1 style={styles.title} className="text-foreground">{step.title}</H1>
-                        {step.body && <Text style={styles.body} className="text-muted-foreground">{step.body}</Text>}
+                        <H1 style={styles.title} className="text-text">{step.title}</H1>
+                        {step.body && <Text style={styles.body} className="text-text-secondary">{step.body}</Text>}
                     </View>
                     {Array.isArray(step.bullets) && step.bullets.length > 0 && (
                         <View style={[styles.bulletContainer, styles.sectionSpacing]}>
                             {step.bullets.map(b => (
                                 <View key={b} style={styles.bulletRow}>
                                     <Ionicons name="ellipse" size={8} color={colors.primary} style={{ marginTop: 6 }} />
-                                    <Text style={styles.bulletText} className="text-muted-foreground">{b}</Text>
+                                    <Text style={styles.bulletText} className="text-text-secondary">{b}</Text>
                                 </View>
                             ))}
                         </View>
@@ -348,9 +348,8 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
                             <Avatar
                                 size={120}
                                 name={welcomeName}
-                                uri={avatarUri}
-
-                                backgroundColor={`${colors.primary}20`}
+                                source={avatarUri}
+                                placeholderColor={`${colors.primary}20`}
                                 style={styles.avatar}
                             />
                             <Button variant="primary" size="small" onPress={openAvatarPicker}>