From 4b34b93c19b8359b1fb5da046b7a84ec65b1c7a9 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 9 Apr 2024 15:28:42 -0500
Subject: [PATCH] change filters button to bg-selected when filtering

---
 .../components/filter/ReviewFilterGroup.tsx   | 29 ++++++++++++++-----
 .../overlay/MobileReviewSettingsDrawer.tsx    | 18 ++++++++----
 web/src/components/player/VideoControls.tsx   |  2 +-
 3 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index 8d7952948..030fd1ecf 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -226,9 +226,11 @@ function CamerasFilterButton({
       size="sm"
     >
       <FaVideo
-        className={`${selectedCameras?.length ? "text-primary" : "text-secondary-foreground"}`}
+        className={`${selectedCameras?.length ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
       />
-      <div className="hidden md:block text-primary">
+      <div
+        className={`hidden md:block ${selectedCameras?.length ? "text-background dark:text-primary" : "text-primary"}`}
+      >
         {selectedCameras == undefined
           ? "All Cameras"
           : `${selectedCameras.includes("birdseye") ? selectedCameras.length - 1 : selectedCameras.length} Camera${selectedCameras.length !== 1 ? "s" : ""}`}
@@ -394,7 +396,7 @@ function ShowReviewFilter({
         onClick={() => setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)}
       >
         <FaCheckCircle
-          className={`${showReviewedSwitch == 1 ? "fill-primary" : "text-muted-foreground"}`}
+          className={`${showReviewedSwitch == 1 ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
         />
       </Button>
     </>
@@ -422,9 +424,11 @@ function CalendarFilterButton({
       className={`flex items-center gap-2 ${day == undefined ? "bg-secondary hover:bg-secondary/80" : "bg-selected hover:bg-selected"}`}
     >
       <FaCalendarAlt
-        className={`${day == undefined ? "text-secondary-foreground" : "text-primary"}`}
+        className={`${day == undefined ? "text-secondary-foreground" : "text-background dark:text-primary"}`}
       />
-      <div className="hidden md:block text-primary">
+      <div
+        className={`hidden md:block ${day == undefined ? "text-primary" : "text-background dark:text-primary"}`}
+      >
         {day == undefined ? "Last 24 Hours" : selectedDate}
       </div>
     </Button>
@@ -482,9 +486,18 @@ function GeneralFilterButton({
   );
 
   const trigger = (
-    <Button size="sm" className="flex items-center gap-2">
-      <FaFilter className="text-secondary-foreground" />
-      <div className="hidden md:block text-primary">Filter</div>
+    <Button
+      size="sm"
+      className={`flex items-center gap-2 capitalize ${selectedLabels?.length ? "bg-selected hover:bg-selected" : ""}`}
+    >
+      <FaFilter
+        className={`${selectedLabels?.length ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+      />
+      <div
+        className={`hidden md:block ${selectedLabels?.length ? "text-background dark:text-primary" : "text-primary"}`}
+      >
+        Filter
+      </div>
     </Button>
   );
   const content = (
diff --git a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
index 02b06253f..e650f583d 100644
--- a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
+++ b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@@ -146,19 +146,23 @@ export default function MobileReviewSettingsDrawer({
         )}
         {features.includes("calendar") && (
           <Button
-            className="w-full flex justify-center items-center gap-2"
+            className={`w-full flex justify-center items-center gap-2 ${filter?.after ? "bg-selected text-background dark:text-primary" : ""}`}
             onClick={() => setDrawerMode("calendar")}
           >
-            <FaCalendarAlt className="fill-secondary-foreground" />
+            <FaCalendarAlt
+              className={`${filter?.after ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+            />
             Calendar
           </Button>
         )}
         {features.includes("filter") && (
           <Button
-            className="w-full flex justify-center items-center gap-2"
+            className={`w-full flex justify-center items-center gap-2 ${filter?.labels ? "bg-selected text-background dark:text-primary" : ""}`}
             onClick={() => setDrawerMode("filter")}
           >
-            <FaFilter className="fill-secondary-foreground" />
+            <FaFilter
+              className={`${filter?.labels ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+            />
             Filter
           </Button>
         )}
@@ -279,11 +283,13 @@ export default function MobileReviewSettingsDrawer({
       >
         <DrawerTrigger asChild>
           <Button
-            className="rounded-lg capitalize"
+            className={`rounded-lg capitalize ${filter?.labels || filter?.after ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
             size="sm"
             onClick={() => setDrawerMode("select")}
           >
-            <FaCog className="text-secondary-foreground" />
+            <FaCog
+              className={`${filter?.labels || filter?.after ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
+            />
           </Button>
         </DrawerTrigger>
         <DrawerContent className="max-h-[80dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-1 rounded-t-2xl">
diff --git a/web/src/components/player/VideoControls.tsx b/web/src/components/player/VideoControls.tsx
index cbbabed4f..153cd59f5 100644
--- a/web/src/components/player/VideoControls.tsx
+++ b/web/src/components/player/VideoControls.tsx
@@ -142,7 +142,7 @@ export default function VideoControls({
 
   return (
     <div
-      className={`px-4 py-2 flex justify-between items-center gap-8 text-primary z-50 bg-secondary-foreground/60 rounded-lg ${className ?? ""}`}
+      className={`px-4 py-2 flex justify-between items-center gap-8 text-primary z-50 bg-background/60 rounded-lg ${className ?? ""}`}
     >
       {video && features.volume && (
         <div className="flex justify-normal items-center gap-2">