@oxy.so/services 11.13.0 → 11.15.0

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -6,7 +6,7 @@ import {
 } from '@oxy.so/contracts/client';
 import { OrganizationSettings } from '../components/organizations/OrganizationSettings';
 import { useCallback, useMemo, useState } from 'react';
-import { View, ActivityIndicator } from 'react-native';
+import { View } from 'react-native';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from '@oxy.so/bloom/toast';
 import { surfaces } from '@oxy.so/bloom/surfaces';
@@ -14,7 +14,7 @@ import { useTheme } from '@oxy.so/bloom/theme';
 import { Text } from '@oxy.so/bloom/typography';
 import { Button } from '@oxy.so/bloom/button';
 import { TextField, TextFieldInput } from '@oxy.so/bloom/text-field';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 import {
   DISPLAY_NAME_INVALID_MESSAGE,
   getNormalizedUserHandle,
@@ -24,7 +24,7 @@ import {
 } from '@oxy.so/core';
 import type { BaseScreenProps } from '../types/navigation';
 import { SettingsIcon } from '../components/SettingsIcon';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { clearedFieldsFromAccountUpdate, upsertCachedUser } from '../hooks/queries/userCache';
@@ -59,6 +59,10 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
 
   const accountQuery = useQuery({
     queryKey: ['accounts', 'detail', id, user?.id, canUsePrivateApi],
+    initialData: canUsePrivateApi
+      ? accounts?.find((account) => account.accountId === id)
+      : undefined,
+    initialDataUpdatedAt: 0,
     queryFn: () => oxyServices.accounts.get(id),
     enabled: canUsePrivateApi && id.length > 0,
   });
@@ -217,9 +221,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
     <>
       <View className="px-screen-margin pt-space-24 pb-space-32 gap-space-24">
         {accountQuery.isLoading ? (
-          <View className="items-center py-space-32">
-            <ActivityIndicator color={colors.primary} />
-          </View>
+          <View className="items-center py-space-32">{null}</View>
         ) : (
           <>
             {/* Profile edit */}
@@ -285,8 +287,8 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
 
             {/* Members entry */}
             {canViewMembers ? (
-              <SettingsListGroup title={t('accounts.settings.sections.access') || 'Access'}>
-                <SettingsListItem
+              <GroupedSection title={t('accounts.settings.sections.access') || 'Access'}>
+                <GroupedSectionItem
                   icon={<SettingsIcon name="account-multiple" color={colors.info} />}
                   title={t('accounts.members.title') || 'Members'}
                   description={
@@ -294,21 +296,19 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                   }
                   onPress={() => navigate?.('AccountMembers', { accountId: id })}
                 />
-              </SettingsListGroup>
+              </GroupedSection>
             ) : null}
 
             {/* Danger zone */}
             {canArchive ? (
-              <SettingsListGroup
-                title={t('accounts.settings.sections.dangerZone') || 'Danger zone'}
-              >
-                <SettingsListItem
+              <GroupedSection title={t('accounts.settings.sections.dangerZone') || 'Danger zone'}>
+                <GroupedSectionItem
                   icon={<SettingsIcon name="archive-arrow-down" color={colors.error} />}
                   title={t('accounts.settings.archive.title') || 'Archive account'}
                   description={t('accounts.settings.archive.subtitle') || 'Deactivate this account'}
                   onPress={handleArchive}
                 />
-              </SettingsListGroup>
+              </GroupedSection>
             ) : null}
           </>
         )}

package/src/ui/screens/AccountVerificationScreen.tsx

@@ -19,7 +19,7 @@ import { RiSparklingLine } from '@oxy.so/bloom/icons/RiSparklingLine';
 import { RiVerifiedBadgeLine } from '@oxy.so/bloom/icons/RiVerifiedBadgeLine';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 
 const AccountVerificationScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
   // Use useOxy() hook for OxyContext values

package/src/ui/screens/AppInfoScreen.tsx

@@ -1,6 +1,7 @@
+import { SpinnerIcon } from '@oxy.so/bloom/loading';
 import type React from 'react';
 import { useState, useEffect } from 'react';
-import { View, Platform, Dimensions, ActivityIndicator } from 'react-native';
+import { View, Platform, Dimensions } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { packageInfo } from '@oxy.so/core';
 import { toast } from '@oxy.so/bloom/toast';
@@ -8,10 +9,10 @@ import { copyText } from '../utils/clipboard';
 import OxyServicesLogo from '../../assets/icons/OxyServices';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useTheme } from '@oxy.so/bloom/theme';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 
 interface SystemInfo {
   platform: string;
@@ -147,31 +148,31 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigate })
     <>
       <View className="px-screen-margin py-space-16 pb-space-24">
         {/* Package Information */}
-        <SettingsListGroup title={t('appInfo.sections.package')}>
-          <SettingsListItem
+        <GroupedSection title={t('appInfo.sections.package')}>
+          <GroupedSectionItem
             icon={<OxyServicesLogo width={20} height={20} />}
             title={t('appInfo.items.name')}
             description={packageInfo.name}
             onPress={() => copyToClipboard(packageInfo.name, t('appInfo.items.name'))}
           />
-          <SettingsListItem
+          <GroupedSectionItem
             icon={<SettingsIcon name="tag" color={colors.info} />}
             title={t('appInfo.items.version')}
             description={packageInfo.version}
             onPress={() => copyToClipboard(packageInfo.version, t('appInfo.items.version'))}
           />
-          <SettingsListItem
+          <GroupedSectionItem
             icon={<SettingsIcon name="file-document" color={colors.success} />}
             title={t('appInfo.items.description')}
             description={packageInfo.description || t('appInfo.items.noDescription')}
           />
-          <SettingsListItem
+          <GroupedSectionItem
             icon={<SettingsIcon name="code-tags" color={colors.secondary} />}
             title={t('appInfo.items.mainEntry')}
             description={packageInfo.main || 'N/A'}
             onPress={() => copyToClipboard(packageInfo.main || 'N/A', t('appInfo.items.mainEntry'))}
           />
-          <SettingsListItem
+          <GroupedSectionItem
             icon={<SettingsIcon name="library" color={colors.warning} />}
             title={t('appInfo.items.moduleEntry')}
             description={packageInfo.module || 'N/A'}
@@ -179,7 +180,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigate })
               copyToClipboard(packageInfo.module || 'N/A', t('appInfo.items.moduleEntry'))
             }
           />
-          <SettingsListItem
+          <GroupedSectionItem
             icon={<SettingsIcon name="wrench" color={colors.success} />}
             title={t('appInfo.items.typesEntry')}
             description={packageInfo.types || 'N/A'}
@@ -187,40 +188,40 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigate })
               copyToClipboard(packageInfo.types || 'N/A', t('appInfo.items.typesEntry'))
             }
           />
-        </SettingsListGroup>
+        </GroupedSection>
 
         {/* System Information */}
-        <SettingsListGroup title={t('appInfo.sections.system')}>
-          <SettingsListItem
+        <GroupedSection title={t('appInfo.sections.system')}>
+          <GroupedSectionItem
             icon={<SettingsIcon name="cellphone" color={colors.primary} />}
             title={t('appInfo.items.platform')}
             description={Platform.OS}
           />
-          <SettingsListItem
+          <GroupedSectionItem
             icon={<SettingsIcon name="chip" color={colors.info} />}
             title={t('appInfo.items.platformVersion')}
             description={systemInfo?.version || t('common.status.loading')}
           />
-          <SettingsListItem
+          <GroupedSectionItem
             icon={<SettingsIcon name="resize" color={colors.secondary} />}
             title={t('appInfo.items.screenWidth')}
             description={`${systemInfo?.screenDimensions.width || 0}px`}
           />
-          <SettingsListItem
+          <GroupedSectionItem
             icon={<SettingsIcon name="resize" color={colors.warning} />}
             title={t('appInfo.items.screenHeight')}
             description={`${systemInfo?.screenDimensions.height || 0}px`}
           />
-          <SettingsListItem
+          <GroupedSectionItem
             icon={<SettingsIcon name="cog" color={colors.success} />}
             title={t('appInfo.items.environment')}
             description={__DEV__ ? t('appInfo.items.development') : t('appInfo.items.production')}
           />
-        </SettingsListGroup>
+        </GroupedSection>
 
         {/* User Information */}
-        <SettingsListGroup title={t('appInfo.sections.user')}>
-          <SettingsListItem
+        <GroupedSection title={t('appInfo.sections.user')}>
+          <GroupedSectionItem
             icon={
               <SettingsIcon
                 name="shield-check"
@@ -236,13 +237,13 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigate })
           />
           {user && (
             <>
-              <SettingsListItem
+              <GroupedSectionItem
                 icon={<SettingsIcon name="account" color={colors.primary} />}
                 title={t('appInfo.items.userId')}
                 description={user.id}
                 onPress={() => copyToClipboard(user.id, t('appInfo.items.userId'))}
               />
-              <SettingsListItem
+              <GroupedSectionItem
                 icon={<SettingsIcon name="at" color={colors.info} />}
                 title={t('appInfo.items.username')}
                 description={user.username || 'N/A'}
@@ -254,12 +255,12 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigate })
                   }
                 }}
               />
-              <SettingsListItem
+              <GroupedSectionItem
                 icon={<SettingsIcon name="email" color={colors.secondary} />}
                 title={t('appInfo.items.email')}
                 description={user.email || 'N/A'}
               />
-              <SettingsListItem
+              <GroupedSectionItem
                 icon={
                   <SettingsIcon
                     name="star"
@@ -273,16 +274,16 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigate })
               />
             </>
           )}
-          <SettingsListItem
+          <GroupedSectionItem
             icon={<SettingsIcon name="account-group" color={colors.success} />}
             title={t('appInfo.items.totalActiveSessions')}
             description={sessions?.length?.toString() || '0'}
           />
-        </SettingsListGroup>
+        </GroupedSection>
 
         {/* API Configuration */}
-        <SettingsListGroup title={t('appInfo.sections.api')}>
-          <SettingsListItem
+        <GroupedSection title={t('appInfo.sections.api')}>
+          <GroupedSectionItem
             icon={<SettingsIcon name="server" color={colors.primary} />}
             title={t('appInfo.items.apiBaseUrl')}
             description={oxyServices?.baseURL || t('appInfo.items.notConfigured')}
@@ -293,7 +294,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigate })
               )
             }
           />
-          <SettingsListItem
+          <GroupedSectionItem
             icon={
               <SettingsIcon
                 name={
@@ -341,11 +342,11 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigate })
               }
             }}
           />
-        </SettingsListGroup>
+        </GroupedSection>
 
         {/* Build Information */}
-        <SettingsListGroup title={t('appInfo.sections.build')}>
-          <SettingsListItem
+        <GroupedSection title={t('appInfo.sections.build')}>
+          <GroupedSectionItem
             icon={<SettingsIcon name="clock" color={colors.primary} />}
             title={t('appInfo.items.buildTimestamp')}
             description={systemInfo?.timestamp || t('common.status.loading')}
@@ -356,27 +357,27 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigate })
               )
             }
           />
-          <SettingsListItem
+          <GroupedSectionItem
             icon={<SettingsIcon name="react" color={colors.info} />}
             title={t('appInfo.items.reactNative')}
             description={t('appInfo.items.reactNativeValue')}
           />
-          <SettingsListItem
+          <GroupedSectionItem
             icon={<SettingsIcon name="flash" color={colors.warning} />}
             title={t('appInfo.items.jsEngine')}
             description={t('appInfo.items.jsEngineValue')}
           />
-        </SettingsListGroup>
+        </GroupedSection>
 
         {/* Quick Actions */}
-        <SettingsListGroup title={t('appInfo.sections.quickActions')}>
-          <SettingsListItem
+        <GroupedSection title={t('appInfo.sections.quickActions')}>
+          <GroupedSectionItem
             icon={<SettingsIcon name="content-copy" color={colors.primary} />}
             title={t('appInfo.items.copyFullReport')}
             description={t('appInfo.items.copyFullReportSubtitle')}
             onPress={handleCopyFullReport}
           />
-          <SettingsListItem
+          <GroupedSectionItem
             icon={
               <SettingsIcon
                 name={isRunningSystemCheck ? 'sync' : 'check-circle'}
@@ -396,12 +397,10 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigate })
             onPress={runSystemCheck}
             disabled={isRunningSystemCheck}
             rightElement={
-              isRunningSystemCheck ? (
-                <ActivityIndicator color={colors.warning} size="small" />
-              ) : undefined
+              isRunningSystemCheck ? <SpinnerIcon color={colors.warning} size={16} /> : undefined
             }
           />
-        </SettingsListGroup>
+        </GroupedSection>
       </View>
     </>
   );

package/src/ui/screens/AvatarCropScreen.tsx

@@ -1,3 +1,8 @@
+import { SpinnerIcon } from '@oxy.so/bloom/loading';
+import { LinkButton } from '@oxy.so/bloom/button';
+import { ButtonGroup, ButtonGroupItem } from '@oxy.so/bloom/button-group';
+import { RiAddLine } from '@oxy.so/bloom/icons/RiAddLine';
+import { RiSubtractLine } from '@oxy.so/bloom/icons/RiSubtractLine';
 /**
  * AvatarCropScreen
  *
@@ -28,15 +33,7 @@
 
 import type React from 'react';
 import { useCallback, useMemo, useRef, useState } from 'react';
-import {
-  View,
-  StyleSheet,
-  ActivityIndicator,
-  Image,
-  Platform,
-  AccessibilityInfo,
-  Pressable,
-} from 'react-native';
+import { View, StyleSheet, Image, Platform, AccessibilityInfo } from 'react-native';
 import { Text } from '@oxy.so/bloom/typography';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
@@ -51,7 +48,7 @@ import Animated, {
 import { useQuery, keepPreviousData } from '@tanstack/react-query';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { logger } from '@oxy.so/core';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { useI18n } from '../hooks/useI18n';
 import { useReduceMotion } from '../hooks/useReduceMotion';
 import { useSurfaceHeader, type SurfaceHeaderContent } from '../hooks/useSurfaceHeader';
@@ -336,7 +333,6 @@ async function hapticSelection(): Promise<void> {
 
 const AvatarCropScreen: React.FC<AvatarCropScreenProps> = ({
   dismiss,
-  goBack,
   imageUri,
   imageFileId,
   sourceWidth,
@@ -871,19 +867,17 @@ const AvatarCropScreen: React.FC<AvatarCropScreenProps> = ({
     [t, handleConfirm, isProcessing, baseFit],
   );
 
-  // No bar of our own: the surface owns the chrome. `goBack` pops back to the
-  // ChangeAvatar source list (and dismisses the surface if this is somehow the
-  // root frame), which is exactly Cancel.
+  // The host derives Back from real route history; a cold root only shows Close.
   useSurfaceHeader({
     title: t('editProfile.crop.title'),
     largeTitle: false,
     primaryAction: donePrimaryAction,
-    onBack: goBack,
   });
 
   const styles = useMemo(
     () =>
       StyleSheet.create({
+        footerPointerEvents: { pointerEvents: 'box-none' },
         container: {
           backgroundColor: theme.colors.background,
         },
@@ -993,15 +987,6 @@ const AvatarCropScreen: React.FC<AvatarCropScreenProps> = ({
           textAlign: 'center',
           maxWidth: 320,
         },
-        resetLink: {
-          paddingHorizontal: 12,
-          paddingVertical: 6,
-        },
-        resetLinkText: {
-          fontSize: 13,
-          color: theme.colors.primary,
-          textDecorationLine: 'underline',
-        },
         emptyState: {
           alignItems: 'center',
           justifyContent: 'center',
@@ -1018,7 +1003,6 @@ const AvatarCropScreen: React.FC<AvatarCropScreenProps> = ({
 
   // Reset link reveal — only show when the image is not at the default
   // transform. Use derived display state to avoid mounting/unmounting jank.
-  const resetLinkOpacity = isModified ? 1 : 0;
 
   // Zoom-button state is derived from `zoomLabel` (reactive state, set on every
   // commit) rather than the committed-scale ref, so it stays correct across
@@ -1069,16 +1053,16 @@ const AvatarCropScreen: React.FC<AvatarCropScreenProps> = ({
                   resizeMode="cover"
                 />
               ) : (
-                <ActivityIndicator color="#ffffff" />
+                <SpinnerIcon color="#ffffff" />
               )}
             </View>
           </GestureDetector>
 
           {/* White ring + inner shadow around the circle. */}
-          <View pointerEvents="none" style={styles.ringOverlay} />
+          <View style={[styles.ringOverlay, { pointerEvents: 'none' }]} />
 
           {/* Rule-of-thirds grid overlay (fades in during gesture). */}
-          <Animated.View pointerEvents="none" style={[styles.gridOverlay, gridAnimatedStyle]}>
+          <Animated.View style={[styles.gridOverlay, gridAnimatedStyle, { pointerEvents: 'none' }]}>
             <View style={[styles.gridLineH, { top: VIEWPORT_SIZE / 3 }]} />
             <View style={[styles.gridLineH, { top: (VIEWPORT_SIZE * 2) / 3 }]} />
             <View style={[styles.gridLineV, { left: VIEWPORT_SIZE / 3 }]} />
@@ -1086,7 +1070,9 @@ const AvatarCropScreen: React.FC<AvatarCropScreenProps> = ({
           </Animated.View>
 
           {/* Floating zoom chip during pinch. */}
-          <Animated.View pointerEvents="none" style={[styles.zoomChip, zoomChipAnimatedStyle]}>
+          <Animated.View
+            style={[styles.zoomChip, zoomChipAnimatedStyle, { pointerEvents: 'none' }]}
+          >
             <Text style={styles.zoomChipText}>
               {t('editProfile.crop.zoom', { value: zoomLabel })}
             </Text>
@@ -1098,50 +1084,40 @@ const AvatarCropScreen: React.FC<AvatarCropScreenProps> = ({
                     aesthetic; the full-width row is `box-none` so only the pill
                     takes pointer events and the rest of the circle stays pannable. */}
         {showZoomControls ? (
-          <View className="absolute bottom-4 left-0 right-0 items-center" pointerEvents="box-none">
-            <View className="flex-row overflow-hidden rounded-full bg-black/70">
-              <Pressable
-                accessibilityRole="button"
+          <View
+            className="absolute bottom-4 left-0 right-0 items-center"
+            style={styles.footerPointerEvents}
+          >
+            <ButtonGroup>
+              <ButtonGroupItem
+                iconOnly
+                leadingIcon={RiSubtractLine}
                 accessibilityLabel={t('editProfile.crop.zoomOut')}
-                accessibilityState={{ disabled: zoomOutDisabled }}
                 disabled={zoomOutDisabled}
                 onPress={() => applyZoom(-1)}
-                className={`h-10 w-[52px] items-center justify-center active:bg-white/10${
-                  zoomOutDisabled ? ' opacity-40' : ''
-                }`}
-              >
-                <Text className="text-white text-[22px] font-medium leading-[24px]">{'−'}</Text>
-              </Pressable>
-              <View className="w-px self-stretch bg-white/25" />
-              <Pressable
-                accessibilityRole="button"
+              />
+              <ButtonGroupItem
+                iconOnly
+                leadingIcon={RiAddLine}
                 accessibilityLabel={t('editProfile.crop.zoomIn')}
-                accessibilityState={{ disabled: zoomInDisabled }}
                 disabled={zoomInDisabled}
                 onPress={() => applyZoom(1)}
-                className={`h-10 w-[52px] items-center justify-center active:bg-white/10${
-                  zoomInDisabled ? ' opacity-40' : ''
-                }`}
-              >
-                <Text className="text-white text-[22px] font-medium leading-[24px]">{'+'}</Text>
-              </Pressable>
-            </View>
+              />
+            </ButtonGroup>
           </View>
         ) : null}
       </View>
 
       <View style={styles.helperBlock}>
         <Text style={styles.helper}>{t('editProfile.crop.helper')}</Text>
-        <Pressable
+        <LinkButton
           accessibilityLabel={t('editProfile.crop.a11yReset')}
-          accessibilityRole="button"
-          accessibilityState={{ disabled: !isModified || isProcessing }}
           onPress={resetTransform}
           disabled={!isModified || isProcessing}
-          style={[styles.resetLink, { opacity: isProcessing ? 0.3 : resetLinkOpacity }]}
+          size="sm"
         >
-          <Text style={styles.resetLinkText}>{t('editProfile.crop.resetToCenter')}</Text>
-        </Pressable>
+          {t('editProfile.crop.resetToCenter')}
+        </LinkButton>
       </View>
     </View>
   );

package/src/ui/screens/ChangeAvatarScreen.tsx

@@ -28,7 +28,7 @@ import type React from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import { Linking, Platform, View } from 'react-native';
 import { Avatar } from '@oxy.so/bloom/avatar';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 import {
   AdmonitionRoot,
   AdmonitionRow,
@@ -42,7 +42,7 @@ import { useTheme } from '@oxy.so/bloom/theme';
 import { toast } from '@oxy.so/bloom/toast';
 import { getNormalizedUserHandle, logger } from '@oxy.so/core';
 import type { FileMetadata } from '@oxy.so/core';
-import { useOxy } from '../context/OxyContext';
+import { useOxy } from '../context/oxyRuntimeContext';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { SettingsIcon } from '../components/SettingsIcon';
@@ -333,8 +333,8 @@ const ChangeAvatarScreen: React.FC<BaseScreenProps> = ({ navigate, dismiss }) =>
         </AdmonitionRoot>
       ) : null}
 
-      <SettingsListGroup>
-        <SettingsListItem
+      <GroupedSection>
+        <GroupedSectionItem
           icon={<SettingsIcon name="image-outline" color={bloomTheme.colors.primary} />}
           title={t('changeAvatar.sources.upload.title')}
           description={t('changeAvatar.sources.upload.description')}
@@ -342,7 +342,7 @@ const ChangeAvatarScreen: React.FC<BaseScreenProps> = ({ navigate, dismiss }) =>
           onPress={() => void pickFromDevice('library')}
         />
         {canUseCamera ? (
-          <SettingsListItem
+          <GroupedSectionItem
             icon={<SettingsIcon name="camera-outline" color={bloomTheme.colors.info} />}
             title={t('changeAvatar.sources.camera.title')}
             description={t('changeAvatar.sources.camera.description')}
@@ -350,14 +350,14 @@ const ChangeAvatarScreen: React.FC<BaseScreenProps> = ({ navigate, dismiss }) =>
             onPress={() => void pickFromDevice('camera')}
           />
         ) : null}
-        <SettingsListItem
+        <GroupedSectionItem
           icon={<SettingsIcon name="folder-image" color={bloomTheme.colors.success} />}
           title={t('changeAvatar.sources.files.title')}
           description={t('changeAvatar.sources.files.description')}
           disabled={busy}
           onPress={() => pickFromOxyFiles()}
         />
-        <SettingsListItem
+        <GroupedSectionItem
           icon={<SettingsIcon name="trash-can-outline" color={bloomTheme.colors.error} />}
           title={t('changeAvatar.sources.remove.title')}
           description={t('changeAvatar.sources.remove.description')}
@@ -365,7 +365,7 @@ const ChangeAvatarScreen: React.FC<BaseScreenProps> = ({ navigate, dismiss }) =>
           disabled={busy || !user?.avatar}
           onPress={() => void removeCurrentPhoto()}
         />
-      </SettingsListGroup>
+      </GroupedSection>
     </View>
   );
 };