Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Fix button color dark mode logic (#10884)

Browse Source 
* fix button color dark mode logic

* make calendar use active color when not default
This commit is contained in:
Josh Hawkins 2024-04-08 11:34:15 -05:00 committed by GitHub
parent f210c4b6f4
commit 55018372d4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/src/components/filter/ReviewFilterGroup.tsx
View File

@ -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>