@oxy.so/services 3.1.0 → 4.0.0

package/src/ui/screens/FeedbackScreen.tsx

@@ -375,7 +375,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 
 			<View className="flex-row gap-space-8 mt-space-24 w-full">
 				<Button
-					variant="secondary"
+					appearance="subtle" tone="neutral"
 					onPress={goBack}
 					accessibilityLabel="Go back"
 					icon={<Ionicons name="arrow-back" size={16} color={colors.text} />}
@@ -385,7 +385,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 				</Button>
 
 				<Button
-					variant="primary"
+					appearance="solid" tone="accent"
 					onPress={nextStep}
 					disabled={!isTypeStepValid()}
 					accessibilityLabel="Continue to next step"
@@ -485,7 +485,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 
 			<View className="flex-row gap-space-8 mt-space-24 w-full">
 				<Button
-					variant="secondary"
+					appearance="subtle" tone="neutral"
 					onPress={prevStep}
 					accessibilityLabel="Go back"
 					icon={<Ionicons name="arrow-back" size={16} color={colors.text} />}
@@ -495,7 +495,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 				</Button>
 
 				<Button
-					variant="primary"
+					appearance="solid" tone="accent"
 					onPress={nextStep}
 					disabled={!isDetailsStepValid()}
 					accessibilityLabel="Continue to next step"
@@ -574,7 +574,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 
 			<View className="flex-row gap-space-8 mt-space-24 w-full">
 				<Button
-					variant="secondary"
+					appearance="subtle" tone="neutral"
 					onPress={prevStep}
 					accessibilityLabel="Go back"
 					icon={<Ionicons name="arrow-back" size={16} color={colors.text} />}
@@ -584,7 +584,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 				</Button>
 
 				<Button
-					variant="primary"
+					appearance="solid" tone="accent"
 					onPress={nextStep}
 					disabled={!isContactStepValid()}
 					accessibilityLabel="Continue to summary"
@@ -653,7 +653,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 			</View>
 
 			<Button
-				variant="primary"
+				appearance="solid" tone="accent"
 				onPress={handleSubmitFeedback}
 				disabled={feedbackState.status === "submitting"}
 				loading={feedbackState.status === "submitting"}
@@ -670,7 +670,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 
 			<View className="flex-row mt-space-16 w-full">
 				<Button
-					variant="secondary"
+					appearance="subtle" tone="neutral"
 					onPress={prevStep}
 					accessibilityLabel="Go back"
 					icon={<Ionicons name="arrow-back" size={16} color={colors.text} />}
@@ -701,7 +701,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 						"Your feedback has been submitted successfully. We'll review it and get back to you soon."}
 				</Text>
 				<Button
-					variant="primary"
+					appearance="solid" tone="accent"
 					onPress={() => {
 						resetForm();
 						setCurrentStep(0);

package/src/ui/screens/FileManagementScreen.tsx

@@ -1,16 +1,8 @@
+import { Button } from '@oxy.so/bloom/button';
 import type React from 'react';
 import { useState, useCallback, useMemo, useRef } from 'react';
-import {
-    View,
-    Text,
-    TouchableOpacity,
-    StyleSheet,
-    ScrollView,
-    ActivityIndicator,
-    RefreshControl,
-    TextInput,
-    useWindowDimensions,
-} from 'react-native';
+import { View, TouchableOpacity, StyleSheet, ScrollView, ActivityIndicator, RefreshControl, useWindowDimensions } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
 import { useQueryClient } from '@tanstack/react-query';
 import { Image as ExpoImage } from 'expo-image';
 import type { FileManagementScreenProps } from '../types/fileManagement';
@@ -46,11 +38,10 @@ import PhotoPickerView from './fileManagement/PhotoPickerSection';
 import FileListSection, { type FileListItem } from './fileManagement/FileListSection';
 import FileLibraryError from './fileManagement/FileLibraryError';
 import UploadBar from './fileManagement/UploadBar';
-import { AnimatedButton } from '../components/fileManagement/AnimatedButton';
+import { SegmentedControl, SegmentedControlItem } from '@oxy.so/bloom/segmented-control';
+import { Search } from '@oxy.so/bloom/search';
 
-// Genuinely-inline-only styles: `viewModeButton` is spread into an Animated.View
-// style array (interpolated backgroundColor), and the photo tiles are
-// `expo-image` (no className remap). Everything else uses NativeWind classNames.
+// Photo tiles use expo-image dimensions; controls use Bloom primitives.
 // Nav-header slot layout for this screen's action row + review-mode back button.
 const fmHeaderStyles = StyleSheet.create({
     actionsRow: {
@@ -67,15 +58,6 @@ const fmHeaderStyles = StyleSheet.create({
 });
 
 const screenStyles = StyleSheet.create({
-    viewModeButton: {
-        paddingHorizontal: 10,
-        paddingVertical: 6,
-        borderRadius: 999,
-        minWidth: 36,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginHorizontal: 1,
-    },
     justifiedPhotoImage: { width: '100%', height: '100%', borderRadius: 6 },
 });
 
@@ -799,35 +781,16 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 },
                 // Hide action buttons when selecting (in selectMode or bulk operations mode)
                 rightElement: (!selectMode && selectedIds.size === 0) ? (
-                    <View className="flex-row items-center gap-[6px] ml-[12px]">
-                        {(isImage || isVideo || file.contentType.includes('pdf')) && (
-                            <TouchableOpacity
-                                className="w-[34px] h-[34px] rounded-[8px] items-center justify-center"
-                                style={{ backgroundColor: colors.backgroundSecondary }}
-                                onPress={() => handleFileOpen(file)}
-                            >
-                                <Ionicons name="eye" size={18} color={colors.primary} />
-                            </TouchableOpacity>
-                        )}
-                        <TouchableOpacity
-                            className="w-[34px] h-[34px] rounded-[8px] items-center justify-center"
-                            style={{ backgroundColor: colors.backgroundSecondary }}
-                            onPress={() => handleFileDownload(file.id, file.filename)}
-                        >
-                            <Ionicons name="download" size={18} color={colors.primary} />
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            className="w-[34px] h-[34px] rounded-[8px] items-center justify-center"
-                            style={{ backgroundColor: colors.negativeSubtle }}
-                            onPress={() => confirmFileDelete(file.id, file.filename)}
-                            disabled={deletingId === file.id}
-                        >
-                            {deletingId === file.id ? (
-                                <ActivityIndicator size="small" color={colors.error} />
-                            ) : (
-                                <Ionicons name="trash" size={18} color={colors.error} />
-                            )}
-                        </TouchableOpacity>
+                    <View className="flex-row items-center gap-1.5 ml-3">
+                        {(isImage || isVideo || file.contentType.includes('pdf')) ? <Button appearance="subtle" tone="neutral" size="small" iconOnly stopPropagation
+                            accessibilityLabel={`Preview ${file.filename}`} onPress={() => handleFileOpen(file)}
+                            icon={<Ionicons name="eye" size={18} color={colors.text} />} /> : null}
+                        <Button appearance="subtle" tone="neutral" size="small" iconOnly stopPropagation
+                            accessibilityLabel={`Download ${file.filename}`} onPress={() => handleFileDownload(file.id, file.filename)}
+                            icon={<Ionicons name="download" size={18} color={colors.text} />} />
+                        <Button appearance="subtle" tone="danger" size="small" iconOnly stopPropagation loading={deletingId === file.id}
+                            accessibilityLabel={`Delete ${file.filename}`} onPress={() => confirmFileDelete(file.id, file.filename)}
+                            icon={<Ionicons name="trash" size={18} color={colors.error} />} />
                     </View>
                 ) : undefined,
             };
@@ -844,7 +807,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             iconColor={colors.error}
             titleColor={colors.text}
             descriptionColor={colors.textSecondary}
-            buttonColor={colors.primary}
         />
     );
 
@@ -866,21 +828,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             : t('fileManagement.emptyPhotos.otherDescription')
                     } </Text>
                     {user?.id === targetUserId && (
-                        <TouchableOpacity
-                            className="flex-row items-center px-[24px] py-[12px] rounded-[24px] gap-[8px]"
-                            style={{ backgroundColor: colors.primary }}
-                            onPress={handleFileUpload}
-                            disabled={uploading || isPickingDocument}
-                        >
-                            {(uploading || isPickingDocument) ? (
-                                <ActivityIndicator size="small" color="#FFFFFF" />
-                            ) : (
-                                <>
-                                    <Ionicons name="cloud-upload" size={20} color="#FFFFFF" />
-                                    <Text className="text-white text-[16px] font-semibold">{t('fileManagement.uploadPhotos')}</Text>
-                                </>
-                            )}
-                        </TouchableOpacity>
+                        <Button onPress={handleFileUpload} loading={uploading || isPickingDocument}>{t('fileManagement.uploadPhotos')}</Button>
                     )}
                 </View>
             );
@@ -934,21 +882,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 }
             </Text>
             {user?.id === targetUserId && (
-                <TouchableOpacity
-                    className="flex-row items-center px-[24px] py-[12px] rounded-[24px] gap-[8px]"
-                    style={{ backgroundColor: colors.primary }}
-                    onPress={handleFileUpload}
-                    disabled={uploading || isPickingDocument}
-                >
-                    {(uploading || isPickingDocument) ? (
-                        <ActivityIndicator size="small" color="#FFFFFF" />
-                    ) : (
-                        <>
-                            <Ionicons name="cloud-upload" size={20} color="#FFFFFF" />
-                            <Text className="text-white text-[16px] font-semibold">{t('fileManagement.uploadFiles')}</Text>
-                        </>
-                    )}
-                </TouchableOpacity>
+                <Button onPress={handleFileUpload} loading={uploading || isPickingDocument}>{t('fileManagement.uploadFiles')}</Button>
             )}
         </View>
     );
@@ -1215,60 +1149,18 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     className="flex-1"
                     style={{ maxWidth: '80%' }}
                 >
-                    <View
-                        className="flex-row rounded-full p-[2px] overflow-hidden"
-                        style={{ backgroundColor: colors.card }}
-                    >
-                        <AnimatedButton
-                            isSelected={viewMode === 'all'}
-                            onPress={() => setViewMode('all')}
-                            icon={viewMode === 'all' ? 'folder' : 'folder-outline'}
-                            primaryColor={colors.primary}
-                            textColor={colors.text}
-                            style={screenStyles.viewModeButton}
-                            accessibilityLabel={t('fileManagement.a11y.viewAll') || 'Show all files'}
-                        />
-                        <AnimatedButton
-                            isSelected={viewMode === 'photos'}
-                            onPress={() => setViewMode('photos')}
-                            icon={viewMode === 'photos' ? 'image-multiple' : 'image-multiple-outline'}
-                            primaryColor={colors.primary}
-                            textColor={colors.text}
-                            style={screenStyles.viewModeButton}
-                            accessibilityLabel={t('fileManagement.a11y.viewPhotos') || 'Show photos only'}
-                        />
-                        <AnimatedButton
-                            isSelected={viewMode === 'videos'}
-                            onPress={() => setViewMode('videos')}
-                            icon={viewMode === 'videos' ? 'video' : 'video-outline'}
-                            primaryColor={colors.primary}
-                            textColor={colors.text}
-                            style={screenStyles.viewModeButton}
-                            accessibilityLabel={t('fileManagement.a11y.viewVideos') || 'Show videos only'}
-                        />
-                        <AnimatedButton
-                            isSelected={viewMode === 'documents'}
-                            onPress={() => setViewMode('documents')}
-                            icon={viewMode === 'documents' ? 'file-document' : 'file-document-outline'}
-                            primaryColor={colors.primary}
-                            textColor={colors.text}
-                            style={screenStyles.viewModeButton}
-                            accessibilityLabel={t('fileManagement.a11y.viewDocuments') || 'Show documents only'}
-                        />
-                        <AnimatedButton
-                            isSelected={viewMode === 'audio'}
-                            onPress={() => setViewMode('audio')}
-                            icon={viewMode === 'audio' ? 'music-note' : 'music-note-outline'}
-                            primaryColor={colors.primary}
-                            textColor={colors.text}
-                            style={screenStyles.viewModeButton}
-                            accessibilityLabel={t('fileManagement.a11y.viewAudio') || 'Show audio only'}
-                        />
-                    </View>
+                    <SegmentedControl type="radio" label={t('fileManagement.viewMode') || 'File type'}
+                        value={viewMode} onValueChange={setViewMode} size="small">
+                        {(['all', 'photos', 'videos', 'documents', 'audio'] as const).map(mode => (
+                            <SegmentedControlItem key={mode} value={mode} accessibilityLabel={mode}>
+                                <MaterialCommunityIcons
+                                    name={({ all: 'folder-outline', photos: 'image-multiple-outline', videos: 'video-outline', documents: 'file-document-outline', audio: 'music-note-outline' } as const)[mode]}
+                                    size={18} color={colors.text} />
+                            </SegmentedControlItem>
+                        ))}
+                    </SegmentedControl>
                 </ScrollView>
-                <TouchableOpacity
-                    className="flex-row items-center justify-center px-[10px] py-[6px] rounded-full min-w-[36px] gap-[4px]"
-                    style={{ backgroundColor: colors.card }}
+                <Button appearance="subtle" tone="neutral" size="small"
                     accessibilityRole="button"
                     accessibilityLabel={t('fileManagement.a11y.sortBy', {
                         field: sortBy,
@@ -1285,7 +1177,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc');
                         }
                     }}
-                >
+                    trailing={<View className="flex-row items-center gap-1">
                     <MaterialCommunityIcons
                         name={
                             sortBy === 'date' ? 'calendar' :
@@ -1300,58 +1192,21 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         size={14}
                         color={colors.textSecondary}
                     />
-                </TouchableOpacity>
+                </View>} />
                 {user?.id === targetUserId && (!selectMode || allowUploadInSelectMode) && (
-                    <TouchableOpacity
-                        className="h-[44px] w-[44px] rounded-[22px] items-center justify-center"
-                        style={{ backgroundColor: colors.primary }}
-                        onPress={handleFileUpload}
-                        disabled={uploading || isPickingDocument}
-                        accessibilityRole="button"
+                    <Button iconOnly onPress={handleFileUpload} loading={uploading || isPickingDocument}
                         accessibilityLabel={t('fileManagement.a11y.uploadFile') || 'Upload file'}
-                        accessibilityState={{ busy: uploading || isPickingDocument }}
-                    >
-                        {uploading ? (
-                            <View className="items-center justify-center">
-                                <ActivityIndicator size="small" color="#FFFFFF" />
-                                {uploadProgress && (
-                                    <Text className="text-white text-[10px] font-semibold mt-[2px]">
-                                        {uploadProgress.current}/{uploadProgress.total}
-                                    </Text>
-                                )}
-                            </View>
-                        ) : isPickingDocument ? (
-                            <ActivityIndicator size="small" color="#FFFFFF" />
-                        ) : (
-                            <Ionicons name="add" size={22} color="#FFFFFF" />
-                        )}
-                    </TouchableOpacity>
+                        icon={<Ionicons name="add" size={22} color={colors.primaryForeground} />} />
                 )}
             </View>
 
             {/* Search Bar */}
             {files.length > 0 && (viewMode === 'all' || files.some(f => f.contentType.startsWith('image/'))) && (
-                <View
-                    className="flex-row items-center px-[14px] py-[10px] mx-[12px] mb-[12px] rounded-full gap-[10px]"
-                    style={{ backgroundColor: colors.card }}
-                >
-                    <Ionicons name="search" size={22} color={colors.icon} />
-                    <TextInput
-                        className="flex-1 text-[16px] leading-[20px]"
-                        style={{ color: colors.text }}
-                        placeholder={viewMode === 'photos' ? t('fileManagement.searchPhotos') : t('fileManagement.searchFiles')}
-                        placeholderTextColor={colors.textSecondary}
-                        value={searchQuery}
-                        onChangeText={setSearchQuery}
+                <View className="mx-[12px] mb-[12px]">
+                    <Search
+                        label={viewMode === 'photos' ? t('fileManagement.searchPhotos') : t('fileManagement.searchFiles')}
+                        value={searchQuery} onValueChange={setSearchQuery} onClearText={() => setSearchQuery('')}
                     />
-                    {searchQuery.length > 0 && (
-                        <TouchableOpacity
-                            onPress={() => setSearchQuery('')}
-                            className="p-[4px] rounded-[12px] items-center justify-center"
-                        >
-                            <Ionicons name="close-circle" size={22} color={colors.icon} />
-                        </TouchableOpacity>
-                    )}
                 </View>
             )}
 
@@ -1410,8 +1265,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             {!selectMode && uploading && (
                 <UploadBar
                     uploadProgress={uploadProgress}
-                    isDark={bloomTheme.isDark}
-                    colors={colors}
                     t={t}
                 />
             )}

package/src/ui/screens/LanguageSelectorScreen.tsx

@@ -1,5 +1,6 @@
+import { Button } from '@oxy.so/bloom/button';
 import React, { useCallback, useMemo, useState } from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxy.so/bloom/theme';
 import Ionicons from '../icons/Ionicons';
@@ -196,19 +197,10 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = () => {
                                             </Text>
                                         </View>
                                     ) : canRemove ? (
-                                        <TouchableOpacity
-                                            onPress={() => handleRemove(entry.code)}
-                                            disabled={isBusy}
-                                            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-                                            accessibilityRole="button"
+                                        <Button appearance="plain" tone="neutral" size="small" iconOnly stopPropagation
+                                            onPress={() => handleRemove(entry.code)} disabled={isBusy}
                                             accessibilityLabel={`${t('language.remove')} ${entry.name}`}
-                                        >
-                                            <Ionicons
-                                                name="close-circle"
-                                                size={REMOVE_ICON_SIZE}
-                                                color={bloomTheme.colors.textSecondary}
-                                            />
-                                        </TouchableOpacity>
+                                            icon={<Ionicons name="close-circle" size={REMOVE_ICON_SIZE} color={bloomTheme.colors.textSecondary} />} />
                                     ) : undefined
                                 }
                                 showChevron={false}

package/src/ui/screens/PaymentGatewayScreen.tsx

@@ -195,7 +195,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
                     {t('payment.errors.invalidAmount')}
                 </H4>
                 <Button
-                    variant="primary"
+                    appearance="solid" tone="accent"
                     onPress={handleClose}
                     size="small"
                     icon={<Ionicons name="close" size={16} />}

package/src/ui/screens/PremiumSubscriptionScreen.tsx

@@ -599,7 +599,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                     <View className="flex-row gap-space-12">
                         {subscription.cancelAtPeriodEnd ? (
                             <Button
-                                variant="primary"
+                                appearance="solid" tone="accent"
                                 onPress={handleReactivateSubscription}
                                 className="flex-1"
                                 accessibilityLabel={t('premium.actions.reactivate') || 'Reactivate'}
@@ -608,7 +608,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                             </Button>
                         ) : (
                             <Button
-                                variant="destructive"
+                                appearance="solid" tone="danger"
                                 onPress={handleCancelSubscription}
                                 className="flex-1"
                                 accessibilityLabel={t('premium.actions.cancelSubBtn') || 'Cancel Subscription'}
@@ -618,7 +618,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         )}
 
                         <Button
-                            variant="outline"
+                            appearance="subtle" tone="neutral"
                             onPress={() => navigate?.('PaymentGateway')}
                             className="flex-1"
                             accessibilityLabel={t('premium.actions.manageBilling') || 'Manage Billing'}
@@ -752,7 +752,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
                 {isCurrentPlan ? (
                     <Button
-                        variant="secondary"
+                        appearance="subtle" tone="neutral"
                         disabled
                         icon={<Ionicons name="checkmark-circle" size={18} color={colors.success} />}
                         accessibilityLabel={t('premium.plan.current') || 'Current Plan'}
@@ -762,7 +762,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                     </Button>
                 ) : !availability.available ? (
                     <Button
-                        variant="secondary"
+                        appearance="subtle" tone="neutral"
                         disabled
                         accessibilityLabel={t('premium.plan.notAvailableInApp') || 'Not Available in Current App'}
                         className="w-full"
@@ -895,7 +895,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
                 {isIncludedInCurrentPlan ? (
                     <Button
-                        variant="primary"
+                        appearance="solid" tone="accent"
                         disabled
                         icon={<Ionicons name="checkmark-circle" size={16} color={colors.primaryForeground} />}
                         accessibilityLabel={t('premium.feature.includedInPlan') || 'Included in your plan'}
@@ -906,7 +906,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 ) : isSubscribed ? (
                     <View className="flex-row gap-space-8">
                         <Button
-                            variant="secondary"
+                            appearance="subtle" tone="neutral"
                             disabled
                             icon={<Ionicons name="checkmark" size={16} color={colors.success} />}
                             accessibilityLabel={t('premium.feature.subscribed') || 'Subscribed'}
@@ -915,7 +915,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                             {t('premium.feature.subscribed') || 'Subscribed'}
                         </Button>
                         <Button
-                            variant="outline"
+                            appearance="subtle" tone="neutral"
                             onPress={() => handleFeatureUnsubscribe(feature.id)}
                             accessibilityLabel={t('premium.actions.unsubscribe') || 'Unsubscribe'}
                             className="flex-1"
@@ -925,7 +925,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                     </View>
                 ) : canPurchase ? (
                     <Button
-                        variant="primary"
+                        appearance="solid" tone="accent"
                         onPress={() => handleFeatureSubscribe(feature.id)}
                         disabled={processingPayment}
                         loading={processingPayment}
@@ -936,7 +936,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                     </Button>
                 ) : (
                     <Button
-                        variant="secondary"
+                        appearance="subtle" tone="neutral"
                         disabled
                         accessibilityLabel={t('premium.feature.plansOnly') || 'Only available in subscription plans'}
                         className="w-full"

package/src/ui/screens/PrivacySettingsScreen.tsx

@@ -367,7 +367,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                                         title={displayName}
                                         rightElement={
                                             <Button
-                                                variant="destructive"
+                                                appearance="solid" tone="danger"
                                                 size="small"
                                                 onPress={() => handleUnblock(userId)}
                                             >
@@ -401,7 +401,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                                         description={t('privacySettings.restrictedDescription') || 'Limited interactions'}
                                         rightElement={
                                             <Button
-                                                variant="secondary"
+                                                appearance="subtle" tone="neutral"
                                                 size="small"
                                                 onPress={() => handleUnrestrict(userId)}
                                             >

package/src/ui/screens/ProfileScreen.tsx

@@ -214,7 +214,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                     <View style={styles.actionButtonWrapper}>
                         {isOwnProfile ? (
                             <Button
-                                variant="secondary"
+                                appearance="subtle" tone="neutral"
                                 size="small"
                                 onPress={() => navigate?.('ManageAccount')}
                             >