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

@@ -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,

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",
+              "size-3 duration-500",
-              isActive
+              review.severity == "alert"
-                ? "fill-selected text-selected"
+                ? "fill-severity_alert text-severity_alert"
-                : "fill-muted duration-500 dark:fill-secondary-highlight dark:text-secondary-highlight",
+                : "fill-severity_detection text-severity_detection",
             )}
           />
         </div>