administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-12 18:17:36 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

sidebar spacing and color tweaks

Browse Source
This commit is contained in:
Josh Hawkins 2025-10-08 09:16:44 -05:00
parent 9f05ad9ff1
commit eaa558ffc1
2 changed files with 143 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/src/pages/Settings.tsx
View File

@ -66,6 +66,7 @@ import {
} from "@/components/mobile/MobilePage"; } from "@/components/mobile/MobilePage";
import { ChevronRight } from "lucide-react"; import { ChevronRight } from "lucide-react";
import { IoMdArrowRoundBack } from "react-icons/io"; import { IoMdArrowRoundBack } from "react-icons/io";
import { cn } from "@/lib/utils";
const allSettingsViews = [ const allSettingsViews = [
"ui", "ui",
@ -403,6 +404,12 @@ export default function Settings() {
} }
return ( return (
<div className="flex h-full flex-col">
<div className="border-b p-4">
<h1 className="text-lg font-medium">
{t("settings", { ns: "common" })}
</h1>
</div>
<SidebarProvider> <SidebarProvider>
<Sidebar variant="inset" className="relative"> <Sidebar variant="inset" className="relative">
<SidebarContent className="bg-background"> <SidebarContent className="bg-background">
@ -413,8 +420,7 @@ export default function Settings() {
); );
if (filteredItems.length === 0) return null; if (filteredItems.length === 0) return null;
return ( return (
<SidebarGroup key={group.label}> <SidebarGroup key={group.label} className="py-1">
<SidebarGroupLabel>{group.label}</SidebarGroupLabel>
{filteredItems.length === 1 ? ( {filteredItems.length === 1 ? (
<SidebarMenu> <SidebarMenu>
<SidebarMenuItem> <SidebarMenuItem>
@ -442,7 +448,18 @@ export default function Settings() {
</SidebarMenuItem> </SidebarMenuItem>
</SidebarMenu> </SidebarMenu>
) : ( ) : (
<SidebarMenuSub> <>
<SidebarGroupLabel
className={cn(
"cursor-default text-sm",
filteredItems.some((item) => page === item.key)
? "text-primary"
: "text-sidebar-foreground/80",
)}
>
{group.label}
</SidebarGroupLabel>
<SidebarMenuSub className="mx-1 border-0">
{filteredItems.map((item) => ( {filteredItems.map((item) => (
<SidebarMenuSubItem key={item.key}> <SidebarMenuSubItem key={item.key}>
<SidebarMenuSubButton <SidebarMenuSubButton
@ -460,13 +477,14 @@ export default function Settings() {
} }
}} }}
> >
<div className="smart-capitalize"> <div className="w-full cursor-pointer smart-capitalize">
{t("menu." + item.key)} {t("menu." + item.key)}
</div> </div>
</SidebarMenuSubButton> </SidebarMenuSubButton>
</SidebarMenuSubItem> </SidebarMenuSubItem>
))} ))}
</SidebarMenuSub> </SidebarMenuSub>
</>
)} )}
</SidebarGroup> </SidebarGroup>
); );
@ -476,9 +494,6 @@ export default function Settings() {
</Sidebar> </Sidebar>
<SidebarInset> <SidebarInset>
<div className="flex h-full flex-col"> <div className="flex h-full flex-col">
<div className="border-b p-4">
<h1 className="text-lg font-medium">Settings</h1>
</div>
{[ {[
"debug", "debug",
"cameras", "cameras",
@ -543,6 +558,7 @@ export default function Settings() {
</AlertDialog> </AlertDialog>
)} )}
</SidebarProvider> </SidebarProvider>
</div>
); );
} }

6
web/tailwind.config.cjs
View File

@ -119,12 +119,12 @@ module.exports = {
DEFAULT: "hsl(var(--neutral_variant))", DEFAULT: "hsl(var(--neutral_variant))",
}, },
sidebar: { sidebar: {
DEFAULT: "hsl(var(--secondary))", DEFAULT: "hsl(var(--background))",
foreground: "hsl(var(--secondary-foreground))", foreground: "hsl(var(--secondary-foreground))",
primary: "hsl(var(--primary))", primary: "hsl(var(--primary))",
"primary-foreground": "hsl(var(--primary-foreground))", "primary-foreground": "hsl(var(--primary-foreground))",
accent: "hsl(var(--primary-variant))", accent: "hsl(var(--background-alt))",
"accent-foreground": "hsl(var(--primary-foreground))", "accent-foreground": "hsl(var(--primary))",
border: "hsl(var(--border))", border: "hsl(var(--border))",
ring: "hsl(var(--ring))", ring: "hsl(var(--ring))",
}, },