@oxyhq/services 5.12.11 → 5.13.1

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',
+  },
+});

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

@@ -1,9 +1,10 @@
 import type React from 'react';
 import type { RouteName } from '../../navigation/routes';
-import { View, Text } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import { useI18n } from '../../hooks/useI18n';
+import { STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
 
 interface RecoverSuccessStepProps {
     // Common props from StepBasedScreen
@@ -35,6 +36,7 @@ const RecoverSuccessStep: React.FC<RecoverSuccessStepProps> = ({
     successMessage,
 }) => {
     const { t } = useI18n();
+    const baseStyles = stepStyles;
     // Extract identifier from previous steps
     const requestData = allStepData[0] || {};
     const { identifier } = requestData;
@@ -50,75 +52,97 @@ const RecoverSuccessStep: React.FC<RecoverSuccessStepProps> = ({
 
     return (
         <>
-            <View style={{
-                alignItems: 'center',
-                justifyContent: 'center',
-                marginBottom: 32,
-            }}>
-                <View style={{
-                    width: 80,
-                    height: 80,
-                    borderRadius: 40,
-                    backgroundColor: colors.success + '20',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginBottom: 24,
-                }}>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, stylesheet.iconContainer]}>
+                <View style={[stylesheet.successIcon, { backgroundColor: colors.success + '20' }]}>
                     <Ionicons name="checkmark-circle" size={40} color={colors.success} />
                 </View>
             </View>
 
-            <View style={styles.modernHeader}>
-                <Text style={[styles.modernTitle, { color: colors.text }]}>{t('recover.title')}</Text>
-                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>{successMessage || t('recover.resetSuccess')}</Text>
+            <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 }]}>{successMessage || t('recover.resetSuccess')}</Text>
             </View>
 
-            <View style={styles.modernInputContainer}>
-                <View style={{
-                    padding: 20,
+            <View style={[baseStyles.container, baseStyles.sectionSpacing]}>
+                <View style={[stylesheet.infoCard, {
                     backgroundColor: colors.inputBackground,
-                    borderRadius: 16,
-                    borderWidth: 1,
                     borderColor: colors.border,
-                    marginBottom: 24,
-                }}>
-                    <Text style={[styles.footerText, { color: colors.text, fontSize: 16, marginBottom: 8 }]}>
+                }]}>
+                    <Text style={[styles.footerText, stylesheet.infoTitle, { color: colors.text }]}>
                         {t('recover.whatsNextTitle') || "What's next?"}
                     </Text>
-                    <Text style={[styles.footerText, { color: colors.secondaryText, fontSize: 14, lineHeight: 20 }]}>
+                    <Text style={[styles.footerText, stylesheet.infoBody, { color: colors.secondaryText }]}>
                         {t('recover.whatsNextBody') || 'You can now reset your password or return to sign in with your existing credentials.'}
                     </Text>
                 </View>
 
-                <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    padding: 12,
+                <View style={[stylesheet.successBanner, {
                     backgroundColor: colors.success + '10',
-                    borderRadius: 8,
-                    borderWidth: 1,
                     borderColor: colors.success + '30',
-                }}>
-                    <Ionicons name="shield-checkmark" size={20} color={colors.success} style={{ marginRight: 8 }} />
-                    <Text style={[styles.footerText, { color: colors.success, fontSize: 14, flex: 1 }]}>
+                }]}>
+                    <Ionicons name="shield-checkmark" size={20} color={colors.success} />
+                    <Text style={[styles.footerText, stylesheet.bannerText, { color: colors.success }]}>
                         {successMessage || t('recover.completeSecure') || 'Your account recovery is complete and secure.'}
                     </Text>
                 </View>
             </View>
 
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: t('common.actions.signIn'),
-                        onPress: handleBackToSignIn,
-                        icon: 'arrow-back',
-                        variant: 'transparent',
-                    },
-                ]}
-                colors={colors}
-            />
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer]}>
+                <GroupedPillButtons
+                    buttons={[
+                        {
+                            text: t('common.actions.signIn'),
+                            onPress: handleBackToSignIn,
+                            icon: 'arrow-back',
+                            variant: 'transparent',
+                        },
+                    ]}
+                    colors={colors}
+                />
+            </View>
         </>
     );
 };
 
 export default RecoverSuccessStep;
+
+const stylesheet = StyleSheet.create({
+    iconContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    successIcon: {
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    infoCard: {
+        padding: STEP_INNER_GAP * 2,
+        borderRadius: 16,
+        borderWidth: 1,
+        marginBottom: STEP_INNER_GAP,
+        gap: STEP_INNER_GAP,
+    },
+    infoTitle: {
+        fontSize: 16,
+        marginBottom: 0,
+    },
+    infoBody: {
+        fontSize: 14,
+        lineHeight: 20,
+    },
+    successBanner: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: STEP_INNER_GAP,
+        borderRadius: 8,
+        borderWidth: 1,
+        gap: STEP_INNER_GAP,
+    },
+    bannerText: {
+        flex: 1,
+        fontSize: 14,
+    },
+});

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

@@ -1,11 +1,12 @@
 import type React from 'react';
 import type { RouteName } from '../../navigation/routes';
-import { View, Text } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import PinInput from '../../components/internal/PinInput';
 import { toast } from '../../../lib/sonner';
 import { useI18n } from '../../hooks/useI18n';
+import { STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
 
 interface RecoverVerifyStepProps {
     // Common props from StepBasedScreen
@@ -52,6 +53,7 @@ const RecoverVerifyStep: React.FC<RecoverVerifyStepProps> = ({
     identifier,
 }) => {
     const { t } = useI18n();
+    const baseStyles = stepStyles;
     const handleVerifyCode = async () => {
         setErrorMessage('');
         setSuccessMessage('');
@@ -66,33 +68,29 @@ const RecoverVerifyStep: React.FC<RecoverVerifyStepProps> = ({
 
     return (
         <>
-            <View style={styles.modernHeader}>
-                <Text style={[styles.modernTitle, { color: colors.text }]}>{t('recover.verify.title')}</Text>
-                <Text style={[styles.modernSubtitle, { color: colors.secondaryText }]}>{t('recover.enterCode')}</Text>
+            <View style={[baseStyles.container, baseStyles.sectionSpacing, baseStyles.header]}>
+                <Text style={[styles.modernTitle, baseStyles.title, { color: colors.text, marginBottom: 0, marginTop: 0 }]}>{t('recover.verify.title')}</Text>
+                <Text style={[styles.modernSubtitle, baseStyles.subtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>{t('recover.enterCode')}</Text>
             </View>
 
-            <View style={styles.modernInputContainer}>
-                <PinInput
-                    value={verificationCode}
-                    onChange={setVerificationCode}
-                    length={6}
-                    disabled={isLoading}
-                    autoFocus
-                    colors={colors}
-                />
+            <View style={[baseStyles.container, baseStyles.sectionSpacing]}>
+                <View style={stylesheet.pinInputWrapper}>
+                    <PinInput
+                        value={verificationCode}
+                        onChange={setVerificationCode}
+                        length={6}
+                        disabled={isLoading}
+                        autoFocus
+                        colors={colors}
+                    />
+                </View>
 
                 {successMessage && (
-                    <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        marginTop: 16,
-                        padding: 12,
+                    <View style={[stylesheet.messageContainer, {
                         backgroundColor: colors.success + '10',
-                        borderRadius: 8,
-                        borderWidth: 1,
                         borderColor: colors.success + '30',
-                    }}>
-                        <Ionicons name="checkmark-circle" size={20} color={colors.success} style={{ marginRight: 8 }} />
+                    }]}>
+                        <Ionicons name="checkmark-circle" size={20} color={colors.success} />
                         <Text style={[styles.footerText, { color: colors.success, fontSize: 14 }]}>
                             {successMessage}
                         </Text>
@@ -100,17 +98,11 @@ const RecoverVerifyStep: React.FC<RecoverVerifyStepProps> = ({
                 )}
 
                 {errorMessage && (
-                    <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        marginTop: 16,
-                        padding: 12,
+                    <View style={[stylesheet.messageContainer, {
                         backgroundColor: colors.error + '10',
-                        borderRadius: 8,
-                        borderWidth: 1,
                         borderColor: colors.error + '30',
-                    }}>
-                        <Ionicons name="alert-circle" size={20} color={colors.error} style={{ marginRight: 8 }} />
+                    }]}>
+                        <Ionicons name="alert-circle" size={20} color={colors.error} />
                         <Text style={[styles.footerText, { color: colors.error, fontSize: 14 }]}>
                             {errorMessage}
                         </Text>
@@ -118,27 +110,45 @@ const RecoverVerifyStep: React.FC<RecoverVerifyStepProps> = ({
                 )}
             </View>
 
-            <GroupedPillButtons
-                buttons={[
-                    {
-                        text: t('common.actions.back'),
-                        onPress: prevStep,
-                        icon: 'arrow-back',
-                        variant: 'transparent',
-                    },
-                    {
-                        text: t('recover.verify.action'),
-                        onPress: handleVerifyCode,
-                        icon: 'checkmark-circle-outline',
-                        variant: 'primary',
-                        loading: isLoading,
-                        disabled: isLoading || verificationCode.length !== 6,
-                    },
-                ]}
-                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('recover.verify.action'),
+                            onPress: handleVerifyCode,
+                            icon: 'checkmark-circle-outline',
+                            variant: 'primary',
+                            loading: isLoading,
+                            disabled: isLoading || verificationCode.length !== 6,
+                        },
+                    ]}
+                    colors={colors}
+                />
+            </View>
         </>
     );
 };
 
 export default RecoverVerifyStep;
+
+const stylesheet = StyleSheet.create({
+    pinInputWrapper: {
+        marginBottom: 0,
+        marginTop: 0,
+    },
+    messageContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: STEP_INNER_GAP,
+        padding: STEP_INNER_GAP,
+        borderRadius: 8,
+        borderWidth: 1,
+        gap: STEP_INNER_GAP,
+    },
+});