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

Get light mode colors working

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-02 06:48:15 -07:00
parent bb68be6a85
commit 6eb24d909f
5 changed files with 36 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/Statusbar.tsx
View File

@ -28,7 +28,7 @@ export default function Statusbar() {
}, [stats]);
return (
<div className="absolute left-0 bottom-0 right-0 w-full h-8 flex items-center px-4 bg-primary z-10">
<div className="absolute left-0 bottom-0 right-0 w-full h-8 flex items-center px-4 bg-primary z-10 text-secondary-foreground">
{cpuPercent && (
<div className="flex items-center text-sm mr-4">
<MdCircle

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

@ -1,4 +1,4 @@
import { LuCalendar, LuCheck, LuFilter, LuVideo } from "react-icons/lu";
import { LuCheck, LuVideo } from "react-icons/lu";
import { Button } from "../ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import useSWR from "swr";
@ -16,6 +16,7 @@ import { ReviewFilter } from "@/types/review";
import { getEndOfDayTimestamp } from "@/utils/dateUtil";
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
import { isMobile } from "react-device-detect";
import { FaCalendarAlt, FaFilter, FaVideo } from "react-icons/fa";
const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"];
@ -123,12 +124,8 @@ function CamerasFilterButton({
}}
>
<DropdownMenuTrigger asChild>
<Button
size={isMobile ? "sm" : "default"}
className="mx-1 capitalize"
variant="secondary"
>
<LuVideo className="md:mr-[10px]" />
<Button size="sm" className="mx-1 capitalize" variant="secondary">
<FaVideo className="md:mr-[10px] text-muted-foreground" />
<div className="hidden md:block">
{selectedCameras == undefined
? "All Cameras"
@ -212,12 +209,8 @@ function CalendarFilterButton({
}}
>
<PopoverTrigger asChild>
<Button
size={isMobile ? "sm" : "default"}
className="mx-1"
variant="secondary"
>
<LuCalendar className="md:mr-[10px]" />
<Button size="sm" className="mx-1" variant="secondary">
<FaCalendarAlt className="md:mr-[10px] text-muted-foreground" />
<div className="hidden md:block">
{day == undefined ? "Last 24 Hours" : selectedDate}
</div>
@ -254,12 +247,8 @@ function GeneralFilterButton({
return (
<Popover>
<PopoverTrigger asChild>
<Button
size={isMobile ? "sm" : "default"}
className="mx-1"
variant="secondary"
>
<LuFilter className="md:mr-[10px]" />
<Button size="sm" className="mx-1" variant="secondary">
<FaFilter className="md:mr-[10px] text-muted-foreground" />
<div className="hidden md:block">Filter</div>
</Button>
</PopoverTrigger>
@ -373,7 +362,7 @@ function FilterCheckBox({
}: FilterCheckBoxProps) {
return (
<Button
className="capitalize flex justify-between items-center cursor-pointer w-full"
className="capitalize flex justify-between items-center cursor-pointer w-full text-primary-foreground"
variant="ghost"
onClick={() => onCheckedChange(!isChecked)}
>

2
web/src/components/navigation/NavItem.tsx
View File

@ -11,7 +11,7 @@ import { isDesktop } from "react-device-detect";
const variants = {
primary: {
active: "font-bold text-primary-foreground bg-selected",
active: "font-bold text-white bg-selected",
inactive: "text-muted-foreground bg-secondary",
},
secondary: {

2
web/src/views/events/EventView.tsx
View File

@ -247,7 +247,7 @@ export default function EventView({
return (
<div className="flex flex-col size-full">
<div className="h-8 relative flex justify-between items-center mb-2">
<div className="h-10 relative flex justify-between items-center mb-2">
{isMobile && (
<Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
)}

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

@ -18,23 +18,23 @@
--popover-foreground: hsl(222.2 84% 4.9%);
--popover-foreground: 222.2 84% 4.9%;
--primary: hsl(222.2 47.4% 11.2%);
--primary: 222.2 47.4% 11.2%;
--primary: hsl(0 0% 100%);
--primary: 0 0% 100%;
--primary-foreground: hsl(210 40% 98%);
--primary-foreground: 210 40% 98%;
--primary-foreground: hsl(0, 0%, 0%);
--primary-foreground: 0, 0%, 0%;
--secondary: hsl(210 40% 96.1%);
--secondary: 210 40% 96.1%;
--secondary: hsl(0, 0%, 96%);
--secondary: 0, 0%, 96%;
--secondary-foreground: hsl(222.2 47.4% 11.2%);
--secondary-foreground: 222.2 47.4% 11.2%;
--secondary-foreground: hsl(0, 0%, 45%);
--secondary-foreground: 0, 0%, 45%;
--muted: hsl(210 40% 96.1%);
--muted: 210 40% 96.1%;
--muted-foreground: hsl(215.4 16.3% 46.9%);
--muted-foreground: 215.4 16.3% 46.9%;
--muted-foreground: hsl(0, 0%, 64%);
--muted-foreground: 0, 0%, 64%;
--accent: hsl(210 40% 96.1%);
--accent: 210 40% 96.1%;
@ -57,6 +57,9 @@
--ring: hsl(222.2 84% 4.9%);
--ring: 222.2 84% 4.9%;
--selected: hsl(228, 89%, 63%);
--selected: 228, 89%, 63%;
--radius: 0.5rem;
--severity_alert: var(--red-800);
@ -76,16 +79,16 @@
--foreground: hsl(0, 0%, 100%);
--foreground: 0, 0%, 100%;
--card: hsl(222.2 84% 4.9%);
--card: 222.2 84% 4.9%;
--card: hsl(0, 0%, 15%);
--card: 0, 0%, 15%;
--card-foreground: hsl(210 40% 98%);
--card-foreground: 210 40% 98%;
--popover: hsl(222.2 84% 4.9%);
--popover: 222.2 84% 4.9%;
--popover: hsl(0, 0%, 15%);
--popover: 0, 0%, 15%;
--popover-foreground: hsl(210 40% 98%);
--popover-foreground: hsl(0, 0%, 100%);
--popover-foreground: 210 40% 98%;
--primary: hsl(0, 0%, 9%);
@ -100,14 +103,14 @@
--secondary-foreground: hsl(0, 0%, 83%);
--secondary-foreground: 0, 0%, 83%;
--muted: hsl(217.2 32.6% 17.5%);
--muted: 217.2 32.6% 17.5%;
--muted: hsl(0, 0%, 8%);
--muted: 0, 0%, 8%;
--muted-foreground: hsl(0, 0%, 32%);
--muted-foreground: 0, 0%, 32%;
--accent: hsl(217.2 32.6% 17.5%);
--accent: 217.2 32.6% 17.5%;
--accent: hsl(0, 0%, 15%);
--accent: 0, 0%, 15%;
--accent-foreground: hsl(210 40% 98%);
--accent-foreground: 210 40% 98%;
@ -118,8 +121,8 @@
--destructive-foreground: hsl(210 40% 98%);
--destructive-foreground: 210 40% 98%;
--border: hsl(217.2 32.6% 17.5%);
--border: 217.2 32.6% 17.5%;
--border: hsl(0, 0%, 58%);
--border: 0, 0%, 58%;
--input: hsl(217.2 32.6% 17.5%);
--input: 217.2 32.6% 17.5%;