From 98977f1dedf3bf159fdc47ebad8191ffa2b80390 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 14 Mar 2024 10:35:13 -0500
Subject: [PATCH] dim motion segments for motion during alerts and detections
 (#10454)

---
 web/src/components/timeline/MotionSegment.tsx | 4 ++--
 web/tailwind.config.js                        | 1 +
 web/themes/theme-default.css                  | 3 +++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/web/src/components/timeline/MotionSegment.tsx b/web/src/components/timeline/MotionSegment.tsx
index 19bf7a543..0ebcffd68 100644
--- a/web/src/components/timeline/MotionSegment.tsx
+++ b/web/src/components/timeline/MotionSegment.tsx
@@ -223,7 +223,7 @@ export function MotionSegment({
           <div className="flex justify-center">
             <div
               key={`${segmentKey}_motion_data_1`}
-              className={`h-[2px] rounded-full bg-motion_review`}
+              className={`h-[2px] rounded-full ${severity[0] != 0 ? "bg-motion_review-dimmed" : "bg-motion_review"}`}
               style={{
                 width: secondHalfSegmentWidth,
               }}
@@ -235,7 +235,7 @@ export function MotionSegment({
           <div className="flex justify-center">
             <div
               key={`${segmentKey}_motion_data_2`}
-              className={`h-[2px] rounded-full bg-motion_review`}
+              className={`h-[2px] rounded-full ${severity[0] != 0 ? "bg-motion_review-dimmed" : "bg-motion_review"}`}
               style={{
                 width: firstHalfSegmentWidth,
               }}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index d4078c18e..58ce1b5fe 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -93,6 +93,7 @@ module.exports = {
         },
         motion_review: {
           DEFAULT: "hsl(var(--motion_review))",
+          dimmed: "hsl(var(--motion_review_dimmed))",
         },
         audio_review: {
           DEFAULT: "hsl(var(--audio_review))",
diff --git a/web/themes/theme-default.css b/web/themes/theme-default.css
index 83f40870f..96c0603ac 100644
--- a/web/themes/theme-default.css
+++ b/web/themes/theme-default.css
@@ -77,6 +77,9 @@
     --motion_review: hsl(44, 94%, 50%);
     --motion_review: 44, 94%, 50%;
 
+    --motion_review_dimmed: hsl(44, 60%, 40%);
+    --motion_review_dimmed: 44, 60%, 40%;
+
     --audio_review: hsl(228, 94%, 67%);
     --audio_review: 228, 94%, 67%;
   }