administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 21:25:24 +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 = (
<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"
>
<FaVideo
className={`${selectedCameras?.length ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/>
<FaVideo />
<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
? "All Cameras"
@ -391,13 +390,12 @@ function ShowReviewFilter({
</div>
<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"
onClick={() => setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)}
>
<FaCheckCircle
className={`${showReviewedSwitch == 1 ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/>
<FaCheckCircle />
</Button>
</>
);
@ -420,14 +418,13 @@ function CalendarFilterButton({
const trigger = (
<Button
className="flex items-center gap-2"
variant={day == undefined ? "secondary" : "select"}
size="sm"
className={`flex items-center gap-2 ${day == undefined ? "bg-secondary hover:bg-secondary/80" : "bg-selected hover:bg-selected"}`}
>
<FaCalendarAlt
className={`${day == undefined ? "text-secondary-foreground" : "text-background dark:text-primary"}`}
/>
<FaCalendarAlt />
<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}
</div>
@ -488,13 +485,12 @@ function GeneralFilterButton({
const trigger = (
<Button
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
className={`${selectedLabels?.length ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/>
<FaFilter />
<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
</div>
@ -685,12 +681,11 @@ function ShowMotionOnlyButton({
<div className="block md:hidden">
<Button
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)}
>
<FaRunning
className={`${motionOnlyButton ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/>
<FaRunning />
</Button>
</div>
</>

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

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