@oxyhq/services 6.9.25 → 6.9.27

package/src/ui/hooks/useThemeStyles.ts

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
-import { useColorScheme } from './useColorScheme';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { Colors } from '../constants/theme';
-import { normalizeColorScheme } from '../utils/themeUtils';
 
 export interface ThemeStyles {
     textColor: string;
@@ -10,76 +9,42 @@ export interface ThemeStyles {
     borderColor: string;
     mutedTextColor: string;
     isDarkTheme: boolean;
-    // Common semantic colors used across screens
     primaryColor: string;
     dangerColor: string;
     successColor: string;
-    // Normalized color scheme and theme colors
     colorScheme: 'light' | 'dark';
     colors: typeof Colors.light;
 }
 
 /**
- * Reusable hook for theme styles
- * Replaces duplicated themeStyles useMemo pattern across multiple screens
- * 
- * Provides consistent theme colors across all service screens:
- * - Base colors (text, background, borders)
- * - Semantic colors (primary, danger, success)
- * - Theme-aware calculations
- * - Normalized color scheme and Colors object
- * 
- * @param theme - Theme string ('light' | 'dark')
- * @param colorSchemeFromHook - Optional color scheme from useColorScheme() hook. If not provided, will call useColorScheme() internally.
- * @returns ThemeStyles object with consistent color values
- * 
- * @example
- * ```tsx
- * const themeStyles = useThemeStyles(theme);
- * <View style={{ backgroundColor: themeStyles.backgroundColor }}>
- *   <Text style={{ color: themeStyles.textColor }}>Hello</Text>
- * </View>
- * ```
- * 
- * @example
- * ```tsx
- * const colorScheme = useColorScheme();
- * const themeStyles = useThemeStyles(theme, colorScheme);
- * const iconColor = themeStyles.colors.iconSecurity;
- * ```
+ * Returns theme styles for service screens.
+ * Delegates to bloom's useTheme() for all color values.
+ * The `theme` param is kept for backward compatibility but ignored —
+ * bloom's resolved mode (from BloomThemeProvider) is used instead.
  */
 export const useThemeStyles = (
-    theme: string,
-    colorSchemeFromHook?: string | null
+    _theme?: string,
+    _colorSchemeFromHook?: string | null
 ): ThemeStyles => {
-    const hookColorScheme = useColorScheme();
-    const colorSchemeToUse = colorSchemeFromHook ?? hookColorScheme;
-    
+    const bloomTheme = useTheme();
+
     return useMemo(() => {
-        const colorScheme = normalizeColorScheme(colorSchemeToUse, theme);
-        const isDarkTheme = colorScheme === 'dark';
+        const isDarkTheme = bloomTheme.isDark;
+        const colorScheme = isDarkTheme ? 'dark' : 'light';
         const colors = Colors[colorScheme];
-        
+
         return {
-            // Base colors
-            textColor: isDarkTheme ? '#FFFFFF' : '#000000',
-            backgroundColor: isDarkTheme ? '#121212' : '#FFFFFF',
-            secondaryBackgroundColor: isDarkTheme ? '#222222' : '#F5F5F5',
-            borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
-            mutedTextColor: '#8E8E93', // Same for both themes
-            
-            // Semantic colors (consistent across themes)
-            primaryColor: '#007AFF',
-            dangerColor: '#FF3B30',
-            successColor: '#34C759',
-            
-            // Theme flag
+            textColor: bloomTheme.colors.text,
+            backgroundColor: bloomTheme.colors.background,
+            secondaryBackgroundColor: bloomTheme.colors.backgroundSecondary,
+            borderColor: bloomTheme.colors.border,
+            mutedTextColor: bloomTheme.colors.textSecondary,
+            primaryColor: bloomTheme.colors.primary,
+            dangerColor: bloomTheme.colors.error,
+            successColor: bloomTheme.colors.success,
             isDarkTheme,
-            
-            // Normalized color scheme and theme colors
             colorScheme,
             colors,
         };
-    }, [theme, colorSchemeToUse]);
+    }, [bloomTheme]);
 };
-

package/src/ui/hooks/useWebSSO.ts

@@ -54,7 +54,10 @@ function isWebBrowser(): boolean {
 function isIdentityProvider(authWebUrl?: string): boolean {
   if (!isWebBrowser()) return false;
   const hostname = window.location.hostname;
-  const idpHostname = authWebUrl ? new URL(authWebUrl).hostname : 'auth.oxy.so';
+  let idpHostname = 'auth.oxy.so';
+  if (authWebUrl) {
+    try { idpHostname = new URL(authWebUrl).hostname; } catch { /* malformed URL, use default */ }
+  }
   return hostname === idpHostname;
 }
 

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -698,14 +698,6 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                     username={user.username || ''}
                     onClose={() => setShowDeleteModal(false)}
                     onDelete={handleConfirmDelete}
-                    colors={{
-                        background: themeStyles.backgroundColor,
-                        text: themeStyles.textColor,
-                        secondaryText: themeStyles.isDarkTheme ? '#888888' : '#666666',
-                        border: themeStyles.borderColor,
-                        danger: '#FF3B30',
-                        inputBackground: themeStyles.isDarkTheme ? '#333333' : '#F5F5F5',
-                    }}
                     t={t}
                 />
             )}

package/src/ui/screens/OxyAuthScreen.tsx

@@ -20,11 +20,12 @@ import {
   StyleSheet,
   Linking,
   Platform,
-  ActivityIndicator,
 } from 'react-native';
 import io, { type Socket } from 'socket.io-client';
 import type { BaseScreenProps } from '../types/navigation';
-import { useThemeColors } from '../styles';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { Button } from '@oxyhq/bloom/button';
+import { Loading } from '@oxyhq/bloom/loading';
 import { useOxy } from '../context/OxyContext';
 import QRCode from 'react-native-qrcode-svg';
 import OxyLogo from '../components/OxyLogo';
@@ -117,8 +118,17 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
   onAuthenticated,
   theme,
 }) => {
-  const themeValue = (theme === 'light' || theme === 'dark') ? theme : 'light';
-  const colors = useThemeColors(themeValue);
+  const bloomTheme = useTheme();
+  const colors = {
+    background: bloomTheme.colors.background,
+    text: bloomTheme.colors.text,
+    secondaryText: bloomTheme.colors.textSecondary,
+    primary: bloomTheme.colors.primary,
+    error: bloomTheme.colors.error,
+    border: bloomTheme.colors.border,
+    card: bloomTheme.colors.card,
+    inputBackground: bloomTheme.colors.backgroundSecondary,
+  };
   const { oxyServices, signIn, switchSession } = useOxy();
 
   const [authSession, setAuthSession] = useState<AuthSession | null>(null);
@@ -401,7 +411,7 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
   if (isLoading) {
     return (
       <View style={[styles.container, { backgroundColor: colors.background }]}>
-        <ActivityIndicator size="large" color={colors.primary} />
+        <Loading size="large" />
         <Text style={[styles.loadingText, { color: colors.secondaryText }]}>
           Preparing sign in...
         </Text>
@@ -413,12 +423,9 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
     return (
       <View style={[styles.container, { backgroundColor: colors.background }]}>
         <Text style={[styles.errorText, { color: colors.error }]}>{error}</Text>
-        <TouchableOpacity
-          style={[styles.button, { backgroundColor: colors.primary }]}
-          onPress={handleRefresh}
-        >
-          <Text style={styles.buttonText}>Try Again</Text>
-        </TouchableOpacity>
+        <Button variant="primary" onPress={handleRefresh} style={{ width: '100%', borderRadius: 12 }}>
+          Try Again
+        </Button>
       </View>
     );
   }
@@ -457,18 +464,19 @@ const OxyAuthScreen: React.FC<BaseScreenProps> = ({
       </View>
 
       {/* Open Oxy Auth Button */}
-      <TouchableOpacity
-        style={[styles.button, { backgroundColor: colors.primary }]}
+      <Button
+        variant="primary"
         onPress={handleOpenAuth}
+        icon={<OxyLogo width={20} height={20} fillColor={colors.card} style={styles.buttonIcon} />}
+        style={{ width: '100%', borderRadius: 12 }}
       >
-        <OxyLogo width={20} height={20} fillColor="white" style={styles.buttonIcon} />
-        <Text style={styles.buttonText}>Open Oxy Auth</Text>
-      </TouchableOpacity>
+        Open Oxy Auth
+      </Button>
 
       {/* Status */}
       {isWaiting && (
         <View style={styles.statusContainer}>
-          <ActivityIndicator size="small" color={colors.primary} />
+          <Loading size="small" style={{ flex: undefined }} />
           <Text style={[styles.statusText, { color: colors.secondaryText }]}>
             Waiting for authorization...
           </Text>
@@ -547,23 +555,9 @@ const styles = StyleSheet.create({
     marginHorizontal: 16,
     fontSize: 14,
   },
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 16,
-    paddingHorizontal: 24,
-    borderRadius: 12,
-    width: '100%',
-  },
   buttonIcon: {
     marginRight: 10,
   },
-  buttonText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: '600',
-  },
   statusContainer: {
     flexDirection: 'row',
     alignItems: 'center',

package/src/ui/styles/authStyles.ts

@@ -203,7 +203,7 @@ export const createAuthStyles = (colors: AuthThemeColors, theme: string) => Styl
     width: '100%',
   },
   modernButtonText: {
-    color: '#FFFFFF',
+    color: colors.background,
     fontSize: 16,
     fontWeight: '600',
     letterSpacing: 0.5,
@@ -244,7 +244,7 @@ export const createAuthStyles = (colors: AuthThemeColors, theme: string) => Styl
   },
   modernUserAvatar: {
     borderWidth: 4,
-    borderColor: 'rgba(209, 105, 229, 0.2)',
+    borderColor: `${colors.primary}33`,
   },
   statusIndicator: {
     position: 'absolute',
@@ -254,7 +254,7 @@ export const createAuthStyles = (colors: AuthThemeColors, theme: string) => Styl
     height: 20,
     borderRadius: 10,
     borderWidth: 3,
-    borderColor: '#FFFFFF',
+    borderColor: colors.background,
   },
   modernUserDisplayName: {
     fontFamily: fontFamilies.interBold,

package/src/ui/styles/theme.ts

@@ -1,6 +1,11 @@
 import { Platform, StyleSheet, type TextStyle } from 'react-native';
+import { useTheme as useBloomThemeHook, type ThemeColors as BloomThemeColors } from '@oxyhq/bloom';
 import { fontFamilies } from './fonts';
 
+/**
+ * ThemeColors used by services style files.
+ * Maps to bloom's ThemeColors, with a few convenience aliases.
+ */
 export interface ThemeColors {
   text: string;
   background: string;
@@ -24,7 +29,26 @@ export interface Theme {
   };
 }
 
-const lightColors: ThemeColors = {
+/**
+ * Adapts bloom's ThemeColors into the services ThemeColors shape.
+ */
+function bloomColorsToThemeColors(bloomColors: BloomThemeColors): ThemeColors {
+  return {
+    text: bloomColors.text,
+    background: bloomColors.background,
+    inputBackground: bloomColors.backgroundSecondary,
+    placeholder: bloomColors.textTertiary,
+    primary: bloomColors.primary,
+    border: bloomColors.border,
+    error: bloomColors.error,
+    success: bloomColors.success,
+    warning: bloomColors.warning,
+    secondaryText: bloomColors.textSecondary,
+  };
+}
+
+/** Fallback colors when bloom context is not available */
+const fallbackLight: ThemeColors = {
   text: '#000000',
   background: '#FFFFFF',
   inputBackground: '#F5F5F5',
@@ -37,7 +61,7 @@ const lightColors: ThemeColors = {
   secondaryText: '#666666',
 };
 
-const darkColors: ThemeColors = {
+const fallbackDark: ThemeColors = {
   text: '#FFFFFF',
   background: '#000000',
   inputBackground: '#333333',
@@ -50,11 +74,11 @@ const darkColors: ThemeColors = {
   secondaryText: '#BBBBBB',
 };
 
-const createTheme = (isDark: boolean): Theme => {
-  const colors = isDark ? darkColors : lightColors;
-  
+const createTheme = (isDark: boolean, colors?: ThemeColors): Theme => {
+  const themeColors = colors ?? (isDark ? fallbackDark : fallbackLight);
+
   return {
-    colors,
+    colors: themeColors,
     fonts: {
       title: {
         fontFamily: fontFamilies.interBold,
@@ -69,7 +93,7 @@ const createTheme = (isDark: boolean): Theme => {
         fontFamily: fontFamilies.interSemiBold,
         fontSize: 16,
         fontWeight: '600',
-        color: '#FFFFFF',
+        color: themeColors.background,
       },
       label: {
         fontSize: 14,
@@ -84,8 +108,18 @@ export const getTheme = (theme: 'light' | 'dark'): Theme => {
   return createTheme(theme === 'dark');
 };
 
+/**
+ * Returns theme colors from bloom when available, with fallback to local colors.
+ * Prefer this hook for new code — it reads from bloom's ThemeProvider.
+ */
 export const useThemeColors = (theme: 'light' | 'dark'): ThemeColors => {
-  return getTheme(theme).colors;
+  try {
+    const bloomTheme = useBloomThemeHook();
+    return bloomColorsToThemeColors(bloomTheme.colors);
+  } catch {
+    // Bloom provider not available, fall back to local colors
+    return getTheme(theme).colors;
+  }
 };
 
 // Common styles that can be reused across components
@@ -122,10 +156,10 @@ export const createCommonStyles = (theme: 'light' | 'dark') => {
       fontFamily: fontFamilies.interSemiBold,
       fontSize: 16,
       fontWeight: '600',
-      color: '#FFFFFF',
+      color: colors.background,
     },
     errorContainer: {
-      backgroundColor: '#FFEBEE',
+      backgroundColor: `${colors.error}18`,
       padding: 12,
       borderRadius: 35,
       marginBottom: 16,