@oxyhq/services 6.9.45 → 6.10.1

package/src/ui/screens/SessionManagementScreen.tsx

@@ -12,25 +12,15 @@ import {
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { screenContentStyle } from '../constants/spacing';
-import { toast } from '../../lib/sonner';
+import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
 import type { ClientSession } from '@oxyhq/core';
-import * as Prompt from '@oxyhq/bloom/prompt';
-import { usePromptControl } from '@oxyhq/bloom/prompt';
-import { Header, GroupedSection } from '../components';
+import { Header } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { SettingsIcon } from '../components/SettingsIcon';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
 
-// Button background colors for session actions
-const SWITCH_BUTTON_BG = {
-    dark: '#1E2A38',
-    light: '#E6F2FF',
-} as const;
-
-const LOGOUT_BUTTON_BG = {
-    dark: '#3A1E1E',
-    light: '#FFEBEE',
-} as const;
 
 const SessionManagementScreen: React.FC<BaseScreenProps> = ({
     onClose,
@@ -55,16 +45,15 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
     const [pendingLogoutSessionId, setPendingLogoutSessionId] = useState<string | null>(null);
 
     // Prompt controls
-    const logoutSessionPrompt = usePromptControl();
-    const logoutOtherSessionsPrompt = usePromptControl();
-    const logoutAllSessionsPrompt = usePromptControl();
+    const logoutSessionDialog = useDialogControl();
+    const logoutOtherSessionsDialog = useDialogControl();
+    const logoutAllSessionsDialog = useDialogControl();
 
     // Use bloom theme for non-style color props (ActivityIndicator, icon colors, etc.)
     const bloomTheme = useTheme();
-    const isDarkTheme = bloomTheme.isDark;
     const primaryColor = bloomTheme.colors.primary;
     const dangerColor = bloomTheme.colors.error;
-    const successColor = bloomTheme.colors.success || '#34C759';
+    const successColor = bloomTheme.colors.success;
 
     // Memoized load sessions function - prevents unnecessary re-renders
     const loadSessions = useCallback(async (isRefresh = false) => {
@@ -91,8 +80,8 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
     // Confirm logout session - opens prompt
     const confirmLogoutSession = useCallback((sessionId: string) => {
         setPendingLogoutSessionId(sessionId);
-        logoutSessionPrompt.open();
-    }, [logoutSessionPrompt]);
+        logoutSessionDialog.open();
+    }, [logoutSessionDialog]);
 
     // Handle logout session - executes after prompt confirmation
     const handleLogoutSession = useCallback(async () => {
@@ -125,8 +114,8 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
             toast.info(t('sessionManagement.toasts.noOtherSessions'));
             return;
         }
-        logoutOtherSessionsPrompt.open();
-    }, [otherSessionsCount, logoutOtherSessionsPrompt, t]);
+        logoutOtherSessionsDialog.open();
+    }, [otherSessionsCount, logoutOtherSessionsDialog, t]);
 
     // Handle logout other sessions - executes after prompt confirmation
     const handleLogoutOtherSessions = useCallback(async () => {
@@ -151,8 +140,8 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
 
     // Confirm logout all sessions - opens prompt
     const confirmLogoutAllSessions = useCallback(() => {
-        logoutAllSessionsPrompt.open();
-    }, [logoutAllSessionsPrompt]);
+        logoutAllSessionsDialog.open();
+    }, [logoutAllSessionsDialog]);
 
     // Handle logout all sessions - executes after prompt confirmation
     const handleLogoutAllSessions = useCallback(async () => {
@@ -234,7 +223,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                     <View style={styles.sessionActionsRow}>
                         <TouchableOpacity
                             onPress={() => handleSwitchSession(session.sessionId)}
-                            style={[styles.sessionPillButton, { backgroundColor: isDarkTheme ? SWITCH_BUTTON_BG.dark : SWITCH_BUTTON_BG.light, borderColor: primaryColor }]}
+                            style={[styles.sessionPillButton, { backgroundColor: bloomTheme.colors.primarySubtle, borderColor: primaryColor }]}
                             disabled={switchLoading === session.sessionId || actionLoading === session.sessionId}
                         >
                             {switchLoading === session.sessionId ? (
@@ -245,7 +234,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                         </TouchableOpacity>
                         <TouchableOpacity
                             onPress={() => confirmLogoutSession(session.sessionId)}
-                            style={[styles.sessionPillButton, { backgroundColor: isDarkTheme ? LOGOUT_BUTTON_BG.dark : LOGOUT_BUTTON_BG.light, borderColor: dangerColor }]}
+                            style={[styles.sessionPillButton, { backgroundColor: bloomTheme.colors.negativeSubtle, borderColor: dangerColor }]}
                             disabled={actionLoading === session.sessionId || switchLoading === session.sessionId}
                         >
                             {actionLoading === session.sessionId ? (
@@ -257,14 +246,14 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                     </View>
                 ) : (
                     <View style={styles.sessionActionsRow}>
-                        <Text style={[styles.currentBadgeText, { color: successColor }]}>{t('sessionManagement.active')}</Text>
+                        <Text style={[styles.currentBadgeText, { color: successColor, backgroundColor: `${successColor}20` }]}>{t('sessionManagement.active')}</Text>
                     </View>
                 ),
                 selected: isCurrent,
                 dense: true,
             };
         });
-    }, [userSessions, activeSessionId, formatRelative, successColor, primaryColor, isDarkTheme, switchLoading, actionLoading, handleSwitchSession, confirmLogoutSession, dangerColor]);
+    }, [userSessions, activeSessionId, formatRelative, successColor, primaryColor, bloomTheme.colors.primarySubtle, bloomTheme.colors.negativeSubtle, switchLoading, actionLoading, handleSwitchSession, confirmLogoutSession, dangerColor, t]);
 
     const bulkItems = useMemo(() => [
         {
@@ -325,19 +314,43 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                 {userSessions.length > 0 ? (
                     <>
                         {lastRefreshed && (
-                            <Text style={[styles.metaText, { color: '#777', marginBottom: 6 }]}>{t('sessionManagement.lastRefreshed', { time: formatRelative(lastRefreshed.toISOString()) })}</Text>
+                            <Text style={[styles.metaText, { color: bloomTheme.colors.textTertiary, marginBottom: 6 }]}>{t('sessionManagement.lastRefreshed', { time: formatRelative(lastRefreshed.toISOString()) })}</Text>
                         )}
                         <View style={styles.fullBleed}>
-                            <GroupedSection items={sessionItems} />
+                            <SettingsListGroup>
+                                {sessionItems.map(item => (
+                                    <SettingsListItem
+                                        key={item.id}
+                                        icon={<SettingsIcon name={item.icon} color={item.iconColor} />}
+                                        title={item.title}
+                                        description={item.subtitle}
+                                        showChevron={false}
+                                        rightElement={item.customContentBelow}
+                                    />
+                                ))}
+                            </SettingsListGroup>
                         </View>
                         <View style={styles.sectionSpacer} />
                         <View style={styles.fullBleed}>
-                            <GroupedSection items={bulkItems} />
+                            <SettingsListGroup>
+                                {bulkItems.map(item => (
+                                    <SettingsListItem
+                                        key={item.id}
+                                        icon={<SettingsIcon name={item.icon} color={item.iconColor} />}
+                                        title={item.title}
+                                        description={item.subtitle}
+                                        onPress={item.onPress}
+                                        showChevron={false}
+                                        disabled={item.disabled}
+                                        rightElement={item.customContent}
+                                    />
+                                ))}
+                            </SettingsListGroup>
                         </View>
                     </>
                 ) : (
                     <View style={styles.emptyState}>
-                        <Text style={[styles.emptyStateText, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>{t('sessionManagement.empty')}</Text>
+                        <Text style={[styles.emptyStateText, { color: bloomTheme.colors.textSecondary }]}>{t('sessionManagement.empty')}</Text>
                     </View>
                 )}
             </ScrollView>
@@ -346,29 +359,32 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                     <Text style={styles.closeButtonText} className="text-primary">{t('sessionManagement.close')}</Text>
                 </TouchableOpacity>
             </View>
-            <Prompt.Basic
-                control={logoutSessionPrompt}
+            <Dialog
+                control={logoutSessionDialog}
                 title={t('sessionManagement.confirms.logoutSessionTitle') || 'Log Out Session'}
                 description={t('sessionManagement.confirms.logoutSession')}
-                onConfirm={handleLogoutSession}
-                confirmButtonCta={t('sessionManagement.logout') || 'Log Out'}
-                confirmButtonColor='negative'
+                actions={[
+                    { label: t('sessionManagement.logout') || 'Log Out', color: 'destructive', onPress: handleLogoutSession },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
             />
-            <Prompt.Basic
-                control={logoutOtherSessionsPrompt}
+            <Dialog
+                control={logoutOtherSessionsDialog}
                 title={t('sessionManagement.confirms.logoutOthersTitle') || 'Log Out Other Sessions'}
                 description={t('sessionManagement.confirms.logoutOthers', { count: otherSessionsCount })}
-                onConfirm={handleLogoutOtherSessions}
-                confirmButtonCta={t('sessionManagement.logoutOthers.title') || 'Log Out Others'}
-                confirmButtonColor='negative'
+                actions={[
+                    { label: t('sessionManagement.logoutOthers.title') || 'Log Out Others', color: 'destructive', onPress: handleLogoutOtherSessions },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
             />
-            <Prompt.Basic
-                control={logoutAllSessionsPrompt}
+            <Dialog
+                control={logoutAllSessionsDialog}
                 title={t('sessionManagement.confirms.logoutAllTitle') || 'Log Out All Sessions'}
                 description={t('sessionManagement.confirms.logoutAll')}
-                onConfirm={handleLogoutAllSessions}
-                confirmButtonCta={t('sessionManagement.logoutAll.title') || 'Log Out All'}
-                confirmButtonColor='negative'
+                actions={[
+                    { label: t('sessionManagement.logoutAll.title') || 'Log Out All', color: 'destructive', onPress: handleLogoutAllSessions },
+                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
+                ]}
             />
         </View>
     );
@@ -389,7 +405,6 @@ const styles = StyleSheet.create({
         ...screenContentStyle,
         paddingTop: 0, // Header handles top spacing
     },
-    // Removed legacy session card & bulk action styles (now using GroupedSection)
     sessionActionsRow: {
         flexDirection: 'row',
         gap: 8,
@@ -414,7 +429,6 @@ const styles = StyleSheet.create({
         fontWeight: '600',
         paddingHorizontal: 10,
         paddingVertical: 4,
-        backgroundColor: '#2E7D3215',
         borderRadius: 16,
         overflow: 'hidden',
         textTransform: 'uppercase',

package/src/ui/screens/UserLinksScreen.tsx

@@ -1,8 +1,9 @@
 import type React from 'react';
-import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, Linking } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
+import { View, StyleSheet, ScrollView, Linking } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { Header, GroupedSection } from '../components';
+import { Header } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { SettingsIcon } from '../components/SettingsIcon';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useI18n } from '../hooks/useI18n';
 
@@ -37,18 +38,6 @@ const UserLinksScreen: React.FC<UserLinksScreenProps> = ({
         }
     };
 
-    const groupedItems = links.map((link) => ({
-        id: link.id,
-        icon: link.image ? undefined : 'link',
-        iconColor: '#32D74B',
-        image: link.image || undefined,
-        imageSize: 40,
-        title: link.title || link.url,
-        subtitle: link.description || link.url,
-        onPress: () => handleLinkPress(link.url),
-        multiRow: true,
-    }));
-
     return (
         <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
             <Header
@@ -59,14 +48,17 @@ const UserLinksScreen: React.FC<UserLinksScreenProps> = ({
             />
 
             <ScrollView style={styles.content}>
-                <View style={styles.section}>
-                    <Text style={styles.sectionTitle} className="text-foreground">{t('userLinks.title')}</Text>
-
-                    <GroupedSection
-                        items={groupedItems}
-
-                    />
-                </View>
+                <SettingsListGroup title={t('userLinks.title')}>
+                    {links.map((link) => (
+                        <SettingsListItem
+                            key={link.id}
+                            icon={<SettingsIcon name="link" color={bloomTheme.colors.success} />}
+                            title={link.title || link.url}
+                            description={link.description || link.url}
+                            onPress={() => handleLinkPress(link.url)}
+                        />
+                    ))}
+                </SettingsListGroup>
             </ScrollView>
         </View>
     );
@@ -75,21 +67,11 @@ const UserLinksScreen: React.FC<UserLinksScreenProps> = ({
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: '#f2f2f2',
     },
     content: {
         flex: 1,
         padding: 16,
     },
-    section: {
-        marginBottom: 24,
-    },
-    sectionTitle: {
-        fontSize: 16,
-        fontWeight: '600',
-        color: '#333',
-        marginBottom: 12,
-    },
 });
 
 export default UserLinksScreen; 

package/src/ui/screens/UserListScreen.tsx

@@ -16,7 +16,7 @@ import { FollowButton } from '../components';
 import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../hooks/useI18n';
 import { useOxy } from '../context/OxyContext';
-import { logger } from '@oxyhq/core';
+import { logger, getAccountDisplayName, getAccountFallbackHandle } from '@oxyhq/core';
 import type { User } from '@oxyhq/core';
 
 type ListMode = 'followers' | 'following';
@@ -48,7 +48,7 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
 
   const bloomTheme = useTheme();
   const styles = createStyles();
-  const { t } = useI18n();
+  const { t, locale } = useI18n();
 
   const currentUserId = currentUser?.id || (currentUser?._id as string | undefined);
 
@@ -70,12 +70,21 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
         }
         setError(null);
 
-        const response =
-          mode === 'followers'
-            ? await oxyServices.getUserFollowers(userId, { limit: PAGE_SIZE, offset })
-            : await oxyServices.getUserFollowing(userId, { limit: PAGE_SIZE, offset });
+        let newUsers: User[];
+        let total: number;
+        let hasMore: boolean;
 
-        const newUsers = mode === 'followers' ? response.followers : response.following;
+        if (mode === 'followers') {
+          const result = await oxyServices.getUserFollowers(userId, { limit: PAGE_SIZE, offset });
+          newUsers = result.followers;
+          total = result.total;
+          hasMore = result.hasMore;
+        } else {
+          const result = await oxyServices.getUserFollowing(userId, { limit: PAGE_SIZE, offset });
+          newUsers = result.following;
+          total = result.total;
+          hasMore = result.hasMore;
+        }
 
         if (offset === 0 || isRefresh) {
           setUsers(newUsers);
@@ -83,8 +92,8 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
           setUsers((prev) => [...prev, ...newUsers]);
         }
 
-        setTotal(response.total);
-        setHasMore(response.hasMore);
+        setTotal(total);
+        setHasMore(hasMore);
       } catch (err) {
         logger.error(`Failed to fetch ${mode}`, err instanceof Error ? err : new Error(String(err)), {
           component: 'UserListScreen',
@@ -141,18 +150,21 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
                 ? oxyServices.getFileDownloadUrl(item.avatar, 'thumb')
                 : undefined
             }
-            name={item.username || item.name?.full}
+            name={getAccountDisplayName(item, locale)}
             size={48}
           />
           <View style={styles.userInfo}>
             <Text style={styles.userName} className="text-foreground" numberOfLines={1}>
-              {item.name?.full || item.username || 'Unknown User'}
+              {getAccountDisplayName(item, locale)}
             </Text>
-            {item.username && (
-              <Text style={styles.userHandle} className="text-muted-foreground" numberOfLines={1}>
-                @{item.username}
-              </Text>
-            )}
+            {(() => {
+              const handle = getAccountFallbackHandle(item);
+              return handle ? (
+                <Text style={styles.userHandle} className="text-muted-foreground" numberOfLines={1}>
+                  {item.username ? `@${handle}` : handle}
+                </Text>
+              ) : null;
+            })()}
             {description ? (
               <Text style={styles.userBio} className="text-foreground" numberOfLines={2}>
                 {description}
@@ -167,7 +179,7 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
         </TouchableOpacity>
       );
     },
-    [bloomTheme, styles, handleUserPress, currentUserId, oxyServices]
+    [bloomTheme, styles, handleUserPress, currentUserId, oxyServices, locale]
   );
 
   const renderEmpty = useCallback(() => {
@@ -241,7 +253,7 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
           <Ionicons name="alert-circle" size={48} color={bloomTheme.colors.error} />
           <Text style={styles.errorText} className="text-destructive">{error}</Text>
           <TouchableOpacity style={styles.retryButton} className="bg-primary" onPress={() => fetchUsers(0)}>
-            <Text style={styles.retryButtonText}>{t('common.retry') || 'Retry'}</Text>
+            <Text style={[styles.retryButtonText, { color: bloomTheme.colors.negativeForeground }]}>{t('common.retry') || 'Retry'}</Text>
           </TouchableOpacity>
         </View>
       </View>
@@ -340,7 +352,6 @@ const createStyles = () =>
       borderRadius: 8,
     },
     retryButtonText: {
-      color: '#fff',
       fontSize: 16,
       fontWeight: '600',
     },

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -5,16 +5,14 @@ import AnimatedReanimated, { useSharedValue, useAnimatedStyle, withTiming } from
 import type { BaseScreenProps } from '../types/navigation';
 import Avatar from '../components/Avatar';
 import { Ionicons } from '@expo/vector-icons';
-import { toast } from '../../lib/sonner';
+import { toast } from '@oxyhq/bloom';
 import { useAuthStore } from '../stores/authStore';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { fontFamilies } from '../styles/fonts';
-import { normalizeTheme } from '../utils/themeUtils';
-import GroupedPillButtons from '../components/internal/GroupedPillButtons';
+import { Button } from '@oxyhq/bloom/button';
 import { useI18n } from '../hooks/useI18n';
 import { useOxy } from '../context/OxyContext';
 import { useUpdateProfile } from '../hooks/mutations/useAccountMutations';
-import { updateAvatarVisibility } from '@oxyhq/core';
+import { updateAvatarVisibility, getAccountDisplayName } from '@oxyhq/core';
 
 const GAP = 12;
 const INNER_GAP = 8;
@@ -65,7 +63,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
 }) => {
     // Use useOxy() hook for OxyContext values
     const { user, oxyServices } = useOxy();
-    const { t } = useI18n();
+    const { t, locale } = useI18n();
     const updateProfileMutation = useUpdateProfile();
     const currentUser = user || newUser; // fallback
     const bloomTheme = useTheme();
@@ -74,8 +72,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
         border: bloomTheme.colors.border,
         text: bloomTheme.colors.text,
     };
-    const normalizedTheme = normalizeTheme(theme);
-    const styles = useMemo(() => createStyles(normalizedTheme), [normalizedTheme]);
+    const styles = useMemo(() => createStyles(bloomTheme.colors), [bloomTheme.colors]);
 
     // Animation state
     const fadeAnim = useRef(new Animated.Value(1)).current;
@@ -95,9 +92,11 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
 
     const avatarUri = selectedAvatarId ? oxyServices.getFileDownloadUrl(selectedAvatarId, 'thumb') : undefined;
 
-    // Steps content
-    const welcomeTitle = currentUser?.username
-        ? (t('welcomeNew.welcome.titleWithName', { username: currentUser.username }) || `Welcome, ${currentUser.username} 👋`)
+    // Steps content. Use the canonical helper so partially-onboarded accounts
+    // (publicKey only) still get a friendly greeting instead of a blank one.
+    const welcomeName = getAccountDisplayName(currentUser ?? null, locale);
+    const welcomeTitle = currentUser
+        ? (t('welcomeNew.welcome.titleWithName', { username: welcomeName }) || `Welcome, ${welcomeName} 👋`)
         : (t('welcomeNew.welcome.title') || 'Welcome 👋');
     const steps: Array<{ key: string; title: string; bullets?: string[]; body?: string; showAvatar?: boolean; }> = [
         { key: 'welcome', title: welcomeTitle, body: t('welcomeNew.welcome.body') || "You just created an account in a calm, ethical space. A few quick things — then you're in." },
@@ -177,30 +176,56 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
     }, [navigate, updateProfileMutation, oxyServices, currentStep, avatarStepIndex, animateToStepCallback, t]);
 
     const step = steps[currentStep];
-    const pillButtons = useMemo(() => {
+    const renderActionButtons = useCallback(() => {
         if (currentStep === totalSteps - 1) {
-            return [
-                { text: t('welcomeNew.actions.back') || 'Back', onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
-                { text: t('welcomeNew.actions.enter') || 'Enter', onPress: finish, icon: 'log-in-outline', variant: 'primary' },
-            ];
+            return (
+                <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+                    <Button variant="secondary" onPress={prevStep} size="small" icon={<Ionicons name="arrow-back" size={16} />}>
+                        {t('welcomeNew.actions.back') || 'Back'}
+                    </Button>
+                    <Button variant="primary" onPress={finish} size="small" icon={<Ionicons name="log-in-outline" size={16} />} iconPosition="right">
+                        {t('welcomeNew.actions.enter') || 'Enter'}
+                    </Button>
+                </View>
+            );
         }
         if (currentStep === 0) {
-            const arr: any[] = [];
-            if (avatarStepIndex > 0) arr.push({ text: t('welcomeNew.actions.skip') || 'Skip', onPress: skipToAvatar, icon: 'play-skip-forward', variant: 'transparent' });
-            arr.push({ text: t('welcomeNew.actions.next') || 'Next', onPress: nextStep, icon: 'arrow-forward', variant: 'primary' });
-            return arr;
+            return (
+                <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+                    {avatarStepIndex > 0 && (
+                        <Button variant="secondary" onPress={skipToAvatar} size="small" icon={<Ionicons name="play-skip-forward" size={16} />}>
+                            {t('welcomeNew.actions.skip') || 'Skip'}
+                        </Button>
+                    )}
+                    <Button variant="primary" onPress={nextStep} size="small" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
+                        {t('welcomeNew.actions.next') || 'Next'}
+                    </Button>
+                </View>
+            );
         }
         if (step.showAvatar) {
-            return [
-                { text: t('welcomeNew.actions.back') || 'Back', onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
-                { text: avatarUri ? (t('welcomeNew.actions.continue') || 'Continue') : (t('welcomeNew.actions.skip') || 'Skip'), onPress: nextStep, icon: 'arrow-forward', variant: 'primary' },
-            ];
+            return (
+                <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+                    <Button variant="secondary" onPress={prevStep} size="small" icon={<Ionicons name="arrow-back" size={16} />}>
+                        {t('welcomeNew.actions.back') || 'Back'}
+                    </Button>
+                    <Button variant="primary" onPress={nextStep} size="small" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
+                        {avatarUri ? (t('welcomeNew.actions.continue') || 'Continue') : (t('welcomeNew.actions.skip') || 'Skip')}
+                    </Button>
+                </View>
+            );
         }
-        return [
-            { text: t('welcomeNew.actions.back') || 'Back', onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
-            { text: t('welcomeNew.actions.next') || 'Next', onPress: nextStep, icon: 'arrow-forward', variant: 'primary' },
-        ];
-    }, [currentStep, totalSteps, prevStep, nextStep, finish, skipToAvatar, avatarStepIndex, step.showAvatar, avatarUri]);
+        return (
+            <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
+                <Button variant="secondary" onPress={prevStep} size="small" icon={<Ionicons name="arrow-back" size={16} />}>
+                    {t('welcomeNew.actions.back') || 'Back'}
+                </Button>
+                <Button variant="primary" onPress={nextStep} size="small" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
+                    {t('welcomeNew.actions.next') || 'Next'}
+                </Button>
+            </View>
+        );
+    }, [currentStep, totalSteps, prevStep, nextStep, finish, skipToAvatar, avatarStepIndex, step.showAvatar, avatarUri, t]);
 
     return (
         <View style={styles.container}>
@@ -234,20 +259,20 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
                         <View style={[styles.avatarSection, styles.sectionSpacing]}>
                             <Avatar
                                 size={120}
-                                name={currentUser?.name?.full || currentUser?.name?.first || currentUser?.username}
+                                name={welcomeName}
                                 uri={avatarUri}
 
                                 backgroundColor={`${colors.primary}20`}
                                 style={styles.avatar}
                             />
                             <TouchableOpacity style={styles.changeAvatarButton} className="bg-primary" onPress={openAvatarPicker}>
-                                <Ionicons name="image-outline" size={18} color="#FFFFFF" />
+                                <Ionicons name="image-outline" size={18} color={bloomTheme.colors.negativeForeground} />
                                 <Text style={styles.changeAvatarText}>{avatarUri ? (t('welcomeNew.avatar.change') || 'Change Avatar') : (t('welcomeNew.avatar.add') || 'Add Avatar')}</Text>
                             </TouchableOpacity>
                         </View>
                     )}
                     <View style={styles.sectionSpacing}>
-                        <GroupedPillButtons buttons={pillButtons} colors={colors} />
+                        {renderActionButtons()}
                     </View>
                 </View>
             </Animated.View>
@@ -256,9 +281,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
 
 };
 
-const createStyles = (theme: string) => {
-    const isDark = theme === 'dark';
-    const border = isDark ? '#333333' : '#E0E0E0';
+const createStyles = (colors: ReturnType<typeof useTheme>['colors']) => {
     return StyleSheet.create({
         container: {
             width: '100%',
@@ -282,7 +305,6 @@ const createStyles = (theme: string) => {
         },
         title: {
             fontSize: 42,
-            fontFamily: fontFamilies.interBold,
             fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
             letterSpacing: -1,
             textAlign: 'left',
@@ -329,7 +351,7 @@ const createStyles = (theme: string) => {
             ...(Platform.OS === 'web' ? { boxShadow: 'none' } : null),
         },
         changeAvatarText: {
-            color: '#FFFFFF',
+            color: colors.negativeForeground,
             fontSize: 15,
             fontWeight: '600',
         },
@@ -345,7 +367,7 @@ const createStyles = (theme: string) => {
             width: 6,
             borderRadius: 3,
             marginHorizontal: 3,
-            backgroundColor: border,
+            backgroundColor: colors.border,
         },
     });
 };

package/src/ui/screens/karma/KarmaAboutScreen.tsx

@@ -4,7 +4,6 @@ import type { BaseScreenProps } from '../../types/navigation';
 import { Header } from '../../components';
 import { useI18n } from '../../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { fontFamilies } from '../../styles/fonts';
 
 const KarmaAboutScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     const { t } = useI18n();
@@ -49,7 +48,6 @@ const KarmaAboutScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
 const styles = StyleSheet.create({
     container: { flex: 1 },
     title: {
-        fontFamily: fontFamilies.interBold,
         fontWeight: Platform.OS === 'web' ? 'bold' : undefined,  // Only apply fontWeight on web
         fontSize: 54,
         margin: 24,
@@ -59,7 +57,6 @@ const styles = StyleSheet.create({
     section: {
         fontSize: 18,
         fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-        fontFamily: fontFamilies.interBold,
         marginTop: 24,
         marginBottom: 8
     },