@oxyhq/services 6.9.45 → 6.9.46

package/src/ui/screens/AccountVerificationScreen.tsx

@@ -12,7 +12,8 @@ import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
 import * as Prompt from '@oxyhq/bloom/prompt';
 import { usePromptControl } from '@oxyhq/bloom/prompt';
-import { Header, Section } from '../components';
+import { Header } from '../components';
+import { SettingsListGroup } from '@oxyhq/bloom/settings-list';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
@@ -86,13 +87,13 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
             />
 
             <ScrollView style={styles.content}>
-                <Section  isFirst={true}>
+                <SettingsListGroup>
                     <Text style={styles.description} className="text-muted-foreground">
                         {t('accountVerification.description') || 'Request a verified badge for your account. Verified accounts help establish authenticity and credibility.'}
                     </Text>
-                </Section>
+                </SettingsListGroup>
 
-                <Section title={t('accountVerification.sections.request') || 'VERIFICATION REQUEST'} >
+                <SettingsListGroup title={t('accountVerification.sections.request') || 'VERIFICATION REQUEST'}>
                     <View style={styles.inputGroup}>
                         <Text style={styles.label} className="text-foreground">
                             {t('accountVerification.reasonLabel') || 'Reason for Verification *'}
@@ -134,9 +135,9 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                             editable={!isSubmitting}
                         />
                     </View>
-                </Section>
+                </SettingsListGroup>
 
-                <Section >
+                <SettingsListGroup>
                     <TouchableOpacity
                         style={styles.submitButton}
                         className={isSubmitting ? 'bg-muted-foreground' : 'bg-primary'}
@@ -151,13 +152,13 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                             </Text>
                         )}
                     </TouchableOpacity>
-                </Section>
+                </SettingsListGroup>
 
-                <Section >
+                <SettingsListGroup>
                     <Text style={styles.note} className="text-muted-foreground">
                         {t('accountVerification.note') || 'Note: Verification requests are reviewed manually and may take several days. We will notify you once your request has been reviewed.'}
                     </Text>
-                </Section>
+                </SettingsListGroup>
             </ScrollView>
             <Prompt.Basic
                 control={successPrompt}

package/src/ui/screens/FeedbackScreen.tsx

@@ -17,7 +17,8 @@ import { normalizeTheme } from '../utils/themeUtils';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
 import { packageInfo } from '@oxyhq/core';
-import { GroupedSection } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useOxy } from '../context/OxyContext';
 
@@ -143,40 +144,20 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
         }
     }, [feedbackData, user, isTypeStepValid, isDetailsStepValid, isContactStepValid, resetForm, setFeedbackState, t]);
 
-    const feedbackTypeItems = useMemo(() => FEEDBACK_TYPES.map(type => ({
-        id: type.id,
-        icon: type.icon,
-        iconColor: type.color,
-        title: type.label,
-        subtitle: type.description,
-        onPress: () => { updateField('type', type.id); updateField('category', ''); },
-        selected: feedbackData.type === type.id,
-        showChevron: false,
-        multiRow: true,
-        dense: true,
-    })), [feedbackData.type, updateField]);
-
-    const categoryItems = useMemo(() => (feedbackData.type ? (CATEGORIES[feedbackData.type] || []).map(cat => ({
-        id: cat,
-        icon: feedbackData.category === cat ? 'check-circle' : 'ellipse-outline',
-        iconColor: feedbackData.category === cat ? colors.primary : colors.secondaryText,
-        title: cat,
-        onPress: () => updateField('category', cat),
-        selected: feedbackData.category === cat,
-        showChevron: false,
-        dense: true,
-    })) : []), [feedbackData.type, feedbackData.category, colors.primary, colors.secondaryText, updateField]);
-
-    const priorityItems = useMemo(() => PRIORITY_LEVELS.map(p => ({
-        id: p.id,
-        icon: p.icon,
-        iconColor: p.color,
-        title: p.label,
-        onPress: () => updateField('priority', p.id),
-        selected: feedbackData.priority === p.id,
-        showChevron: false,
-        dense: true,
-    })), [feedbackData.priority, updateField]);
+    const feedbackTypeData = useMemo(() => FEEDBACK_TYPES.map(type => ({
+        ...type,
+        isSelected: feedbackData.type === type.id,
+    })), [feedbackData.type]);
+
+    const categoryData = useMemo(() => (feedbackData.type ? (CATEGORIES[feedbackData.type] || []).map(cat => ({
+        name: cat,
+        isSelected: feedbackData.category === cat,
+    })) : []), [feedbackData.type, feedbackData.category]);
+
+    const priorityData = useMemo(() => PRIORITY_LEVELS.map(p => ({
+        ...p,
+        isSelected: feedbackData.priority === p.id,
+    })), [feedbackData.priority]);
 
     const renderTypeStep = () => (
         <Animated.View style={[styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }]}>
@@ -189,7 +170,18 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                 </Text>
             </View>
             <View style={styles.fullBleed}>
-                <GroupedSection items={feedbackTypeItems} />
+                <SettingsListGroup>
+                    {feedbackTypeData.map(type => (
+                        <SettingsListItem
+                            key={type.id}
+                            icon={<SettingsIcon name={type.icon} color={type.color} />}
+                            title={type.label}
+                            description={type.description}
+                            onPress={() => { updateField('type', type.id); updateField('category', ''); }}
+                            showChevron={false}
+                        />
+                    ))}
+                </SettingsListGroup>
             </View>
 
             {feedbackData.type && (
@@ -198,7 +190,17 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                         {t('feedback.category.label') || 'Category'}
                     </Text>
                     <View style={styles.fullBleed}>
-                        <GroupedSection items={categoryItems} />
+                        <SettingsListGroup>
+                            {categoryData.map(cat => (
+                                <SettingsListItem
+                                    key={cat.name}
+                                    icon={<SettingsIcon name={cat.isSelected ? 'check-circle' : 'ellipse-outline'} color={cat.isSelected ? colors.primary : colors.secondaryText} />}
+                                    title={cat.name}
+                                    onPress={() => updateField('category', cat.name)}
+                                    showChevron={false}
+                                />
+                            ))}
+                        </SettingsListGroup>
                     </View>
                 </View>
             )}
@@ -274,7 +276,17 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                     {t('feedback.priority.label') || 'Priority Level'}
                 </Text>
                 <View style={styles.fullBleed}>
-                    <GroupedSection items={priorityItems} />
+                    <SettingsListGroup>
+                        {priorityData.map(p => (
+                            <SettingsListItem
+                                key={p.id}
+                                icon={<SettingsIcon name={p.icon} color={p.color} />}
+                                title={p.label}
+                                onPress={() => updateField('priority', p.id)}
+                                showChevron={false}
+                            />
+                        ))}
+                    </SettingsListGroup>
                 </View>
             </View>
 

package/src/ui/screens/FileManagementScreen.tsx

@@ -37,7 +37,7 @@ import type { FileMetadata } from '@oxyhq/core';
 import { useFileStore, useFiles, useUploading as useUploadingStore, useUploadAggregateProgress, useDeleting as useDeletingStore } from '../stores/fileStore';
 import Header from '../components/Header';
 import JustifiedPhotoGrid from '../components/photogrid/JustifiedPhotoGrid';
-import { GroupedSection } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
@@ -1360,8 +1360,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         );
     };
 
-    // GroupedSection-based file items (for 'all' view) replacing legacy flat list look
-    // biome-ignore lint/suspicious/noExplicitAny: GroupedSection items have dynamic props
+    // SettingsListItem-based file items (for 'all' view)
+    // biome-ignore lint/suspicious/noExplicitAny: file items have dynamic props
     const groupedFileItems: any[] = useMemo(() => {
         // filteredFiles is already sorted, so just use it directly
         const sortedFiles = filteredFiles;
@@ -1378,11 +1378,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             const hasPreview = isImage || isPDF || isVideo;
             const isSelected = selectedIds.has(file.id);
 
-            // Create customIcon for preview thumbnails (36x36 to match GroupedItem iconContainer)
-            let customIcon: React.ReactNode | undefined;
+            // Create icon for preview thumbnails (36x36)
+            let fileIcon: React.ReactNode | undefined;
             if (hasPreview) {
                 if (isImage) {
-                    customIcon = (
+                    fileIcon = (
                         <View style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden' }}>
                             <ExpoImage
                                 source={{ uri: getSafeDownloadUrlCallback(file, 'thumb') }}
@@ -1398,7 +1398,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         </View>
                     );
                 } else if (isVideo) {
-                    customIcon = (
+                    fileIcon = (
                         <View style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden', backgroundColor: '#000000', position: 'relative' }}>
                             <ExpoImage
                                 source={{ uri: getSafeDownloadUrlCallback(file, 'thumb') }}
@@ -1417,7 +1417,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         </View>
                     );
                 } else if (isPDF) {
-                    customIcon = (
+                    fileIcon = (
                         <View style={{ width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center', backgroundColor: '#FF6B6B20' }}>
                             <Ionicons name="document" size={20} color={colors.primary} />
                         </View>
@@ -1427,12 +1427,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
             return {
                 id: file.id,
-                customIcon: customIcon,
-                icon: !hasPreview ? getFileIcon(file.contentType) : undefined,
-                iconColor: colors.primary,
+                icon: fileIcon ?? (!hasPreview ? <Ionicons name={getFileIcon(file.contentType)} size={20} color={colors.primary} /> : undefined),
                 title: file.filename,
-                subtitle: `${formatFileSize(file.length)} • ${new Date(file.uploadDate).toLocaleDateString()}`,
-                theme: theme as 'light' | 'dark',
+                description: `${formatFileSize(file.length)} • ${new Date(file.uploadDate).toLocaleDateString()}`,
                 onPress: () => {
                     // Support selection in regular mode with long press or if already selecting
                     if (!selectMode && selectedIds.size > 0) {
@@ -1442,20 +1439,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         handleFileOpen(file);
                     }
                 },
-                onLongPress: !selectMode ? () => {
-                    // Enable selection mode on long press
-                    if (selectedIds.size === 0) {
-                        setSelectedIds(new Set([file.id]));
-                    } else {
-                        toggleSelect(file);
-                    }
-                } : undefined,
-                showChevron: false,
-                dense: true,
-                multiRow: !!file.metadata?.description,
-                selected: (selectMode || selectedIds.size > 0) && isSelected,
                 // Hide action buttons when selecting (in selectMode or bulk operations mode)
-                customContent: (!selectMode && selectedIds.size === 0) ? (
+                rightElement: (!selectMode && selectedIds.size === 0) ? (
                     <View style={fileManagementStyles.groupedActions}>
                         {(isImage || isVideo || file.contentType.includes('pdf')) && (
                             <TouchableOpacity
@@ -1484,11 +1469,6 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         </TouchableOpacity>
                     </View>
                 ) : undefined,
-                customContentBelow: file.metadata?.description ? (
-                    <Text style={[fileManagementStyles.groupedDescription, { color: bloomTheme.isDark ? '#AAAAAA' : '#666666' }]} numberOfLines={2}>
-                        {file.metadata.description}
-                    </Text>
-                ) : undefined,
             };
         });
     }, [filteredFiles, theme, deleting, handleFileDownload, confirmFileDelete, handleFileOpen, getSafeDownloadUrlCallback, selectMode, selectedIds]);
@@ -1836,7 +1816,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             );
         };
 
-        // Skeleton file item matching GroupedSection structure
+        // Skeleton file item matching SettingsListItem structure
         const SkeletonFileItem = ({ index }: { index: number }) => (
             <View
                 style={[
@@ -1908,7 +1888,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     ))}
                 </View>
 
-                {/* File List Skeleton - Matching GroupedSection */}
+                {/* File List Skeleton - Matching SettingsListItem */}
                 <ScrollView
                     style={fileManagementStyles.scrollView}
                     contentContainerStyle={fileManagementStyles.scrollContainer}
@@ -2240,7 +2220,19 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         </View>
                     ) : filteredFiles.length === 0 ? renderEmptyState() : (
                         <>
-                            <GroupedSection items={groupedFileItems} />
+                            <SettingsListGroup>
+                                {groupedFileItems.map(item => (
+                                    <SettingsListItem
+                                        key={item.id}
+                                        icon={item.icon}
+                                        title={item.title}
+                                        description={item.description}
+                                        onPress={item.onPress}
+                                        showChevron={false}
+                                        rightElement={item.rightElement}
+                                    />
+                                ))}
+                            </SettingsListGroup>
                             {paging.loadingMore && (
                                 <View style={fileManagementStyles.loadingMoreBar}>
                                     <ActivityIndicator size="small" color={colors.primary} />

package/src/ui/screens/HistoryViewScreen.tsx

@@ -2,7 +2,9 @@ import React, { useState, useCallback } from 'react';
 import { View, StyleSheet, ScrollView } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
-import { Header, Section, GroupedSection, LoadingState, EmptyState } from '../components';
+import { Header, LoadingState, EmptyState } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useColorScheme } from '../hooks/useColorScheme';
@@ -93,17 +95,34 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack }
         <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
             <Header title={t('history.title') || 'History'} onBack={goBack || onClose} variant="minimal" elevation="subtle" />
             <ScrollView style={styles.content}>
-                <Section title={t('history.actions') || 'Actions'} isFirst={true}>
-                    <GroupedSection items={[
-                        { id: 'delete-last-15', icon: 'clock-outline', iconColor: themeColors.iconStorage, title: t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes', subtitle: t('history.deleteLast15Minutes.subtitle') || 'Remove recent history entries', onPress: () => deleteLast15Prompt.open(), disabled: isDeleting || history.length === 0 },
-                        { id: 'clear-all', icon: 'delete-outline', iconColor: themeColors.iconSharing, title: t('history.clearAll.title') || 'Clear All History', subtitle: t('history.clearAll.subtitle') || 'Remove all history entries', onPress: () => clearAllPrompt.open(), disabled: isDeleting || history.length === 0 },
-                    ]} />
-                </Section>
-                <Section title={t('history.recent') || 'Recent History'}>
+                <SettingsListGroup title={t('history.actions') || 'Actions'}>
+                    <SettingsListItem
+                        icon={<SettingsIcon name="clock-outline" color={themeColors.iconStorage} />}
+                        title={t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes'}
+                        description={t('history.deleteLast15Minutes.subtitle') || 'Remove recent history entries'}
+                        onPress={() => deleteLast15Prompt.open()}
+                        disabled={isDeleting || history.length === 0}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="delete-outline" color={themeColors.iconSharing} />}
+                        title={t('history.clearAll.title') || 'Clear All History'}
+                        description={t('history.clearAll.subtitle') || 'Remove all history entries'}
+                        onPress={() => clearAllPrompt.open()}
+                        disabled={isDeleting || history.length === 0}
+                    />
+                </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} />
-                     : <GroupedSection items={history.map(item => ({ id: item.id, icon: item.type === 'search' ? 'search' : 'globe', iconColor: item.type === 'search' ? themeColors.iconSecurity : themeColors.iconPersonalInfo, title: item.query, subtitle: formatTime(item.timestamp) }))} />}
-                </Section>
+                     : history.map(item => (
+                        <SettingsListItem
+                            key={item.id}
+                            icon={<SettingsIcon name={item.type === 'search' ? 'magnify' : 'earth'} color={item.type === 'search' ? themeColors.iconSecurity : themeColors.iconPersonalInfo} />}
+                            title={item.query}
+                            description={formatTime(item.timestamp)}
+                        />
+                    ))}
+                </SettingsListGroup>
             </ScrollView>
             <Prompt.Basic control={deleteLast15Prompt} title={t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes'} description={t('history.deleteLast15Minutes.confirm') || 'Delete last 15 minutes of history?'} onConfirm={handleDeleteLast15Minutes} confirmButtonCta={t('common.actions.delete') || 'Delete'} confirmButtonColor="negative" />
             <Prompt.Basic control={clearAllPrompt} title={t('history.clearAll.title') || 'Clear All History'} description={t('history.clearAll.confirm') || 'Clear all history? This cannot be undone.'} onConfirm={handleClearAll} confirmButtonCta={t('history.clearAll.title') || 'Clear All'} confirmButtonColor="negative" />

package/src/ui/screens/LanguageSelectorScreen.tsx

@@ -12,7 +12,8 @@ import { useTheme } from '@oxyhq/bloom/theme';
 import { normalizeTheme } from '../utils/themeUtils';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
-import { Header, GroupedSection } from '../components';
+import { Header } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { useI18n } from '../hooks/useI18n';
 import { SUPPORTED_LANGUAGES } from '@oxyhq/core';
 import { useOxy } from '../context/OxyContext';
@@ -98,18 +99,17 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
             return {
                 id: language.id,
                 title: language.name,
-                subtitle: language.nativeName,
-                customIcon: (
+                description: language.nativeName,
+                icon: (
                     <View style={[styles.languageFlag, { backgroundColor: `${language.color}15` }]}>
                         <Text style={styles.flagEmoji}>{language.flag}</Text>
                     </View>
                 ),
-                iconColor: language.color,
-                selected: isSelected,
                 onPress: () => handleLanguageSelect(language.id),
-                customContent: isSelected ? (
+                rightElement: isSelected ? (
                     <Ionicons name="checkmark-circle" size={24} color={bloomTheme.colors.primary} />
                 ) : undefined,
+                showChevron: false,
             };
         }),
         [currentLanguage, handleLanguageSelect, bloomTheme]
@@ -150,7 +150,19 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
                     <View style={[styles.materialCard, {
                         backgroundColor: bloomTheme.colors.card,
                     }]}>
-                        <GroupedSection items={languageItems} />
+                        <SettingsListGroup>
+                            {languageItems.map(item => (
+                                <SettingsListItem
+                                    key={item.id}
+                                    icon={item.icon}
+                                    title={item.title}
+                                    description={item.description}
+                                    onPress={item.onPress}
+                                    rightElement={item.rightElement}
+                                    showChevron={false}
+                                />
+                            ))}
+                        </SettingsListGroup>
                     </View>
                 </View>
             </ScrollView>

package/src/ui/screens/LegalDocumentsScreen.tsx

@@ -7,7 +7,9 @@ import {
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
-import { Header, Section, GroupedSection, LoadingState } from '../components';
+import { Header, LoadingState } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useColorScheme } from '../hooks/useColorScheme';
@@ -121,69 +123,50 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
             />
 
             <ScrollView style={styles.content}>
-                <Section title={t('legal.policies') || 'Policies & Guidelines'}  isFirst={true}>
-                    <GroupedSection
-                        items={[
-                            {
-                                id: 'privacy-policy',
-                                icon: 'shield-check',
-                                iconColor: themeColors.iconPersonalInfo,
-                                title: t('legal.privacyPolicy.title') || 'Privacy Policy',
-                                subtitle: t('legal.privacyPolicy.subtitle') || 'How we handle your data',
-                                onPress: handleOpenPolicy('privacy'),
-                            },
-                            {
-                                id: 'terms-of-service',
-                                icon: 'file-document',
-                                iconColor: themeColors.iconSecurity,
-                                title: t('legal.termsOfService.title') || 'Terms of Service',
-                                subtitle: t('legal.termsOfService.subtitle') || 'Terms and conditions of use',
-                                onPress: handleOpenPolicy('terms'),
-                            },
-                            {
-                                id: 'community-guidelines',
-                                icon: 'account-group',
-                                iconColor: themeColors.iconData,
-                                title: t('legal.communityGuidelines.title') || 'Community Guidelines',
-                                subtitle: t('legal.communityGuidelines.subtitle') || 'Rules and expectations for our community',
-                                onPress: handleOpenPolicy('community'),
-                            },
-                            {
-                                id: 'data-retention',
-                                icon: 'clock',
-                                iconColor: themeColors.iconStorage,
-                                title: t('legal.dataRetention.title') || 'Data Retention Policy',
-                                subtitle: t('legal.dataRetention.subtitle') || 'How long we keep your data',
-                                onPress: handleOpenPolicy('dataRetention'),
-                            },
-                            {
-                                id: 'content-moderation',
-                                icon: 'eye',
-                                iconColor: themeColors.iconSharing,
-                                title: t('legal.contentModeration.title') || 'Content Moderation Policy',
-                                subtitle: t('legal.contentModeration.subtitle') || 'How we moderate content',
-                                onPress: handleOpenPolicy('contentModeration'),
-                            },
-                            {
-                                id: 'child-safety',
-                                icon: 'heart',
-                                iconColor: '#FF2D55',
-                                title: t('legal.childSafety.title') || 'Child Safety Policy',
-                                subtitle: t('legal.childSafety.subtitle') || 'Protecting minors on our platform',
-                                onPress: handleOpenPolicy('childSafety'),
-                            },
-                            {
-                                id: 'cookie-policy',
-                                icon: 'cookie',
-                                iconColor: '#8E8E93',
-                                title: t('legal.cookiePolicy.title') || 'Cookie Policy',
-                                subtitle: t('legal.cookiePolicy.subtitle') || 'How we use cookies and similar technologies',
-                                onPress: handleOpenPolicy('cookie'),
-                            },
-                        ]}
-                        
+                <SettingsListGroup title={t('legal.policies') || 'Policies & Guidelines'}>
+                    <SettingsListItem
+                        icon={<SettingsIcon name="shield-check" color={themeColors.iconPersonalInfo} />}
+                        title={t('legal.privacyPolicy.title') || 'Privacy Policy'}
+                        description={t('legal.privacyPolicy.subtitle') || 'How we handle your data'}
+                        onPress={handleOpenPolicy('privacy')}
                     />
-                </Section>
+                    <SettingsListItem
+                        icon={<SettingsIcon name="file-document" color={themeColors.iconSecurity} />}
+                        title={t('legal.termsOfService.title') || 'Terms of Service'}
+                        description={t('legal.termsOfService.subtitle') || 'Terms and conditions of use'}
+                        onPress={handleOpenPolicy('terms')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="account-group" color={themeColors.iconData} />}
+                        title={t('legal.communityGuidelines.title') || 'Community Guidelines'}
+                        description={t('legal.communityGuidelines.subtitle') || 'Rules and expectations for our community'}
+                        onPress={handleOpenPolicy('community')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="clock" color={themeColors.iconStorage} />}
+                        title={t('legal.dataRetention.title') || 'Data Retention Policy'}
+                        description={t('legal.dataRetention.subtitle') || 'How long we keep your data'}
+                        onPress={handleOpenPolicy('dataRetention')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="eye" color={themeColors.iconSharing} />}
+                        title={t('legal.contentModeration.title') || 'Content Moderation Policy'}
+                        description={t('legal.contentModeration.subtitle') || 'How we moderate content'}
+                        onPress={handleOpenPolicy('contentModeration')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="heart" color="#FF2D55" />}
+                        title={t('legal.childSafety.title') || 'Child Safety Policy'}
+                        description={t('legal.childSafety.subtitle') || 'Protecting minors on our platform'}
+                        onPress={handleOpenPolicy('childSafety')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="cookie" color="#8E8E93" />}
+                        title={t('legal.cookiePolicy.title') || 'Cookie Policy'}
+                        description={t('legal.cookiePolicy.subtitle') || 'How we use cookies and similar technologies'}
+                        onPress={handleOpenPolicy('cookie')}
+                    />
+                </SettingsListGroup>
             </ScrollView>
         </View>
     );

package/src/ui/screens/PaymentGatewayScreen.tsx

@@ -11,7 +11,8 @@ import {
 import type { BaseScreenProps } from '../types/navigation';
 import { useThemeColors } from '../styles';
 import { normalizeTheme } from '../utils/themeUtils';
-import GroupedPillButtons from '../components/internal/GroupedPillButtons';
+import { Button } from '@oxyhq/bloom/button';
+import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../hooks/useI18n';
 import QRCode from 'react-native-qrcode-svg';
 
@@ -184,17 +185,15 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
         return (
             <View style={styles.errorContainer}>
                 <Text style={styles.errorText}>{t('payment.errors.invalidAmount')}</Text>
-                <GroupedPillButtons
-                    buttons={[
-                        {
-                            text: t('payment.actions.close'),
-                            onPress: handleClose,
-                            icon: 'close',
-                            variant: 'primary',
-                        },
-                    ]}
-                    colors={colors}
-                />
+                <Button
+                    variant="primary"
+                    onPress={handleClose}
+                    size="small"
+                    icon={<Ionicons name="close" size={16} />}
+                    iconPosition="right"
+                >
+                    {t('payment.actions.close')}
+                </Button>
             </View>
         );
     }