From f12b24e04289a4b7d405c9dc9109bcfa4f1cc17e 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:05:53 +0200
Subject: [PATCH] =?UTF-8?q?redesign:=20admin=20tab=20inner=20content=20?=
 =?UTF-8?q?=E2=80=94=20softer=20borders,=20cleaner=20items?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/web/src/app/admin/page-content.tsx b/web/src/app/admin/page-content.tsx
index 4590fac..ff1acbb 100644
--- a/web/src/app/admin/page-content.tsx
+++ b/web/src/app/admin/page-content.tsx
@@ -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"}