gjermund/tessera
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign: admin pages — clean 2026 style, no heavy boxes

Browse Source 
- AdminHeader: stripped backdrop-blur, cleaner typography, shorter
- Tabs: softer pill bar, no outer border, rounded-lg background
- Section wrappers: removed shadow-sm, bg-card/82, border→border/50
- ScripFlowNode: softened borders, removed card bg, cleaner label
- All 8 section wrappers updated with replace_all

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Gjermund Høsøien Wiggen
2026-06-09 23:04:02 +02:00
parent 1c780be710
commit 96a71a34fe
1 changed files with 19 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
web/src/app/admin/page-content.tsx
View File

@@ -77,20 +77,13 @@ import { cn } from "@/lib/utils";
function AdminHeader() { function AdminHeader() {
return ( return (
<header className="border-b border-border bg-card/90 px-5 py-5 backdrop-blur lg:px-6"> <header className="border-b border-border/50 px-5 py-4 lg:px-6">
<div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between"> <div>
<div> <div className="flex items-center gap-2 text-[10px] font-medium uppercase tracking-wider text-muted-foreground/60">
<div className="flex items-center gap-2 text-[11px] font-semibold uppercase text-muted-foreground"> <Settings2Icon className="h-3 w-3" />
<Settings2Icon className="h-3.5 w-3.5" /> Configuration
Configuration
</div>
<h1 className="mt-1 text-2xl font-semibold text-foreground">
Admin console
</h1>
<p className="mt-1 max-w-2xl text-sm text-muted-foreground">
Configure queues, lifecycle state machines, automation rules, and custom ticket metadata.
</p>
</div> </div>
<h1 className="mt-1 text-xl font-semibold tracking-tight text-foreground">Admin</h1>
</div> </div>
</header> </header>
); );
@@ -138,8 +131,8 @@ export default function AdminPage() {
<div className="flex h-full flex-col bg-background/80"> <div className="flex h-full flex-col bg-background/80">
<AdminHeader /> <AdminHeader />
<Tabs defaultValue="queues" className="min-h-0 flex-1 gap-0"> <Tabs defaultValue="queues" className="min-h-0 flex-1 gap-0">
<div className="border-b border-border bg-card/70 px-5 py-3 lg:px-6"> <div className="border-b border-border/50 px-5 py-2.5 lg:px-6">
<TabsList className="h-9 rounded-md border border-border bg-muted/55 p-1"> <TabsList className="h-8 rounded-lg bg-muted/40 p-0.5">
<TabsTrigger value="queues" className="px-3"> <TabsTrigger value="queues" className="px-3">
<DatabaseIcon className="h-4 w-4" /> <DatabaseIcon className="h-4 w-4" />
Queues Queues
@@ -275,7 +268,7 @@ function QueuesTab() {
}; };
return ( return (
<section className="overflow-hidden rounded-md border border-border bg-card/82 shadow-sm"> <section className="overflow-hidden rounded-lg border border-border/50">
<div className="flex flex-col gap-3 border-b border-border bg-muted/35 px-4 py-3 lg:flex-row lg:items-center lg:justify-between"> <div className="flex flex-col gap-3 border-b border-border bg-muted/35 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
<div> <div>
<h2 className="text-base font-semibold text-foreground">Queues ({queues.length})</h2> <h2 className="text-base font-semibold text-foreground">Queues ({queues.length})</h2>
@@ -484,7 +477,7 @@ function LifecyclesTab() {
}; };
return ( return (
<section className="overflow-hidden rounded-md border border-border bg-card/82 shadow-sm"> <section className="overflow-hidden rounded-lg border border-border/50">
<div className="flex flex-col gap-3 border-b border-border bg-muted/35 px-4 py-3 lg:flex-row lg:items-center lg:justify-between"> <div className="flex flex-col gap-3 border-b border-border bg-muted/35 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
<div> <div>
<h2 className="text-base font-semibold text-foreground">Lifecycles ({lifecycles.length})</h2> <h2 className="text-base font-semibold text-foreground">Lifecycles ({lifecycles.length})</h2>
@@ -743,9 +736,9 @@ function ScripFlowNode({
children: ReactNode; children: ReactNode;
}) { }) {
return ( return (
<section className="rounded-md border border-border bg-background"> <section className="rounded-lg border border-border/50">
<div className="flex items-start gap-3 border-b border-border bg-muted/30 px-4 py-3"> <div className="flex items-start gap-3 border-b border-border/50 bg-muted/20 px-4 py-3">
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded border border-border bg-card font-mono text-[11px] font-semibold text-muted-foreground"> <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted/40 font-mono text-[11px] font-semibold text-muted-foreground">
{label} {label}
</div> </div>
<div> <div>
@@ -1188,7 +1181,7 @@ return { message: "Metadata fetched" };`);
const resolvedToStatusOptions = uniqueSortedStatuses([...toStatusOptions, toStatus]); const resolvedToStatusOptions = uniqueSortedStatuses([...toStatusOptions, toStatus]);
return ( return (
<section className="overflow-hidden rounded-md border border-border bg-card/82 shadow-sm"> <section className="overflow-hidden rounded-lg border border-border/50">
<div className="flex flex-col gap-3 border-b border-border bg-muted/35 px-4 py-3 lg:flex-row lg:items-center lg:justify-between"> <div className="flex flex-col gap-3 border-b border-border bg-muted/35 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
<div> <div>
<h2 className="text-base font-semibold text-foreground">Scrips ({scrips.length})</h2> <h2 className="text-base font-semibold text-foreground">Scrips ({scrips.length})</h2>
@@ -1850,7 +1843,7 @@ Location: {{custom_fields.location}}`;
}; };
return ( return (
<section className="overflow-hidden rounded-md border border-border bg-card/82 shadow-sm"> <section className="overflow-hidden rounded-lg border border-border/50">
<div className="flex flex-col gap-3 border-b border-border bg-muted/35 px-4 py-3 lg:flex-row lg:items-center lg:justify-between"> <div className="flex flex-col gap-3 border-b border-border bg-muted/35 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
<div> <div>
<h2 className="text-base font-semibold text-foreground">Templates ({templates.length})</h2> <h2 className="text-base font-semibold text-foreground">Templates ({templates.length})</h2>
@@ -2110,7 +2103,7 @@ function UsersTab() {
}; };
return ( return (
<section className="overflow-hidden rounded-md border border-border bg-card/82 shadow-sm"> <section className="overflow-hidden rounded-lg border border-border/50">
<div className="flex flex-col gap-3 border-b border-border bg-muted/35 px-4 py-3 lg:flex-row lg:items-center lg:justify-between"> <div className="flex flex-col gap-3 border-b border-border bg-muted/35 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
<div> <div>
<h2 className="text-base font-semibold text-foreground">Users ({users.length})</h2> <h2 className="text-base font-semibold text-foreground">Users ({users.length})</h2>
@@ -2261,7 +2254,7 @@ function TeamsTab() {
const selectedTeam = editingId ? teams.find((t) => t.id === editingId) : null; const selectedTeam = editingId ? teams.find((t) => t.id === editingId) : null;
return ( return (
<section className="overflow-hidden rounded-md border border-border bg-card/82 shadow-sm"> <section className="overflow-hidden rounded-lg border border-border/50">
<div className="flex flex-col gap-3 border-b border-border bg-muted/35 px-4 py-3 lg:flex-row lg:items-center lg:justify-between"> <div className="flex flex-col gap-3 border-b border-border bg-muted/35 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
<div> <div>
<h2 className="text-base font-semibold text-foreground">Teams ({teams.length})</h2> <h2 className="text-base font-semibold text-foreground">Teams ({teams.length})</h2>
@@ -2518,7 +2511,7 @@ function CustomFieldsTab() {
return ( return (
<> <>
<section className="overflow-hidden rounded-md border border-border bg-card/82 shadow-sm"> <section className="overflow-hidden rounded-lg border border-border/50">
<div className="flex flex-col gap-3 border-b border-border bg-muted/35 px-4 py-3 lg:flex-row lg:items-center lg:justify-between"> <div className="flex flex-col gap-3 border-b border-border bg-muted/35 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
<div> <div>
<h2 className="text-base font-semibold text-foreground">Custom fields ({fields.length})</h2> <h2 className="text-base font-semibold text-foreground">Custom fields ({fields.length})</h2>
@@ -2633,7 +2626,7 @@ function CustomFieldsTab() {
)} )}
</section> </section>
<section className="mt-5 overflow-hidden rounded-md border border-border bg-card/82 shadow-sm"> <section className="mt-5 overflow-hidden rounded-lg border border-border/50">
<div className="border-b border-border bg-muted/35 px-4 py-3"> <div className="border-b border-border bg-muted/35 px-4 py-3">
<h2 className="text-base font-semibold text-foreground">Queue field assignments</h2> <h2 className="text-base font-semibold text-foreground">Queue field assignments</h2>
<p className="mt-0.5 text-sm text-muted-foreground"> <p className="mt-0.5 text-sm text-muted-foreground">