@oxyhq/services 22.8.7 → 22.10.0

package/src/ui/screens/AccountVerificationScreen.tsx

@@ -1,13 +1,11 @@
 import React, { useState, useCallback } from 'react';
 import {
     View,
-    ScrollView,
     StyleSheet,
-    Platform,
-    KeyboardAvoidingView,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom';
+import { surfaces } from '@oxyhq/bloom/surfaces';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { H4, Text } from '@oxyhq/bloom/typography';
 import { Button } from '@oxyhq/bloom/button';
@@ -15,8 +13,8 @@ import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
 import { IconCircle } from '@oxyhq/bloom/icon-circle';
 import { BenefitList, BenefitRow } from '@oxyhq/bloom/benefit-list';
 import * as Icons from '@oxyhq/bloom/icons';
-import Header from '../components/Header';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useOxy } from '../context/OxyContext';
 
 const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
@@ -26,21 +24,13 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
     // Use useOxy() hook for OxyContext values
     const { oxyServices } = useOxy();
     const { t } = useI18n();
+
+    useSurfaceHeader({ title: t('accountVerification.title') || 'Account Verification' });
     const bloomTheme = useTheme();
 
     const [reason, setReason] = useState('');
     const [evidence, setEvidence] = useState('');
     const [isSubmitting, setIsSubmitting] = useState(false);
-    const [successMessage, setSuccessMessage] = useState('');
-
-    // Dialog controls
-    const successDialog = useDialogControl();
-
-    const handleSuccessAcknowledged = useCallback(() => {
-        setReason('');
-        setEvidence('');
-        goBack?.();
-    }, [goBack]);
 
     const handleSubmit = useCallback(async () => {
         if (!reason.trim()) {
@@ -60,10 +50,18 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                 evidence.trim() || undefined
             );
 
-            setSuccessMessage(
-                t('accountVerification.successMessage') || `Your verification request has been submitted. Request ID: ${result.requestId}`
-            );
-            successDialog.open();
+            // Acknowledgement surface — dismiss (button OR backdrop) resets and
+            // returns; there is no negative action.
+            await surfaces.confirm({
+                title: t('accountVerification.successTitle') || 'Request Submitted',
+                message:
+                    t('accountVerification.successMessage') || `Your verification request has been submitted. Request ID: ${result.requestId}`,
+                confirmLabel: t('accountVerification.ok') || 'OK',
+                hideCancel: true,
+            });
+            setReason('');
+            setEvidence('');
+            goBack?.();
         } catch (error: unknown) {
             if (__DEV__) {
                 console.error('Failed to submit verification request:', error);
@@ -74,28 +72,14 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
         } finally {
             setIsSubmitting(false);
         }
-    }, [reason, evidence, oxyServices, t, successDialog]);
+    }, [reason, evidence, oxyServices, t, goBack]);
 
     const canSubmit = Boolean(reason.trim()) && !isSubmitting;
 
     return (
-        <KeyboardAvoidingView
-            className="flex-1 bg-bg"
-            behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        >
-            <Header
-                title={t('accountVerification.title') || 'Account Verification'}
-                onBack={goBack || onClose}
-                variant="minimal"
-                elevation="subtle"
-            />
-
-            <ScrollView
-                className="flex-1 px-screen-margin"
-                showsVerticalScrollIndicator={false}
-                contentContainerClassName="pb-space-32"
-                keyboardShouldPersistTaps="handled"
-            >
+        <>
+
+            <View className="px-screen-margin pb-space-32">
                 {/* Hero */}
                 <View className="items-center py-space-24 gap-space-12">
                     <IconCircle icon={Icons.Verified_Stroke2_Corner2_Rounded} />
@@ -185,20 +169,8 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                         {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>
                 </View>
-            </ScrollView>
-
-            <Dialog
-                control={successDialog}
-                title={t('accountVerification.successTitle') || 'Request Submitted'}
-                description={successMessage}
-                actions={[
-                    {
-                        label: t('accountVerification.ok') || 'OK',
-                        onPress: handleSuccessAcknowledged,
-                    },
-                ]}
-            />
-        </KeyboardAvoidingView>
+            </View>
+        </>
     );
 };
 

package/src/ui/screens/AppInfoScreen.tsx

@@ -5,7 +5,6 @@ import {
     Platform,
     Dimensions,
     Clipboard,
-    ScrollView,
     ActivityIndicator,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
@@ -13,10 +12,10 @@ import { packageInfo } from '@oxyhq/core';
 import { toast } from '@oxyhq/bloom';
 import OxyServicesLogo from '../../assets/icons/OxyServices';
 import { SettingsIcon } from '../components/SettingsIcon';
-import Header from '../components/Header';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 
 interface SystemInfo {
@@ -37,6 +36,8 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
     // Use useOxy() hook for OxyContext values
     const { user, sessions, oxyServices, isAuthenticated } = useOxy();
     const { t } = useI18n();
+
+    useSurfaceHeader({ title: t('appInfo.title') });
     const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null);
     const [isRunningSystemCheck, setIsRunningSystemCheck] = useState(false);
     const [connectionStatus, setConnectionStatus] = useState<'checking' | 'connected' | 'disconnected' | 'unknown'>('unknown');
@@ -148,16 +149,9 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
     };
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('appInfo.title')}
-                onBack={goBack || onClose}
-                variant="minimal"
-                elevation="subtle"
-            />
+        <>
 
-            <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
-                <View className="px-screen-margin py-space-16 pb-space-24">
+            <View className="px-screen-margin py-space-16 pb-space-24">
                     {/* Package Information */}
                     <SettingsListGroup title={t('appInfo.sections.package')}>
                         <SettingsListItem
@@ -353,8 +347,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                         />
                     </SettingsListGroup>
                 </View>
-            </ScrollView>
-        </View>
+        </>
     );
 };
 

package/src/ui/screens/AvatarCropScreen.tsx

@@ -72,10 +72,6 @@ export interface AvatarCropScreenProps extends BaseScreenProps {
     sourceWidth?: number;
     /** Natural height of the source image (optional — measured if absent). */
     sourceHeight?: number;
-    /** Called with the cropped file once the user confirms. */
-    onConfirm?: (result: AvatarCropResult) => void | Promise<void>;
-    /** Called if the user cancels without confirming. */
-    onCancel?: () => void;
 }
 
 /** Side length (in dp) of the crop viewport. The output is always 512x512px. */
@@ -296,13 +292,10 @@ async function hapticSelection(): Promise<void> {
 }
 
 const AvatarCropScreen: React.FC<AvatarCropScreenProps> = ({
-    goBack,
-    onClose,
+    dismiss,
     imageUri,
     sourceWidth,
     sourceHeight,
-    onConfirm,
-    onCancel,
 }) => {
     const theme = useTheme();
     const { t } = useI18n();
@@ -765,16 +758,15 @@ const AvatarCropScreen: React.FC<AvatarCropScreenProps> = ({
 
             void hapticNotification('success');
 
-            await onConfirm?.({
+            // Resolve the surface's present() promise with the cropped JPEG and
+            // close it. The awaiting caller (`useAvatarPicker`) handles the
+            // upload + any success toast.
+            dismiss?.({
                 uri: result.uri,
                 width: result.width,
                 height: result.height,
                 mime: 'image/jpeg',
             });
-
-            // Close the sheet on success. The caller is responsible for any
-            // success toast (uploads typically toast their own outcome).
-            onClose?.();
         } catch (err) {
             const normalizedError = normalizeCropError(err);
             logger.error('handleConfirm failed', normalizedError, { component: LOG_COMPONENT });
@@ -786,12 +778,11 @@ const AvatarCropScreen: React.FC<AvatarCropScreenProps> = ({
             preparedImageCleanup?.();
             setIsProcessing(false);
         }
-    }, [baseFit, imageUri, naturalSize, onClose, onConfirm, t]);
+    }, [baseFit, imageUri, naturalSize, dismiss, t]);
 
     const handleCancel = useCallback(() => {
-        onCancel?.();
-        goBack?.();
-    }, [goBack, onCancel]);
+        dismiss?.();
+    }, [dismiss]);
 
     const topInset = Platform.OS === 'ios' ? Math.max(insets.top, 12) : Math.max(insets.top, 16);
     const bottomInset = Math.max(insets.bottom, 16);

package/src/ui/screens/ConnectedAppsScreen.tsx

@@ -1,16 +1,17 @@
 import React, { useCallback, useState } from 'react';
 import { ActivityIndicator, FlatList, RefreshControl, StyleSheet, View } from 'react-native';
-import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom';
+import { surfaces } from '@oxyhq/bloom/surfaces';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import type { ConnectedApp } from '@oxyhq/core';
 import { logger as loggerUtil } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
-import Header from '../components/Header';
 import { Avatar } from '@oxyhq/bloom/avatar';
 import { Loading } from '@oxyhq/bloom/loading';
 import { Text } from '@oxyhq/bloom/typography';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useOxy } from '../context/OxyContext';
 import { useConnectedApps } from '../hooks/queries/useAccountQueries';
 import { useRevokeConnectedApp } from '../hooks/mutations/useAccountMutations';
@@ -48,6 +49,8 @@ const formatRelative = (iso: string): string => {
 const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
     const bloomTheme = useTheme();
     const { t } = useI18n();
+
+    useSurfaceHeader({ title: t('connectedApps.title') || 'Connected apps' });
     const { isAuthenticated } = useOxy();
     const {
         data: apps,
@@ -56,46 +59,46 @@ const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
         isRefetching,
     } = useConnectedApps({ enabled: isAuthenticated });
     const revokeMutation = useRevokeConnectedApp();
-    const revokeDialog = useDialogControl();
-    const [pendingRevoke, setPendingRevoke] = useState<ConnectedApp | null>(null);
     const [revokingAppId, setRevokingAppId] = useState<string | null>(null);
 
     const confirmRevoke = useCallback(
-        (app: ConnectedApp) => {
-            setPendingRevoke(app);
-            revokeDialog.open();
+        async (app: ConnectedApp) => {
+            const confirmed = await surfaces.confirm({
+                title: t('connectedApps.confirm.title') || 'Revoke access',
+                message:
+                    t('connectedApps.confirm.message', { name: app.name })
+                    || `Revoke ${app.name}'s access to your Oxy account?`,
+                confirmLabel: t('common.revoke') || 'Revoke',
+                cancelLabel: t('common.cancel') || 'Cancel',
+                destructive: true,
+            });
+            if (!confirmed) {
+                return;
+            }
+            setRevokingAppId(app.applicationId);
+            try {
+                await revokeMutation.mutateAsync(app.applicationId);
+                toast.success(
+                    t('connectedApps.toasts.revoked', { name: app.name })
+                    || `Revoked access for ${app.name}`,
+                );
+            } catch (error) {
+                loggerUtil.warn(
+                    'Revoke connected app failed',
+                    { component: 'ConnectedAppsScreen' },
+                    error,
+                );
+                toast.error(
+                    t('connectedApps.toasts.revokeFailed')
+                    || 'Failed to revoke access',
+                );
+            } finally {
+                setRevokingAppId(null);
+            }
         },
-        [revokeDialog],
+        [revokeMutation, t],
     );
 
-    const handleRevoke = useCallback(async () => {
-        if (!pendingRevoke) {
-            return;
-        }
-        const target = pendingRevoke;
-        setRevokingAppId(target.applicationId);
-        try {
-            await revokeMutation.mutateAsync(target.applicationId);
-            toast.success(
-                t('connectedApps.toasts.revoked', { name: target.name })
-                || `Revoked access for ${target.name}`,
-            );
-        } catch (error) {
-            loggerUtil.warn(
-                'Revoke connected app failed',
-                { component: 'ConnectedAppsScreen' },
-                error,
-            );
-            toast.error(
-                t('connectedApps.toasts.revokeFailed')
-                || 'Failed to revoke access',
-            );
-        } finally {
-            setRevokingAppId(null);
-            setPendingRevoke(null);
-        }
-    }, [pendingRevoke, revokeMutation, t]);
-
     const renderEmpty = useCallback(
         () => (
             <View className="flex-1 items-center justify-center py-space-32">
@@ -142,12 +145,6 @@ const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
 
     return (
         <View className="flex-1 bg-bg">
-            <Header
-                title={t('connectedApps.title') || 'Connected apps'}
-                onBack={goBack || onClose}
-                variant="minimal"
-                elevation="subtle"
-            />
             {isLoading && !apps ? (
                 <Loading size="large" color={bloomTheme.colors.primary} />
             ) : (
@@ -167,24 +164,6 @@ const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
                     }
                 />
             )}
-            <Dialog
-                control={revokeDialog}
-                title={t('connectedApps.confirm.title') || 'Revoke access'}
-                description={
-                    pendingRevoke
-                        ? (t('connectedApps.confirm.message', { name: pendingRevoke.name })
-                            || `Revoke ${pendingRevoke.name}'s access to your Oxy account?`)
-                        : ''
-                }
-                actions={[
-                    {
-                        label: t('common.revoke') || 'Revoke',
-                        color: 'destructive',
-                        onPress: handleRevoke,
-                    },
-                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-                ]}
-            />
         </View>
     );
 };

package/src/ui/screens/CreateAccountScreen.tsx

@@ -2,20 +2,17 @@ import type React from 'react';
 import { useState, useCallback, useRef, useEffect } from 'react';
 import {
   View,
-  Platform,
   ActivityIndicator,
-  ScrollView,
-  KeyboardAvoidingView,
   TouchableOpacity,
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import type { AccountKind, CreateAccountInput, OrganizationCategory } from '@oxyhq/core';
 import { ORGANIZATION_CATEGORIES } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
-import Header from '../components/Header';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { H1, Text } from '@oxyhq/bloom/typography';
+import { Text } from '@oxyhq/bloom/typography';
 import { Button } from '@oxyhq/bloom/button';
 import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
 import { useOxy } from '../context/OxyContext';
@@ -106,6 +103,12 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
   const { oxyServices, createAccount, switchToAccount } = useOxy();
   const { t } = useI18n();
 
+  useSurfaceHeader({
+    title: t('accounts.create.title') || 'Create account',
+    subtitle: t('accounts.create.subtitle')
+      || 'Create an account you control. It will have its own profile, members, and apps.',
+  });
+
   const parentId = typeof parentAccountId === 'string' ? parentAccountId : undefined;
 
   const [kind, setKind] = useState<CreatableAccountKind>('project');
@@ -231,37 +234,9 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
   const title = t('accounts.create.title') || 'Create account';
 
   return (
-    <View className="flex-1 bg-bg">
-      <Header
-        title={title}
-        onBack={goBack}
-        onClose={onClose}
-        showBackButton={true}
-        showCloseButton={true}
-        elevation="subtle"
-      />
-
-      <KeyboardAvoidingView
-        className="flex-1"
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        keyboardVerticalOffset={Platform.OS === 'ios' ? 88 : 0}
-      >
-        <ScrollView
-          className="flex-1"
-          contentContainerClassName="px-screen-margin pt-space-24 pb-space-32 gap-space-24"
-          showsVerticalScrollIndicator={false}
-          keyboardShouldPersistTaps="handled"
-        >
-          {/* Big Title */}
-          <View className="gap-space-8">
-            <H1 className="text-headerBold font-headerBold text-text">
-              {title}
-            </H1>
-            <Text className="text-body font-body text-text-secondary">
-              {t('accounts.create.subtitle')
-                || 'Create an account you control. It will have its own profile, members, and apps.'}
-            </Text>
-          </View>
+    <>
+
+      <View className="px-screen-margin pt-space-16 pb-space-32 gap-space-24">
 
           {/* Kind picker */}
           <View className="gap-space-8">
@@ -419,9 +394,8 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
           >
             {title}
           </Button>
-        </ScrollView>
-      </KeyboardAvoidingView>
-    </View>
+        </View>
+    </>
   );
 };
 

package/src/ui/screens/EditProfileFieldScreen.tsx

@@ -1,24 +1,22 @@
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useRef } from 'react';
 import {
     View,
-    Platform,
     Image,
     StyleSheet,
-    ScrollView,
     TouchableOpacity,
     type TextInputProps,
-    KeyboardAvoidingView,
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { H1, Text } from '@oxyhq/bloom/typography';
+import { Text } from '@oxyhq/bloom/typography';
 import { Button } from '@oxyhq/bloom/button';
 import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
 import { normalizeTheme } from '@oxyhq/core';
 import type { User } from '@oxyhq/core';
-import Header from '../components/Header';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
+import { SurfaceHeaderAction } from '../components/SurfaceHeaderAction';
 import { useOxy } from '../context/OxyContext';
 import { useProfileEditing } from '../hooks/useProfileEditing';
 import { toast } from '@oxyhq/bloom';
@@ -464,6 +462,26 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
         }
     };
 
+    // Contribute the field title/subtitle + a Save action into the Dialog's own
+    // nav header (this screen renders no header of its own). `handleSave` closes
+    // over the live form values, so route it through a ref to keep the Save node
+    // stable across keystrokes (only re-created when the saving state flips).
+    const handleSaveRef = useRef(handleSave);
+    handleSaveRef.current = handleSave;
+    const onSavePress = useCallback(() => { void handleSaveRef.current(); }, []);
+    const saveAction = useMemo(
+        () => (
+            <SurfaceHeaderAction
+                label={isSaving ? (t('common.saving') || 'Saving…') : (t('common.save') || 'Save')}
+                onPress={onSavePress}
+                loading={isSaving}
+                disabled={isSaving}
+            />
+        ),
+        [isSaving, onSavePress, t],
+    );
+    useSurfaceHeader({ title: fieldConfig.title, subtitle: fieldConfig.subtitle, right: saveAction });
+
     // Render a single field input
     const renderField = (field: FieldConfig['fields'][0], index: number) => {
         const error = fieldErrors[field.key];
@@ -569,48 +587,12 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
     };
 
     return (
-        <KeyboardAvoidingView
-            className="flex-1 bg-bg"
-            behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        >
-            <Header
-                title=""
-                subtitle=""
-                onBack={onClose || goBack}
-                variant="minimal"
-                elevation="none"
-                actions={[{
-                    text: isSaving ? (t('common.saving') || 'Saving...') : (t('common.save') || 'Save'),
-                    onPress: handleSave,
-                    disabled: isSaving,
-                    loading: isSaving,
-                }]}
-            />
-
-            <ScrollView
-                className="flex-1"
-                contentContainerClassName="px-screen-margin pt-space-24 pb-space-32 gap-space-24"
-                showsVerticalScrollIndicator={false}
-                keyboardShouldPersistTaps="handled"
-            >
-                {/* Big Title */}
-                <View className="gap-space-8">
-                    <H1 className="text-headerBold font-headerBold text-text">
-                        {fieldConfig.title}
-                    </H1>
-                    {fieldConfig.subtitle && (
-                        <Text className="text-body font-body text-text-secondary">
-                            {fieldConfig.subtitle}
-                        </Text>
-                    )}
-                </View>
-
-                {/* Form Content */}
-                <View className="gap-space-16 p-space-16 rounded-radius-20 bg-fill">
-                    {fieldConfig.isList ? renderListContent() : fieldConfig.fields.map(renderField)}
-                </View>
-            </ScrollView>
-        </KeyboardAvoidingView>
+        <View className="px-screen-margin pt-space-16 pb-space-32 gap-space-24">
+            {/* Form Content */}
+            <View className="gap-space-16 p-space-16 rounded-radius-20 bg-fill">
+                {fieldConfig.isList ? renderListContent() : fieldConfig.fields.map(renderField)}
+            </View>
+        </View>
     );
 };
 

package/src/ui/screens/EditProfileScreen.tsx

@@ -1,16 +1,16 @@
 import type React from 'react';
 import { useMemo } from 'react';
-import { View, ScrollView } from 'react-native';
+import { View } from 'react-native';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { getAccountDisplayName } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
-import Header from '../components/Header';
 import { Avatar } from '@oxyhq/bloom/avatar';
 import ProfileSummaryCard from '../components/ProfileSummaryCard';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import type { ProfileFieldType } from './EditProfileFieldScreen';
 
 /**
@@ -22,11 +22,13 @@ import type { ProfileFieldType } from './EditProfileFieldScreen';
  * {@link ManageAccountScreen} uses. This is the single entry into per-field
  * editing — reached from ManageAccount's "Edit profile" row.
  */
-const EditProfileScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigate }) => {
+const EditProfileScreen: React.FC<BaseScreenProps> = ({ navigate }) => {
     const bloomTheme = useTheme();
     const { t, locale } = useI18n();
     const { user, oxyServices, openAvatarPicker } = useOxy();
 
+    useSurfaceHeader({ title: t('editProfile.title') || 'Edit Profile' });
+
     const displayName = useMemo(() => getAccountDisplayName(user, locale), [user, locale]);
     const avatarUri = useMemo(
         () => (user?.avatar ? oxyServices.getFileDownloadUrl(user.avatar, 'thumb') : undefined),
@@ -51,17 +53,7 @@ const EditProfileScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigat
     const goToField = (fieldType: ProfileFieldType) => navigate?.('EditProfileField', { fieldType });
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('editProfile.title') || 'Edit Profile'}
-                onBack={goBack || onClose}
-                elevation="subtle"
-            />
-            <ScrollView
-                className="flex-1"
-                contentContainerClassName="px-screen-margin pb-space-24"
-                showsVerticalScrollIndicator={false}
-            >
+            <View className="px-screen-margin pt-space-16 pb-space-24">
                 {/* Profile card */}
                 <ProfileSummaryCard
                     displayName={displayName}
@@ -141,8 +133,7 @@ const EditProfileScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navigat
                         onPress={() => goToField('locations')}
                     />
                 </SettingsListGroup>
-            </ScrollView>
-        </View>
+            </View>
     );
 };