From bb359f67a4ffe5de9a25b098a5d1fd3f1de3c0d2 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 11 Jun 2024 09:46:05 -0500
Subject: [PATCH] Review UI improvements (#11882)

---
 web/src/components/filter/ReviewFilterGroup.tsx      | 11 +++++++----
 .../overlay/MobileReviewSettingsDrawer.tsx           | 12 ++++++++----
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index 23d8ac61c..55a624b52 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -559,14 +559,16 @@ function GeneralFilterButton({
   const trigger = (
     <Button
       size="sm"
-      variant={selectedLabels?.length ? "select" : "default"}
+      variant={
+        selectedLabels?.length || selectedZones?.length ? "select" : "default"
+      }
       className="flex items-center gap-2 capitalize"
     >
       <FaFilter
-        className={`${selectedLabels?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
+        className={`${selectedLabels?.length || selectedZones?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
       />
       <div
-        className={`hidden md:block ${selectedLabels?.length ? "text-selected-foreground" : "text-primary"}`}
+        className={`hidden md:block ${selectedLabels?.length || selectedZones?.length ? "text-selected-foreground" : "text-primary"}`}
       >
         Filter
       </div>
@@ -641,7 +643,7 @@ type GeneralFilterContentProps = {
   updateLabelFilter: (labels: string[] | undefined) => void;
   setCurrentLabels: (labels: string[] | undefined) => void;
   updateZoneFilter?: (zones: string[] | undefined) => void;
-  setCurrentZones?: (zones: string[] | undefined) => void;
+  setCurrentZones: (zones: string[] | undefined) => void;
   onClose: () => void;
 };
 export function GeneralFilterContent({
@@ -793,6 +795,7 @@ export function GeneralFilterContent({
         <Button
           onClick={() => {
             setCurrentLabels(undefined);
+            setCurrentZones(undefined);
             updateLabelFilter(undefined);
           }}
         >
diff --git a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
index 716f19b9c..7c9cdb93e 100644
--- a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
+++ b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@@ -145,11 +145,11 @@ export default function MobileReviewSettingsDrawer({
         {features.includes("filter") && (
           <Button
             className="flex w-full items-center justify-center gap-2"
-            variant={filter?.labels ? "select" : "default"}
+            variant={filter?.labels || filter?.zones ? "select" : "default"}
             onClick={() => setDrawerMode("filter")}
           >
             <FaFilter
-              className={`${filter?.labels ? "text-selected-foreground" : "text-secondary-foreground"}`}
+              className={`${filter?.labels || filter?.zones ? "text-selected-foreground" : "text-secondary-foreground"}`}
             />
             Filter
           </Button>
@@ -284,12 +284,16 @@ export default function MobileReviewSettingsDrawer({
         <DrawerTrigger asChild>
           <Button
             className="rounded-lg capitalize"
-            variant={filter?.labels || filter?.after ? "select" : "default"}
+            variant={
+              filter?.labels || filter?.after || filter?.zones
+                ? "select"
+                : "default"
+            }
             size="sm"
             onClick={() => setDrawerMode("select")}
           >
             <FaCog
-              className={`${filter?.labels || filter?.after ? "text-selected-foreground" : "text-secondary-foreground"}`}
+              className={`${filter?.labels || filter?.after || filter?.zones ? "text-selected-foreground" : "text-secondary-foreground"}`}
             />
           </Button>
         </DrawerTrigger>