From 2e288109f44b59e9e7c2c5a97d77b2f05e6d711c Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 4 Nov 2025 08:45:45 -0600
Subject: [PATCH] Review tweaks (#20789)

* use alerts/detections colors for dots and add back blue border

* add alerts/detections colored dot next to event icons

* add margin for border
---
 web/src/components/card/ReviewCard.tsx       | 11 ++++++++++-
 web/src/components/timeline/DetailStream.tsx | 14 +++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/web/src/components/card/ReviewCard.tsx b/web/src/components/card/ReviewCard.tsx
index b8b8ffa1a..6337ac4a9 100644
--- a/web/src/components/card/ReviewCard.tsx
+++ b/web/src/components/card/ReviewCard.tsx
@@ -37,6 +37,7 @@ import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { Button, buttonVariants } from "../ui/button";
 import { Trans, useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
+import { LuCircle } from "react-icons/lu";
 
 type ReviewCardProps = {
   event: ReviewSegment;
@@ -142,7 +143,7 @@ export default function ReviewCard({
         className={cn(
           "size-full rounded-lg",
           activeReviewItem?.id == event.id &&
-            "outline outline-[3px] outline-offset-1 outline-selected",
+            "outline outline-[3px] -outline-offset-[2.8px] outline-selected duration-200",
           imgLoaded ? "visible" : "invisible",
         )}
         src={`${baseUrl}${event.thumb_path.replace("/media/frigate/", "")}`}
@@ -165,6 +166,14 @@ export default function ReviewCard({
           <TooltipTrigger asChild>
             <div className="flex items-center justify-evenly gap-1">
               <>
+                <LuCircle
+                  className={cn(
+                    "size-2",
+                    event.severity == "alert"
+                      ? "fill-severity_alert text-severity_alert"
+                      : "fill-severity_detection text-severity_detection",
+                  )}
+                />
                 {event.data.objects.map((object) => {
                   return getIconForLabel(
                     object,
diff --git a/web/src/components/timeline/DetailStream.tsx b/web/src/components/timeline/DetailStream.tsx
index e8d609cdb..706c6c5b4 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={`mx-1 cursor-pointer rounded-lg bg-secondary px-0 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>