@oxyhq/services 6.9.46 → 6.10.1

package/src/ui/screens/SessionManagementScreen.tsx

@@ -12,10 +12,8 @@ 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 } from '../components';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { SettingsIcon } from '../components/SettingsIcon';
@@ -23,16 +21,6 @@ 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,
@@ -57,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) => {
@@ -93,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 () => {
@@ -127,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 () => {
@@ -153,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 () => {
@@ -236,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 ? (
@@ -247,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 ? (
@@ -259,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(() => [
         {
@@ -327,7 +314,7 @@ 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}>
                             <SettingsListGroup>
@@ -363,7 +350,7 @@ const SessionManagementScreen: React.FC<BaseScreenProps> = ({
                     </>
                 ) : (
                     <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>
@@ -372,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>
     );
@@ -415,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,
@@ -440,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

@@ -52,7 +52,7 @@ const UserLinksScreen: React.FC<UserLinksScreenProps> = ({
                     {links.map((link) => (
                         <SettingsListItem
                             key={link.id}
-                            icon={<SettingsIcon name="link" color="#32D74B" />}
+                            icon={<SettingsIcon name="link" color={bloomTheme.colors.success} />}
                             title={link.title || link.url}
                             description={link.description || link.url}
                             onPress={() => handleLinkPress(link.url)}
@@ -67,7 +67,6 @@ const UserLinksScreen: React.FC<UserLinksScreenProps> = ({
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: '#f2f2f2',
     },
     content: {
         flex: 1,

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 { 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." },
@@ -260,14 +259,14 @@ 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>
@@ -282,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%',
@@ -308,7 +305,6 @@ const createStyles = (theme: string) => {
         },
         title: {
             fontSize: 42,
-            fontFamily: fontFamilies.interBold,
             fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
             letterSpacing: -1,
             textAlign: 'left',
@@ -355,7 +351,7 @@ const createStyles = (theme: string) => {
             ...(Platform.OS === 'web' ? { boxShadow: 'none' } : null),
         },
         changeAvatarText: {
-            color: '#FFFFFF',
+            color: colors.negativeForeground,
             fontSize: 15,
             fontWeight: '600',
         },
@@ -371,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
     },

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

@@ -11,7 +11,6 @@ import {
     Platform,
 } from 'react-native';
 import type { BaseScreenProps } from '../../types/navigation';
-import { fontFamilies } from '../../styles/fonts';
 import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
@@ -40,8 +39,8 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
     const themeColors = Colors[normalizedColorScheme];
     // Override primaryColor for Karma screens (purple instead of blue)
     const primaryColor = '#d169e5';
-    const dangerColor = bloomTheme.colors.error || '#D32F2F';
-    const mutedTextColor = bloomTheme.isDark ? '#BBBBBB' : '#888888';
+    const dangerColor = bloomTheme.colors.error;
+    const mutedTextColor = bloomTheme.colors.textTertiary;
 
     // Icon colors from theme
     const iconLeaderboard = themeColors.iconPayments;
@@ -89,7 +88,7 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
             <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContainer}>
                 <View style={styles.walletHeader}>
                     <Text style={[styles.karmaAmount, { color: primaryColor }]}>{karmaTotal ?? 0}</Text>
-                    <Text style={[styles.karmaLabel, { color: bloomTheme.isDark ? '#BBBBBB' : '#888888' }]}>
+                    <Text style={[styles.karmaLabel, { color: bloomTheme.colors.textTertiary }]}>
                         {t('karma.center.balance') || 'Karma Balance'}
                     </Text>
                     <View style={styles.actionContainer}>
@@ -149,7 +148,7 @@ const KarmaCenterScreen: React.FC<BaseScreenProps> = ({
                                 <Text style={[styles.historyDesc, { color: bloomTheme.colors.text }]}>
                                     {entry.reason || (t('karma.center.noDescription') || 'No description')}
                                 </Text>
-                                <Text style={[styles.historyDate, { color: bloomTheme.isDark ? '#BBBBBB' : '#888888' }]}>
+                                <Text style={[styles.historyDate, { color: bloomTheme.colors.textTertiary }]}>
                                     {entry.createdAt ? new Date(entry.createdAt).toLocaleString() : ''}
                                 </Text>
                             </View>
@@ -183,13 +182,11 @@ const styles = StyleSheet.create({
     karmaLabel: {
         fontSize: 16,
         marginBottom: 18,
-        fontFamily: fontFamilies.inter,
     },
     karmaAmount: {
         fontSize: 48,
         fontWeight: 'bold',
         marginBottom: 4,
-        fontFamily: fontFamilies.inter,
     },
     actionContainer: {
         marginBottom: 18,
@@ -228,7 +225,6 @@ const styles = StyleSheet.create({
     sectionTitle: {
         fontSize: 18,
         fontWeight: Platform.OS === 'web' ? '600' : undefined,
-        fontFamily: fontFamilies.interSemiBold,
         marginTop: 8,
         alignSelf: 'flex-start',
         marginLeft: 24,

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

@@ -73,7 +73,7 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                     <TextInput
                         style={[styles.searchInput, { color: bloomTheme.colors.text }]}
                         placeholder={t('karma.faq.search') || 'Search FAQ...'}
-                        placeholderTextColor={bloomTheme.isDark ? '#BBBBBB' : '#888888'}
+                        placeholderTextColor={bloomTheme.colors.textTertiary}
                         value={search}
                         onChangeText={setSearch}
                         returnKeyType="search"

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

@@ -41,7 +41,7 @@ const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navi
             {isLoading ? (
                 <ActivityIndicator size="large" color={primaryColor} style={{ marginTop: 40 }} />
             ) : error ? (
-                <Text style={[styles.error, { color: '#D32F2F' }]}>{error}</Text>
+                <Text style={[styles.error, { color: bloomTheme.colors.error }]}>{error}</Text>
             ) : (
                 <ScrollView contentContainerStyle={styles.listContainer}>
                     {leaderboard.length === 0 ? (
@@ -50,7 +50,7 @@ const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navi
                         leaderboard.map((entry, idx) => (
                             <TouchableOpacity
                                 key={entry.userId}
-                                style={[styles.row, idx < 3 && { backgroundColor: '#f7eaff' }]}
+                                style={[styles.row, { borderColor: bloomTheme.colors.border }, idx < 3 && { backgroundColor: bloomTheme.colors.primarySubtle }]}
                                 onPress={() => navigate?.('Profile', { userId: entry.userId, username: entry.username })}
                                 activeOpacity={0.7}
                             >
@@ -76,13 +76,12 @@ const styles = StyleSheet.create({
         paddingVertical: 12,
         paddingHorizontal: 20,
         borderBottomWidth: 1,
-        borderColor: '#eee',
     },
     rank: { fontSize: 20, width: 32, textAlign: 'center', fontWeight: 'bold' },
     avatar: { marginHorizontal: 8 },
     username: { flex: 1, fontSize: 16, marginLeft: 8 },
     karma: { fontSize: 18, fontWeight: 'bold', marginLeft: 12 },
-    placeholder: { fontSize: 16, color: '#888', textAlign: 'center', marginTop: 40 },
+    placeholder: { fontSize: 16, textAlign: 'center', marginTop: 40 },
     error: { fontSize: 16, textAlign: 'center', marginTop: 40 },
 });