react-native-inapp-inspector 1.1.29 → 1.1.32

package/dist/esm/components/AppHeaderLogo.js

@@ -29,14 +29,17 @@ const logoStyles = StyleSheet.create({
     container: {
         borderRadius: 10,
         overflow: 'hidden',
-        backgroundColor: 'transparent',
+        backgroundColor: 'rgba(255, 255, 255, 0.15)',
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.28)',
+        padding: 2.5,
         alignItems: 'center',
         justifyContent: 'center',
     },
     image: {
         width: '100%',
         height: '100%',
-        borderRadius: 10,
+        borderRadius: 7.5,
     },
 });
 export default AppHeaderLogo;

package/dist/esm/components/ConsoleLogCard.js

@@ -20,37 +20,37 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
         const getTagDecorator = (tag) => {
             const clean = tag.replace(/[\[\]]/g, '').trim().toUpperCase();
             if (clean === 'AXIOS') {
-                return { color: '#059669', icon: '⚡', label: 'AXIOS' };
+                return { color: AppColors.emerald600, icon: '⚡', label: 'AXIOS' };
             }
             if (clean === 'API' || clean === 'FETCH' || clean === 'HTTP' || clean === 'NETWORK') {
-                return { color: '#0284C7', icon: '🌐', label: clean };
+                return { color: AppColors.sky600, icon: '🌐', label: clean };
             }
             if (clean === 'SAMPLE' || clean === 'BATCH') {
-                return { color: '#4F46E5', icon: '🎲', label: clean };
+                return { color: AppColors.indigo600Alt, icon: '🎲', label: clean };
             }
             if (clean === 'REDUX' || clean === 'STORE' || clean === 'STATE') {
-                return { color: '#7C3AED', icon: '⚛️', label: clean };
+                return { color: AppColors.violet600, icon: '⚛️', label: clean };
             }
             if (clean === 'ANALYTICS' || clean === 'FIREBASE' || clean === 'GA4' || clean === 'GA') {
-                return { color: '#0D9488', icon: '📊', label: clean };
+                return { color: AppColors.teal600, icon: '📊', label: clean };
             }
             if (clean === 'AUTH' || clean === 'TOKEN' || clean === 'SESSION') {
-                return { color: '#D97706', icon: '🔑', label: clean };
+                return { color: AppColors.amber600, icon: '🔑', label: clean };
             }
             if (clean === 'APP') {
-                return { color: '#4F46E5', icon: '📱', label: 'APP' };
+                return { color: AppColors.indigo600Alt, icon: '📱', label: 'APP' };
             }
             if (clean === 'TEST') {
-                return { color: '#10B981', icon: '🧪', label: 'TEST' };
+                return { color: AppColors.emerald500, icon: '🧪', label: 'TEST' };
             }
             if (clean === 'WARN' || clean === 'WARNING') {
-                return { color: '#D97706', icon: '⚠️', label: 'WARN' };
+                return { color: AppColors.amber600, icon: '⚠️', label: 'WARN' };
             }
             if (clean === 'ERROR' || clean === 'CRASH' || clean === 'BUG') {
-                return { color: '#DC2626', icon: '💥', label: 'ERROR' };
+                return { color: AppColors.red600, icon: '💥', label: 'ERROR' };
             }
             if (clean === 'PERF' || clean === 'RENDER') {
-                return { color: '#8B5CF6', icon: '⚡', label: clean };
+                return { color: AppColors.violet500, icon: '⚡', label: clean };
             }
             return { color: AppColors.slate600, icon: '🏷️', label: clean };
         };
@@ -89,51 +89,72 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
         ? parseStackLine(item.caller, true)
         : null;
     const getLogColors = () => {
-        const isDark = AppColors.primaryLight !== AppColors.white;
-        if (isAnalyticsError) {
+        const type = (item.type || 'log').toLowerCase();
+        const method = (item.sourceMethod || type).toLowerCase();
+        if (isAnalyticsError || type === 'error' || method === 'error') {
             return {
-                border: AppColors.skyBlue,
-                badgeBg: `${AppColors.skyBlue}15`,
-                badgeText: AppColors.skyBlue,
+                border: '#EF4444',
+                badgeBg: '#FEE2E2',
+                badgeText: '#DC2626',
                 label: 'ERROR',
-                cardBg: isDark ? `${AppColors.skyBlue}26` : AppColors.blueTintBg,
+                cardBg: '#FEF2F2',
+                methodBorder: '#FECACA',
+                methodBg: '#FEE2E2',
+                methodText: '#DC2626',
+                textColor: '#991B1B',
             };
         }
-        switch (item.type) {
-            case 'error':
-                return {
-                    border: AppColors.errorColor,
-                    badgeBg: `${AppColors.errorColor}15`,
-                    badgeText: AppColors.errorColor,
-                    label: 'ERROR',
-                    cardBg: isDark ? `${AppColors.errorColor}26` : AppColors.errorCardBg,
-                };
-            case 'warn':
-                return {
-                    border: AppColors.lightOrange,
-                    badgeBg: `${AppColors.lightOrange}15`,
-                    badgeText: AppColors.darkOrange || AppColors.lightOrange,
-                    label: 'WARN',
-                    cardBg: isDark ? `${AppColors.amber500}26` : AppColors.warnCardBg,
-                };
-            default:
-                if (isUserLog) {
-                    return {
-                        border: AppColors.slate600,
-                        badgeBg: isDark ? AppColors.gray700 : AppColors.slate200,
-                        badgeText: isDark ? AppColors.gray300 : AppColors.slate700,
-                        label: 'INFO',
-                        cardBg: isDark ? AppColors.primaryLight : AppColors.slate100,
-                    };
-                }
-                return {
-                    border: AppColors.purple,
-                    badgeBg: `${AppColors.purple}15`,
-                    badgeText: AppColors.purple,
-                    label: 'INFO',
-                    cardBg: isDark ? `${AppColors.purple}1F` : AppColors.purpleShade50,
-                };
+        if (type === 'warn' || method === 'warn') {
+            return {
+                border: '#F59E0B',
+                badgeBg: '#FEF3C7',
+                badgeText: '#D97706',
+                label: 'WARN',
+                cardBg: '#FFFBEB',
+                methodBorder: '#FDE68A',
+                methodBg: '#FEF3C7',
+                methodText: '#D97706',
+                textColor: '#92400E',
+            };
+        }
+        if (type === 'debug' || method === 'debug') {
+            return {
+                border: '#8B5CF6',
+                badgeBg: '#EDE9FE',
+                badgeText: '#7C3AED',
+                label: 'DEBUG',
+                cardBg: '#F5F3FF',
+                methodBorder: '#DDD6FE',
+                methodBg: '#EDE9FE',
+                methodText: '#7C3AED',
+                textColor: '#4C1D95',
+            };
         }
+        if (type === 'info' || method === 'info') {
+            return {
+                border: '#0EA5E9',
+                badgeBg: '#E0F2FE',
+                badgeText: '#0284C7',
+                label: 'INFO',
+                cardBg: '#F0F9FF',
+                methodBorder: '#BAE6FD',
+                methodBg: '#E0F2FE',
+                methodText: '#0284C7',
+                textColor: '#075985',
+            };
+        }
+        // Default / Standard console.log
+        return {
+            border: '#6366F1',
+            badgeBg: '#EEF2FF',
+            badgeText: '#4F46E5',
+            label: 'LOG',
+            cardBg: '#FFFFFF',
+            methodBorder: '#E0E7FF',
+            methodBg: '#EEF2FF',
+            methodText: '#4F46E5',
+            textColor: '#0F172A',
+        };
     };
     const colors = getLogColors();
     const jsonPreview = jsonContent
@@ -147,6 +168,7 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
             styles.card,
             {
                 borderLeftColor: colors.border,
+                borderLeftWidth: 3.5,
                 backgroundColor: colors.cardBg,
             },
             pressed && styles.cardPressed,
@@ -155,18 +177,18 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
           <View style={styles.headerLeft}>
             <View style={[styles.typeChip, { backgroundColor: colors.badgeBg }]}>
               <View style={[styles.typeDot, { backgroundColor: colors.badgeText }]}/>
-              <Text style={[styles.typeChipText, { color: colors.badgeText }]}>
+              <Text style={[styles.typeChipText, { color: colors.badgeText, fontFamily: AppFonts.interBold }]}>
                 {colors.label}
               </Text>
             </View>
             <View style={[
             styles.metaChip,
             {
-                backgroundColor: `${AppColors.brandPurple}12`,
-                borderColor: `${AppColors.brandPurple}30`,
+                backgroundColor: colors.methodBg,
+                borderColor: colors.methodBorder,
             },
         ]}>
-              <Text style={[styles.metaChipText, { color: AppColors.brandPurple }]}>
+              <Text style={[styles.metaChipText, { color: colors.methodText, fontFamily: AppFonts.interBold }]}>
                 console.
                 {('sourceMethod' in item ? item.sourceMethod : undefined) ||
             item.type ||
@@ -176,11 +198,11 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
             {jsonContent && (<View style={[
                 styles.metaChip,
                 {
-                    backgroundColor: `${AppColors.teal600}12`,
-                    borderColor: `${AppColors.teal600}2B`,
+                    backgroundColor: '#ECFDF5',
+                    borderColor: '#A7F3D0',
                 },
             ]}>
-                <Text style={[styles.metaChipText, { color: AppColors.teal600 }]}>
+                <Text style={[styles.metaChipText, { color: '#059669', fontFamily: AppFonts.interBold }]}>
                   {Array.isArray(jsonContent.data)
                 ? `Array[${jsonContent.data.length}]`
                 : `Object{${Object.keys(jsonContent.data).length}}`}
@@ -195,7 +217,7 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
                     borderColor: `${AppColors.purple}3D`,
                 },
             ]}>
-                  <Text style={[styles.metaChipText, { color: AppColors.purple }]}>
+                  <Text style={[styles.metaChipText, { color: AppColors.purple, fontFamily: AppFonts.interBold }]}>
                     ×{item.duplicateCount}
                   </Text>
                 </View>)}

package/dist/esm/components/DomainHeader.js

@@ -27,18 +27,21 @@ const DomainHeader = ({ pageName, color, stats, activeFilters, onToggleFilter, i
     const pctSuccess = total > 0 ? Math.round((stats.success / total) * 100) : 0;
     const pctFailed = total > 0 ? Math.round((stats.failed / total) * 100) : 0;
     const pctLoading = total > 0 ? Math.round((stats.loading / total) * 100) : 0;
-    return (<Pressable style={styles.domainHeaderCard} onPress={() => onToggleCollapse(pageName)}>
+    return (<Pressable style={[
+            styles.domainHeaderCard,
+            !isCollapsed && styles.domainHeaderCardExpanded,
+        ]} onPress={() => onToggleCollapse(pageName)}>
       <View style={styles.domainHeaderTopRow}>
         <View style={styles.domainHeaderLeft}>
-          <Animated.View style={{ transform: [{ rotate: chevronRotate }] }}>
+          <Animated.View style={{ transform: [{ rotate: chevronRotate }], flexShrink: 0 }}>
             <ChevronIcon color={AppColors.grayTextWeak} size={13}/>
           </Animated.View>
-          <View style={[styles.domainIconWrap, { backgroundColor: `${color}18` }]}>
+          <View style={[styles.domainIconWrap, { backgroundColor: `${color}18`, flexShrink: 0 }]}>
             <ScreenIcon color={color} size={14}/>
           </View>
           <View style={{ flex: 1, justifyContent: 'center', minWidth: 0 }}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-              <Text style={[styles.domainTitleText, { flexShrink: 1 }]} numberOfLines={1}>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0 }}>
+              <Text style={[styles.domainTitleText, { flexShrink: 1 }]} numberOfLines={1} ellipsizeMode="tail">
                 {pageName}
               </Text>
               {total > 0 && (<View style={{
@@ -46,52 +49,53 @@ const DomainHeader = ({ pageName, color, stats, activeFilters, onToggleFilter, i
                 alignItems: 'center',
                 gap: 4,
                 backgroundColor: stats.failed > 0
-                    ? '#FEE2E2'
+                    ? AppColors.red100
                     : stats.loading > 0
-                        ? '#FEF3C7'
-                        : '#D1FAE5',
+                        ? AppColors.amber100
+                        : AppColors.emerald100,
                 paddingHorizontal: 5,
                 paddingVertical: 1.5,
                 borderRadius: 4,
+                flexShrink: 0,
             }}>
                   <View style={{
-                width: 24,
+                width: 22,
                 height: 3.5,
                 borderRadius: 2,
-                backgroundColor: '#E5E7EB',
+                backgroundColor: AppColors.gray200,
                 flexDirection: 'row',
                 overflow: 'hidden',
             }}>
                     {pctSuccess > 0 && (<View style={{
                     width: `${pctSuccess}%`,
                     height: '100%',
-                    backgroundColor: '#10B981',
+                    backgroundColor: AppColors.emerald500,
                 }}/>)}
                     {pctFailed > 0 && (<View style={{
                     width: `${pctFailed}%`,
                     height: '100%',
-                    backgroundColor: '#EF4444',
+                    backgroundColor: AppColors.red500,
                 }}/>)}
                     {pctLoading > 0 && (<View style={{
                     width: `${pctLoading}%`,
                     height: '100%',
-                    backgroundColor: '#F59E0B',
+                    backgroundColor: AppColors.amber500,
                 }}/>)}
                   </View>
                   <Text style={{
                 fontFamily: AppFonts.interBold,
                 fontSize: 8.5,
                 color: stats.failed > 0
-                    ? '#991B1B'
+                    ? AppColors.redErrorText
                     : stats.loading > 0
-                        ? '#92400E'
-                        : '#065F46',
+                        ? AppColors.amber800Warm
+                        : AppColors.emerald700,
             }}>
                     {pctSuccess}%
                   </Text>
                 </View>)}
             </View>
-            <Text style={styles.domainSummaryText} numberOfLines={1}>
+            <Text style={styles.domainSummaryText} numberOfLines={1} ellipsizeMode="tail">
               {formatDateTime(timestamp)}
             </Text>
           </View>