@oxyhq/services 6.9.44 → 6.9.45

package/src/ui/components/icon/OxyIcon.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
-import { Platform, type StyleProp, type TextStyle } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
+import { useTheme } from '@oxyhq/bloom/theme';
 
 export interface IconProps {
   name: string;
@@ -12,16 +12,17 @@ export interface IconProps {
 const OxyIcon: React.FC<IconProps> = ({
   name,
   size = 24,
-  color = '#000',
+  color,
   style
 }) => {
-  // Icon name is already properly typed as IoniconsGlyphs
+  const theme = useTheme();
+  const resolvedColor = color ?? theme.colors.icon;
 
   return (
     <Ionicons
       name={name as React.ComponentProps<typeof Ionicons>['name']}
       size={size}
-      color={color}
+      color={resolvedColor}
       style={style}
     />
   );

package/src/ui/components/internal/GroupedPillButtons.tsx

@@ -1,6 +1,7 @@
 import type React from 'react';
 import { View, TouchableOpacity, Text, ActivityIndicator, StyleSheet, Platform } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
+import { useTheme } from '@oxyhq/bloom/theme';
 
 type IoniconsName = React.ComponentProps<typeof Ionicons>['name'];
 
@@ -32,6 +33,8 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
     colors,
     gap = 8,
 }) => {
+    const theme = useTheme();
+
     const getButtonStyle = (button: ButtonConfig, index: number, totalButtons: number) => {
         const baseStyle = {
             flexDirection: 'row' as const,
@@ -87,16 +90,16 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
 
         switch (button.variant) {
             case 'primary':
-                backgroundColor = isDisabled ? '#CCCCCC' : colors.primary;
-                borderColor = isDisabled ? '#CCCCCC' : colors.primary;
+                backgroundColor = isDisabled ? theme.colors.borderLight : colors.primary;
+                borderColor = isDisabled ? theme.colors.borderLight : colors.primary;
                 break;
             case 'secondary':
-                backgroundColor = isDisabled ? '#CCCCCC' : (colors.secondary || colors.primary);
-                borderColor = isDisabled ? '#CCCCCC' : (colors.secondary || colors.primary);
+                backgroundColor = isDisabled ? theme.colors.borderLight : (colors.secondary || colors.primary);
+                borderColor = isDisabled ? theme.colors.borderLight : (colors.secondary || colors.primary);
                 break;
             default:
                 backgroundColor = 'transparent';
-                borderColor = isDisabled ? '#CCCCCC' : colors.border;
+                borderColor = isDisabled ? theme.colors.borderLight : colors.border;
                 break;
         }
 
@@ -119,14 +122,14 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
 
         const isDisabled = button.disabled || button.loading;
         let textColor = colors.text;
-        
+
         switch (button.variant) {
             case 'primary':
             case 'secondary':
-                textColor = isDisabled ? '#999999' : '#FFFFFF';
+                textColor = isDisabled ? theme.colors.textTertiary : '#FFFFFF';
                 break;
             default:
-                textColor = isDisabled ? '#999999' : colors.text;
+                textColor = isDisabled ? theme.colors.textTertiary : colors.text;
                 break;
         }
 
@@ -139,13 +142,13 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
 
     const getIconColor = (button: ButtonConfig, colors: GroupedPillButtonColors) => {
         const isDisabled = button.disabled || button.loading;
-        
+
         switch (button.variant) {
             case 'primary':
             case 'secondary':
-                return isDisabled ? '#999999' : '#FFFFFF';
+                return isDisabled ? theme.colors.textTertiary : '#FFFFFF';
             default:
-                return isDisabled ? '#999999' : colors.text;
+                return isDisabled ? theme.colors.textTertiary : colors.text;
         }
     };
 
@@ -247,4 +250,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default GroupedPillButtons; 
+export default GroupedPillButtons;

package/src/ui/components/internal/PinInput.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, forwardRef, useImperativeHandle } from 'react';
 import { View, TextInput, StyleSheet, Platform, type NativeSyntheticEvent, type TextInputKeyPressEventData } from 'react-native';
+import { useTheme } from '@oxyhq/bloom/theme';
 
 interface PinInputColors {
     primary: string;
@@ -24,6 +25,7 @@ export interface PinInputHandle {
 }
 
 const PinInput = forwardRef<PinInputHandle, PinInputProps>(({ value, onChange, length = 6, disabled, autoFocus, colors }, ref) => {
+    const theme = useTheme();
     const inputs = useRef<Array<TextInput | null>>([]);
 
     useImperativeHandle(ref, () => ({
@@ -66,7 +68,7 @@ const PinInput = forwardRef<PinInputHandle, PinInputProps>(({ value, onChange, l
                     ref={(ref) => { inputs.current[idx] = ref; }}
                     style={[
                         styles.pinInput,
-                        { borderColor: colors.primary, color: colors.text, backgroundColor: colors.inputBackground },
+                        { borderColor: colors.primary, color: colors.text, backgroundColor: colors.inputBackground || theme.colors.backgroundSecondary },
                         value[idx] ? { borderWidth: 2 } : { borderWidth: 1 },
                     ]}
                     value={value[idx] || ''}
@@ -100,7 +102,6 @@ const styles = StyleSheet.create({
         borderWidth: 1,
         fontSize: 28,
         fontWeight: '600',
-        backgroundColor: '#F5F5F5',
         textAlign: 'center',
         marginHorizontal: 2,
         ...Platform.select({
@@ -118,4 +119,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default PinInput; 
+export default PinInput;

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

@@ -1,31 +1,23 @@
 import type React from 'react';
 import { useState, useCallback } from 'react';
-import {
-    View,
-    Text,
-    TextInput,
-    TouchableOpacity,
-    StyleSheet,
-    Modal,
-    KeyboardAvoidingView,
-    Platform,
-} from 'react-native';
+import { View, Text, TextInput, TouchableOpacity } from 'react-native';
+import * as Dialog from '@oxyhq/bloom/dialog';
+import type { DialogControlProps } from '@oxyhq/bloom/dialog';
+import * as Prompt from '@oxyhq/bloom/prompt';
 import OxyIcon from '../icon/OxyIcon';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Loading } from '@oxyhq/bloom/loading';
 
 interface DeleteAccountModalProps {
-    visible: boolean;
+    control: DialogControlProps;
     username: string;
-    onClose: () => void;
     onDelete: (password: string) => Promise<void>;
     t: (key: string, params?: Record<string, string>) => string | undefined;
 }
 
 const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
-    visible,
+    control,
     username,
-    onClose,
     onDelete,
     t,
 }) => {
@@ -46,7 +38,7 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
 
         try {
             await onDelete(password);
-            // Modal will be closed by parent on success
+            // Dialog will be closed by parent on success
         } catch (err: unknown) {
             setError((err instanceof Error ? err.message : null) || t('deleteAccount.error') || 'Failed to delete account');
         } finally {
@@ -54,234 +46,100 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
         }
     }, [isValid, password, onDelete, t]);
 
-    const handleClose = useCallback(() => {
+    const handleCleanup = useCallback(() => {
         if (isDeleting) return;
         setPassword('');
         setConfirmUsername('');
         setError(null);
-        onClose();
-    }, [isDeleting, onClose]);
+        setShowPassword(false);
+    }, [isDeleting]);
 
     return (
-        <Modal
-            visible={visible}
-            transparent
-            animationType="fade"
-            onRequestClose={handleClose}
-        >
-            <KeyboardAvoidingView
-                behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-                style={styles.overlay}
-            >
-                <TouchableOpacity
-                    style={[styles.backdrop, { backgroundColor: theme.colors.overlay }]}
-                    activeOpacity={1}
-                    onPress={handleClose}
-                />
-                <View style={[styles.modal, { backgroundColor: theme.colors.background }]}>
-                    <View style={styles.header}>
-                        <OxyIcon name="alert" size={32} color={theme.colors.error} />
-                        <Text className="text-destructive" style={styles.title}>
-                            {t('deleteAccount.title') || 'Delete Account'}
-                        </Text>
-                    </View>
-
-                    <Text className="text-foreground" style={styles.warning}>
-                        {t('deleteAccount.warning') || 'This action cannot be undone. Your account and all associated data will be permanently deleted.'}
+        <Dialog.Outer control={control} onClose={handleCleanup}>
+            <Dialog.Handle />
+            <Dialog.ScrollableInner label="Delete Account">
+                <View className="flex-row items-center mb-4 gap-3">
+                    <OxyIcon name="alert" size={32} color={theme.colors.error} />
+                    <Text className="text-destructive text-xl font-bold">
+                        {t('deleteAccount.title') || 'Delete Account'}
                     </Text>
+                </View>
 
-                    {error && (
-                        <View style={[styles.errorContainer, { backgroundColor: `${theme.colors.error}20` }]}>
-                            <Text className="text-destructive" style={styles.errorText}>
-                                {error}
-                            </Text>
-                        </View>
-                    )}
-
-                    <View style={styles.inputGroup}>
-                        <Text className="text-muted-foreground" style={styles.label}>
-                            {t('deleteAccount.passwordLabel') || 'Enter your password'}
+                <Text className="text-foreground text-sm leading-5 mb-5">
+                    {t('deleteAccount.warning') || 'This action cannot be undone. Your account and all associated data will be permanently deleted.'}
+                </Text>
+
+                {error && (
+                    <View
+                        className="p-3 rounded-lg mb-4"
+                        style={{ backgroundColor: `${theme.colors.error}20` }}
+                    >
+                        <Text className="text-destructive text-sm text-center">
+                            {error}
                         </Text>
-                        <View className="border-border bg-background" style={styles.inputContainer}>
-                            <TextInput
-                                className="text-foreground"
-                                style={styles.input}
-                                value={password}
-                                onChangeText={setPassword}
-                                placeholder={t('deleteAccount.passwordPlaceholder') || 'Password'}
-                                placeholderTextColor={theme.colors.textSecondary}
-                                secureTextEntry={!showPassword}
-                                autoCapitalize="none"
-                                editable={!isDeleting}
-                            />
-                            <TouchableOpacity
-                                onPress={() => setShowPassword(!showPassword)}
-                                style={styles.eyeButton}
-                            >
-                                <OxyIcon
-                                    name={showPassword ? 'eye-off' : 'eye'}
-                                    size={20}
-                                    color={theme.colors.textSecondary}
-                                />
-                            </TouchableOpacity>
-                        </View>
                     </View>
+                )}
 
-                    <View style={styles.inputGroup}>
-                        <Text className="text-muted-foreground" style={styles.label}>
-                            {t('deleteAccount.confirmLabel', { username }) || `Type "${username}" to confirm`}
-                        </Text>
+                <View className="mb-4">
+                    <Text className="text-muted-foreground text-[13px] mb-2">
+                        {t('deleteAccount.passwordLabel') || 'Enter your password'}
+                    </Text>
+                    <View className="flex-row items-center border border-border bg-background rounded-lg">
                         <TextInput
-                            className="text-foreground bg-background"
-                            style={[
-                                styles.input,
-                                styles.confirmInput,
-                                {
-                                    borderColor: confirmUsername === username ? theme.colors.success : theme.colors.border,
-                                },
-                            ]}
-                            value={confirmUsername}
-                            onChangeText={setConfirmUsername}
-                            placeholder={username}
+                            className="text-foreground flex-1 text-base py-3 px-4"
+                            value={password}
+                            onChangeText={setPassword}
+                            placeholder={t('deleteAccount.passwordPlaceholder') || 'Password'}
                             placeholderTextColor={theme.colors.textSecondary}
+                            secureTextEntry={!showPassword}
                             autoCapitalize="none"
-                            autoCorrect={false}
                             editable={!isDeleting}
                         />
-                    </View>
-
-                    <View style={styles.buttons}>
                         <TouchableOpacity
-                            className="border-border"
-                            style={[styles.button, styles.cancelButton]}
-                            onPress={handleClose}
-                            disabled={isDeleting}
+                            onPress={() => setShowPassword(!showPassword)}
+                            className="p-3"
                         >
-                            <Text className="text-foreground" style={styles.buttonText}>
-                                {t('common.cancel') || 'Cancel'}
-                            </Text>
-                        </TouchableOpacity>
-
-                        <TouchableOpacity
-                            style={[
-                                styles.button,
-                                styles.deleteButton,
-                                { backgroundColor: isValid ? theme.colors.error : `${theme.colors.error}50` },
-                            ]}
-                            onPress={handleDelete}
-                            disabled={!isValid || isDeleting}
-                        >
-                            {isDeleting ? (
-                                <Loading size="small" />
-                            ) : (
-                                <Text style={[styles.deleteButtonText, { color: theme.colors.card }]}>
-                                    {t('deleteAccount.confirm') || 'Delete Forever'}
-                                </Text>
-                            )}
+                            <OxyIcon
+                                name={showPassword ? 'eye-off' : 'eye'}
+                                size={20}
+                                color={theme.colors.textSecondary}
+                            />
                         </TouchableOpacity>
                     </View>
                 </View>
-            </KeyboardAvoidingView>
-        </Modal>
+
+                <View className="mb-4">
+                    <Text className="text-muted-foreground text-[13px] mb-2">
+                        {t('deleteAccount.confirmLabel', { username }) || `Type "${username}" to confirm`}
+                    </Text>
+                    <TextInput
+                        className="text-foreground bg-background text-base py-3 px-4 border rounded-lg"
+                        style={{
+                            borderColor: confirmUsername === username ? theme.colors.success : theme.colors.border,
+                        }}
+                        value={confirmUsername}
+                        onChangeText={setConfirmUsername}
+                        placeholder={username}
+                        placeholderTextColor={theme.colors.textSecondary}
+                        autoCapitalize="none"
+                        autoCorrect={false}
+                        editable={!isDeleting}
+                    />
+                </View>
+
+                <Prompt.Actions>
+                    <Prompt.Action
+                        onPress={handleDelete}
+                        color="negative"
+                        cta={isDeleting ? undefined : (t('deleteAccount.confirm') || 'Delete Forever')}
+                        disabled={!isValid || isDeleting}
+                        shouldCloseOnPress={false}
+                    />
+                    <Prompt.Cancel cta={t('common.cancel') || 'Cancel'} />
+                </Prompt.Actions>
+            </Dialog.ScrollableInner>
+        </Dialog.Outer>
     );
 };
 
-const styles = StyleSheet.create({
-    overlay: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    backdrop: {
-        ...StyleSheet.absoluteFillObject,
-    },
-    modal: {
-        width: '90%',
-        maxWidth: 400,
-        borderRadius: 16,
-        padding: 24,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.3,
-        shadowRadius: 8,
-        elevation: 8,
-    },
-    header: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: 16,
-        gap: 12,
-    },
-    title: {
-        fontSize: 20,
-        fontWeight: '700',
-    },
-    warning: {
-        fontSize: 14,
-        lineHeight: 20,
-        marginBottom: 20,
-    },
-    errorContainer: {
-        padding: 12,
-        borderRadius: 8,
-        marginBottom: 16,
-    },
-    errorText: {
-        fontSize: 14,
-        textAlign: 'center',
-    },
-    inputGroup: {
-        marginBottom: 16,
-    },
-    label: {
-        fontSize: 13,
-        marginBottom: 8,
-    },
-    inputContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        borderWidth: 1,
-        borderRadius: 8,
-    },
-    input: {
-        flex: 1,
-        fontSize: 16,
-        paddingVertical: 12,
-        paddingHorizontal: 16,
-    },
-    confirmInput: {
-        borderWidth: 1,
-        borderRadius: 8,
-    },
-    eyeButton: {
-        padding: 12,
-    },
-    buttons: {
-        flexDirection: 'row',
-        gap: 12,
-        marginTop: 8,
-    },
-    button: {
-        flex: 1,
-        paddingVertical: 14,
-        borderRadius: 8,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    cancelButton: {
-        borderWidth: 1,
-    },
-    deleteButton: {
-        minHeight: 48,
-    },
-    buttonText: {
-        fontSize: 16,
-        fontWeight: '600',
-    },
-    deleteButtonText: {
-        fontSize: 16,
-        fontWeight: '600',
-    },
-});
-
 export default DeleteAccountModal;

package/src/ui/constants/theme.ts

@@ -6,8 +6,8 @@
 
 import { Platform } from 'react-native';
 
-const tintColorLight = '#0a7ea4';
-const tintColorDark = '#fff';
+const tintColorLight = '#c46ede';
+const tintColorDark = '#d69ae8';
 
 export const Colors = {
   light: {