match outline colors to event type

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}`}
     >

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");
 

web/src/views/events/DesktopEventView.tsx

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

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,