@buoy-gg/storage 7.0.3 → 7.0.5

package/lib/module/storage/components/StorageActions.js

@@ -3,7 +3,7 @@
 import { View, Text, TouchableOpacity, StyleSheet, Alert } from "react-native";
 import { useState, useCallback, useEffect } from "react";
 import { clearAllStorageIncludingDevTools } from "../utils/clearAllStorage";
-import { RefreshCw, Trash2, CopyButton, ProUpgradeModal } from "@buoy-gg/shared-ui";
+import { RefreshCw, Trash2, CopyButton, ProUpgradeModal, buoyColors } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 export function StorageActions({
@@ -89,7 +89,7 @@ export function StorageActions({
         accessibilityLabel: "Refresh storage",
         children: /*#__PURE__*/_jsx(RefreshCw, {
           size: 16,
-          color: isRefreshing ? "#10B981" : "#9CA3AF"
+          color: isRefreshing ? "#10B981" : buoyColors.textSecondary
         })
       }), /*#__PURE__*/_jsx(CopyButton, {
         value: storageKeys,
@@ -125,11 +125,11 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     paddingHorizontal: 12,
     paddingVertical: 8,
-    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    backgroundColor: "rgba(128, 128, 128, 0.06)",
     borderRadius: 8,
     marginBottom: 12,
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.08)"
+    borderColor: "rgba(128, 128, 128, 0.16)"
   },
   leftSection: {
     flexDirection: "row",
@@ -137,7 +137,7 @@ const styles = StyleSheet.create({
     gap: 8
   },
   keyCount: {
-    color: "#9CA3AF",
+    color: buoyColors.textSecondary,
     fontSize: 12,
     fontWeight: "500"
   },
@@ -161,9 +161,9 @@ const styles = StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 6,
-    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    backgroundColor: "rgba(128, 128, 128, 0.06)",
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.08)",
+    borderColor: "rgba(128, 128, 128, 0.16)",
     alignItems: "center",
     justifyContent: "center"
   },

package/lib/module/storage/components/StorageBrowserMode.js

@@ -15,10 +15,17 @@ export function StorageBrowserMode({
   searchQuery = "",
   storageDataRef,
   eventCountByKey,
+  lastWriteByKey,
   onViewHistory,
   enabledStorageTypes,
+  statusFilter,
+  onStatusFilterChange,
+  onStatusCountsChange,
   pinnedKeys,
-  onTogglePin
+  onTogglePin,
+  applySafeAreaInset,
+  storageTypeFilter,
+  onStorageTypeFilterChange
 }) {
   return /*#__PURE__*/_jsx(GameUIStorageBrowser, {
     requiredStorageKeys: requiredStorageKeys,
@@ -29,9 +36,16 @@ export function StorageBrowserMode({
     searchQuery: searchQuery,
     storageDataRef: storageDataRef,
     eventCountByKey: eventCountByKey,
+    lastWriteByKey: lastWriteByKey,
     onViewHistory: onViewHistory,
     enabledStorageTypes: enabledStorageTypes,
+    statusFilter: statusFilter,
+    onStatusFilterChange: onStatusFilterChange,
+    onStatusCountsChange: onStatusCountsChange,
     pinnedKeys: pinnedKeys,
-    onTogglePin: onTogglePin
+    onTogglePin: onTogglePin,
+    applySafeAreaInset: applySafeAreaInset,
+    storageTypeFilter: storageTypeFilter,
+    onStorageTypeFilterChange: onStorageTypeFilterChange
   });
 }

package/lib/module/storage/components/StorageEventDetailContent.js

@@ -9,9 +9,9 @@
 import { View, Text, StyleSheet } from "react-native";
 import { useState, useCallback, useMemo, useEffect, useRef } from "react";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { formatRelativeTime, macOSColors, buoyColors, parseValue, devToolsStorageKeys, Database, GitBranch, EventStepperFooter, EventHistoryViewer, copyToClipboard, ProUpgradeModal } from "@buoy-gg/shared-ui";
+import { formatRelativeTime, macOSColors, buoyColors, parseValue, devToolsStorageKeys, GitBranch, EventStepperFooter, EventHistoryViewer, copyToClipboard, ProUpgradeModal } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
-import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+import { ABSENT_VALUE } from "../utils/lineDiff";
 import { ThemedSplitView } from "./DiffViewer/modes/ThemedSplitView";
 import { diffThemes } from "./DiffViewer/themes/diffThemes";
 import { TreeDiffViewer } from "./DiffViewer/TreeDiffViewer";
@@ -19,8 +19,40 @@ import { translateStorageAction } from "../utils/storageActionHelpers";
 import { StorageEventActionButton } from "./StorageEventActionButton";
 import { undoOperation, jumpToState, canUndo } from "../utils/storageTimeTravelUtils";
 
-// Unified storage event type (supports both AsyncStorage and MMKV)
+/**
+ * Compare-bar index for "the state before the oldest event".
+ *
+ * Not an event — it's reconstructed from that event's own `prevValue`, which
+ * every write records. Without it a key's first event had nothing to diff
+ * against and both panes showed the same value.
+ */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ORIGIN_INDEX = -1;
+
+/** Compare-bar copy for each origin state. Kept in sync with the Flutter port. */
+const ORIGIN_LABELS = {
+  prior: {
+    label: "BEFORE #1",
+    timestamp: "value before first event",
+    relativeTime: "not captured",
+    badge: "PRIOR"
+  },
+  absent: {
+    label: "NO PRIOR VALUE",
+    timestamp: "key did not exist",
+    relativeTime: "created here",
+    badge: "ABSENT"
+  },
+  scanned: {
+    label: "ALREADY PRESENT",
+    timestamp: "value found at startup",
+    relativeTime: "not a write",
+    badge: "SCANNED"
+  }
+};
+
+// Unified storage event type (supports both AsyncStorage and MMKV)
+
 /**
  * Get color for storage action
  */
@@ -80,12 +112,16 @@ export function StorageEventDetailContent({
   const isPro = useIsPro();
   const [showProModal, setShowProModal] = useState(false);
 
-  // View state
-  const [activeView, setActiveView] = useState("current");
-  const [diffMode, setDiffMode] = useState("tree");
+  // There is only the diff view now. The current stored value is what the Keys
+  // table shows — repeating it behind a toggle here meant two places to look for
+  // one fact, and the toggle was the first thing between you and the diff you
+  // opened this screen for.
+  const [diffMode, setDiffMode] = useState("split");
 
   // Compare indices for diff view
-  const [leftIndex, setLeftIndex] = useState(Math.max(0, selectedEventIndex - 1));
+  // Matches what the sync effect below computes, so the first frame doesn't
+  // briefly pair the oldest event with itself.
+  const [leftIndex, setLeftIndex] = useState(Math.max(ORIGIN_INDEX, selectedEventIndex - 1));
   const [rightIndex, setRightIndex] = useState(selectedEventIndex);
 
   // Track if preferences have been loaded
@@ -100,10 +136,6 @@ export function StorageEventDetailContent({
     if (hasLoadedPreferences.current) return;
     const loadPreferences = async () => {
       try {
-        const savedDetailView = await AsyncStorage.getItem(devToolsStorageKeys.storage.detailView());
-        if (savedDetailView === "current" || savedDetailView === "diff") {
-          setActiveView(savedDetailView);
-        }
         const savedDiffMode = await AsyncStorage.getItem(devToolsStorageKeys.storage.diffViewerMode());
         if (savedDiffMode === "split" || savedDiffMode === "tree") {
           setDiffMode(savedDiffMode);
@@ -116,24 +148,15 @@ export function StorageEventDetailContent({
     loadPreferences();
   }, []);
 
-  // Keep compare indices synced to selection
+  // Keep compare indices synced to selection. Left may land on ORIGIN_INDEX,
+  // which is not an event — it's the state the oldest event overwrote.
   useEffect(() => {
     const newRight = Math.min(totalEvents - 1, Math.max(0, selectedEventIndex));
-    const newLeft = Math.max(0, Math.min(newRight - 1, selectedEventIndex - 1));
+    const newLeft = Math.max(ORIGIN_INDEX, Math.min(newRight - 1, selectedEventIndex - 1));
     setLeftIndex(newLeft);
     setRightIndex(newRight);
   }, [selectedEventIndex, totalEvents]);
 
-  // Save view preference when changed
-  const handleViewChange = useCallback(async view => {
-    setActiveView(view);
-    try {
-      await AsyncStorage.setItem(devToolsStorageKeys.storage.detailView(), view);
-    } catch {
-      // Failed to save preference
-    }
-  }, []);
-
   // Save diff mode preference when changed
   const handleDiffModeChange = useCallback(async mode => {
     setDiffMode(mode);
@@ -146,18 +169,53 @@ export function StorageEventDetailContent({
 
   // Get current event
   const selectedEvent = navigationItems[selectedEventIndex];
-  const valueToShow = selectedEvent?.data?.value ?? conversation.currentValue;
   const action = selectedEvent?.action;
   // Compute type from the parsed value so it matches what we actually render
-  const valueType = getValueType(parseValue(valueToShow));
-  const actionColor = getActionColor(action || "");
 
-  // Get events for diff comparison
-  const leftEvent = navigationItems[Math.max(0, Math.min(totalEvents - 1, leftIndex))];
+  // Get events for diff comparison. leftIndex === ORIGIN_INDEX means "the state
+  // before the oldest event", which has no event object of its own.
+  const isOriginLeft = leftIndex === ORIGIN_INDEX;
+  const leftEvent = isOriginLeft ? undefined : navigationItems[Math.max(0, Math.min(totalEvents - 1, leftIndex))];
   const rightEvent = navigationItems[Math.max(0, Math.min(totalEvents - 1, rightIndex))];
 
+  // Every write records the value it overwrote (for time travel), so even the
+  // very first event can be diffed against what was actually there. Three
+  // distinct origins, and conflating them would misinform:
+  //   PRIOR   — the write replaced a real value (including `[]`, `""`, `null`)
+  //   ABSENT  — the write created the key; there was nothing before it
+  //   SCANNED — not a write at all, just the startup snapshot of a key that
+  //             already existed, so nothing changed at this event
+  const originKind = useMemo(() => {
+    const data = rightEvent?.data;
+    if (data?.initialScan) return "scanned";
+    return data?.prevValue === null || data?.prevValue === undefined ? "absent" : "prior";
+  }, [rightEvent]);
+  const originValue = useMemo(() => {
+    if (originKind === "absent") return ABSENT_VALUE;
+    // A scanned key was already holding the event's own value, so diffing
+    // against it correctly reports no change.
+    if (originKind === "scanned") return parseValue(rightEvent?.data?.value);
+    return parseValue(rightEvent?.data?.prevValue);
+  }, [originKind, rightEvent]);
+
   // Create event display info for compare bar
-  const leftEventInfo = useMemo(() => ({
+  const leftEventInfo = useMemo(() => isOriginLeft ? {
+    index: ORIGIN_INDEX,
+    label: ORIGIN_LABELS[originKind].label,
+    timestamp: ORIGIN_LABELS[originKind].timestamp,
+    relativeTime: ORIGIN_LABELS[originKind].relativeTime,
+    badge: /*#__PURE__*/_jsx(View, {
+      style: [styles.actionBadgeSmall, {
+        backgroundColor: `${macOSColors.text.muted}20`
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.actionTextSmall, {
+          color: macOSColors.text.muted
+        }],
+        children: ORIGIN_LABELS[originKind].badge
+      })
+    })
+  } : {
     index: leftIndex,
     label: `#${leftIndex + 1} / ${totalEvents}`,
     timestamp: leftEvent ? formatTimeWithMs(leftEvent.timestamp) : "",
@@ -173,7 +231,7 @@ export function StorageEventDetailContent({
         children: translateStorageAction(leftEvent.action)
       })
     }) : undefined
-  }), [leftIndex, leftEvent, totalEvents]);
+  }, [leftIndex, leftEvent, totalEvents, isOriginLeft, originKind]);
   const rightEventInfo = useMemo(() => ({
     index: rightIndex,
     label: `#${rightIndex + 1} / ${totalEvents}`,
@@ -203,7 +261,8 @@ export function StorageEventDetailContent({
 
   // Navigation handlers for compare bar
   const handleLeftPrevious = useCallback(() => {
-    if (leftIndex > 0) {
+    // Stops at ORIGIN_INDEX — one step past event #1 is the state it overwrote.
+    if (leftIndex > ORIGIN_INDEX) {
       setLeftIndex(leftIndex - 1);
     }
   }, [leftIndex]);
@@ -223,54 +282,11 @@ export function StorageEventDetailContent({
     }
   }, [rightIndex, totalEvents]);
 
-  // Render current value view
-  const renderCurrentView = useCallback(() => {
-    const parsed = parseValue(valueToShow);
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.contentCard,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.valueHeader,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.valueLabel,
-          children: "CURRENT VALUE"
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.valueHeaderBadges,
-          children: [action ? /*#__PURE__*/_jsx(View, {
-            style: [styles.actionBadge, {
-              backgroundColor: `${actionColor}20`
-            }],
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.actionText, {
-                color: actionColor
-              }],
-              children: translateStorageAction(action)
-            })
-          }) : null, /*#__PURE__*/_jsx(View, {
-            style: styles.typeBadge,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.typeText,
-              children: valueType.toUpperCase()
-            })
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.dataViewerContainer,
-        children: /*#__PURE__*/_jsx(DataViewer, {
-          title: "",
-          data: parsed,
-          showTypeFilter: true,
-          rawMode: true,
-          initialExpanded: true
-        })
-      })]
-    });
-  }, [valueToShow, action, actionColor, valueType]);
-
   // Memoized so the diff viewers don't see new oldValue/newValue refs on every
   // re-render. parseValue runs JSON.parse, which would otherwise produce fresh
   // object identities every time and force expensive recomputations downstream
   // (line diff, tree diff, expansion-state effects, etc.).
-  const previousValue = useMemo(() => parseValue(leftEvent?.data?.value ?? null), [leftEvent]);
+  const previousValue = useMemo(() => isOriginLeft ? originValue : parseValue(leftEvent?.data?.value ?? null), [isOriginLeft, originValue, leftEvent]);
   const currentValue = useMemo(() => parseValue(rightEvent?.data?.value), [rightEvent]);
 
   // Render diff content
@@ -282,12 +298,17 @@ export function StorageEventDetailContent({
         differences: SPLIT_VIEW_DIFFERENCES,
         theme: diffThemes.devToolsDefault,
         options: SPLIT_VIEW_OPTIONS,
-        showThemeName: false
+        showThemeName: false,
+        scrollEnabled: false
       });
     }
+
+    // Inline: the whole diff section scrolls as one page (see
+    // `scrollDiffSection` below), so the tree must not scroll itself.
     return /*#__PURE__*/_jsx(TreeDiffViewer, {
       oldValue: previousValue,
-      newValue: currentValue
+      newValue: currentValue,
+      scrollEnabled: false
     });
   }, [previousValue, currentValue, diffMode]);
 
@@ -360,25 +381,23 @@ export function StorageEventDetailContent({
         onPress: handleCopy
       })]
     }), /*#__PURE__*/_jsx(EventHistoryViewer
-    // View Toggle
+    // Diff only: no `renderCurrentView`, so the viewer drops the toggle
+    // cards entirely rather than showing a one-option switch.
     , {
-      activeView: activeView,
-      onViewChange: handleViewChange,
-      currentViewLabel: "CURRENT VALUE",
-      currentViewDescription: "View the current stored value",
-      currentViewIcon: Database,
+      activeView: "diff",
       diffViewLabel: "DIFF VIEW",
       diffViewDescription: "Compare changes between versions",
       diffViewIcon: GitBranch
-      // Current View
-      ,
-      renderCurrentView: renderCurrentView
       // Diff View
       ,
       diffModeTabs: diffModeTabs,
       activeDiffMode: diffMode,
       onDiffModeChange: handleDiffModeChange,
       renderDiffContent: renderDiffContent
+      // Both diff modes render inline now, so the whole section scrolls as
+      // one page rather than confining the rows to a nested pane.
+      ,
+      scrollDiffSection: true
       // Compare Bar
       ,
       leftEvent: leftEventInfo,
@@ -388,7 +407,7 @@ export function StorageEventDetailContent({
       onLeftNext: handleLeftNext,
       onRightPrevious: handleRightPrevious,
       onRightNext: handleRightNext,
-      canLeftPrevious: leftIndex > 0,
+      canLeftPrevious: leftIndex > ORIGIN_INDEX,
       canLeftNext: leftIndex < rightIndex - 1,
       canRightPrevious: rightIndex > leftIndex + 1,
       canRightNext: rightIndex < totalEvents - 1
@@ -415,7 +434,8 @@ export function StorageEventDetailContent({
 export function StorageEventDetailFooter({
   conversation,
   selectedEventIndex = 0,
-  onEventIndexChange = () => {}
+  onEventIndexChange = () => {},
+  applySafeAreaInset = true
 }) {
   const navigationItems = conversation.events.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
   const totalEvents = navigationItems.length;
@@ -425,7 +445,8 @@ export function StorageEventDetailFooter({
     onPrevious: () => onEventIndexChange(Math.max(0, selectedEventIndex - 1)),
     onNext: () => onEventIndexChange(Math.min(totalEvents - 1, selectedEventIndex + 1)),
     itemLabel: "Event",
-    subtitle: formatRelativeTime(navigationItems[selectedEventIndex]?.timestamp)
+    subtitle: formatRelativeTime(navigationItems[selectedEventIndex]?.timestamp),
+    applySafeAreaInset: applySafeAreaInset
   });
 }
 const styles = StyleSheet.create({
@@ -442,63 +463,6 @@ const styles = StyleSheet.create({
     borderBottomColor: buoyColors.border
   },
   // Content Card
-  contentCard: {
-    backgroundColor: macOSColors.background.card,
-    borderRadius: 14,
-    padding: 14,
-    borderWidth: 1,
-    borderColor: macOSColors.border.default,
-    shadowColor: macOSColors.semantic.info,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.04,
-    shadowRadius: 16,
-    elevation: 2
-  },
-  valueHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 8
-  },
-  valueLabel: {
-    fontSize: 10,
-    color: macOSColors.text.secondary,
-    fontFamily: "monospace",
-    letterSpacing: 0.5,
-    fontWeight: "600",
-    textTransform: "uppercase"
-  },
-  valueHeaderBadges: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  actionBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 4
-  },
-  actionText: {
-    fontSize: 9,
-    fontWeight: "700",
-    fontFamily: "monospace",
-    letterSpacing: 0.3
-  },
-  typeBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 4,
-    backgroundColor: macOSColors.background.input
-  },
-  typeText: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: macOSColors.text.muted,
-    fontFamily: "monospace"
-  },
   valueBox: {
     backgroundColor: macOSColors.background.base,
     borderRadius: 6,
@@ -522,10 +486,5 @@ const styles = StyleSheet.create({
     fontSize: 8,
     fontWeight: "700",
     fontFamily: "monospace"
-  },
-  dataViewerContainer: {
-    marginTop: -12,
-    marginHorizontal: -12,
-    marginBottom: -12
   }
 });

package/lib/module/storage/components/StorageEventListener.js

@@ -2,7 +2,7 @@
 
 import { useEffect, useState, useCallback } from "react";
 import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
-import { Play, Pause, Trash2 } from "@buoy-gg/shared-ui";
+import { Play, Pause, Trash2, macOSColors, buoyColors } from "@buoy-gg/shared-ui";
 import { startListening, stopListening, addListener, isListening as checkIsListening } from "../utils/AsyncStorageListener";
 import { translateStorageAction } from "../utils/storageActionHelpers";
 import { isMMKVAvailable } from "../utils/mmkvAvailability";
@@ -149,7 +149,7 @@ export function StorageEventListener() {
         return "#3B82F6";
       // Blue for merge
       default:
-        return "#6B7280";
+        return macOSColors.text.icon;
     }
   };
   if (!isAsyncStorageAvailable) {
@@ -195,7 +195,7 @@ export function StorageEventListener() {
           disabled: events.length === 0,
           children: /*#__PURE__*/_jsx(Trash2, {
             size: 14,
-            color: events.length > 0 ? "#6B7280" : "#374151"
+            color: events.length > 0 ? macOSColors.text.icon : macOSColors.border.toggle
           })
         })]
       })]
@@ -238,10 +238,10 @@ export function StorageEventListener() {
 }
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    backgroundColor: "rgba(128, 128, 128, 0.06)",
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.08)",
+    borderColor: "rgba(128, 128, 128, 0.16)",
     marginBottom: 12,
     maxHeight: 200
   },
@@ -252,7 +252,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 8,
     borderBottomWidth: 1,
-    borderBottomColor: "rgba(255, 255, 255, 0.06)"
+    borderBottomColor: "rgba(128, 128, 128, 0.12)"
   },
   headerLeft: {
     flexDirection: "row",
@@ -262,7 +262,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 12,
     fontWeight: "500",
-    color: "#9CA3AF",
+    color: buoyColors.textSecondary,
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
@@ -277,7 +277,7 @@ const styles = StyleSheet.create({
   },
   statsText: {
     fontSize: 11,
-    color: "#6B7280",
+    color: macOSColors.text.icon,
     fontWeight: "500"
   },
   listeningIndicator: {
@@ -295,9 +295,9 @@ const styles = StyleSheet.create({
     width: 28,
     height: 28,
     borderRadius: 6,
-    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    backgroundColor: "rgba(128, 128, 128, 0.06)",
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.08)",
+    borderColor: "rgba(128, 128, 128, 0.16)",
     alignItems: "center",
     justifyContent: "center"
   },
@@ -318,7 +318,7 @@ const styles = StyleSheet.create({
   },
   emptyText: {
     fontSize: 11,
-    color: "#6B7280",
+    color: macOSColors.text.icon,
     fontStyle: "italic"
   },
   eventItem: {
@@ -328,7 +328,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 6,
     borderBottomWidth: 1,
-    borderBottomColor: "rgba(255, 255, 255, 0.03)"
+    borderBottomColor: "rgba(128, 128, 128, 0.06)"
   },
   eventLeft: {
     flex: 1,
@@ -344,11 +344,11 @@ const styles = StyleSheet.create({
   },
   eventData: {
     fontSize: 11,
-    color: "#9CA3AF",
+    color: buoyColors.textSecondary,
     flex: 1
   },
   eventTime: {
     fontSize: 10,
-    color: "#6B7280"
+    color: macOSColors.text.icon
   }
 });