@buoy-gg/highlight-updates 7.0.26 → 7.0.28

package/lib/module/highlight-updates/components/RenderDetailView.js

@@ -14,7 +14,7 @@
 
 import React, { useMemo, useState, useCallback } from "react";
 import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from "react-native";
-import { CopyButton, formatRelativeTime, PlusIcon, MinusIcon, EventStepperFooter, Lock, buoyColors, useLimit } from "@buoy-gg/shared-ui";
+import { CopyButton, formatRelativeTime, PlusIcon, MinusIcon, EventStepperFooter, Lock, night, useLimit } from "@buoy-gg/shared-ui";
 import { TreeDiffViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { CAUSE_CONFIG, COMPONENT_CAUSE_CONFIG } from "./RenderCauseBadge";
 import { generateSingleComponentExport } from "../utils/rendersExportFormatter";
@@ -119,7 +119,7 @@ export function RenderDetailView({
         style: styles.lockedBanner,
         children: [/*#__PURE__*/_jsx(Lock, {
           size: 14,
-          color: buoyColors.warning
+          color: night.color.warning
         }), /*#__PURE__*/_jsxs(Text, {
           style: styles.lockedBannerText,
           children: [hiddenEventCount, " ", hiddenEventCount === 1 ? 'event' : 'events', " hidden"]
@@ -436,10 +436,10 @@ function QuickActionsSection({
         activeOpacity: 0.7,
         children: [/*#__PURE__*/_jsx(PlusIcon, {
           size: 14,
-          color: selectedOption ? buoyColors.success : buoyColors.textMuted
+          color: selectedOption ? night.color.accent : night.color.textTertiary
         }), /*#__PURE__*/_jsx(Text, {
           style: [styles.filterActionButtonText, {
-            color: selectedOption ? buoyColors.success : buoyColors.textMuted
+            color: selectedOption ? night.color.accent : night.color.textTertiary
           }],
           children: "Only Show This"
         })]
@@ -450,10 +450,10 @@ function QuickActionsSection({
         activeOpacity: 0.7,
         children: [/*#__PURE__*/_jsx(MinusIcon, {
           size: 14,
-          color: selectedOption ? buoyColors.error : buoyColors.textMuted
+          color: selectedOption ? night.color.danger : night.color.textTertiary
         }), /*#__PURE__*/_jsx(Text, {
           style: [styles.filterActionButtonText, {
-            color: selectedOption ? buoyColors.error : buoyColors.textMuted
+            color: selectedOption ? night.color.danger : night.color.textTertiary
           }],
           children: "Hide This"
         })]
@@ -488,7 +488,8 @@ function FilterOptionCard({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   // Header
   header: {
@@ -519,11 +520,12 @@ const styles = StyleSheet.create({
   componentName: {
     fontSize: 18,
     fontWeight: "700",
-    color: buoyColors.text,
+    color: night.color.text,
     flexShrink: 1
   },
   nativeTypeBadge: {
-    backgroundColor: buoyColors.input,
+    // Inset display chip — the night track color.
+    backgroundColor: night.color.bg,
     paddingVertical: 3,
     paddingHorizontal: 8,
     borderRadius: 4
@@ -531,15 +533,15 @@ const styles = StyleSheet.create({
   nativeTypeText: {
     fontSize: 11,
     fontWeight: "600",
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontFamily: "monospace"
   },
   // Answer Card
   answerCard: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     padding: 12,
     gap: 6
   },
@@ -560,14 +562,15 @@ const styles = StyleSheet.create({
   },
   causeLabel: {
     fontSize: 12,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontWeight: "500"
   },
   hookChangesContainer: {
     gap: 6
   },
   hookDiffContainer: {
-    backgroundColor: buoyColors.input,
+    // Inset code box — the night track color.
+    backgroundColor: night.color.bg,
     borderRadius: 6,
     overflow: "hidden"
   },
@@ -577,14 +580,15 @@ const styles = StyleSheet.create({
     gap: 4
   },
   propChangeChip: {
-    backgroundColor: buoyColors.input,
+    // Inset display chip — the night track color.
+    backgroundColor: night.color.bg,
     paddingVertical: 2,
     paddingHorizontal: 6,
     borderRadius: 4
   },
   propChangeText: {
     fontSize: 11,
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace"
   },
   // Details Section
@@ -592,17 +596,17 @@ const styles = StyleSheet.create({
     gap: 10
   },
   detailsCard: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     padding: 12,
     gap: 6
   },
   detailsCardTitle: {
     fontSize: 10,
     fontWeight: "600",
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     letterSpacing: 0.5,
     textTransform: "uppercase",
     marginBottom: 4
@@ -615,12 +619,12 @@ const styles = StyleSheet.create({
   detailLabel: {
     fontSize: 11,
     fontWeight: "600",
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     minWidth: 55
   },
   detailValue: {
     fontSize: 12,
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
     flex: 1
   },
@@ -629,10 +633,10 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     paddingVertical: 10,
     paddingHorizontal: 16
   },
@@ -643,18 +647,18 @@ const styles = StyleSheet.create({
   statValue: {
     fontSize: 16,
     fontWeight: "700",
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace"
   },
   statLabel: {
     fontSize: 10,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     marginTop: 2
   },
   statDivider: {
     width: 1,
     height: 24,
-    backgroundColor: buoyColors.border,
+    backgroundColor: night.color.border,
     marginHorizontal: 12
   },
   // Measurements Row
@@ -662,10 +666,10 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-around",
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     paddingVertical: 8,
     paddingHorizontal: 12
   },
@@ -677,28 +681,28 @@ const styles = StyleSheet.create({
   measurementLabel: {
     fontSize: 10,
     fontWeight: "600",
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     textTransform: "uppercase"
   },
   measurementValue: {
     fontSize: 12,
     fontWeight: "600",
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace"
   },
   // Quick Actions Section
   quickActionsSection: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     padding: 12,
     gap: 10
   },
   quickActionsTitle: {
     fontSize: 10,
     fontWeight: "600",
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     letterSpacing: 0.5,
     textTransform: "uppercase",
     marginBottom: 2
@@ -709,7 +713,7 @@ const styles = StyleSheet.create({
   filterOptionCard: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: buoyColors.input,
+    backgroundColor: night.color.surfaceElevated,
     borderRadius: 6,
     paddingVertical: 10,
     paddingHorizontal: 12,
@@ -718,26 +722,26 @@ const styles = StyleSheet.create({
     gap: 10
   },
   filterOptionCardSelected: {
-    borderColor: buoyColors.success,
-    backgroundColor: buoyColors.success + "15"
+    borderColor: night.color.accentBorderStrong,
+    backgroundColor: night.color.accentSoft
   },
   filterOptionLabel: {
     fontSize: 10,
     fontWeight: "600",
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     minWidth: 70
   },
   filterOptionLabelSelected: {
-    color: buoyColors.success
+    color: night.color.accent
   },
   filterOptionValue: {
     fontSize: 12,
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
     flex: 1
   },
   filterOptionValueSelected: {
-    color: buoyColors.text
+    color: night.color.text
   },
   filterActionButtons: {
     flexDirection: "row",
@@ -755,16 +759,16 @@ const styles = StyleSheet.create({
     borderWidth: 1
   },
   filterActionButtonInclude: {
-    backgroundColor: buoyColors.success + "15",
-    borderColor: buoyColors.success + "40"
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong
   },
   filterActionButtonExclude: {
-    backgroundColor: buoyColors.error + "15",
-    borderColor: buoyColors.error + "40"
+    backgroundColor: night.color.dangerSoft,
+    borderColor: night.color.danger + "40"
   },
   filterActionButtonDisabled: {
-    backgroundColor: buoyColors.input,
-    borderColor: buoyColors.border,
+    backgroundColor: night.color.surfaceElevated,
+    borderColor: night.color.border,
     opacity: 0.5
   },
   filterActionButtonText: {
@@ -776,21 +780,21 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: buoyColors.warning + "40",
+    borderColor: night.color.warning + "40",
     paddingVertical: 12,
     paddingHorizontal: 16,
     gap: 8
   },
   lockedBannerText: {
-    color: buoyColors.warning,
+    color: night.color.warning,
     fontSize: 13,
     fontWeight: "600"
   },
   lockedBannerSubtext: {
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontSize: 12
   }
 });