@oxyhq/services 5.13.0 → 5.13.2

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -1,5 +1,6 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, Platform, Animated, ScrollView } from 'react-native';
+import AnimatedReanimated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
 import type { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
 import Avatar from '../components/Avatar';
@@ -10,6 +11,41 @@ import { useThemeColors } from '../styles';
 import GroupedPillButtons from '../components/internal/GroupedPillButtons';
 import { useI18n } from '../hooks/useI18n';
 
+const GAP = 12;
+const INNER_GAP = 8;
+
+// Individual animated progress dot
+const AnimatedProgressDot: React.FC<{
+    isActive: boolean;
+    colors: any;
+    styles: any;
+}> = ({ isActive, colors, styles }) => {
+    const width = useSharedValue(isActive ? 12 : 6);
+    const backgroundColor = useSharedValue(isActive ? colors.primary : colors.border);
+
+    useEffect(() => {
+        width.value = withTiming(isActive ? 12 : 6, { duration: 300 });
+        backgroundColor.value = withTiming(
+            isActive ? colors.primary : colors.border,
+            { duration: 300 }
+        );
+    }, [isActive, colors.primary, colors.border, width, backgroundColor]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        width: width.value,
+        backgroundColor: backgroundColor.value,
+    }));
+
+    return (
+        <AnimatedReanimated.View
+            style={[
+                styles.progressDot,
+                animatedStyle,
+            ]}
+        />
+    );
+};
+
 /**
  * Post-signup welcome & onboarding screen.
  * - Greets the newly registered user
@@ -33,8 +69,19 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
     const fadeAnim = useRef(new Animated.Value(1)).current;
     const slideAnim = useRef(new Animated.Value(0)).current;
     const [currentStep, setCurrentStep] = useState(0);
+    // Track avatar separately to ensure it updates immediately after selection
+    const [selectedAvatarId, setSelectedAvatarId] = useState<string | undefined>(currentUser?.avatar);
 
-    const avatarUri = currentUser?.avatar ? oxyServices.getFileDownloadUrl(currentUser.avatar as string, 'thumb') : undefined;
+    // Update selectedAvatarId when user changes
+    useEffect(() => {
+        if (user?.avatar) {
+            setSelectedAvatarId(user.avatar);
+        } else if (newUser?.avatar) {
+            setSelectedAvatarId(newUser.avatar);
+        }
+    }, [user?.avatar, newUser?.avatar]);
+
+    const avatarUri = selectedAvatarId ? oxyServices.getFileDownloadUrl(selectedAvatarId, 'thumb') : undefined;
 
     // Steps content
     const welcomeTitle = currentUser?.username
@@ -64,7 +111,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
     const totalSteps = steps.length;
     const avatarStepIndex = steps.findIndex(s => s.showAvatar);
 
-    const animateToStep = (next: number) => {
+    const animateToStepCallback = useCallback((next: number) => {
         Animated.timing(fadeAnim, { toValue: 0, duration: 180, useNativeDriver: Platform.OS !== 'web' }).start(() => {
             setCurrentStep(next);
             slideAnim.setValue(-40);
@@ -73,40 +120,59 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
                 Animated.spring(slideAnim, { toValue: 0, useNativeDriver: Platform.OS !== 'web', friction: 9 })
             ]).start();
         });
-    };
+    }, [fadeAnim, slideAnim]);
 
-    const nextStep = useCallback(() => { if (currentStep < totalSteps - 1) animateToStep(currentStep + 1); }, [currentStep, totalSteps]);
-    const prevStep = useCallback(() => { if (currentStep > 0) animateToStep(currentStep - 1); }, [currentStep]);
-    const skipToAvatar = useCallback(() => { if (avatarStepIndex >= 0) animateToStep(avatarStepIndex); }, [avatarStepIndex]);
+    const nextStep = useCallback(() => { if (currentStep < totalSteps - 1) animateToStepCallback(currentStep + 1); }, [currentStep, totalSteps, animateToStepCallback]);
+    const prevStep = useCallback(() => { if (currentStep > 0) animateToStepCallback(currentStep - 1); }, [currentStep, animateToStepCallback]);
+    const skipToAvatar = useCallback(() => { if (avatarStepIndex >= 0) animateToStepCallback(avatarStepIndex); }, [avatarStepIndex, animateToStepCallback]);
     const finish = useCallback(() => { if (onAuthenticated && currentUser) onAuthenticated(currentUser); }, [onAuthenticated, currentUser]);
     const openAvatarPicker = useCallback(() => {
+        // Ensure we're on the avatar step before opening picker
+        if (avatarStepIndex >= 0 && currentStep !== avatarStepIndex) {
+            animateToStepCallback(avatarStepIndex);
+        }
+
         navigate('FileManagement', {
             selectMode: true,
             multiSelect: false,
             disabledMimeTypes: ['video/', 'audio/', 'application/pdf'],
-            afterSelect: 'back',
+            afterSelect: 'none', // Don't navigate away - stay on current screen
             onSelect: async (file: any) => {
                 if (!file.contentType.startsWith('image/')) {
                     toast.error(t('editProfile.toasts.selectImage') || 'Please select an image file');
                     return;
                 }
                 try {
-                    // Update file visibility to public for avatar
-                    try {
-                        await oxyServices.assetUpdateVisibility(file.id, 'public');
-                        console.log('[WelcomeNewUser] Avatar visibility updated to public');
-                    } catch (visError) {
-                        console.warn('[WelcomeNewUser] Failed to update avatar visibility, continuing anyway:', visError);
+                    // Update file visibility to public for avatar (skip if temporary asset ID)
+                    if (file.id && !file.id.startsWith('temp-')) {
+                        try {
+                            await oxyServices.assetUpdateVisibility(file.id, 'public');
+                            console.log('[WelcomeNewUser] Avatar visibility updated to public');
+                        } catch (visError: any) {
+                            // Only log non-404 errors (404 means asset doesn't exist yet, which is OK)
+                            if (visError?.response?.status !== 404) {
+                                console.warn('[WelcomeNewUser] Failed to update avatar visibility, continuing anyway:', visError);
+                            }
+                        }
                     }
 
+                    // Update the avatar immediately in local state
+                    setSelectedAvatarId(file.id);
+                    
+                    // Update user in store
                     await updateUser({ avatar: file.id }, oxyServices);
                     toast.success(t('editProfile.toasts.avatarUpdated') || 'Avatar updated');
+                    
+                    // Ensure we stay on the avatar step
+                    if (avatarStepIndex >= 0 && currentStep !== avatarStepIndex) {
+                        animateToStepCallback(avatarStepIndex);
+                    }
                 } catch (e: any) {
                     toast.error(e.message || t('editProfile.toasts.updateAvatarFailed') || 'Failed to update avatar');
                 }
             }
         });
-    }, [navigate, updateUser, oxyServices]);
+    }, [navigate, updateUser, oxyServices, currentStep, avatarStepIndex, animateToStepCallback, t]);
 
     const step = steps[currentStep];
     const pillButtons = useMemo(() => {
@@ -138,33 +204,51 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
         <View style={styles.container}>
             <View style={styles.progressContainer}>
                 {steps.map((s, i) => (
-                    <View key={s.key} style={[styles.progressDot, i === currentStep ? { backgroundColor: colors.primary, width: 22 } : { backgroundColor: colors.border }]} />
+                    <AnimatedProgressDot
+                        key={s.key}
+                        isActive={i === currentStep}
+                        colors={colors}
+                        styles={styles}
+                    />
                 ))}
             </View>
             <Animated.View style={{ opacity: fadeAnim, transform: [{ translateX: slideAnim }] }}>
                 <ScrollView contentContainerStyle={styles.scrollInner} showsVerticalScrollIndicator={false}>
-                    <Text style={styles.title}>{step.title}</Text>
-                    {step.body && <Text style={styles.body}>{step.body}</Text>}
-                    {Array.isArray(step.bullets) && step.bullets.length > 0 && (
-                        <View style={styles.bulletContainer}>
-                            {step.bullets.map(b => (
-                                <View key={b} style={styles.bulletRow}>
-                                    <Ionicons name="ellipse" size={8} color={colors.primary} style={{ marginTop: 6 }} />
-                                    <Text style={styles.bulletText}>{b}</Text>
-                                </View>
-                            ))}
+                    <View style={styles.contentContainer}>
+                        <View style={[styles.header, styles.sectionSpacing]}>
+                            <Text style={[styles.title, { color: colors.text }]}>{step.title}</Text>
+                            {step.body && <Text style={[styles.body, { color: colors.secondaryText }]}>{step.body}</Text>}
                         </View>
-                    )}
-                    {step.showAvatar && (
-                        <View style={styles.avatarSection}>
-                            <Avatar size={120} name={currentUser?.username} uri={avatarUri} theme={theme} style={styles.avatar} />
-                            <TouchableOpacity style={styles.changeAvatarButton} onPress={openAvatarPicker}>
-                                <Ionicons name="image-outline" size={18} color="#FFFFFF" />
-                                <Text style={styles.changeAvatarText}>{avatarUri ? (t('welcomeNew.avatar.change') || 'Change Avatar') : (t('welcomeNew.avatar.add') || 'Add Avatar')}</Text>
-                            </TouchableOpacity>
+                        {Array.isArray(step.bullets) && step.bullets.length > 0 && (
+                            <View style={[styles.bulletContainer, styles.sectionSpacing]}>
+                                {step.bullets.map(b => (
+                                    <View key={b} style={styles.bulletRow}>
+                                        <Ionicons name="ellipse" size={8} color={colors.primary} style={{ marginTop: 6 }} />
+                                        <Text style={[styles.bulletText, { color: colors.secondaryText }]}>{b}</Text>
+                                    </View>
+                                ))}
+                            </View>
+                        )}
+                        {step.showAvatar && (
+                            <View style={[styles.avatarSection, styles.sectionSpacing]}>
+                                <Avatar 
+                                    size={120} 
+                                    name={currentUser?.name?.full || currentUser?.name?.first || currentUser?.username} 
+                                    uri={avatarUri} 
+                                    theme={theme} 
+                                    backgroundColor={colors.primary + '20'}
+                                    style={styles.avatar} 
+                                />
+                                <TouchableOpacity style={[styles.changeAvatarButton, { backgroundColor: colors.primary }]} onPress={openAvatarPicker}>
+                                    <Ionicons name="image-outline" size={18} color="#FFFFFF" />
+                                    <Text style={styles.changeAvatarText}>{avatarUri ? (t('welcomeNew.avatar.change') || 'Change Avatar') : (t('welcomeNew.avatar.add') || 'Add Avatar')}</Text>
+                                </TouchableOpacity>
+                            </View>
+                        )}
+                        <View style={styles.sectionSpacing}>
+                            <GroupedPillButtons buttons={pillButtons} colors={colors} />
                         </View>
-                    )}
-                    <GroupedPillButtons buttons={pillButtons} colors={colors} />
+                    </View>
                 </ScrollView>
             </Animated.View>
         </View>
@@ -174,11 +258,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: any }> = ({
 
 const createStyles = (theme: string) => {
     const isDark = theme === 'dark';
-    const textColor = isDark ? '#FFFFFF' : '#000000';
-    const secondary = isDark ? '#CCCCCC' : '#555555';
-    const cardBg = isDark ? '#1E1E1E' : '#FFFFFF';
     const border = isDark ? '#333333' : '#E0E0E0';
-    const primary = '#007AFF';
     return StyleSheet.create({
         container: {
             width: '100%',
@@ -186,25 +266,38 @@ const createStyles = (theme: string) => {
         },
         scrollInner: {
             paddingBottom: 12,
+            paddingTop: 0,
+        },
+        contentContainer: {
+            width: '100%',
+            maxWidth: 420,
+            alignSelf: 'center',
+        },
+        sectionSpacing: {
+            marginBottom: GAP,
+        },
+        header: {
+            alignItems: 'flex-start',
+            width: '100%',
+            gap: INNER_GAP / 2,
         },
         title: {
             fontSize: 42,
             fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
             fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
             letterSpacing: -1,
-            color: textColor,
-            marginBottom: 12,
+            textAlign: 'left',
         },
         body: {
             fontSize: 16,
             lineHeight: 22,
-            color: secondary,
-            marginBottom: 28,
-            maxWidth: 620,
+            textAlign: 'left',
+            maxWidth: 320,
+            alignSelf: 'flex-start',
         },
         bulletContainer: {
-            gap: 10,
-            marginBottom: 32,
+            gap: INNER_GAP,
+            width: '100%',
         },
         bulletRow: {
             flexDirection: 'row',
@@ -215,26 +308,26 @@ const createStyles = (theme: string) => {
             flex: 1,
             fontSize: 15,
             lineHeight: 20,
-            color: secondary,
         },
         avatarSection: {
             width: '100%',
             alignItems: 'center',
-            marginBottom: 40,
         },
         avatar: {
-            marginBottom: 16,
-            borderWidth: 4,
-            borderColor: primary + '40',
+            marginBottom: INNER_GAP,
         },
         changeAvatarButton: {
             flexDirection: 'row',
             alignItems: 'center',
-            backgroundColor: primary,
             paddingHorizontal: 18,
             paddingVertical: 10,
-            borderRadius: 35,
+            borderRadius: 28,
             gap: 8,
+            shadowOpacity: 0,
+            shadowRadius: 0,
+            shadowOffset: { width: 0, height: 0 },
+            elevation: 0,
+            ...(Platform.OS === 'web' ? { boxShadow: 'none' } : null),
         },
         changeAvatarText: {
             color: '#FFFFFF',
@@ -245,61 +338,16 @@ const createStyles = (theme: string) => {
             flexDirection: 'row',
             width: '100%',
             justifyContent: 'center',
-            marginBottom: 24,
-            marginTop: 4,
+            marginTop: 24, // Space for bottom sheet handle (~20px) + small buffer
+            marginBottom: 24, // Equal spacing below dots
         },
         progressDot: {
-            height: 10,
-            width: 10,
-            borderRadius: 5,
-            marginHorizontal: 6,
+            height: 6,
+            width: 6,
+            borderRadius: 3,
+            marginHorizontal: 3,
             backgroundColor: border,
         },
-        navBar: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            width: '100%',
-            gap: 12,
-            marginTop: 8,
-        },
-        navButton: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 6,
-            paddingHorizontal: 14,
-            paddingVertical: 10,
-            borderRadius: 12,
-        },
-        backButton: {
-            backgroundColor: cardBg,
-            borderWidth: 1,
-            borderColor: border,
-        },
-        skipButton: {
-            marginLeft: 'auto',
-            backgroundColor: 'transparent',
-            paddingHorizontal: 4,
-        },
-        navText: {
-            fontSize: 14,
-            fontWeight: '500',
-        },
-        primaryButton: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 8,
-            backgroundColor: primary,
-            paddingVertical: 18,
-            borderRadius: 16,
-            width: '100%',
-        },
-        primaryButtonText: {
-            color: '#FFFFFF',
-            fontSize: 16,
-            fontWeight: '600',
-            letterSpacing: 0.5,
-        },
     });
 };
 

package/src/ui/screens/internal/SignInPasswordStep.tsx

@@ -9,6 +9,7 @@ import Animated, {
 import { Ionicons } from '@expo/vector-icons';
 import Avatar from '../../components/Avatar';
 import { useI18n } from '../../hooks/useI18n';
+import { useOxy } from '../../context/OxyContext';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import TextField from '../../components/internal/TextField';
 
@@ -59,6 +60,7 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
 }) => {
     const inputRef = useRef<TextInput>(null);
     const { t } = useI18n();
+    const { oxyServices } = useOxy();
 
     // Animated styles - properly memoized to prevent re-renders
     const containerAnimatedStyle = useAnimatedStyle(() => {
@@ -101,18 +103,14 @@ const SignInPasswordStep: React.FC<SignInPasswordStepProps> = ({
             containerAnimatedStyle
         ]}>
             <View style={styles.modernUserProfileContainer}>
-                <Animated.View style={[
-                    styles.avatarContainer,
-                    logoAnimatedStyle
-                ]}>
+                <Animated.View style={logoAnimatedStyle}>
                     <Avatar
                         name={userProfile?.displayName || userProfile?.name || username}
                         size={100}
                         theme={theme as 'light' | 'dark'}
-                        style={styles.modernUserAvatar}
                         backgroundColor={colors.primary + '20'}
+                        uri={userProfile?.avatar && oxyServices ? oxyServices.getFileDownloadUrl(userProfile.avatar, 'thumb') : undefined}
                     />
-                    <View style={[styles.statusIndicator, { backgroundColor: colors.primary }]} />
                 </Animated.View>
                 <Text style={[styles.modernUserDisplayName, { color: colors.text }]}>
                     {userProfile?.displayName || userProfile?.name || username}

package/src/ui/screens/internal/SignInUsernameStep.tsx

@@ -95,7 +95,7 @@ const SignInUsernameStep: React.FC<SignInUsernameStepProps> = ({
                 <View style={[styles.modernInfoCard, { backgroundColor: colors.inputBackground }]}>
                     <Ionicons name="information-circle" size={20} color={colors.primary} />
                     <Text style={[styles.modernInfoText, { color: colors.text }]}>
-                        {t('signin.currentlySignedInAs', { username: user?.username }) || 'Currently signed in as '}<Text style={{ fontWeight: 'bold' }}>{user?.username}</Text>
+                        {t('signin.currentlySignedInAs') || 'Currently signed in as'} <Text style={{ fontWeight: 'bold' }}>{user?.name?.full || user?.username}</Text>
                     </Text>
                 </View>
             )}

package/src/ui/screens/steps/RecoverRequestStep.tsx

@@ -9,6 +9,7 @@ import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import { toast } from '../../../lib/sonner';
 import type { OxyServices } from '../../../core';
 import { useI18n } from '../../hooks/useI18n';
+import { stepStyles } from '../../styles/spacing';
 
 interface RecoverRequestStepProps {
     // Common props from StepBasedScreen
@@ -51,6 +52,7 @@ const RecoverRequestStep: React.FC<RecoverRequestStepProps> = ({
 }) => {
     const inputRef = useRef<any>(null);
     const { t } = useI18n();
+    const baseStyles = stepStyles;
 
     const handleIdentifierChange = (text: string) => {
         setIdentifier(text);
@@ -83,13 +85,15 @@ const RecoverRequestStep: React.FC<RecoverRequestStepProps> = ({
 
     return (
         <>
-            <HighFive width={100} height={100} />
-            <View style={styles.modernHeader}>
-                <Text style={[styles.modernTitle, { color: colors.text }]}>{t('recover.title')}</Text>
-                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>{t('recover.noEmail')}</Text>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, { alignItems: 'flex-start' }]}>
+                <HighFive width={100} height={100} />
+            </View>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.header]}>
+                <Text style={[styles.modernTitle, baseStyles.title, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>{t('recover.title')}</Text>
+                <Text style={[styles.modernSubtitle, baseStyles.subtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>{t('recover.noEmail')}</Text>
             </View>
 
-            <View style={styles.modernInputContainer}>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing]}>
                 <TextField
                     ref={inputRef}
                     label={t('recover.username.label')}
@@ -101,31 +105,37 @@ const RecoverRequestStep: React.FC<RecoverRequestStepProps> = ({
                     testID="recover-identifier-input"
                     variant="filled"
                     error={errorMessage || undefined}
+                    helperText={t('recover.username.helper') || 'Enter your username or email'}
                     editable={!isLoading}
                     onSubmitEditing={handleRequestWithFocus}
                     autoFocus
+                    accessibilityLabel={t('recover.username.label')}
+                    accessibilityHint={t('recover.username.helper') || 'Enter your username or email to recover your account'}
+                    style={{ marginBottom: 0 }}
                 />
             </View>
 
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: t('common.actions.back'),
-                        onPress: () => navigate('SignIn'),
-                        icon: 'arrow-back',
-                        variant: 'transparent',
-                    },
-                    {
-                        text: t('common.actions.continue'),
-                        onPress: handleRequest,
-                        icon: 'information-circle-outline',
-                        variant: 'primary',
-                        loading: isLoading,
-                        disabled: isLoading,
-                    },
-                ]}
-                colors={colors}
-            />
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer]}>
+                <GroupedPillButtons
+                    buttons={[
+                        {
+                            text: t('common.actions.back'),
+                            onPress: () => navigate('SignIn'),
+                            icon: 'arrow-back',
+                            variant: 'transparent',
+                        },
+                        {
+                            text: t('common.actions.continue'),
+                            onPress: handleRequest,
+                            icon: 'information-circle-outline',
+                            variant: 'primary',
+                            loading: isLoading,
+                            disabled: isLoading || !identifier || identifier.length < 3,
+                        },
+                    ]}
+                    colors={colors}
+                />
+            </View>
         </>
     );
 };

package/src/ui/screens/steps/RecoverResetPasswordStep.tsx

@@ -1,10 +1,11 @@
 import type React from 'react';
 import type { RouteName } from '../../navigation/routes';
-import { View, Text } from 'react-native';
+import { View, Text, StyleSheet, Platform } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import TextField from '../../components/internal/TextField';
 import { useI18n } from '../../hooks/useI18n';
+import { STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
 
 interface RecoverResetPasswordStepProps {
   // Common props
@@ -53,6 +54,8 @@ const RecoverResetPasswordStep: React.FC<RecoverResetPasswordStepProps> = ({
   oxyServices,
 }) => {
   const { t } = useI18n();
+  const baseStyles = stepStyles;
+  const webShadowReset = Platform.OS === 'web' ? ({ boxShadow: 'none' } as any) : null;
   const handleReset = async () => {
     if (!password || password.length < 8) {
       setErrorMessage(t('recover.password.minLength') || 'Password must be at least 8 characters long');
@@ -86,48 +89,74 @@ const RecoverResetPasswordStep: React.FC<RecoverResetPasswordStepProps> = ({
 
   return (
     <>
-      <View style={styles.modernHeader}>
-        <Text style={[styles.modernTitle, { color: colors.text }]}>{t('recover.newPassword')}</Text>
-        <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>{t('recover.title')} @{identifier}</Text>
+      <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.header]}>
+        <Text style={[styles.modernTitle, baseStyles.title, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>{t('recover.newPassword')}</Text>
+        <Text style={[styles.modernSubtitle, baseStyles.subtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>{t('recover.title')} @{identifier}</Text>
       </View>
 
-      <View style={styles.modernInputContainer}>
-        <TextField
-          label={t('common.labels.password')}
-          leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
-          value={password}
-          onChangeText={setPassword}
-          secureTextEntry
-          autoCapitalize="none"
-          autoCorrect={false}
-          variant="filled"
-          error={errorMessage || undefined}
-          onSubmitEditing={handleReset}
-          autoFocus
-        />
+      <View style={[baseStyles.container, baseStyles.sectionSpacing]}>
+        <View style={[stylesheet.formCard, { backgroundColor: colors.inputBackground || colors.card || 'rgba(0,0,0,0.04)' }, webShadowReset]}>
+          <TextField
+            label={t('common.labels.password')}
+            leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
+            value={password}
+            onChangeText={setPassword}
+            secureTextEntry
+            autoCapitalize="none"
+            autoCorrect={false}
+            variant="filled"
+            error={errorMessage || undefined}
+            onSubmitEditing={handleReset}
+            autoFocus
+            style={{ marginBottom: 0 }}
+          />
 
-        <TextField
-          label={t('common.labels.confirmPassword')}
-          leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
-          value={confirmPassword}
-          onChangeText={setConfirmPassword}
-          secureTextEntry
-          autoCapitalize="none"
-          autoCorrect={false}
-          variant="filled"
-          onSubmitEditing={handleReset}
-        />
+          <TextField
+            label={t('common.labels.confirmPassword')}
+            leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
+            value={confirmPassword}
+            onChangeText={setConfirmPassword}
+            secureTextEntry
+            autoCapitalize="none"
+            autoCorrect={false}
+            variant="filled"
+            onSubmitEditing={handleReset}
+            style={{ marginBottom: 0 }}
+          />
+        </View>
       </View>
 
-      <GroupedPillButtons
-        buttons={[
-          { text: t('common.actions.back'), onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
-          { text: t('common.actions.resetPassword'), onPress: handleReset, icon: 'key-outline', variant: 'primary', loading: isLoading, disabled: isLoading },
-        ]}
-        colors={colors}
-      />
+      <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer]}>
+        <GroupedPillButtons
+          buttons={[
+            { text: t('common.actions.back'), onPress: prevStep, icon: 'arrow-back', variant: 'transparent' },
+            { 
+              text: t('common.actions.resetPassword'), 
+              onPress: handleReset, 
+              icon: 'key-outline', 
+              variant: 'primary', 
+              loading: isLoading, 
+              disabled: isLoading || !password || password.length < 8 || password !== confirmPassword 
+            },
+          ]}
+          colors={colors}
+        />
+      </View>
     </>
   );
 };
 
 export default RecoverResetPasswordStep;
+
+const stylesheet = StyleSheet.create({
+  formCard: {
+    width: '100%',
+    maxWidth: 420,
+    borderRadius: 28,
+    paddingHorizontal: 20,
+    paddingVertical: 18,
+    gap: STEP_INNER_GAP,
+    alignItems: 'stretch',
+    shadowColor: 'transparent',
+  },
+});