react-native-inapp-inspector 1.1.13 → 1.1.15

package/dist/esm/styles/index.js

@@ -1,6 +1,8 @@
-import { StyleSheet, Platform, StatusBar } from 'react-native';
+import { StyleSheet, Platform } from 'react-native';
 import AppColors, { updateAppColorsTheme, getThemeColors } from './AppColors';
 import { AppFonts } from './AppFonts';
+import commonStyles, { rebuildCommonStyles } from './common';
+export { commonStyles };
 export const getRawStyles = (colors) => ({
     header: {
         flexDirection: 'row',
@@ -9,7 +11,7 @@ export const getRawStyles = (colors) => ({
         paddingVertical: 10,
         zIndex: 10,
         minHeight: 64,
-        shadowColor: '#000000',
+        shadowColor: colors.black,
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.08,
         shadowRadius: 4,
@@ -30,37 +32,6 @@ export const getRawStyles = (colors) => ({
         letterSpacing: 0.3,
         paddingBottom: 4,
     },
-    headerButtonGroup: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: 'rgba(255, 255, 255, 0.1)',
-        borderRadius: 10,
-        padding: 3,
-        borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.08)',
-    },
-    headerGroupButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 8,
-        paddingVertical: 6,
-        borderRadius: 8,
-        gap: 4,
-    },
-    headerGroupButtonActive: {
-        backgroundColor: 'rgba(255, 255, 255, 0.22)',
-        shadowColor: '#000000',
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.12,
-        shadowRadius: 2,
-        elevation: 2,
-    },
-    headerGroupButtonText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
-        color: 'rgba(255, 255, 255, 0.65)',
-        letterSpacing: 0.1,
-    },
     headerDetailCenter: {
         alignItems: 'center',
         justifyContent: 'center',
@@ -76,7 +47,7 @@ export const getRawStyles = (colors) => ({
         paddingHorizontal: 6,
         paddingVertical: 3,
         borderRadius: 6,
-        shadowColor: '#000000',
+        shadowColor: colors.black,
         shadowOffset: { width: 0, height: 1 },
         shadowOpacity: 0.1,
         shadowRadius: 2,
@@ -105,7 +76,7 @@ export const getRawStyles = (colors) => ({
         width: 7,
         height: 7,
         borderRadius: 3.5,
-        shadowColor: '#000000',
+        shadowColor: colors.black,
         shadowOffset: { width: 0, height: 1 },
         shadowOpacity: 0.2,
         shadowRadius: 1,
@@ -121,14 +92,14 @@ export const getRawStyles = (colors) => ({
     headerCountBadge: {
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: 'rgba(0,0,0,0.2)',
+        backgroundColor: `${colors.black}33`,
         paddingHorizontal: 12,
         paddingVertical: 6,
         borderRadius: 16,
         gap: 6,
         borderWidth: 0.5,
-        borderColor: 'rgba(255,255,255,0.2)',
-        shadowColor: '#000000',
+        borderColor: `${colors.white}33`,
+        shadowColor: colors.black,
         shadowOffset: { width: 0, height: 1 },
         shadowOpacity: 0.1,
         shadowRadius: 2,
@@ -136,21 +107,10 @@ export const getRawStyles = (colors) => ({
     },
     headerCountText: {
         fontFamily: AppFonts.interMedium,
-        color: 'rgba(255,255,255,0.95)',
+        color: `${colors.white}F2`,
         fontSize: 12,
         letterSpacing: 0.2,
     },
-    iconBtnMinimal: { padding: 6 },
-    closeButtonSquare: {
-        width: 32,
-        height: 32,
-        borderRadius: 8,
-        backgroundColor: 'rgba(255, 255, 255, 0.15)',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.08)',
-    },
     listContent: { paddingBottom: 12 },
     // #2 — scroll-to-top button, always shown at the bottom right.
     scrollTopBtn: {
@@ -163,7 +123,7 @@ export const getRawStyles = (colors) => ({
         backgroundColor: colors.purple,
         alignItems: 'center',
         justifyContent: 'center',
-        shadowColor: '#000000',
+        shadowColor: colors.black,
         shadowOffset: { width: 0, height: 3 },
         shadowOpacity: 0.25,
         shadowRadius: 5,
@@ -171,7 +131,16 @@ export const getRawStyles = (colors) => ({
         zIndex: 50,
     },
     detailScroll: { flex: 1 },
-    detailContent: { paddingHorizontal: 6, paddingTop: 8, paddingBottom: 20 },
+    closeButtonSquare: {
+        width: 32,
+        height: 32,
+        borderRadius: 8,
+        backgroundColor: `${colors.white}26`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: `${colors.white}14`,
+    },
     fabWrapper: {
         position: 'absolute',
         bottom: 180,
@@ -185,16 +154,6 @@ export const getRawStyles = (colors) => ({
         shadowOpacity: 0.4,
         shadowRadius: 12,
     },
-    fabIconContainer: {
-        backgroundColor: '#FFFFFF',
-        borderRadius: 28,
-        width: 56,
-        height: 56,
-        borderWidth: 1.5,
-        borderColor: colors.purple,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
     fabPulseRing: {
         position: 'absolute',
         width: 60,
@@ -218,72 +177,21 @@ export const getRawStyles = (colors) => ({
         height: 102,
         transform: [{ rotate: '25deg' }],
     },
-    fab: {
-        width: 56,
-        height: 56,
-        borderRadius: 28,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: colors.purple,
-        shadowColor: colors.shadowColorString,
-        shadowOffset: { width: 0, height: 6 },
-        shadowOpacity: 0.35,
-        shadowRadius: 10,
-        elevation: 12,
-    },
-    fabText: {
-        fontFamily: AppFonts.interBold,
-        color: colors.primaryLight,
-        fontSize: 14,
-    },
-    fabBadge: {
+    fabGreenDot: {
         position: 'absolute',
-        top: -6,
-        right: -6,
-        minWidth: 24,
-        height: 24,
-        borderRadius: 12,
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingHorizontal: 6,
-        borderWidth: 2.5,
+        top: 2,
+        right: 2,
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        backgroundColor: colors.greenA400,
+        borderWidth: 2,
         borderColor: colors.primaryLight,
-        shadowColor: colors.shadowColorString,
-        shadowOffset: { width: 0, height: 2 },
+        shadowColor: colors.black,
+        shadowOffset: { width: 0, height: 1 },
         shadowOpacity: 0.2,
-        shadowRadius: 3,
-        elevation: 3,
-    },
-    fabBadgeNormal: { backgroundColor: colors.purple },
-    fabBadgeError: { backgroundColor: colors.errorColor },
-    fabBadgeText: {
-        fontFamily: AppFonts.interBold,
-        color: colors.primaryLight,
-        fontSize: 11,
-    },
-    statBox: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    statValue: {
-        fontFamily: AppFonts.interBold,
-        color: colors.primaryBlack,
-        fontSize: 14,
-    },
-    statLabel: {
-        fontFamily: AppFonts.interMedium,
-        color: colors.grayTextWeak,
-        fontSize: 10,
-        marginTop: 4,
-        textTransform: 'uppercase',
-        letterSpacing: 0.5,
-    },
-    miniGraphWrap: {
-        marginTop: 8,
-        height: 16,
-        alignItems: 'center',
-        justifyContent: 'center',
+        shadowRadius: 1.5,
+        elevation: 2,
     },
     toolbarRow: {
         flexDirection: 'row',
@@ -299,12 +207,6 @@ export const getRawStyles = (colors) => ({
         alignItems: 'center',
         gap: 10,
     },
-    toolbarDivider: {
-        width: 1,
-        height: 20,
-        backgroundColor: colors.dividerColor,
-        marginHorizontal: 2,
-    },
     toolbarBtn: {
         width: 34,
         height: 34,
@@ -314,7 +216,7 @@ export const getRawStyles = (colors) => ({
         backgroundColor: colors.primaryLight,
         borderWidth: 1.5,
         borderColor: colors.grayBorderSecondary,
-        shadowColor: '#000000',
+        shadowColor: colors.black,
         shadowOffset: { width: 0, height: 1 },
         shadowOpacity: 0.04,
         shadowRadius: 2,
@@ -363,17 +265,18 @@ export const getRawStyles = (colors) => ({
     },
     statusFilterWrap: { marginRight: 6 },
     statusFilterChip: {
-        paddingHorizontal: 10,
-        height: 30,
-        justifyContent: 'center',
+        flexDirection: 'row',
         alignItems: 'center',
+        paddingHorizontal: 9,
+        height: 32,
+        justifyContent: 'center',
         borderRadius: 24,
         borderWidth: 1.5,
         borderColor: colors.grayBorderSecondary,
         backgroundColor: colors.primaryLight,
-        shadowColor: '#000000',
+        shadowColor: colors.black,
         shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.03,
+        shadowOpacity: 0.04,
         shadowRadius: 2,
         elevation: 1,
     },
@@ -381,6 +284,29 @@ export const getRawStyles = (colors) => ({
         borderColor: colors.purple,
         backgroundColor: colors.purpleShade50,
     },
+    filterCheckbox: {
+        width: 13,
+        height: 13,
+        borderRadius: 3,
+        borderWidth: 1.5,
+        borderColor: colors.grayBorderSecondary,
+        backgroundColor: colors.primaryLight,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 6,
+    },
+    filterCheckboxActive: {
+        borderColor: 'transparent',
+    },
+    filterChipIcon: {
+        marginRight: 5,
+    },
+    methodBadgeMini: {
+        width: 4.5,
+        height: 13,
+        borderRadius: 2,
+        marginRight: 6,
+    },
     statusFilterText: {
         fontFamily: AppFonts.interMedium,
         color: colors.grayText,
@@ -405,7 +331,7 @@ export const getRawStyles = (colors) => ({
         paddingVertical: 4,
         borderWidth: 1.5,
         borderColor: colors.grayBorderSecondary,
-        shadowColor: '#000000',
+        shadowColor: colors.black,
         shadowOffset: { width: 0, height: 1 },
         shadowOpacity: 0.04,
         shadowRadius: 2,
@@ -420,97 +346,84 @@ export const getRawStyles = (colors) => ({
         fontSize: 14,
     },
     clearBtn: { padding: 4 },
-    clearBtnText: {
-        fontFamily: AppFonts.interRegular,
-        color: colors.grayTextWeak,
-        fontSize: 14,
-    },
-    menuDropdown: {
-        position: 'absolute',
-        top: Platform.OS === 'android' ? (StatusBar.currentHeight || 24) + 60 : 90,
-        width: 170,
-        backgroundColor: colors.primaryLight,
-        borderRadius: 14,
+    domainHeaderCard: {
+        marginHorizontal: 12,
+        marginTop: 12,
+        marginBottom: 4,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        borderRadius: 10,
+        backgroundColor: colors.grayBackground,
         borderWidth: 1,
         borderColor: colors.grayBorderSecondary,
-        zIndex: 999,
-        shadowColor: '#000000',
-        shadowOffset: { width: 0, height: 8 },
-        shadowOpacity: 0.15,
-        shadowRadius: 12,
-        elevation: 8,
-        overflow: 'hidden',
     },
-    dropdownItem: {
-        padding: 13,
-        borderBottomWidth: 1,
-        borderBottomColor: colors.dividerColor,
-    },
-    domainHeaderSeparator: {
-        marginTop: 12,
-        paddingTop: 16,
-        borderTopWidth: 1,
-        borderTopColor: colors.dividerColor,
-    },
-    domainHeaderRow: {
+    domainHeaderTopRow: {
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        paddingLeft: 20,
-        paddingRight: 16,
-        marginTop: 12,
-        marginBottom: 6,
     },
     domainHeaderLeft: {
         flexDirection: 'row',
         alignItems: 'center',
         flex: 1,
-        paddingRight: 10,
-        gap: 6,
+        gap: 8,
+    },
+    domainIconWrap: {
+        width: 26,
+        height: 26,
+        borderRadius: 6,
+        alignItems: 'center',
+        justifyContent: 'center',
     },
-    domainHeaderText: {
+    domainTitleText: {
         fontFamily: AppFonts.interBold,
-        fontSize: 14,
+        fontSize: 13.5,
         fontWeight: '700',
+        color: colors.primaryBlack,
         textTransform: 'capitalize',
-        flexShrink: 1,
-        marginLeft: 2,
     },
-    domainSubRow: {
+    domainSummaryRow: {
         flexDirection: 'row',
         alignItems: 'center',
-        flexWrap: 'wrap',
-        marginTop: 2,
+        gap: 6,
+        marginTop: 1,
     },
-    domainTimestamp: {
+    domainSummaryText: {
         fontFamily: AppFonts.interRegular,
         fontSize: 10,
         color: colors.grayTextWeak,
     },
-    domainMethodCount: {
+    domainPctText: {
         fontFamily: AppFonts.interBold,
-        fontSize: 9,
-        marginLeft: 4,
+        fontSize: 9.5,
     },
-    domainStatsGroup: {
+    domainProgressTrack: {
         flexDirection: 'row',
-        alignItems: 'center',
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: colors.grayBorderSecondary,
+        height: 2.5,
+        borderRadius: 1.25,
         overflow: 'hidden',
-        backgroundColor: colors.grayBackground,
+        backgroundColor: 'rgba(148, 163, 184, 0.2)',
+        marginTop: 6,
+        width: '100%',
+    },
+    domainProgressSegment: {
+        height: '100%',
     },
-    groupBtnItem: {
+    domainStatsGroup: {
         flexDirection: 'row',
         alignItems: 'center',
         gap: 4,
-        paddingHorizontal: 8,
-        paddingVertical: 5,
     },
-    groupBtnBorderRight: {
-        borderRightWidth: 1,
-        borderRightColor: colors.grayBorderSecondary,
+    domainStatPill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: colors.grayBorderSecondary,
+        backgroundColor: colors.primaryLight,
     },
     domainStatText: {
         fontFamily: AppFonts.interBold,
@@ -519,17 +432,18 @@ export const getRawStyles = (colors) => ({
     treeNodeRow: {
         flexDirection: 'row',
         alignItems: 'stretch',
-        paddingRight: 16,
+        paddingLeft: 12,
+        paddingRight: 12,
     },
     treeLines: {
-        width: 40,
+        width: 28,
         position: 'relative',
     },
     modernTreeLine: {
         position: 'absolute',
-        left: 23,
+        left: 14,
         top: 0,
-        width: 16,
+        width: 14,
         height: '100%',
         borderLeftWidth: 1.5,
         opacity: 0.5,
@@ -537,39 +451,56 @@ export const getRawStyles = (colors) => ({
     modernTreeLineLast: {
         height: '50%',
         borderBottomWidth: 1.5,
-        borderBottomLeftRadius: 12,
+        borderBottomLeftRadius: 10,
     },
     modernTreeBranch: {
         position: 'absolute',
-        left: 23,
+        left: 14,
         top: '50%',
-        width: 16,
+        width: 14,
         borderTopWidth: 1.5,
         opacity: 0.5,
     },
     treeCardWrapper: {
         flex: 1,
-        paddingVertical: 4,
+        paddingVertical: 3.5,
     },
     card: {
         marginHorizontal: 0,
         marginVertical: 0,
-        borderRadius: 14,
+        borderRadius: 12,
         overflow: 'hidden',
-        shadowColor: '#000000',
-        shadowOffset: { width: 0, height: 3 },
-        shadowOpacity: 0.08,
-        shadowRadius: 6,
-        elevation: 3,
+        shadowColor: colors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.05,
+        shadowRadius: 4,
+        elevation: 2,
         borderWidth: 1,
         borderColor: colors.grayBorderSecondary,
         backgroundColor: colors.primaryLight,
     },
-    cardBody: { paddingHorizontal: 10, paddingTop: 8, paddingBottom: 8 },
-    cardTopRow: {
+    cardBody: {
+        paddingHorizontal: 12,
+        paddingTop: 10,
+        paddingBottom: 9,
+    },
+    cardHeaderRow: {
         flexDirection: 'row',
         alignItems: 'center',
-        marginBottom: 6,
+        justifyContent: 'space-between',
+        marginBottom: 4,
+    },
+    cardHeaderLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+        marginRight: 8,
+        gap: 6,
+    },
+    cardHeaderRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
     },
     smallCheckbox: {
         width: 13,
@@ -579,8 +510,7 @@ export const getRawStyles = (colors) => ({
         borderColor: colors.grayTextWeak,
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: '#fff',
-        marginRight: 8,
+        backgroundColor: colors.white,
     },
     smallCheckboxChecked: {
         backgroundColor: colors.purple,
@@ -590,102 +520,118 @@ export const getRawStyles = (colors) => ({
         fontFamily: AppFonts.interBold,
         color: colors.grayTextWeak,
         fontSize: 10,
-        marginRight: 6,
-        minWidth: 20,
     },
-    chip: {
-        flexDirection: 'row',
+    methodBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 2.5,
+        borderRadius: 6,
         alignItems: 'center',
-        gap: 4,
+        justifyContent: 'center',
+        shadowColor: colors.black,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.08,
+        shadowRadius: 2,
+        elevation: 1,
+    },
+    methodBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9.5,
+        letterSpacing: 0.4,
+    },
+    cardHostText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 12,
+        color: colors.primaryBlack,
+        flexShrink: 1,
+    },
+    statusPill: {
         paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 8,
+        paddingVertical: 2,
+        borderRadius: 6,
         borderWidth: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
     },
-    chipText: {
+    statusPillText: {
         fontFamily: AppFonts.interBold,
         fontSize: 10,
     },
-    cardMiddleRow: {
+    cardSlugBox: {
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        marginBottom: 6,
+        backgroundColor: colors.grayBackground,
+        borderRadius: 7,
+        borderWidth: 1,
+        borderColor: colors.grayBorderSecondary,
+        paddingHorizontal: 8,
+        paddingVertical: 5,
+        marginVertical: 5,
+        gap: 6,
     },
-    cardBottomRow: {
+    slugLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+        gap: 6,
+    },
+    slugTag: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 8.5,
+        color: colors.grayTextWeak,
+        letterSpacing: 0.5,
+    },
+    slugText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12.5,
+        color: colors.primaryBlack,
+        flexShrink: 1,
+    },
+    slugRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
+    cardFooterRow: {
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        marginBottom: 6,
+        marginTop: 2,
     },
     cardDateRow: {
         flexDirection: 'row',
         alignItems: 'center',
-        gap: 4,
+        gap: 3.5,
     },
     cardDateText: {
         fontFamily: AppFonts.interRegular,
         color: colors.grayTextWeak,
         fontSize: 10,
-        letterSpacing: 0.2,
+        letterSpacing: 0.1,
     },
-    cardMetaRow: {
+    cardFooterRight: {
         flexDirection: 'row',
         alignItems: 'center',
-        gap: 6,
-        flexShrink: 0,
-    },
-    urlPathText: {
-        fontFamily: AppFonts.interMedium,
-        color: colors.primaryBlack,
-        fontSize: 13,
-        flexShrink: 1,
+        gap: 5,
     },
-    urlDomainText: {
-        fontFamily: AppFonts.interRegular,
-        color: colors.grayText,
-        fontSize: 11,
-        flex: 1,
-    },
-    requestTypeText: {
-        fontFamily: AppFonts.interRegular,
-        color: colors.grayText,
-        fontSize: 10,
-    },
-    methodBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 6,
-        marginRight: 6,
-        minWidth: 46,
+    chip: {
+        flexDirection: 'row',
         alignItems: 'center',
-        justifyContent: 'center',
-        shadowColor: '#000000',
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.08,
-        shadowRadius: 2,
-        elevation: 1,
+        gap: 3.5,
+        paddingHorizontal: 5,
+        paddingVertical: 2,
+        borderRadius: 5,
+        borderWidth: 1,
     },
-    methodBadgeText: {
+    chipText: {
         fontFamily: AppFonts.interBold,
         fontSize: 9.5,
-        letterSpacing: 0.4,
-    },
-    timelineTrack: {
-        height: 3,
-        backgroundColor: colors.graySurface,
-        marginTop: 4,
-        borderRadius: 1.5,
-        overflow: 'hidden',
-        position: 'relative',
     },
-    timelineBar: { position: 'absolute', height: '100%', borderRadius: 1.5 },
     empty: {
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
     },
-    emptyIcon: { fontSize: 32, color: colors.grayTextWeak },
     emptyContainer: {
         flex: 1,
         alignItems: 'center',
@@ -701,7 +647,7 @@ export const getRawStyles = (colors) => ({
         alignItems: 'center',
         justifyContent: 'center',
         marginBottom: 20,
-        shadowColor: '#000000',
+        shadowColor: colors.black,
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.06,
         shadowRadius: 4,
@@ -735,7 +681,7 @@ export const getRawStyles = (colors) => ({
         elevation: 5,
     },
     reloadBtnText: {
-        color: '#FFF',
+        color: colors.white,
         fontFamily: AppFonts.interBold,
         fontSize: 14,
         letterSpacing: 0.3,
@@ -748,7 +694,7 @@ export const getRawStyles = (colors) => ({
         borderWidth: 1,
         borderColor: colors.grayBorderSecondary,
         backgroundColor: colors.primaryLight,
-        shadowColor: '#000000',
+        shadowColor: colors.black,
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.05,
         shadowRadius: 4,
@@ -761,31 +707,6 @@ export const getRawStyles = (colors) => ({
         paddingBottom: 10,
     },
     detailInfoRight: { flexDirection: 'row', alignItems: 'center', gap: 6 },
-    detailMethodLabel: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 14,
-        letterSpacing: 0.5,
-    },
-    detailUrlContainer: {
-        backgroundColor: colors.grayBackground,
-        borderRadius: 10,
-        padding: 13,
-        borderWidth: 1,
-        borderColor: colors.grayBorderSecondary,
-        shadowColor: '#000000',
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.04,
-        shadowRadius: 2,
-        elevation: 1,
-    },
-    detailUrl: {
-        fontFamily: AppFonts.interRegular,
-        color: colors.purple,
-        fontSize: 13,
-        lineHeight: 20,
-        textDecorationLine: 'underline',
-        letterSpacing: 0.2,
-    },
     metaContainer: {
         backgroundColor: colors.primaryLight,
         borderWidth: 1,
@@ -793,7 +714,7 @@ export const getRawStyles = (colors) => ({
         borderRadius: 14,
         marginBottom: 12,
         overflow: 'hidden',
-        shadowColor: '#000000',
+        shadowColor: colors.black,
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.05,
         shadowRadius: 4,
@@ -816,11 +737,6 @@ export const getRawStyles = (colors) => ({
         letterSpacing: 0.6,
         textTransform: 'uppercase',
     },
-    metaChevron: {
-        fontFamily: AppFonts.interRegular,
-        color: colors.grayTextWeak,
-        fontSize: 11,
-    },
     metaBody: { paddingHorizontal: 12, paddingBottom: 8, paddingTop: 4 },
     metaRow: {
         flexDirection: 'row',
@@ -831,7 +747,7 @@ export const getRawStyles = (colors) => ({
     metaDivider: { height: 1, backgroundColor: colors.dividerColor },
     metaLabelRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
     metaLabel: {
-        fontFamily: AppFonts.interRegular,
+        fontFamily: AppFonts.interBold,
         color: colors.grayText,
         fontSize: 13,
     },
@@ -851,11 +767,6 @@ export const getRawStyles = (colors) => ({
         fontFamily: AppFonts.interBold,
         fontSize: 11,
     },
-    seperator: {
-        height: 1,
-        backgroundColor: colors.dividerColor,
-        marginVertical: 10,
-    },
     detailSearchRow: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -887,7 +798,7 @@ export const getRawStyles = (colors) => ({
         overflow: 'hidden',
     },
     sectionHeaderGradient: {
-        backgroundColor: '#f9f9fa',
+        backgroundColor: colors.grayBackground,
         paddingVertical: 12,
         paddingHorizontal: 8,
         borderBottomWidth: 1,
@@ -1070,26 +981,29 @@ export const getRawStyles = (colors) => ({
     },
     codeSyntax: {
         color: colors.grayTextWeak,
-        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontFamily: AppFonts.interRegular,
+        fontSize: 12.5,
+        lineHeight: 18,
     },
     codeKey: {
         color: colors.purple,
-        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontFamily: AppFonts.interBold,
+        fontSize: 12.5,
+        lineHeight: 18,
     },
     codeText: {
         color: colors.greenBaggageText,
-        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontFamily: AppFonts.interRegular,
+        fontSize: 12.5,
+        lineHeight: 18,
     },
     codeTextNil: {
         color: colors.errorColor,
-        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontFamily: AppFonts.interMedium,
+        fontSize: 12.5,
+        lineHeight: 18,
     },
     treeRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 6 },
-    treeChevron: {
-        fontFamily: AppFonts.interRegular,
-        color: colors.grayTextWeak,
-        marginRight: 8,
-    },
     treeKeyMargin: { marginRight: 6 },
     highlight: {
         backgroundColor: colors.paleYellow,
@@ -1129,17 +1043,17 @@ export const getRawStyles = (colors) => ({
     },
     diffAdded: {
         color: colors.greenColor,
-        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontFamily: AppFonts.interRegular,
         fontSize: 12,
     },
     diffRemoved: {
         color: colors.errorColor,
-        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontFamily: AppFonts.interRegular,
         fontSize: 12,
     },
     diffChanged: {
         color: colors.lightOrange,
-        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontFamily: AppFonts.interRegular,
         fontSize: 12,
     },
     filePreviewNode: { paddingVertical: 8, marginVertical: 4 },
@@ -1200,10 +1114,10 @@ export const getRawStyles = (colors) => ({
         width: 36,
         height: 36,
         borderRadius: 18,
-        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+        backgroundColor: `${colors.white}E6`,
         alignItems: 'center',
         justifyContent: 'center',
-        shadowColor: '#000',
+        shadowColor: colors.black,
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.2,
         shadowRadius: 4,
@@ -1271,7 +1185,7 @@ export const getRawStyles = (colors) => ({
         paddingVertical: 10,
         borderBottomWidth: 1,
         borderBottomColor: colors.dividerColor,
-        backgroundColor: '#fafafa',
+        backgroundColor: colors.grayBackground,
     },
     paramsAccordionLeft: {
         flexDirection: 'row',
@@ -1344,64 +1258,10 @@ export const getRawStyles = (colors) => ({
         fontSize: 12,
     },
     // ─── Tab Bar ───────────────────────────────────────────────────────────────
-    tabBar: {
-        flexDirection: 'row',
-        backgroundColor: colors.grayBackground,
-        paddingHorizontal: 12,
-        paddingTop: 10,
-        paddingBottom: 4,
-        gap: 8,
-    },
-    tabItem: {
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        borderRadius: 10,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: '#EDEDF4',
-    },
-    tabItemActive: {
-        backgroundColor: colors.purple,
-        shadowColor: colors.purple,
-        shadowOpacity: 0.3,
-        shadowRadius: 6,
-        shadowOffset: { width: 0, height: 2 },
-        elevation: 3,
-    },
-    tabText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13,
-        color: colors.grayText,
-    },
-    tabTextActive: {
-        color: '#FFFFFF',
-    },
     // ─── Screen Grouping Headers ───────────────────────────────────────────────
-    screenSectionHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        backgroundColor: '#F7F7FA',
-        borderTopWidth: 1,
-        borderBottomWidth: 1,
-        borderColor: colors.grayBorderSecondary,
-        marginTop: 8,
-    },
-    screenSectionTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13,
-        color: colors.primaryBlack,
-    },
-    screenSectionCount: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 12,
-        color: colors.grayText,
-    },
     modalBackdrop: {
         flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.45)',
+        backgroundColor: `${colors.black}73`,
         justifyContent: 'flex-end',
     },
     modalBackdropPressable: {
@@ -1413,7 +1273,7 @@ export const getRawStyles = (colors) => ({
         borderTopLeftRadius: 20,
         borderTopRightRadius: 20,
         overflow: 'hidden',
-        shadowColor: '#000000',
+        shadowColor: colors.black,
         shadowOffset: { width: 0, height: -4 },
         shadowOpacity: 0.15,
         shadowRadius: 10,
@@ -1452,149 +1312,112 @@ export const getRawStyles = (colors) => ({
         color: colors.grayText,
     },
     contentTabButtonTextActive: {
-        color: '#FFFFFF',
-        fontWeight: 'bold',
-    },
-    insightsContainer: {
-        flex: 1,
-        backgroundColor: colors.grayBackground,
-    },
-    insightsContent: {
-        padding: 10,
-        paddingBottom: 24,
-    },
-    dashboardContainer: {
-        gap: 10,
+        color: colors.white,
+        fontFamily: AppFonts.interBold,
     },
-    dashboardModuleCard: {
+    analyticsHeaderCard: {
         backgroundColor: colors.primaryLight,
-        borderRadius: 10,
+        borderRadius: 12,
         borderWidth: 1,
         borderColor: colors.grayBorderSecondary,
-        padding: 12,
-        shadowColor: '#000000',
+        padding: 14,
+        marginHorizontal: 12,
+        marginTop: 8,
+        marginBottom: 8,
+        shadowColor: colors.black,
         shadowOpacity: 0.03,
         shadowRadius: 4,
         shadowOffset: { width: 0, height: 1 },
         elevation: 1,
     },
-    dashboardModuleHeader: {
+    analyticsHeaderTop: {
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
         marginBottom: 10,
-        borderBottomWidth: 1,
-        borderBottomColor: colors.dividerColor,
-        paddingBottom: 8,
     },
-    dashboardModuleTitle: {
+    analyticsHeaderTitle: {
         fontFamily: AppFonts.interBold,
-        fontSize: 13,
+        fontSize: 14,
         color: colors.primaryBlack,
     },
-    dashboardModuleGoText: {
-        fontFamily: AppFonts.interBold,
+    statusDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+    },
+    analyticsHeaderSubtitle: {
+        fontFamily: AppFonts.interMedium,
         fontSize: 11,
+        color: colors.grayText,
+        marginTop: 2,
+    },
+    analyticsHeaderToggle: {
+        paddingVertical: 4,
+        paddingHorizontal: 8,
+        borderRadius: 4,
+        backgroundColor: colors.grayBackground,
+        borderWidth: 1,
+        borderColor: colors.grayBorderSecondary,
+    },
+    analyticsHeaderToggleText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 10,
         color: colors.purple,
     },
-    dashboardModuleGrid: {
+    analyticsStatsRow: {
         flexDirection: 'row',
-        flexWrap: 'wrap',
-        justifyContent: 'space-between',
         gap: 8,
+        borderTopWidth: 1,
+        borderTopColor: colors.dividerColor,
+        paddingTop: 10,
     },
-    dashboardGridItem: {
+    analyticsStatBox: {
         flex: 1,
-        minWidth: '22%',
         backgroundColor: colors.grayBackground,
-        borderRadius: 8,
-        paddingVertical: 8,
-        paddingHorizontal: 4,
+        borderRadius: 6,
+        paddingVertical: 6,
         alignItems: 'center',
-        justifyContent: 'center',
     },
-    dashboardGridVal: {
+    analyticsStatValue: {
         fontFamily: AppFonts.interBold,
-        fontSize: 13,
+        fontSize: 14,
         color: colors.primaryBlack,
     },
-    dashboardGridLbl: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: colors.grayTextWeak,
-        marginTop: 2,
-    },
-    analyticsCardRow: {},
-    analyticsTopEventsCard: {
-        marginHorizontal: 16,
-        marginBottom: 12,
-        backgroundColor: colors.primaryLight,
-        borderRadius: 12,
-        borderWidth: 1,
-        borderColor: colors.grayBorderSecondary,
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        shadowColor: '#000',
-        shadowOpacity: 0.04,
-        shadowRadius: 4,
-        shadowOffset: { width: 0, height: 1 },
-        elevation: 1,
+    analyticsStatLabel: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 9,
+        color: colors.grayText,
+        marginTop: 1,
     },
-    analyticsTopEventsHeaderRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 12,
+    analyticsHeaderDetails: {
+        borderTopWidth: 1,
+        borderTopColor: colors.dividerColor,
+        paddingTop: 10,
+        marginTop: 10,
     },
-    analyticsTopEventsTitle: {
+    detailsGroupTitle: {
         fontFamily: AppFonts.interBold,
-        fontSize: 10,
-        color: colors.grayTextWeak,
-        letterSpacing: 0.8,
-        textTransform: 'uppercase',
-    },
-    analyticsTopEventsSubtitle: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 9,
-        color: colors.grayTextWeak,
-        letterSpacing: 0.4,
+        fontSize: 11,
+        color: colors.purple,
+        marginBottom: 6,
     },
-    analyticsTopEventRow: {
+    detailsRow: {
         flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: 8,
-        gap: 8,
+        justifyContent: 'space-between',
+        paddingVertical: 4,
+        borderBottomWidth: 0.5,
+        borderBottomColor: colors.dividerColor,
     },
-    analyticsTopEventName: {
+    detailsKey: {
         fontFamily: AppFonts.interMedium,
-        fontSize: 12,
+        fontSize: 11,
         color: colors.primaryBlack,
-        flex: 1,
     },
-    analyticsTopEventBarWrap: {
-        flex: 0.8,
-        height: 3,
-        backgroundColor: colors.grayBackground,
-        borderRadius: 2,
-        overflow: 'hidden',
-    },
-    analyticsTopEventBar: {
-        height: '100%',
-        borderRadius: 2,
-    },
-    analyticsTopEventCount: {
-        fontFamily: AppFonts.interBold,
+    detailsValue: {
+        fontFamily: AppFonts.interRegular,
         fontSize: 11,
         color: colors.grayText,
-        width: 24,
-        textAlign: 'right',
-    },
-    analyticsIconCircle: {
-        width: 24,
-        height: 24,
-        borderRadius: 12,
-        alignItems: 'center',
-        justifyContent: 'center',
     },
 });
 const styles = {};
@@ -1610,5 +1433,6 @@ rebuildStyles(false);
 export const toggleGlobalTheme = (isDark) => {
     updateAppColorsTheme(isDark);
     rebuildStyles(isDark);
+    rebuildCommonStyles(isDark ? getThemeColors(true) : AppColors);
 };
 export default styles;