From 55018372d42ca9244290004ecdb194270ec9ccf2 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 8 Apr 2024 11:34:15 -0500
Subject: [PATCH] Fix button color dark mode logic (#10884)

* fix button color dark mode logic

* make calendar use active color when not default
---
 .../components/filter/ReviewFilterGroup.tsx   | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index 5baece1f9..6900f368d 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -229,7 +229,9 @@ function CamerasFilterButton({
       <FaVideo
         className={`${selectedCameras?.length ? "text-primary dark:text-primary-foreground" : "text-secondary-foreground"}`}
       />
-      <div className="hidden md:block text-primary-foreground">
+      <div
+        className={`hidden md:block ${selectedCameras?.length ? "text-primary dark:text-primary-foreground" : "text-primary-foreground"}`}
+      >
         {selectedCameras == undefined
           ? "All Cameras"
           : `${selectedCameras.includes("birdseye") ? selectedCameras.length - 1 : selectedCameras.length} Camera${selectedCameras.length !== 1 ? "s" : ""}`}
@@ -391,13 +393,13 @@ function ShowReviewFilter({
       </div>
 
       <Button
-        className={`block md:hidden ${showReviewedSwitch == 0 ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
+        className={`block md:hidden duration-0 ${showReviewedSwitch == 1 ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
         size="sm"
         variant="secondary"
         onClick={() => setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)}
       >
         <FaCheckCircle
-          className={`${showReviewedSwitch == 0 ? "fill-primary-foreground" : "text-muted-foreground"}`}
+          className={`${showReviewedSwitch == 1 ? "fill-primary dark:fill-primary-foreground" : "text-muted-foreground"}`}
         />
       </Button>
     </>
@@ -420,9 +422,17 @@ function CalendarFilterButton({
   );
 
   const trigger = (
-    <Button size="sm" className="flex items-center gap-2" variant="secondary">
-      <FaCalendarAlt className="text-secondary-foreground" />
-      <div className="hidden md:block text-primary-foreground">
+    <Button
+      size="sm"
+      className={`flex items-center gap-2 ${day == undefined ? "bg-secondary hover:bg-secondary/80" : "bg-selected hover:bg-selected"}`}
+      variant="secondary"
+    >
+      <FaCalendarAlt
+        className={`${day == undefined ? "text-secondary-foreground" : "text-primary dark:text-primary-foreground"}`}
+      />
+      <div
+        className={`hidden md:block ${day == undefined ? "text-primary-foreground" : "text-primary dark:text-primary-foreground"}`}
+      >
         {day == undefined ? "Last 24 Hours" : selectedDate}
       </div>
     </Button>
@@ -673,11 +683,11 @@ function ShowMotionOnlyButton({
         <Button
           size="sm"
           variant="secondary"
-          className={`${motionOnlyButton ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
+          className={`duration-0 ${motionOnlyButton ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
           onClick={() => setMotionOnlyButton(!motionOnlyButton)}
         >
           <FaRunning
-            className={`${motionOnlyButton ? "fill-primary-foreground" : "text-muted-foreground"}`}
+            className={`${motionOnlyButton ? "fill-primary dark:fill-primary-foreground" : "text-muted-foreground"}`}
           />
         </Button>
       </div>