administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 05:35:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Simplify button colors

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-09 16:44:49 -06:00
parent 15e4f5c771
commit 2e40c7692f
2 changed files with 27 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -222,14 +222,13 @@ function CamerasFilterButton({
const trigger = ( const trigger = (
<Button <Button
className={`flex items-center gap-2 capitalize ${selectedCameras?.length ? "bg-selected hover:bg-selected" : ""}`} className="flex items-center gap-2 capitalize"
variant={selectedCameras?.length == undefined ? "secondary" : "select"}
size="sm" size="sm"
> >
<FaVideo <FaVideo />
className={`${selectedCameras?.length ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/>
<div <div
className={`hidden md:block ${selectedCameras?.length ? "text-background dark:text-primary" : "text-primary"}`} className={`hidden md:block ${selectedCameras?.length ? "text-selected-foreground" : "text-primary"}`}
> >
{selectedCameras == undefined {selectedCameras == undefined
? "All Cameras" ? "All Cameras"
@ -391,13 +390,12 @@ function ShowReviewFilter({
</div> </div>
<Button <Button
className={`block md:hidden duration-0 ${showReviewedSwitch == 1 ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`} className="block md:hidden duration-0"
variant={showReviewedSwitch == 1 ? "select" : "secondary"}
size="sm" size="sm"
onClick={() => setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)} onClick={() => setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)}
> >
<FaCheckCircle <FaCheckCircle />
className={`${showReviewedSwitch == 1 ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/>
</Button> </Button>
</> </>
); );
@ -420,14 +418,13 @@ function CalendarFilterButton({
const trigger = ( const trigger = (
<Button <Button
className="flex items-center gap-2"
variant={day == undefined ? "secondary" : "select"}
size="sm" size="sm"
className={`flex items-center gap-2 ${day == undefined ? "bg-secondary hover:bg-secondary/80" : "bg-selected hover:bg-selected"}`}
> >
<FaCalendarAlt <FaCalendarAlt />
className={`${day == undefined ? "text-secondary-foreground" : "text-background dark:text-primary"}`}
/>
<div <div
className={`hidden md:block ${day == undefined ? "text-primary" : "text-background dark:text-primary"}`} className={`hidden md:block ${day == undefined ? "text-primary" : "text-selected-foreground"}`}
> >
{day == undefined ? "Last 24 Hours" : selectedDate} {day == undefined ? "Last 24 Hours" : selectedDate}
</div> </div>
@ -488,13 +485,12 @@ function GeneralFilterButton({
const trigger = ( const trigger = (
<Button <Button
size="sm" size="sm"
className={`flex items-center gap-2 capitalize ${selectedLabels?.length ? "bg-selected hover:bg-selected" : ""}`} variant={selectedLabels?.length ? "select" : "secondary"}
className="flex items-center gap-2 capitalize"
> >
<FaFilter <FaFilter />
className={`${selectedLabels?.length ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/>
<div <div
className={`hidden md:block ${selectedLabels?.length ? "text-background dark:text-primary" : "text-primary"}`} className={`hidden md:block ${selectedLabels?.length ? "text-selected-foreground" : "text-primary"}`}
> >
Filter Filter
</div> </div>
@ -685,12 +681,11 @@ function ShowMotionOnlyButton({
<div className="block md:hidden"> <div className="block md:hidden">
<Button <Button
size="sm" size="sm"
className={`duration-0 ${motionOnlyButton ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`} className="duration-0"
variant={motionOnlyButton ? "select" : "secondary"}
onClick={() => setMotionOnlyButton(!motionOnlyButton)} onClick={() => setMotionOnlyButton(!motionOnlyButton)}
> >
<FaRunning <FaRunning />
className={`${motionOnlyButton ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/>
</Button> </Button>
</div> </div>
</> </>

21
web/src/components/overlay/MobileReviewSettingsDrawer.tsx
View File

@ -146,23 +146,21 @@ export default function MobileReviewSettingsDrawer({
)} )}
{features.includes("calendar") && ( {features.includes("calendar") && (
<Button <Button
className={`w-full flex justify-center items-center gap-2 ${filter?.after ? "bg-selected text-background dark:text-primary" : ""}`} className="w-full flex justify-center items-center gap-2"
variant={filter?.after ? "select" : "secondary"}
onClick={() => setDrawerMode("calendar")} onClick={() => setDrawerMode("calendar")}
> >
<FaCalendarAlt <FaCalendarAlt />
className={`${filter?.after ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/>
Calendar Calendar
</Button> </Button>
)} )}
{features.includes("filter") && ( {features.includes("filter") && (
<Button <Button
className={`w-full flex justify-center items-center gap-2 ${filter?.labels ? "bg-selected text-background dark:text-primary" : ""}`} className="w-full flex justify-center items-center gap-2"
variant={filter?.labels ? "select" : "secondary"}
onClick={() => setDrawerMode("filter")} onClick={() => setDrawerMode("filter")}
> >
<FaFilter <FaFilter />
className={`${filter?.labels ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/>
Filter Filter
</Button> </Button>
)} )}
@ -283,13 +281,12 @@ export default function MobileReviewSettingsDrawer({
> >
<DrawerTrigger asChild> <DrawerTrigger asChild>
<Button <Button
className={`rounded-lg capitalize ${filter?.labels || filter?.after ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`} className="rounded-lg capitalize"
variant={filter?.labels || filter?.after ? "select" : "secondary"}
size="sm" size="sm"
onClick={() => setDrawerMode("select")} onClick={() => setDrawerMode("select")}
> >
<FaCog <FaCog />
className={`${filter?.labels || filter?.after ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/>
</Button> </Button>
</DrawerTrigger> </DrawerTrigger>
<DrawerContent className="max-h-[80dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-1 rounded-t-2xl"> <DrawerContent className="max-h-[80dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-1 rounded-t-2xl">