layout tweaks

This commit is contained in:
Josh Hawkins 2025-10-08 09:34:37 -05:00
parent eaa558ffc1
commit 96a445a53e
9 changed files with 21 additions and 20 deletions

View File

@ -67,6 +67,7 @@ import {
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"; import { cn } from "@/lib/utils";
import Heading from "@/components/ui/heading";
const allSettingsViews = [ const allSettingsViews = [
"ui", "ui",
@ -405,14 +406,14 @@ export default function Settings() {
return ( return (
<div className="flex h-full flex-col"> <div className="flex h-full flex-col">
<div className="border-b p-4"> <div className="border-b border-secondary p-4">
<h1 className="text-lg font-medium"> <Heading as="h3" className="mb-0">
{t("settings", { ns: "common" })} {t("settings", { ns: "common" })}
</h1> </Heading>
</div> </div>
<SidebarProvider> <SidebarProvider>
<Sidebar variant="inset" className="relative"> <Sidebar variant="inset" className="relative pt-0">
<SidebarContent className="bg-background"> <SidebarContent className="border-r-[1px] border-secondary bg-background pt-2">
<SidebarMenu> <SidebarMenu>
{settingsGroups.map((group) => { {settingsGroups.map((group) => {
const filteredItems = group.items.filter((item) => const filteredItems = group.items.filter((item) =>

View File

@ -784,7 +784,7 @@ export default function AuthenticationView({
return ( return (
<div className="flex size-full flex-col"> <div className="flex size-full flex-col">
<Toaster position="top-center" closeButton={true} /> <Toaster position="top-center" closeButton={true} />
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0"> <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
{section === "users" && UsersSection} {section === "users" && UsersSection}
{section === "roles" && RolesSection} {section === "roles" && RolesSection}
{!section && ( {!section && (

View File

@ -313,10 +313,10 @@ export default function CameraSettingsView({
<> <>
<div className="flex size-full flex-col md:flex-row"> <div className="flex size-full flex-col md:flex-row">
<Toaster position="top-center" closeButton={true} /> <Toaster position="top-center" closeButton={true} />
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0"> <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
{viewMode === "settings" ? ( {viewMode === "settings" ? (
<> <>
<Heading as="h3" className="my-2"> <Heading as="h4" className="my-2">
{t("camera.title")} {t("camera.title")}
</Heading> </Heading>
<div className="mb-4 flex flex-col gap-4"> <div className="mb-4 flex flex-col gap-4">

View File

@ -244,7 +244,7 @@ export default function EnrichmentsSettingsView({
return ( return (
<div className="flex size-full flex-col md:flex-row"> <div className="flex size-full flex-col md:flex-row">
<Toaster position="top-center" closeButton={true} /> <Toaster position="top-center" closeButton={true} />
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0"> <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
<Heading as="h3" className="my-2"> <Heading as="h3" className="my-2">
{t("enrichments.title")} {t("enrichments.title")}
</Heading> </Heading>

View File

@ -211,8 +211,8 @@ export default function FrigatePlusSettingsView({
<> <>
<div className="flex size-full flex-col md:flex-row"> <div className="flex size-full flex-col md:flex-row">
<Toaster position="top-center" closeButton={true} /> <Toaster position="top-center" closeButton={true} />
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0"> <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
<Heading as="h3" className="my-2"> <Heading as="h4" className="my-2">
{t("frigatePlus.title")} {t("frigatePlus.title")}
</Heading> </Heading>

View File

@ -331,10 +331,10 @@ export default function NotificationView({
if (!("Notification" in window) || !window.isSecureContext) { if (!("Notification" in window) || !window.isSecureContext) {
return ( return (
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0"> <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
<div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2"> <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
<div className="col-span-1"> <div className="col-span-1">
<Heading as="h3" className="my-2"> <Heading as="h4" className="my-2">
{t("notification.notificationSettings.title")} {t("notification.notificationSettings.title")}
</Heading> </Heading>
<div className="max-w-6xl"> <div className="max-w-6xl">
@ -385,14 +385,14 @@ export default function NotificationView({
<> <>
<div className="flex size-full flex-col md:flex-row"> <div className="flex size-full flex-col md:flex-row">
<Toaster position="top-center" closeButton={true} /> <Toaster position="top-center" closeButton={true} />
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0"> <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
<div <div
className={cn( className={cn(
isAdmin && "grid w-full grid-cols-1 gap-4 md:grid-cols-2", isAdmin && "grid w-full grid-cols-1 gap-4 md:grid-cols-2",
)} )}
> >
<div className="col-span-1"> <div className="col-span-1">
<Heading as="h3" className="my-2"> <Heading as="h4" className="my-2">
{t("notification.notificationSettings.title")} {t("notification.notificationSettings.title")}
</Heading> </Heading>

View File

@ -165,7 +165,7 @@ export default function ObjectSettingsView({
<div className="flex size-full flex-col md:flex-row"> <div className="flex size-full flex-col md:flex-row">
<Toaster position="top-center" closeButton={true} /> <Toaster position="top-center" closeButton={true} />
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0 md:w-3/12"> <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0 md:w-3/12">
<Heading as="h3" className="my-2"> <Heading as="h4" className="my-2">
{t("debug.title")} {t("debug.title")}
</Heading> </Heading>
<div className="mb-5 space-y-3 text-sm text-muted-foreground"> <div className="mb-5 space-y-3 text-sm text-muted-foreground">

View File

@ -414,11 +414,11 @@ export default function TriggerView({
return ( return (
<div className="flex size-full flex-col md:flex-row"> <div className="flex size-full flex-col md:flex-row">
<Toaster position="top-center" closeButton={true} /> <Toaster position="top-center" closeButton={true} />
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0"> <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
{!isSemanticSearchEnabled ? ( {!isSemanticSearchEnabled ? (
<div className="mb-5 flex flex-row items-center justify-between gap-2"> <div className="mb-5 flex flex-row items-center justify-between gap-2">
<div className="flex flex-col items-start"> <div className="flex flex-col items-start">
<Heading as="h3" className="my-2"> <Heading as="h4" className="my-2">
{t("triggers.management.title")} {t("triggers.management.title")}
</Heading> </Heading>
<p className="mb-5 text-sm text-muted-foreground"> <p className="mb-5 text-sm text-muted-foreground">

View File

@ -100,8 +100,8 @@ export default function UiSettingsView() {
<> <>
<div className="flex size-full flex-col md:flex-row"> <div className="flex size-full flex-col md:flex-row">
<Toaster position="top-center" closeButton={true} /> <Toaster position="top-center" closeButton={true} />
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0"> <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
<Heading as="h3" className="my-2"> <Heading as="h4" className="mb-2">
{t("general.title")} {t("general.title")}
</Heading> </Heading>