From 3a3c4124f461d9cac2898fe61f6bb03945897e96 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 4 Nov 2025 07:52:39 -0600
Subject: [PATCH] use alerts/detections colors for dots and add back blue
 border

---
 web/src/components/timeline/DetailStream.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/src/components/timeline/DetailStream.tsx b/web/src/components/timeline/DetailStream.tsx
index e8d609cdb..d0f2cc002 100644
--- a/web/src/components/timeline/DetailStream.tsx
+++ b/web/src/components/timeline/DetailStream.tsx
@@ -367,7 +367,11 @@ function ReviewGroup({
   return (
     <div
       data-review-id={id}
-      className="cursor-pointer rounded-lg bg-secondary py-3"
+      className={`cursor-pointer rounded-lg bg-secondary px-1 py-3 outline outline-[2px] -outline-offset-[1.8px] ${
+        isActive
+          ? "shadow-selected outline-selected"
+          : "outline-transparent duration-500"
+      }`}
     >
       <div
         className={cn(
@@ -382,10 +386,10 @@ function ReviewGroup({
         <div className="ml-4 mr-2 mt-1.5 flex flex-row items-start">
           <LuCircle
             className={cn(
-              "size-3",
-              isActive
-                ? "fill-selected text-selected"
-                : "fill-muted duration-500 dark:fill-secondary-highlight dark:text-secondary-highlight",
+              "size-3 duration-500",
+              review.severity == "alert"
+                ? "fill-severity_alert text-severity_alert"
+                : "fill-severity_detection text-severity_detection",
             )}
           />
         </div>