Use selected button style when zones are actively filtered

This commit is contained in:
Josh Hawkins 2024-06-11 09:38:30 -05:00
parent c9d253a320
commit 43a400787f
2 changed files with 13 additions and 7 deletions

View File

@ -559,14 +559,16 @@ function GeneralFilterButton({
const trigger = ( const trigger = (
<Button <Button
size="sm" size="sm"
variant={selectedLabels?.length ? "select" : "default"} variant={
selectedLabels?.length || selectedZones?.length ? "select" : "default"
}
className="flex items-center gap-2 capitalize" className="flex items-center gap-2 capitalize"
> >
<FaFilter <FaFilter
className={`${selectedLabels?.length ? "text-selected-foreground" : "text-secondary-foreground"}`} className={`${selectedLabels?.length || selectedZones?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
/> />
<div <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 Filter
</div> </div>

View File

@ -145,11 +145,11 @@ export default function MobileReviewSettingsDrawer({
{features.includes("filter") && ( {features.includes("filter") && (
<Button <Button
className="flex w-full items-center justify-center gap-2" 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")} onClick={() => setDrawerMode("filter")}
> >
<FaFilter <FaFilter
className={`${filter?.labels ? "text-selected-foreground" : "text-secondary-foreground"}`} className={`${filter?.labels || filter?.zones ? "text-selected-foreground" : "text-secondary-foreground"}`}
/> />
Filter Filter
</Button> </Button>
@ -284,12 +284,16 @@ export default function MobileReviewSettingsDrawer({
<DrawerTrigger asChild> <DrawerTrigger asChild>
<Button <Button
className="rounded-lg capitalize" className="rounded-lg capitalize"
variant={filter?.labels || filter?.after ? "select" : "default"} variant={
filter?.labels || filter?.after || filter?.zones
? "select"
: "default"
}
size="sm" size="sm"
onClick={() => setDrawerMode("select")} onClick={() => setDrawerMode("select")}
> >
<FaCog <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> </Button>
</DrawerTrigger> </DrawerTrigger>