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 colors (#10915)

Browse Source 
* Simplify button colors

* fix colors

* Add back in colors

* Fix color vars
This commit is contained in:
Nicolas Mowen 2024-04-09 17:19:31 -06:00 committed by GitHub
parent 524732ec73
commit 503dfba719
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 66 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -222,14 +222,15 @@ 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 ? "default" : "select"}
size="sm" size="sm"
> >
<FaVideo <FaVideo
className={`${selectedCameras?.length ? "text-background dark:text-primary" : "text-secondary-foreground"}`} className={`${selectedCameras?.length == 1 ? "text-selected-foreground" : "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,12 +392,13 @@ 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" : "default"}
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"}`} className={`${showReviewedSwitch == 1 ? "text-selected-foreground" : "text-secondary-foreground"}`}
/> />
</Button> </Button>
</> </>
@ -420,14 +422,15 @@ function CalendarFilterButton({
const trigger = ( const trigger = (
<Button <Button
className="flex items-center gap-2"
variant={day == undefined ? "default" : "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"}`} className={`${day == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
/> />
<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 +491,14 @@ 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" : "default"}
className="flex items-center gap-2 capitalize"
> >
<FaFilter <FaFilter
className={`${selectedLabels?.length ? "text-background dark:text-primary" : "text-secondary-foreground"}`} className={`${selectedLabels?.length ? "text-selected-foreground" : "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 +689,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" : "default"}
onClick={() => setMotionOnlyButton(!motionOnlyButton)} onClick={() => setMotionOnlyButton(!motionOnlyButton)}
> >
<FaRunning <FaRunning />
className={`${motionOnlyButton ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
/>
</Button> </Button>
</div> </div>
</> </>

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

@ -146,22 +146,24 @@ 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" : "default"}
onClick={() => setDrawerMode("calendar")} onClick={() => setDrawerMode("calendar")}
> >
<FaCalendarAlt <FaCalendarAlt
className={`${filter?.after ? "text-background dark:text-primary" : "text-secondary-foreground"}`} className={`${filter?.after ? "text-selected-foreground" : "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" : "default"}
onClick={() => setDrawerMode("filter")} onClick={() => setDrawerMode("filter")}
> >
<FaFilter <FaFilter
className={`${filter?.labels ? "text-background dark:text-primary" : "text-secondary-foreground"}`} className={`${filter?.labels ? "text-selected-foreground" : "text-secondary-foreground"}`}
/> />
Filter Filter
</Button> </Button>
@ -283,12 +285,13 @@ 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" : "default"}
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"}`} className={`${filter?.labels || filter?.after ? "text-selected-foreground" : "text-secondary-foreground"}`}
/> />
</Button> </Button>
</DrawerTrigger> </DrawerTrigger>

2
web/src/components/ui/button.tsx
View File

@ -10,7 +10,7 @@ const buttonVariants = cva(
variants: { variants: {
variant: { variant: {
default: "bg-secondary text-primary hover:bg-secondary/80", default: "bg-secondary text-primary hover:bg-secondary/80",
select: "bg-selected text-white hover:bg-opacity-90", select: "bg-selected text-selected-foreground hover:bg-opacity-90",
destructive: destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90", "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: outline:

5
web/tailwind.config.js
View File

@ -46,7 +46,10 @@ module.exports = {
background: "hsl(var(--background))", background: "hsl(var(--background))",
background_alt: "hsl(var(--background-alt))", background_alt: "hsl(var(--background-alt))",
foreground: "hsl(var(--foreground))", foreground: "hsl(var(--foreground))",
selected: "hsl(var(--selected))", selected: {
DEFAULT: "hsl(var(--selected))",
foreground: "hsl(var(--selected-foreground))",
},
primary: { primary: {
DEFAULT: "hsl(var(--primary))", DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))", foreground: "hsl(var(--primary-foreground))",

68
web/themes/theme-default.css
View File

@ -1,77 +1,80 @@
@layer base { @layer base {
:root { :root {
--background-hsl: hsl(0 0% 100%); --background: hsl(0, 0%, 100%);
--background: 0 0% 100%; --background: 0 0% 100%;
--background-alt-hsl: hsl(0 0% 98.5%); --background-alt: hsl(0, 0%, 98.5%);
--background-alt: 0 0% 98.5%; --background-alt: 0 0% 98.5%;
--foreground: hsl(222.2 84% 4.9%); --foreground: hsl(222.2, 84%, 4.9%);
--foreground: 222.2 84% 4.9%; --foreground: 222.2 84% 4.9%;
--card: hsl(0 0% 100%); --card: hsl(0, 0%, 100%);
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: hsl(222.2 84% 4.9%); --card-foreground: hsl(222.2, 84%, 4.9%);
--card-foreground: 222.2 84% 4.9%; --card-foreground: 222.2 84% 4.9%;
--popover: hsl(0 0% 100%); --popover: hsl(0, 0%, 100%);
--popover: 0 0% 100%; --popover: 0 0% 100%;
--popover-foreground: hsl(222.2 84% 4.9%); --popover-foreground: hsl(222.2, 84%, 4.9%);
--popover-foreground: 222.2 84% 4.9%; --popover-foreground: 222.2 84% 4.9%;
--primary: hsl(222.2, 37.4%, 11.2%); --primary: hsl(222.2, 37.4%, 11.2%);
--primary: 222.2 47.4% 11.2%; --primary: 222.2 47.4% 11.2%;
--primary-foreground: hsl(210 40% 98%); --primary-foreground: hsl(210, 40%, 98%);
--primary-foreground: 210 40% 98%; --primary-foreground: 210 40% 98%;
--secondary: hsl(210 20% 94.1%); --secondary: hsl(210, 20%, 94.1%);
--secondary: 210 20% 94.1%; --secondary: 210 20% 94.1%;
--secondary-foreground: hsl(222.2 17.4% 36.2%); --secondary-foreground: hsl(222.2, 17.4%, 36.2%);
--secondary-foreground: 222.2 17.4% 36.2%; --secondary-foreground: 222.2 17.4% 36.2%;
--secondary-highlight: hsl(0, 0%, 94%); --secondary-highlight: hsl(0, 0%, 94%);
--secondary-highlight: 0 0% 94%; --secondary-highlight: 0 0% 94%;
--muted: hsl(210 40% 96.1%); --muted: hsl(210, 40%, 96.1%);
--muted: 210 40% 96.1%; --muted: 210 40% 96.1%;
--muted-foreground: hsl(215.4 6.3% 46.9%); --muted-foreground: hsl(215.4, 6.3%, 46.9%);
--muted-foreground: 215.4 6.3% 46.9%; --muted-foreground: 215.4 6.3% 46.9%;
--accent: hsl(210 40% 96.1%); --accent: hsl(210, 40%, 96.1%);
--accent: 210 40% 96.1%; --accent: 210 40% 96.1%;
--accent-foreground: hsl(222.2 47.4% 11.2%); --accent-foreground: hsl(222.2, 47.4%, 11.2%);
--accent-foreground: 222.2 47.4% 11.2%; --accent-foreground: 222.2 47.4% 11.2%;
--destructive: hsl(0 84.2% 60.2%); --destructive: hsl(0, 84.2%, 60.2%);
--destructive: 0 84.2% 60.2%; --destructive: 0 84.2% 60.2%;
--destructive-foreground: hsl(0 100% 83%); --destructive-foreground: hsl(0, 100%, 83%);
--destructive-foreground: 0 100% 83%; --destructive-foreground: 0 100% 83%;
--warning: hsl(17 87% 18%); --warning: hsl(17, 87%, 18%);
--warning: 17 87% 18%; --warning: 17 87% 18%;
--warning-foreground: hsl(32 100% 74%); --warning-foreground: hsl(32, 100%, 74%);
--warning-foreground: 32 100% 74%; --warning-foreground: 32 100% 74%;
--border: hsl(214.3 31.8% 91.4%); --border: hsl(214.3, 31.8%, 91.4%);
--border: 214.3 31.8% 91.4%; --border: 214.3 31.8% 91.4%;
--input: hsl(0 0% 85%); --input: hsl(0, 0%, 85%);
--input: 0 0% 85%; --input: 0 0% 85%;
--ring: hsla(0 0% 25% 0%); --ring: hsla(0, 0%, 25%, 0%);
--ring: 0 0% 25% 0%; --ring: 0 0% 25% 0%;
--selected: hsl(228, 89%, 63%); --selected: hsl(228, 89%, 63%);
--selected: 228 89% 63%; --selected: 228 89% 63%;
--selected-foreground: hsl(0 0% 100%);
--selected-foreground: 0 0% 100%;
--radius: 0.5rem; --radius: 0.5rem;
--severity_alert: var(--red-800); --severity_alert: var(--red-800);
@ -94,10 +97,10 @@
} }
.dark { .dark {
--background-hsl: hsl(0 0 0%); --background: hsl(0, 0, 0%);
--background: 0 0% 0%; --background: 0 0% 0%;
--background-alt-hsl: hsl(0 0 9%); --background-alt: hsl(0, 0, 9%);
--background-alt: 0 0% 9%; --background-alt: 0 0% 9%;
--foreground: hsl(0, 0%, 100%); --foreground: hsl(0, 0%, 100%);
@ -106,7 +109,7 @@
--card: hsl(0, 0%, 15%); --card: hsl(0, 0%, 15%);
--card: 0, 0%, 15%; --card: 0, 0%, 15%;
--card-foreground: hsl(210 40% 98%); --card-foreground: hsl(210, 40%, 98%);
--card-foreground: 210 40% 98%; --card-foreground: 210 40% 98%;
--popover: hsl(0, 0%, 15%); --popover: hsl(0, 0%, 15%);
@ -139,31 +142,28 @@
--accent: hsl(0, 0%, 15%); --accent: hsl(0, 0%, 15%);
--accent: 0 0% 15%; --accent: 0 0% 15%;
--accent-foreground: hsl(210 40% 98%); --accent-foreground: hsl(210, 40%, 98%);
--accent-foreground: 210 40% 98%; --accent-foreground: 210 40% 98%;
--destructive: hsl(0 62.8% 30.6%); --destructive: hsl(0, 62.8%, 30.6%);
--destructive: 0 62.8% 30.6%; --destructive: 0 62.8% 30.6%;
--destructive-foreground: hsl(0 100% 83%); --destructive-foreground: hsl(0, 100%, 83%);
--destructive-foreground: 0 100% 83%; --destructive-foreground: 0 100% 83%;
--warning: hsl(17 87% 18%); --warning: hsl(17, 87%, 18%);
--warning: 17 87% 18%; --warning: 17 87% 18%;
--warning-foreground: hsl(32 100% 74%); --warning-foreground: hsl(32, 100%, 74%);
--warning-foreground: 32 100% 74%; --warning-foreground: 32 100% 74%;
--border: hsl(0, 0%, 32%); --border: hsl(0, 0%, 32%);
--border: 0 0% 32%; --border: 0 0% 32%;
--input: hsl(0 0% 5%); --input: hsl(0, 0%, 5%);
--input: 0 0% 25%; --input: 0 0% 25%;
--ring: hsla(0 0% 25% 0%); --ring: hsla(0, 0%, 25%, 0%);
--ring: 0 0% 25% 0%; --ring: 0 0% 25% 0%;
--selected: hsl(228, 89%, 63%);
--selected: 228 89% 63%;
} }
} }