From dfd7f994f9044f269463f638754968a2a3ea4f17 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 26 Feb 2024 17:08:33 -0600
Subject: [PATCH] match outline colors to event type

---
 web/src/components/player/LivePlayer.tsx     | 2 +-
 web/src/components/timeline/EventSegment.tsx | 4 ++++
 web/src/views/events/DesktopEventView.tsx    | 2 +-
 web/tailwind.config.js                       | 5 +++++
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 093410de0..0d9925f45 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -126,7 +126,7 @@ export default function LivePlayer({
     <div
       className={`relative flex justify-center w-full outline ${
         activeTracking
-          ? "outline-destructive outline-1 rounded-2xl shadow-[0_0_6px_1px] shadow-destructive"
+          ? "outline-1 rounded-2xl shadow-[0_0_6px_1px]"
           : "outline-0"
       } transition-all duration-500 ${className}`}
     >
diff --git a/web/src/components/timeline/EventSegment.tsx b/web/src/components/timeline/EventSegment.tsx
index 671b66aea..da9b3aa61 100644
--- a/web/src/components/timeline/EventSegment.tsx
+++ b/web/src/components/timeline/EventSegment.tsx
@@ -253,6 +253,10 @@ export function EventSegment({
       );
       if (element instanceof HTMLElement) {
         debounceScrollIntoView(element);
+        element.classList.add(
+          `outline-severity_${severityType}`,
+          `shadow-severity_${severityType}`
+        );
         element.classList.add("outline-4", "shadow-[0_0_6px_1px]");
         element.classList.remove("outline-0", "shadow-none");
 
diff --git a/web/src/views/events/DesktopEventView.tsx b/web/src/views/events/DesktopEventView.tsx
index 87911d7c9..b4741c483 100644
--- a/web/src/views/events/DesktopEventView.tsx
+++ b/web/src/views/events/DesktopEventView.tsx
@@ -276,7 +276,7 @@ export default function DesktopEventView({
                     data-segment-start={
                       alignDateToTimeline(value.start_time) - segmentDuration
                     }
-                    className="outline outline-destructive outline-offset-1 outline-0 rounded-lg shadow-none shadow-destructive transition-all duration-500"
+                    className="outline outline-offset-1 outline-0 rounded-lg shadow-none transition-all duration-500"
                   >
                     <div className="aspect-video rounded-lg overflow-hidden">
                       <PreviewThumbnailPlayer
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index e15ec4dc0..2d0b4b420 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -7,6 +7,11 @@ module.exports = {
     "./app/**/*.{ts,tsx}",
     "./src/**/*.{ts,tsx}",
   ],
+  safelist: [
+    {
+      pattern: /outline-severity_(alert|detection|motion)/,
+    },
+  ],
   theme: {
     container: {
       center: true,