@oxy.so/services 11.14.0 → 11.15.0

package/src/ui/components/authChooser/storageUsage.ts

@@ -0,0 +1,75 @@
+import type { UsageData } from '@oxy.so/bloom/usage-card';
+import type { AccountStorageModel, Theme, Translate } from './types';
+
+const CATEGORIES = [
+  ['photosVideos', 'primary'],
+  ['documents', 'info'],
+  ['recordings', 'success'],
+  ['mail', 'warning'],
+  ['family', 'secondary'],
+  ['other', 'textTertiary'],
+] as const;
+
+/** Keep the server's total authoritative when an older/partial response lacks a breakdown. */
+export function accountStorageUsage(
+  storage: AccountStorageModel | null,
+  colors: Pick<Theme['colors'], (typeof CATEGORIES)[number][1]>,
+  t: Translate,
+): UsageData | undefined {
+  if (
+    !storage ||
+    !Number.isFinite(storage.limitBytes) ||
+    storage.limitBytes <= 0 ||
+    !Number.isFinite(storage.usedBytes) ||
+    storage.usedBytes < 0
+  )
+    return undefined;
+  const fallback = () => ({
+    max: storage.limitBytes,
+    segments: [{ label: t('accountMenu.storage.used'), value: storage.usedBytes }],
+  });
+  if (!storage.categories) return fallback();
+  const entries = CATEGORIES.map(([key, tone]) => ({
+    key,
+    label: t(`accountMenu.storage.categories.${key}`),
+    value: storage.categories?.[key]?.bytes ?? 0,
+    color: colors[tone],
+  }));
+  if (entries.some(({ value }) => !Number.isFinite(value) || value < 0)) return fallback();
+  const categorized = entries.reduce((sum, entry) => sum + entry.value, 0);
+  if (categorized > storage.usedBytes) return fallback();
+  // Bytes not attributed by the server belong to Other, never to a guessed category.
+  const remainder = storage.usedBytes - categorized;
+  return {
+    max: storage.limitBytes,
+    segments: entries
+      .map(({ key, ...entry }) => ({
+        ...entry,
+        value: entry.value + (key === 'other' ? remainder : 0),
+      }))
+      .filter(({ value }) => value > 0),
+  };
+}
+
+/** Adaptive units keep small categories readable instead of displaying 0.0 GB. */
+export function formatStorageSize(bytes: number): string {
+  if (bytes <= 0 || !Number.isFinite(bytes)) return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+  const index = Math.max(
+    0,
+    Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1),
+  );
+  const value = bytes / 1024 ** index;
+  return `${Number(value.toFixed(index === 0 ? 0 : 1))} ${units[index]}`;
+}
+
+/** Capacity actions become relevant only above 85% of a known quota. */
+export function shouldShowStorageActions(storage: AccountStorageModel | null): boolean {
+  return Boolean(
+    storage &&
+      Number.isFinite(storage.usedBytes) &&
+      Number.isFinite(storage.limitBytes) &&
+      storage.limitBytes > 0 &&
+      storage.usedBytes / storage.limitBytes > 0.85,
+  );
+}

package/src/ui/components/authChooser/styles.ts

@@ -8,85 +8,23 @@ const QR_PLATE_BG = '#FFFFFF';
  * so both the Dialog-wrapped host and any bare host (e.g. a future
  * auth.oxy.so hub page) render identically without duplicating a StyleSheet.
  *
- * Only what NativeWind cannot express lives here: the animated collapse, the
- * fixed-contrast QR plate, per-account accent rings, and the small subordinate
- * text-link rhythm every view's fallback affordances share.
+ * Content layout for account identity and authentication views. Bloom owns
+ * grouped surfaces, row spacing and corner geometry.
  */
 export const authChooserStyles = StyleSheet.create({
-  /**
-   * Animated-collapse container for the account switch list — the outer clip and
-   * the inner measuring wrapper. Style-based (NOT NativeWind): the container
-   * carries the animated `height`/`opacity` off a reanimated style, and the
-   * measuring wrapper must stay className-free so its `onLayout` fires on RN-Web.
-   */
-  collapse: {
-    overflow: 'hidden',
-  },
-  collapseMeasure: {
-    width: '100%',
-  },
-  /**
-   * The HERO block that opens the account menu: the current account's large
-   * avatar, a greeting, and the "Manage your Oxy account" pill — centred and
-   * deliberately chrome-free (no card, no grouped-section surface) so the
-   * grouped cards below read as the menu proper. The account's email sits above
-   * it in the Dialog's own nav bar, not here.
-   */
-  hero: {
-    alignItems: 'center',
-    paddingTop: 4,
-    paddingBottom: 20,
-    gap: 12,
-  },
-  /**
-   * The current account's accent ring in the switch list, drawn OUTSIDE its
-   * avatar as an overlay so it adds no width to the row — every avatar in the
-   * list keeps the same footprint and the same content line. The 3px offset is
-   * the ring's 2px stroke plus a 1px gap.
-   */
-  currentAvatarRing: {
-    position: 'absolute',
-    top: -3,
-    left: -3,
-    right: -3,
-    bottom: -3,
-    borderWidth: 2,
-    borderRadius: 9999,
-  },
-  /**
-   * The hero avatar's pressable wrapper — the "change your photo" entry point.
-   * `relative` so the accent ring + camera badge (both absolutely positioned)
-   * anchor to the avatar box.
-   */
-  heroAvatarPressable: {
-    position: 'relative',
-  },
-  /** The hero avatar's accent ring — an overlay, like the row-level one. */
-  heroAvatarRing: {
-    position: 'absolute',
-    top: -4,
-    left: -4,
-    right: -4,
-    bottom: -4,
-    borderWidth: 3,
-    borderRadius: 9999,
-  },
-  /** Greeting + address stacked tight, centred (the hero's own 12px gap sits
-   *  between this block and the avatar / manage pill, not between these lines). */
-  heroNameBlock: {
+  accountSummary: {
+    flexDirection: 'row',
     alignItems: 'center',
-    gap: 2,
-  },
-  heroGreeting: {
-    fontSize: 22,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-  /** The account address (`username@oxy.so` / `@handle`) under the greeting. */
-  heroAddress: {
-    fontSize: 14,
-    textAlign: 'center',
-  },
+    gap: 16,
+    paddingLeft: 16,
+    paddingRight: 16,
+    minHeight: 88,
+  },
+  accountIdentity: { flex: 1, minWidth: 0, gap: 3 },
+  accountName: { fontSize: 20, fontWeight: '500' },
+  accountAddress: { fontSize: 14 },
+  menuGroup: { marginBottom: 12 },
+  accountAvatar: { position: 'relative' },
   /**
    * The switch row's disclosure affordance — a filled circle around the chevron,
    * right-aligned to the same 12px row inset every other trailing element uses.

package/src/ui/components/authChooser/types.ts

@@ -7,12 +7,14 @@
  * dragging any other view in.
  */
 
+import type { AccountStorageUsageResponse } from '@oxy.so/core';
 import {
   APP_COLOR_NAMES,
   APP_COLOR_PRESETS,
   type AppColorName,
   type useTheme,
 } from '@oxy.so/bloom/theme';
+import type { AccountDialogMenuSection } from '../../navigation/accountDialogManager';
 import type { useI18n } from '../../hooks/useI18n';
 
 export type Theme = ReturnType<typeof useTheme>;
@@ -88,10 +90,13 @@ export interface AccountHeroModel {
 export interface AccountStorageModel {
   usedBytes: number;
   limitBytes: number;
+  plan?: AccountStorageUsageResponse['plan'];
+  categories?: Partial<AccountStorageUsageResponse['categories']>;
 }
 
 /** The account-menu row actions the container wires (deep-links / sheets / sign-out). */
 export interface AccountsMenuActions {
+  onOpenPlan: () => void;
   onOpenSettings: () => void;
   onOpenData: () => void;
   onManageStorage: () => void;
@@ -100,12 +105,7 @@ export interface AccountsMenuActions {
   onPrivacy: () => void;
   onTerms: () => void;
   onSignOut: () => void;
-  customItems: readonly {
-    key: string;
-    label: string;
-    icon?: string;
-    onPress: () => void;
-  }[];
+  sections: readonly AccountDialogMenuSection[];
 }
 
 /**

package/src/ui/components/fileManagement/FileViewer.tsx

@@ -1,6 +1,7 @@
+import { SpinnerIcon } from '@oxy.so/bloom/loading';
 import type React from 'react';
 import { useMemo, useState, useEffect } from 'react';
-import { View, ScrollView, ActivityIndicator, Image, StyleSheet } from 'react-native';
+import { View, ScrollView, Image, StyleSheet } from 'react-native';
 import { Button } from '@oxy.so/bloom/button';
 import { Text } from '@oxy.so/bloom/typography';
 import { Image as ExpoImage } from 'expo-image';
@@ -8,7 +9,7 @@ import MaterialCommunityIcons from '../../icons/MaterialCommunityIcons';
 import { useTheme } from '@oxy.so/bloom/theme';
 import type { FileMetadata } from '@oxy.so/core';
 import { formatFileSize } from '../../utils/fileManagement';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 
 interface FileViewerProps {
   file: FileMetadata;
@@ -238,7 +239,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
       >
         {loadingFileContent ? (
           <View className="flex-1 justify-center items-center">
-            <ActivityIndicator size="large" color={colors.primary} />
+            <SpinnerIcon size={32} color={colors.primary} />
             <Text className="text-text text-[16px] mt-[16px]">Loading file content...</Text>
           </View>
         ) : isImage && fileContent ? (
@@ -370,9 +371,9 @@ export const FileViewer: React.FC<FileViewerProps> = ({
         {showFileDetailsInViewer && (
           <>
             <View className="px-[12px] pb-[8px]">
-              <SettingsListGroup>
+              <GroupedSection>
                 {fileDetailItems.map((item) => (
-                  <SettingsListItem
+                  <GroupedSectionItem
                     key={item.id}
                     icon={
                       <MaterialCommunityIcons
@@ -386,7 +387,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                     showChevron={false}
                   />
                 ))}
-              </SettingsListGroup>
+              </GroupedSection>
             </View>
 
             {isOwner && (

package/src/ui/components/modals/DeleteAccountModal.tsx

@@ -1,10 +1,11 @@
 import type React from 'react';
 import { useState, useCallback } from 'react';
-import { View, TextInput } from 'react-native';
+import { View } from 'react-native';
 import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
 import { Button } from '@oxy.so/bloom/button';
-import { Admonition } from '@oxy.so/bloom/admonition';
+import { Field } from '@oxy.so/bloom/field';
+import { TextField, TextFieldInput } from '@oxy.so/bloom/text-field';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { surfaces, type SurfaceControls } from '@oxy.so/bloom/surfaces';
 
@@ -75,29 +76,29 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
           'This action cannot be undone. Your account and all associated data will be permanently deleted.'}
       </Text>
 
-      {error ? (
-        <View className="mb-4">
-          <Admonition type="error">{error}</Admonition>
-        </View>
-      ) : null}
-
       <View className="mb-4">
-        <Text className="text-text-secondary text-[13px] mb-2">
-          {t('deleteAccount.confirmLabel', { username }) || `Type "${username}" to confirm`}
-        </Text>
-        <TextInput
-          className="text-text bg-bg text-base py-3 px-4 border rounded-lg"
-          style={{
-            borderColor: isValid ? theme.colors.success : theme.colors.border,
-          }}
-          value={confirmUsername}
-          onChangeText={setConfirmUsername}
-          placeholder={username}
-          placeholderTextColor={theme.colors.textSecondary}
-          autoCapitalize="none"
-          autoCorrect={false}
-          editable={!isDeleting}
-        />
+        <Field
+          label={t('deleteAccount.confirmLabel', { username }) || `Type "${username}" to confirm`}
+          error={error ?? undefined}
+        >
+          <TextField>
+            <TextFieldInput
+              label={
+                t('deleteAccount.confirmLabel', { username }) || `Type "${username}" to confirm`
+              }
+              value={confirmUsername}
+              onValueChange={(value) => {
+                setConfirmUsername(value);
+                setError(null);
+              }}
+              placeholder={username}
+              autoCapitalize="none"
+              autoCorrect={false}
+              editable={!isDeleting}
+              isInvalid={!!error}
+            />
+          </TextField>
+        </Field>
       </View>
 
       <View style={{ gap: 8 }}>

package/src/ui/components/organizations/OrganizationClaimReview.tsx

@@ -8,7 +8,7 @@ import { Button } from '@oxy.so/bloom/button';
 import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
 import { TextField, TextFieldInput } from '@oxy.so/bloom/text-field';
 import { Text } from '@oxy.so/bloom/typography';
-import { useOxy } from '../../context/OxyContext';
+import { useOxy } from '../../context/oxyRuntimeContext';
 import { useI18n } from '../../hooks/useI18n';
 
 /** The queue is requested only after an explicit action; the server rechecks staff authority. */

package/src/ui/components/organizations/OrganizationClaims.tsx

@@ -3,7 +3,7 @@ import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { Button } from '@oxy.so/bloom/button';
 import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
 import { Text } from '@oxy.so/bloom/typography';
-import { useOxy } from '../../context/OxyContext';
+import { useOxy } from '../../context/oxyRuntimeContext';
 import { useI18n } from '../../hooks/useI18n';
 
 export function OrganizationClaims() {

package/src/ui/components/organizations/OrganizationDirectorySearch.tsx

@@ -13,7 +13,7 @@ import { Button } from '@oxy.so/bloom/button';
 import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
 import { TextField, TextFieldInput } from '@oxy.so/bloom/text-field';
 import { Text } from '@oxy.so/bloom/typography';
-import { useOxy } from '../../context/OxyContext';
+import { useOxy } from '../../context/oxyRuntimeContext';
 import { useI18n } from '../../hooks/useI18n';
 import { OrganizationTypePicker } from './OrganizationTypePicker';
 

package/src/ui/components/organizations/OrganizationSettings.tsx

@@ -8,7 +8,7 @@ import { toast } from '@oxy.so/bloom/toast';
 import { SettingsListGroup } from '@oxy.so/bloom/settings-list';
 import { TextField, TextFieldInput } from '@oxy.so/bloom/text-field';
 import { Text } from '@oxy.so/bloom/typography';
-import { useOxy } from '../../context/OxyContext';
+import { useOxy } from '../../context/oxyRuntimeContext';
 import { useI18n } from '../../hooks/useI18n';
 import { OrganizationTypePicker } from './OrganizationTypePicker';
 

package/src/ui/components/payment/PaymentDetailsStep.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { useMemo } from 'react';
-import { View, Animated, TouchableOpacity, Linking } from 'react-native';
+import { View, Animated, Linking } from 'react-native';
 import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
 import { Button } from '@oxy.so/bloom/button';
@@ -211,60 +211,22 @@ const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
                     {t('payment.details.fairWalletInstructions')}
                   </Text>
                   <Text style={styles.faircoinAddress}>{faircoinAddress}</Text>
-                  <TouchableOpacity
-                    style={[
-                      styles.faircoinButton,
-                      {
-                        backgroundColor: '#9ffb50',
-                        borderRadius: 18,
-                        marginTop: 12,
-                        width: '90%',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                      },
-                    ]}
+                  <Button
+                    appearance="solid"
+                    tone="accent"
                     onPress={handleOpenFairWallet}
-                    accessibilityRole="button"
-                    accessibilityLabel={t('payment.details.openInFairWallet')}
+                    style={{ marginTop: 12, width: '90%' }}
                   >
-                    <FAIRWalletIcon size={20} style={{ marginRight: 8 }} />
-                    <Text
-                      style={[
-                        styles.faircoinButtonText,
-                        { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 },
-                      ]}
-                    >
-                      {t('payment.details.openInFairWallet')}
-                    </Text>
-                  </TouchableOpacity>
-                  <TouchableOpacity
-                    style={[
-                      styles.faircoinButton,
-                      {
-                        backgroundColor: '#9ffb50',
-                        borderRadius: 18,
-                        marginTop: 10,
-                        width: '90%',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                      },
-                    ]}
+                    {t('payment.details.openInFairWallet')}
+                  </Button>
+                  <Button
+                    appearance="subtle"
+                    tone="neutral"
                     onPress={handleCopyAddress}
-                    accessibilityRole="button"
-                    accessibilityLabel={t('payment.details.copyAddress')}
+                    style={{ marginTop: 10, width: '90%' }}
                   >
-                    <FAIRWalletIcon size={20} style={{ marginRight: 8 }} />
-                    <Text
-                      style={[
-                        styles.faircoinButtonText,
-                        { color: '#1b1f0a', fontWeight: 'bold', fontSize: 16 },
-                      ]}
-                    >
-                      {t('payment.details.copyAddress')}
-                    </Text>
-                  </TouchableOpacity>
+                    {t('payment.details.copyAddress')}
+                  </Button>
                 </>
               )}
               <View style={{ height: 18 }} />

package/src/ui/components/payment/PaymentMethodStep.tsx

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { View, Animated } from 'react-native';
 import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 import { Button } from '@oxy.so/bloom/button';
 import FAIRWalletIcon from '../icon/FAIRWalletIcon';
 import { createPaymentStyles } from './paymentStyles';
@@ -48,7 +48,7 @@ const PaymentMethodStep: React.FC<PaymentMethodStepProps> = ({
       <View style={styles.section}>
         <Text style={styles.sectionTitle}>{t('payment.method.title')}</Text>
 
-        <SettingsListGroup>
+        <GroupedSection>
           {availablePaymentMethods.map((method) => {
             const iconColor =
               method.key === 'card'
@@ -65,7 +65,7 @@ const PaymentMethodStep: React.FC<PaymentMethodStepProps> = ({
                 <Ionicons name={method.icon} size={20} color={iconColor} />
               );
             return (
-              <SettingsListItem
+              <GroupedSectionItem
                 key={method.key}
                 icon={iconElement}
                 title={t(`payment.methods.${method.key}.label`)}
@@ -80,7 +80,7 @@ const PaymentMethodStep: React.FC<PaymentMethodStepProps> = ({
               />
             );
           })}
-        </SettingsListGroup>
+        </GroupedSection>
       </View>
 
       <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>

package/src/ui/components/payment/PaymentReviewStep.tsx

@@ -1,9 +1,9 @@
 import type React from 'react';
 import { useMemo } from 'react';
-import { View, Animated, ActivityIndicator } from 'react-native';
+import { View, Animated } from 'react-native';
 import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 import { Button } from '@oxy.so/bloom/button';
 import { createPaymentStyles } from './paymentStyles';
 import { PAYMENT_METHODS, getCurrencySymbol } from './constants';
@@ -55,20 +55,20 @@ const PaymentReviewStep: React.FC<PaymentReviewStepProps> = ({
       <View style={styles.section}>
         <Text style={styles.sectionTitle}>{t('payment.review.title')}</Text>
 
-        <SettingsListGroup>
-          <SettingsListItem
+        <GroupedSection>
+          <GroupedSectionItem
             icon={<Ionicons name="shield-checkmark" size={20} color={colors.success} />}
             title={t('payment.review.securePayment')}
             description={t('payment.review.securePaymentDesc')}
             showChevron={false}
           />
-          <SettingsListItem
+          <GroupedSectionItem
             icon={<Ionicons name="cash-outline" size={20} color={colors.primary} />}
             title={t('payment.review.amount')}
             description={`${currencySymbol} ${amount}`}
             showChevron={false}
           />
-          <SettingsListItem
+          <GroupedSectionItem
             icon={
               selectedMethod ? (
                 <Ionicons name={selectedMethod.icon} size={20} color={colors.primary} />
@@ -81,7 +81,7 @@ const PaymentReviewStep: React.FC<PaymentReviewStepProps> = ({
             showChevron={false}
           />
           {paymentMethod === 'card' ? (
-            <SettingsListItem
+            <GroupedSectionItem
               icon={<Ionicons name="card-outline" size={20} color={colors.primary} />}
               title={t('payment.review.card')}
               description={cardDetails.number.replace(/.(?=.{4})/g, '*')}
@@ -89,7 +89,7 @@ const PaymentReviewStep: React.FC<PaymentReviewStepProps> = ({
             />
           ) : null}
           {paymentMethod === 'oxy' ? (
-            <SettingsListItem
+            <GroupedSectionItem
               icon={<Ionicons name="wallet-outline" size={20} color={colors.primary} />}
               title={t('payment.review.peableAccount')}
               description={t('payment.details.balance', { balance: '⊜ 123.45' })}
@@ -97,14 +97,14 @@ const PaymentReviewStep: React.FC<PaymentReviewStepProps> = ({
             />
           ) : null}
           {paymentMethod === 'faircoin' ? (
-            <SettingsListItem
+            <GroupedSectionItem
               icon={<Ionicons name="qr-code-outline" size={20} color={colors.primary} />}
               title={t('payment.review.faircoinWallet')}
               description={t('payment.review.paidViaQR')}
               showChevron={false}
             />
           ) : null}
-        </SettingsListGroup>
+        </GroupedSection>
       </View>
 
       <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
@@ -124,13 +124,8 @@ const PaymentReviewStep: React.FC<PaymentReviewStepProps> = ({
           onPress={onPay}
           size="sm"
           disabled={isPaying}
-          icon={
-            isPaying ? (
-              <ActivityIndicator size="small" color="#FFFFFF" />
-            ) : (
-              <Ionicons name="checkmark" size={16} />
-            )
-          }
+          loading={isPaying}
+          icon={<Ionicons name="checkmark" size={16} />}
           iconPosition="right"
         >
           {isPaying ? t('payment.review.processing') : t('payment.review.payNow')}

package/src/ui/components/payment/PaymentSummaryStep.tsx

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import { View, Animated } from 'react-native';
 import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { GroupedSection, GroupedSectionItem } from '@oxy.so/bloom/grouped-section';
 import { Button } from '@oxy.so/bloom/button';
 import { createPaymentStyles } from './paymentStyles';
 import { getCurrencySymbol, CURRENCY_SYMBOLS } from './constants';
@@ -91,9 +91,9 @@ const PaymentSummaryStep: React.FC<PaymentSummaryStepProps> = ({
             {paymentItems.length > 0 ? (
               <>
                 <View style={styles.summaryCardItems}>
-                  <SettingsListGroup>
+                  <GroupedSection>
                     {paymentItems.map((item) => (
-                      <SettingsListItem
+                      <GroupedSectionItem
                         key={`${item.type}-${item.name}-${item.price}-${item.period ?? ''}`}
                         icon={
                           <Ionicons
@@ -118,7 +118,7 @@ const PaymentSummaryStep: React.FC<PaymentSummaryStepProps> = ({
                         }
                       />
                     ))}
-                  </SettingsListGroup>
+                  </GroupedSection>
                 </View>
 
                 <View style={styles.summaryCardDivider} />

package/src/ui/components/signIn/InlineCommonsQr.tsx

@@ -15,7 +15,7 @@
 
 import type React from 'react';
 import { useEffect, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
 import { Button } from '@oxy.so/bloom/button';
 import { RiCheckboxCircleLine } from '@oxy.so/bloom/icons/RiCheckboxCircleLine';
@@ -139,8 +139,13 @@ const styles = StyleSheet.create({
   captionOnMedia: {
     color: '#FFFFFF',
     fontWeight: '500',
-    textShadowColor: 'rgba(0, 0, 0, 0.6)',
-    textShadowOffset: { width: 0, height: 1 },
-    textShadowRadius: 4,
+    ...Platform.select({
+      web: { textShadow: '0px 1px 4px rgba(0, 0, 0, 0.6)' },
+      default: {
+        textShadowColor: 'rgba(0, 0, 0, 0.6)',
+        textShadowOffset: { width: 0, height: 1 },
+        textShadowRadius: 4,
+      },
+    }),
   },
 });