From eb2a28692010c8200d62b8d9b416e61a1f31882c Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 15 Oct 2024 22:09:15 -0500
Subject: [PATCH] select/unselect style for more filters button

---
 .../overlay/dialog/SearchFilterDialog.tsx     | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/web/src/components/overlay/dialog/SearchFilterDialog.tsx b/web/src/components/overlay/dialog/SearchFilterDialog.tsx
index 3721fd2a1..1b960271d 100644
--- a/web/src/components/overlay/dialog/SearchFilterDialog.tsx
+++ b/web/src/components/overlay/dialog/SearchFilterDialog.tsx
@@ -51,9 +51,27 @@ export default function SearchFilterDialog({
 
   const [open, setOpen] = useState(false);
 
+  const moreFiltersSelected = useMemo(
+    () =>
+      currentFilter &&
+      (currentFilter.time_range ||
+        (currentFilter.zones?.length ?? 0) > 0 ||
+        (currentFilter.sub_labels?.length ?? 0) > 0 ||
+        (currentFilter.search_type?.length ?? 2) !== 2),
+    [currentFilter],
+  );
+
   const trigger = (
-    <Button className="flex items-center gap-2" size="sm">
-      <FaCog className={"text-secondary-foreground"} />
+    <Button
+      className="flex items-center gap-2"
+      size="sm"
+      variant={moreFiltersSelected ? "select" : "default"}
+    >
+      <FaCog
+        className={cn(
+          moreFiltersSelected ? "text-white" : "text-secondary-foreground",
+        )}
+      />
       More Filters
     </Button>
   );