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

redesign: admin tab inner content — softer borders, cleaner items

Browse Source 
- List items: border/50, bg-primary/5 on active, hover:bg-accent/30
- Side panels: border/50 dividers
- Form panels: border/50 on section headers
- Section title bars: bg-muted/20 instead of /35
- Softer list item dividers (border/30)

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

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

@@ -269,7 +269,7 @@ function QueuesTab() {
return (
<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/50 bg-muted/20 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
<div>
<h2 className="text-base font-semibold text-foreground">Queues ({queues.length})</h2>
<p className="mt-0.5 text-sm text-muted-foreground">Route work into lifecycle-bound operational lanes.</p>
@@ -284,7 +284,7 @@ function QueuesTab() {
<LoadingState />
) : (
<div className="grid min-h-[560px] lg:grid-cols-[320px_minmax(0,1fr)]">
<aside className="min-w-0 overflow-hidden border-b border-border bg-background/70 lg:border-b-0 lg:border-r">
<aside className="min-w-0 overflow-hidden border-b border-border/50 lg:border-b-0 lg:border-r border-border/50">
<div className="flex min-w-0 items-center justify-between gap-3 border-b border-border px-4 py-3">
<div className="min-w-0">
<div className="text-[11px] font-semibold uppercase text-muted-foreground">Queue library</div>
@@ -305,8 +305,8 @@ function QueuesTab() {
type="button"
onClick={() => selectQueue(queue)}
className={cn(
"min-w-0 max-w-full overflow-hidden rounded-md border p-3 text-left transition hover:border-primary/45 hover:bg-accent/45",
editingId === queue.id ? "border-primary bg-primary/10" : "border-border bg-card"
"min-w-0 max-w-full overflow-hidden rounded-lg border p-3 text-left transition hover:border-primary/30",
editingId === queue.id ? "border-primary/50 bg-primary/5" : "border-border/50 hover:bg-accent/30"
)}
>
<div className="truncate text-sm font-semibold text-foreground">{queue.name}</div>
@@ -320,7 +320,7 @@ function QueuesTab() {
</div>
</aside>
<div className="min-w-0 p-4">
<div className="mb-4 flex flex-col gap-3 border-b border-border pb-4 lg:flex-row lg:items-center lg:justify-between">
<div className="mb-4 flex flex-col gap-3 border-b border-border/50 pb-4 lg:flex-row lg:items-center lg:justify-between">
<div>
<div className="text-[11px] font-semibold uppercase text-muted-foreground">
{editingId ? "Editing queue" : "New queue"}
@@ -478,7 +478,7 @@ function LifecyclesTab() {
return (
<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/50 bg-muted/20 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
<div>
<h2 className="text-base font-semibold text-foreground">Lifecycles ({lifecycles.length})</h2>
<p className="mt-0.5 text-sm text-muted-foreground">Define status classes and allowed movement through ticket states.</p>
@@ -493,7 +493,7 @@ function LifecyclesTab() {
<LoadingState />
) : (
<div className="grid min-h-[560px] lg:grid-cols-[320px_minmax(0,1fr)]">
<aside className="min-w-0 overflow-hidden border-b border-border bg-background/70 lg:border-b-0 lg:border-r">
<aside className="min-w-0 overflow-hidden border-b border-border/50 lg:border-b-0 lg:border-r border-border/50">
<div className="flex min-w-0 items-center justify-between gap-3 border-b border-border px-4 py-3">
<div className="min-w-0">
<div className="text-[11px] font-semibold uppercase text-muted-foreground">Lifecycle library</div>
@@ -530,7 +530,7 @@ function LifecyclesTab() {
</div>
</aside>
<div className="min-w-0 p-4">
<div className="mb-4 flex flex-col gap-3 border-b border-border pb-4 lg:flex-row lg:items-center lg:justify-between">
<div className="mb-4 flex flex-col gap-3 border-b border-border/50 pb-4 lg:flex-row lg:items-center lg:justify-between">
<div>
<div className="text-[11px] font-semibold uppercase text-muted-foreground">
{editingId ? "Editing lifecycle" : "New lifecycle"}
@@ -1182,7 +1182,7 @@ return { message: "Metadata fetched" };`);
return (
<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/50 bg-muted/20 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
<div>
<h2 className="text-base font-semibold text-foreground">Scrips ({scrips.length})</h2>
<p className="mt-0.5 text-sm text-muted-foreground">
@@ -1199,7 +1199,7 @@ return { message: "Metadata fetched" };`);
<LoadingState />
) : (
<div className="grid min-h-[640px] lg:grid-cols-[320px_minmax(0,1fr)]">
<aside className="min-w-0 overflow-hidden border-b border-border bg-background/70 lg:border-b-0 lg:border-r">
<aside className="min-w-0 overflow-hidden border-b border-border/50 lg:border-b-0 lg:border-r border-border/50">
<div className="flex min-w-0 items-center justify-between gap-3 border-b border-border px-4 py-3">
<div className="min-w-0">
<div className="text-[11px] font-semibold uppercase text-muted-foreground">Automation library</div>
@@ -1259,7 +1259,7 @@ return { message: "Metadata fetched" };`);
</aside>
<div className="min-w-0 p-4">
<div className="mb-4 flex flex-col gap-3 border-b border-border pb-4 lg:flex-row lg:items-center lg:justify-between">
<div className="mb-4 flex flex-col gap-3 border-b border-border/50 pb-4 lg:flex-row lg:items-center lg:justify-between">
<div>
<div className="text-[11px] font-semibold uppercase text-muted-foreground">
{activeScrip ? "Editing automation" : "New automation"}
@@ -1844,7 +1844,7 @@ Location: {{custom_fields.location}}`;
return (
<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/50 bg-muted/20 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
<div>
<h2 className="text-base font-semibold text-foreground">Templates ({templates.length})</h2>
<p className="mt-0.5 text-sm text-muted-foreground">
@@ -1861,7 +1861,7 @@ Location: {{custom_fields.location}}`;
<LoadingState />
) : (
<div className="grid min-h-[640px] lg:grid-cols-[320px_minmax(0,1fr)]">
<aside className="min-w-0 overflow-hidden border-b border-border bg-background/70 lg:border-b-0 lg:border-r">
<aside className="min-w-0 overflow-hidden border-b border-border/50 lg:border-b-0 lg:border-r border-border/50">
<div className="flex min-w-0 items-center justify-between gap-3 border-b border-border px-4 py-3">
<div className="min-w-0">
<div className="text-[11px] font-semibold uppercase text-muted-foreground">Template library</div>
@@ -1921,7 +1921,7 @@ Location: {{custom_fields.location}}`;
</aside>
<div className="min-w-0 p-4">
<div className="mb-4 flex flex-col gap-3 border-b border-border pb-4 lg:flex-row lg:items-center lg:justify-between">
<div className="mb-4 flex flex-col gap-3 border-b border-border/50 pb-4 lg:flex-row lg:items-center lg:justify-between">
<div>
<div className="text-[11px] font-semibold uppercase text-muted-foreground">
{editingId ? "Editing template" : "New template"}
@@ -2104,7 +2104,7 @@ function UsersTab() {
return (
<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/50 bg-muted/20 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
<div>
<h2 className="text-base font-semibold text-foreground">Users ({users.length})</h2>
<p className="mt-0.5 text-sm text-muted-foreground">Create, update, and manage user accounts for ticket assignment.</p>
@@ -2129,7 +2129,7 @@ function UsersTab() {
<div
key={user.id}
className={cn(
"flex items-center justify-between border-b border-border/50 px-4 py-2.5 transition-colors hover:bg-accent/40",
"flex items-center justify-between border-b border-border/30 px-4 py-2.5 transition-colors hover:bg-accent/30",
editingId === user.id && "bg-primary/10"
)}
>
@@ -2255,7 +2255,7 @@ function TeamsTab() {
return (
<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/50 bg-muted/20 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
<div>
<h2 className="text-base font-semibold text-foreground">Teams ({teams.length})</h2>
<p className="mt-0.5 text-sm text-muted-foreground">Organize users into teams. Assign dashboards to teams.</p>
@@ -2278,7 +2278,7 @@ function TeamsTab() {
teams.map((team) => (
<div key={team.id}
className={cn(
"flex items-center justify-between border-b border-border/50 px-4 py-2.5 transition-colors hover:bg-accent/40",
"flex items-center justify-between border-b border-border/30 px-4 py-2.5 transition-colors hover:bg-accent/30",
editingId === team.id && "bg-primary/10"
)}
>
@@ -2512,7 +2512,7 @@ function CustomFieldsTab() {
return (
<>
<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/50 bg-muted/20 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
<div>
<h2 className="text-base font-semibold text-foreground">Custom fields ({fields.length})</h2>
<p className="mt-0.5 text-sm text-muted-foreground">Metadata that makes tickets queryable and operationally useful.</p>
@@ -2527,7 +2527,7 @@ function CustomFieldsTab() {
<LoadingState />
) : (
<div className="grid min-h-[560px] lg:grid-cols-[320px_minmax(0,1fr)]">
<aside className="min-w-0 overflow-hidden border-b border-border bg-background/70 lg:border-b-0 lg:border-r">
<aside className="min-w-0 overflow-hidden border-b border-border/50 lg:border-b-0 lg:border-r border-border/50">
<div className="flex min-w-0 items-center justify-between gap-3 border-b border-border px-4 py-3">
<div className="min-w-0">
<div className="text-[11px] font-semibold uppercase text-muted-foreground">Field library</div>
@@ -2568,7 +2568,7 @@ function CustomFieldsTab() {
</div>
</aside>
<div className="min-w-0 p-4">
<div className="mb-4 flex flex-col gap-3 border-b border-border pb-4 lg:flex-row lg:items-center lg:justify-between">
<div className="mb-4 flex flex-col gap-3 border-b border-border/50 pb-4 lg:flex-row lg:items-center lg:justify-between">
<div>
<div className="text-[11px] font-semibold uppercase text-muted-foreground">
{editingId ? "Editing custom field" : "New custom field"}