From 1806bcab5c928ba5e840f1836e109e96c5c29d5d Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Thu, 19 Feb 2026 20:40:21 +0000
Subject: [PATCH] A bit more color for light theme; cleaner user badges in
 admin app.

---
 frontend/src/admin/AdminOrgDetail.vue | 8 ++++----
 frontend/src/assets/style.css         | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/admin/AdminOrgDetail.vue b/frontend/src/admin/AdminOrgDetail.vue
index 080bbe9..080d598 100644
--- a/frontend/src/admin/AdminOrgDetail.vue
+++ b/frontend/src/admin/AdminOrgDetail.vue
@@ -389,7 +389,7 @@ defineExpose({ focusFirstElement })
                 :title="u.uuid"
               >
                 <span class="name">{{ u.display_name }}</span>
-                <span class="meta">{{ u.last_seen ? new Date(u.last_seen).toLocaleDateString() : '—' }}</span>
+                <span class="meta">{{ u.last_seen ? new Date(u.last_seen).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) : '—' }}</span>
               </li>
             </template>
           </draggable>
@@ -409,7 +409,7 @@ defineExpose({ focusFirstElement })
 .perm-matrix-grid .role-head { display: flex; align-items: flex-end; justify-content: center; }
 .perm-matrix-grid .role-head span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.65rem; }
 .perm-matrix-grid .add-role-head { cursor: pointer; }
-.roles-grid { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-lg); justify-content: flex-start; align-items: stretch; }
+.roles-grid { display: flex; flex-wrap: wrap; gap: 0; margin-top: var(--space-lg); justify-content: flex-start; align-items: stretch; }
 .role-column { flex: 0 0 240px; border-radius: var(--radius-md); padding: var(--space-md); display: flex; flex-direction: column; }
 .role-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
 .role-name { display: flex; align-items: center; gap: var(--space-xs); font-size: 1.1rem; color: var(--color-heading); }
@@ -418,9 +418,9 @@ defineExpose({ focusFirstElement })
 .plus-btn:hover { background: rgba(37, 99, 235, 0.18); }
 .user-list-wrapper { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 5.5rem; }
 .user-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
-.user-chip { background: var(--color-accent-strong); color: white; border: none; border-radius: var(--radius-md); padding: 0.45rem 0.6rem; display: flex; justify-content: space-between; gap: var(--space-sm); cursor: grab; }
+.user-chip { background: var(--color-accent-strong); color: var(--color-accent-contrast); border: none; border-radius: var(--radius-md); padding: 0.45rem 0.6rem; display: flex; justify-content: space-between; gap: var(--space-sm); cursor: grab; }
 .user-chip:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
-.user-chip .meta { font-size: 0.7rem; color: rgba(255, 255, 255, 0.8); }
+.user-chip .meta { font-size: 0.7rem; }
 .user-chip.sortable-ghost { opacity: 0.5; }
 .user-chip.sortable-chosen { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
 .empty-role { position: absolute; inset: 0; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; pointer-events: none; }
diff --git a/frontend/src/assets/style.css b/frontend/src/assets/style.css
index aa43be9..5f8d62d 100644
--- a/frontend/src/assets/style.css
+++ b/frontend/src/assets/style.css
@@ -9,8 +9,8 @@
   --font-sans: "Inter", "Inter var", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
   --font-mono: "DM Mono", "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   --color-canvas: white;
-  --color-surface: white;
-  --color-surface-subtle: white;
+  --color-surface: #def;
+  --color-surface-subtle: #bcf;
   --color-surface-hover: oklab(0.97 -0.01 -0.02);
   --color-dialog: oklab(0.96 -0.01 -0.03);
   --color-border: oklab(0.82 -0.02 -0.06);
@@ -21,7 +21,7 @@
   --color-link: oklab(0.5 -0.06 -0.17);
   --color-link-hover: oklab(0.45 -0.06 -0.19);
   --color-accent: oklab(0.55 -0.06 -0.19);
-  --color-accent-strong: oklab(0.45 -0.06 -0.19);
+  --color-accent-strong: #46f;
   --color-accent-contrast: white;
   --color-secondary: oklab(0.55 -0.02 -0.05);
   --color-secondary-strong: oklab(0.45 -0.02 -0.05);