@oxyhq/services 5.14.0 → 5.15.1

package/src/ui/screens/karma/KarmaFAQScreen.tsx

@@ -1,9 +1,13 @@
 import React, { useState, useMemo, useCallback } from 'react';
-import { View, Text, StyleSheet, ScrollView, Platform, TouchableOpacity, TextInput, LayoutAnimation } from 'react-native';
-import type { BaseScreenProps } from '../../navigation/types';
+import { View, Text, StyleSheet, ScrollView, Platform, TextInput, LayoutAnimation } from 'react-native';
+import type { BaseScreenProps } from '../../types/navigation';
 import { Ionicons } from '@expo/vector-icons';
-import { Header } from '../../components';
+import { Header, GroupedItem } from '../../components';
 import { useI18n } from '../../hooks/useI18n';
+import { useThemeStyles } from '../../hooks/useThemeStyles';
+import { normalizeTheme, normalizeColorScheme } from '../../utils/themeUtils';
+import { useColorScheme } from '../../hooks/use-color-scheme';
+import { Colors } from '../../constants/theme';
 
 const FAQ_KEYS = ['what', 'earn', 'lose', 'use', 'transfer', 'support'] as const;
 
@@ -18,25 +22,25 @@ const FAQ_KEYS = ['what', 'earn', 'lose', 'use', 'transfer', 'support'] as const
  */
 const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     const { t } = useI18n();
-    const [expanded, setExpanded] = useState<number | null>(0);
+    const [expanded, setExpanded] = useState<string | null>(null);
     const [search, setSearch] = useState('');
 
     // Memoize theme-related calculations to prevent unnecessary recalculations
-    const themeStyles = useMemo(() => {
-        const isDarkTheme = theme === 'dark';
-        return {
-            isDarkTheme,
-            backgroundColor: isDarkTheme ? '#121212' : '#FFFFFF',
-            textColor: isDarkTheme ? '#FFFFFF' : '#000000',
-            cardColor: isDarkTheme ? '#23232b' : '#f7f7fa',
-            primaryColor: '#d169e5',
-            inputBg: isDarkTheme ? '#23232b' : '#f2f2f7',
-            inputBorder: isDarkTheme ? '#444' : '#e0e0e0',
-        };
-    }, [theme]);
+    const normalizedTheme = normalizeTheme(theme);
+    const baseThemeStyles = useThemeStyles(normalizedTheme);
+    const colorScheme = useColorScheme();
+    const normalizedColorScheme = normalizeColorScheme(colorScheme);
+    const colors = Colors[normalizedColorScheme];
+    const themeStyles = useMemo(() => ({
+        ...baseThemeStyles,
+        primaryColor: '#d169e5',
+        inputBg: baseThemeStyles.isDarkTheme ? '#23232b' : '#f2f2f7',
+        inputBorder: baseThemeStyles.borderColor,
+    }), [baseThemeStyles]);
 
     // Memoize filtered FAQs to prevent filtering on every render
     const faqs = useMemo(() => FAQ_KEYS.map(key => ({
+        id: key,
         q: t(`karma.faq.items.${key}.q`) || '',
         a: t(`karma.faq.items.${key}.a`) || '',
     })), [t]);
@@ -51,9 +55,9 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
     }, [search, faqs]);
 
     // Memoize toggle handler to prevent recreation on every render
-    const handleToggle = useCallback((idx: number) => {
+    const handleToggle = useCallback((id: string) => {
         LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-        setExpanded(prev => prev === idx ? null : idx);
+        setExpanded(prev => prev === id ? null : id);
     }, []);
 
     return (
@@ -62,51 +66,63 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
                 title={t('karma.faq.title') || 'Karma FAQ'}
                 subtitle={t('karma.faq.subtitle') || 'Frequently asked questions about karma'}
                 subtitleVariant="muted"
-                theme={theme}
+
                 onBack={goBack}
                 elevation="subtle"
             />
-            <View style={[styles.searchBar, { backgroundColor: themeStyles.inputBg, borderColor: themeStyles.inputBorder }]}>
-                <Ionicons name="search-outline" size={20} color={themeStyles.primaryColor} style={{ marginRight: 8 }} />
-                <TextInput
-                    style={[styles.searchInput, { color: themeStyles.textColor }]}
-                    placeholder={t('karma.faq.search') || 'Search FAQ...'}
-                    placeholderTextColor={themeStyles.isDarkTheme ? '#aaa' : '#888'}
-                    value={search}
-                    onChangeText={setSearch}
-                    returnKeyType="search"
-                />
-            </View>
-            <ScrollView contentContainerStyle={styles.contentContainer}>
+            <ScrollView
+                contentContainerStyle={styles.contentContainer}
+                showsVerticalScrollIndicator={false}
+            >
+                <View style={[styles.searchContainer, { backgroundColor: colors.card }]}>
+                    <Ionicons name="search" size={22} color={colors.icon} />
+                    <TextInput
+                        style={[styles.searchInput, { color: themeStyles.textColor }]}
+                        placeholder={t('karma.faq.search') || 'Search FAQ...'}
+                        placeholderTextColor={themeStyles.isDarkTheme ? '#BBBBBB' : '#888888'}
+                        value={search}
+                        onChangeText={setSearch}
+                        returnKeyType="search"
+                    />
+                </View>
                 {filteredFaqs.length === 0 ? (
-                    <Text style={[styles.noResults, { color: themeStyles.textColor }]}>
+                    <Text style={[styles.noResults, { color: colors.secondaryText }]}>
                         {t('karma.faq.noResults', { query: search }) || `No FAQ items found matching "${search}"`}
                     </Text>
                 ) : (
-                    filteredFaqs.map((faq, idx) => (
-                        <TouchableOpacity
-                            key={idx}
-                            style={[styles.card, { backgroundColor: themeStyles.cardColor }]}
-                            onPress={() => handleToggle(idx)}
-                            activeOpacity={0.7}
-                        >
-                            <View style={styles.questionRow}>
-                                <Text style={[styles.question, { color: themeStyles.textColor }]}>
-                                    {faq.q}
-                                </Text>
-                                <Ionicons
-                                    name={expanded === idx ? 'chevron-up' : 'chevron-down'}
-                                    size={20}
-                                    color={themeStyles.primaryColor}
-                                />
-                            </View>
-                            {expanded === idx && (
-                                <Text style={[styles.answer, { color: themeStyles.textColor }]}>
-                                    {faq.a}
-                                </Text>
-                            )}
-                        </TouchableOpacity>
-                    ))
+                    <View style={styles.groupedSectionContainer}>
+                        {filteredFaqs.map((faq, idx) => {
+                            const isExpanded = expanded === faq.id;
+                            const isFirst = idx === 0;
+                            const isLast = idx === filteredFaqs.length - 1;
+
+                            return (
+                                <View key={faq.id} style={[styles.faqItemWrapper, { marginBottom: idx < filteredFaqs.length - 1 ? 4 : 0 }]}>
+                                    <GroupedItem
+                                        title={faq.q}
+                                        onPress={() => handleToggle(faq.id)}
+                                        isFirst={isFirst}
+                                        isLast={isLast && !isExpanded}
+                                        showChevron={false}
+                                        customContent={
+                                            <Ionicons
+                                                name={isExpanded ? 'chevron-up' : 'chevron-down'}
+                                                size={20}
+                                                color={colors.icon}
+                                            />
+                                        }
+                                    />
+                                    {isExpanded && (
+                                        <View style={[styles.answerContainer, { backgroundColor: colors.card }, isLast && styles.lastAnswerContainer]}>
+                                            <Text style={[styles.answer, { color: themeStyles.textColor }]}>
+                                                {faq.a}
+                                            </Text>
+                                        </View>
+                                    )}
+                                </View>
+                            );
+                        })}
+                    </View>
                 )}
             </ScrollView>
         </View>
@@ -115,64 +131,48 @@ const KarmaFAQScreen: React.FC<BaseScreenProps> = ({ goBack, theme }) => {
 
 const styles = StyleSheet.create({
     container: { flex: 1 },
-    title: {
-        fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
-        fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-        fontSize: 38,
-        margin: 24,
-        marginBottom: 12,
-        textAlign: 'center',
+    contentContainer: {
+        paddingHorizontal: 24,
+        paddingTop: 20,
+        paddingBottom: 40,
     },
-    searchBar: {
+    searchContainer: {
         flexDirection: 'row',
         alignItems: 'center',
-        borderRadius: 16,
-        borderWidth: 1,
-        marginHorizontal: 24,
+        paddingHorizontal: 14,
+        paddingVertical: 10,
         marginBottom: 12,
-        paddingHorizontal: 12,
-        height: 44,
+        borderRadius: 999,
+        gap: 10,
     },
     searchInput: {
         flex: 1,
         fontSize: 16,
-        height: 44,
+        lineHeight: 20,
     },
-    contentContainer: { padding: 24, paddingTop: 20, paddingBottom: 40 },
-    card: {
-        borderRadius: 18,
-        padding: 20,
-        marginBottom: 18,
-        shadowOpacity: 0.08,
-        shadowOffset: { width: 0, height: 2 },
-        shadowRadius: 8,
-        elevation: 2,
+    groupedSectionContainer: {
+        width: '100%',
     },
-    questionRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 8,
+    faqItemWrapper: {
+        width: '100%',
     },
-    question: {
-        fontSize: 17,
-        fontWeight: 'bold',
-        flex: 1,
+    answerContainer: {
+        paddingHorizontal: 10,
+        paddingTop: 4,
+        paddingBottom: 12,
     },
-    answer: {
-        fontSize: 16,
-        lineHeight: 22,
-        marginTop: 8,
+    lastAnswerContainer: {
+        borderBottomLeftRadius: 18,
+        borderBottomRightRadius: 18,
     },
-    paragraph: {
-        fontSize: 16,
-        marginBottom: 12,
+    answer: {
+        fontSize: 14,
+        lineHeight: 20,
     },
     noResults: {
         fontSize: 16,
         marginTop: 32,
         textAlign: 'center',
-        opacity: 0.7,
     },
 });
 

package/src/ui/screens/karma/KarmaLeaderboardScreen.tsx

@@ -1,22 +1,27 @@
 import type React from 'react';
 import { useEffect, useState } from 'react';
 import { View, Text, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity } from 'react-native';
-import type { BaseScreenProps } from '../../navigation/types';
-import { useOxy } from '../../context/OxyContext';
+import type { BaseScreenProps } from '../../types/navigation';
 import Avatar from '../../components/Avatar';
 import { Header } from '../../components';
 import { useI18n } from '../../hooks/useI18n';
+import { useThemeStyles } from '../../hooks/useThemeStyles';
+import { normalizeTheme } from '../../utils/themeUtils';
+import { useColorScheme } from '../../hooks/use-color-scheme';
+import { useOxy } from '../../context/OxyContext';
 
 const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navigate }) => {
+    // Use useOxy() hook for OxyContext values
     const { oxyServices } = useOxy();
     const { t } = useI18n();
     const [leaderboard, setLeaderboard] = useState<any[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
-    const isDarkTheme = theme === 'dark';
-    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
-    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
+    const colorScheme = useColorScheme();
+    const normalizedTheme = normalizeTheme(theme);
+    const themeStyles = useThemeStyles(normalizedTheme, colorScheme);
+    // Override primaryColor for Karma screens (purple instead of blue)
     const primaryColor = '#d169e5';
 
     useEffect(() => {
@@ -29,11 +34,11 @@ const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navi
     }, [oxyServices]);
 
     return (
-        <View style={[styles.container, { backgroundColor }]}>
+        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
             <Header
                 title={t('karma.leaderboard.title') || 'Karma Leaderboard'}
                 subtitle={t('karma.leaderboard.subtitle') || 'Top contributors in the community'}
-                theme={theme}
+                
                 onBack={goBack}
                 elevation="subtle"
             />
@@ -44,7 +49,7 @@ const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navi
             ) : (
                 <ScrollView contentContainerStyle={styles.listContainer}>
                     {leaderboard.length === 0 ? (
-                        <Text style={[styles.placeholder, { color: textColor }]}>{t('karma.leaderboard.empty') || 'No leaderboard data.'}</Text>
+                        <Text style={[styles.placeholder, { color: themeStyles.textColor }]}>{t('karma.leaderboard.empty') || 'No leaderboard data.'}</Text>
                     ) : (
                         leaderboard.map((entry, idx) => (
                             <TouchableOpacity
@@ -54,8 +59,8 @@ const KarmaLeaderboardScreen: React.FC<BaseScreenProps> = ({ goBack, theme, navi
                                 activeOpacity={0.7}
                             >
                                 <Text style={[styles.rank, { color: primaryColor }]}>{idx + 1}</Text>
-                                <Avatar name={entry.username || 'User'} size={40} theme={theme} style={styles.avatar} />
-                                <Text style={[styles.username, { color: textColor }]}>{entry.username || entry.userId}</Text>
+                                <Avatar name={entry.username || 'User'} size={40}  style={styles.avatar} />
+                                <Text style={[styles.username, { color: themeStyles.textColor }]}>{entry.username || entry.userId}</Text>
                                 <Text style={[styles.karma, { color: primaryColor }]}>{entry.total}</Text>
                             </TouchableOpacity>
                         ))