From 96a71a34fe4211901f8454098b06ec4c7086f1a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gjermund=20H=C3=B8s=C3=B8ien=20Wiggen?=
 <gjermund.wiggen@sikt.no>
Date: Tue, 9 Jun 2026 23:04:02 +0200
Subject: [PATCH] =?UTF-8?q?redesign:=20admin=20pages=20=E2=80=94=20clean?=
 =?UTF-8?q?=202026=20style,=20no=20heavy=20boxes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 web/src/app/admin/page-content.tsx | 45 +++++++++++++-----------------
 1 file changed, 19 insertions(+), 26 deletions(-)

diff --git a/web/src/app/admin/page-content.tsx b/web/src/app/admin/page-content.tsx
index 1133631..4590fac 100644
--- a/web/src/app/admin/page-content.tsx
+++ b/web/src/app/admin/page-content.tsx
@@ -77,20 +77,13 @@ import { cn } from "@/lib/utils";
 
 function AdminHeader() {
   return (
-    <header className="border-b border-border bg-card/90 px-5 py-5 backdrop-blur lg:px-6">
-      <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
-        <div>
-          <div className="flex items-center gap-2 text-[11px] font-semibold uppercase text-muted-foreground">
-            <Settings2Icon className="h-3.5 w-3.5" />
-            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>
+    <header className="border-b border-border/50 px-5 py-4 lg:px-6">
+      <div>
+        <div className="flex items-center gap-2 text-[10px] font-medium uppercase tracking-wider text-muted-foreground/60">
+          <Settings2Icon className="h-3 w-3" />
+          Configuration
         </div>
+        <h1 className="mt-1 text-xl font-semibold tracking-tight text-foreground">Admin</h1>
       </div>
     </header>
   );
@@ -138,8 +131,8 @@ export default function AdminPage() {
     <div className="flex h-full flex-col bg-background/80">
       <AdminHeader />
       <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">
-          <TabsList className="h-9 rounded-md border border-border bg-muted/55 p-1">
+        <div className="border-b border-border/50 px-5 py-2.5 lg:px-6">
+          <TabsList className="h-8 rounded-lg bg-muted/40 p-0.5">
             <TabsTrigger value="queues" className="px-3">
               <DatabaseIcon className="h-4 w-4" />
               Queues
@@ -275,7 +268,7 @@ function QueuesTab() {
   };
 
   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>
           <h2 className="text-base font-semibold text-foreground">Queues ({queues.length})</h2>
@@ -484,7 +477,7 @@ function LifecyclesTab() {
   };
 
   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>
           <h2 className="text-base font-semibold text-foreground">Lifecycles ({lifecycles.length})</h2>
@@ -743,9 +736,9 @@ function ScripFlowNode({
   children: ReactNode;
 }) {
   return (
-    <section className="rounded-md border border-border bg-background">
-      <div className="flex items-start gap-3 border-b border-border bg-muted/30 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">
+    <section className="rounded-lg border border-border/50">
+      <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-md bg-muted/40 font-mono text-[11px] font-semibold text-muted-foreground">
           {label}
         </div>
         <div>
@@ -1188,7 +1181,7 @@ return { message: "Metadata fetched" };`);
   const resolvedToStatusOptions = uniqueSortedStatuses([...toStatusOptions, toStatus]);
 
   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>
           <h2 className="text-base font-semibold text-foreground">Scrips ({scrips.length})</h2>
@@ -1850,7 +1843,7 @@ Location: {{custom_fields.location}}`;
   };
 
   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>
           <h2 className="text-base font-semibold text-foreground">Templates ({templates.length})</h2>
@@ -2110,7 +2103,7 @@ function UsersTab() {
   };
 
   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>
           <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;
 
   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>
           <h2 className="text-base font-semibold text-foreground">Teams ({teams.length})</h2>
@@ -2518,7 +2511,7 @@ function CustomFieldsTab() {
 
   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>
             <h2 className="text-base font-semibold text-foreground">Custom fields ({fields.length})</h2>
@@ -2633,7 +2626,7 @@ function CustomFieldsTab() {
         )}
       </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">
           <h2 className="text-base font-semibold text-foreground">Queue field assignments</h2>
           <p className="mt-0.5 text-sm text-muted-foreground">