mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
Fix button color dark mode logic (#10884)
* fix button color dark mode logic * make calendar use active color when not default
This commit is contained in:
parent
f210c4b6f4
commit
55018372d4
@ -229,7 +229,9 @@ function CamerasFilterButton({
|
|||||||
<FaVideo
|
<FaVideo
|
||||||
className={`${selectedCameras?.length ? "text-primary dark:text-primary-foreground" : "text-secondary-foreground"}`}
|
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
|
{selectedCameras == undefined
|
||||||
? "All Cameras"
|
? "All Cameras"
|
||||||
: `${selectedCameras.includes("birdseye") ? selectedCameras.length - 1 : selectedCameras.length} Camera${selectedCameras.length !== 1 ? "s" : ""}`}
|
: `${selectedCameras.includes("birdseye") ? selectedCameras.length - 1 : selectedCameras.length} Camera${selectedCameras.length !== 1 ? "s" : ""}`}
|
||||||
@ -391,13 +393,13 @@ function ShowReviewFilter({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button
|
<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"
|
size="sm"
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
onClick={() => setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)}
|
onClick={() => setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)}
|
||||||
>
|
>
|
||||||
<FaCheckCircle
|
<FaCheckCircle
|
||||||
className={`${showReviewedSwitch == 0 ? "fill-primary-foreground" : "text-muted-foreground"}`}
|
className={`${showReviewedSwitch == 1 ? "fill-primary dark:fill-primary-foreground" : "text-muted-foreground"}`}
|
||||||
/>
|
/>
|
||||||
</Button>
|
</Button>
|
||||||
</>
|
</>
|
||||||
@ -420,9 +422,17 @@ function CalendarFilterButton({
|
|||||||
);
|
);
|
||||||
|
|
||||||
const trigger = (
|
const trigger = (
|
||||||
<Button size="sm" className="flex items-center gap-2" variant="secondary">
|
<Button
|
||||||
<FaCalendarAlt className="text-secondary-foreground" />
|
size="sm"
|
||||||
<div className="hidden md:block text-primary-foreground">
|
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}
|
{day == undefined ? "Last 24 Hours" : selectedDate}
|
||||||
</div>
|
</div>
|
||||||
</Button>
|
</Button>
|
||||||
@ -673,11 +683,11 @@ function ShowMotionOnlyButton({
|
|||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
variant="secondary"
|
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)}
|
onClick={() => setMotionOnlyButton(!motionOnlyButton)}
|
||||||
>
|
>
|
||||||
<FaRunning
|
<FaRunning
|
||||||
className={`${motionOnlyButton ? "fill-primary-foreground" : "text-muted-foreground"}`}
|
className={`${motionOnlyButton ? "fill-primary dark:fill-primary-foreground" : "text-muted-foreground"}`}
|
||||||
/>
|
/>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user