From 8bec7dfc9a9f91e520ea4fb666f454332a249d3c Mon Sep 17 00:00:00 2001
From: Christoph Brandau <c.brandau91@gmail.com>
Date: Mon, 31 Aug 2026 11:14:56 +0200
Subject: [PATCH] style(ui): refine tab and dialog close button visuals

Adjust spacing and sizing for repo tabs and close controls. Add
transitions, larger hit areas, and updated hover/focus styles. Introduce
theme-aware variants and neutral dialog close styling for consistency.
Also update help overlay close to match the new behavior.

- increase close button size and tweak padding for alignment
- add transitions and inset focus/hover visuals with themes
- normalize dialog and help close appearance for consistency
---
 src/app.css                           | 58 +++++++++++++++++++++------
 src/lib/components/HelpOverlay.svelte |  3 +-
 2 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/src/app.css b/src/app.css
index 8978d56..f3453f3 100644
--- a/src/app.css
+++ b/src/app.css
@@ -8843,7 +8843,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
 .repo-tab {
   min-height: 35px;
   height: 35px;
-  padding: 0 31px 0 15px;
+  padding: 0 34px 0 15px;
   gap: 6px;
   font-size: 12.5px;
   font-weight: 650;
@@ -8869,19 +8869,21 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
 
 .repo-tab-close {
   position: absolute;
-  top: 8px;
-  right: 6px;
-  width: 19px;
-  min-width: 19px;
-  max-width: 19px;
-  height: 19px;
-  min-height: 19px;
-  max-height: 19px;
+  top: 6px;
+  right: 5px;
+  width: 23px;
+  min-width: 23px;
+  max-width: 23px;
+  height: 23px;
+  min-height: 23px;
+  max-height: 23px;
   margin: 0;
-  border-radius: 2px;
+  border-radius: 3px;
   color: var(--color-ink-faint);
   background: transparent;
+  box-shadow: none;
   opacity: 0.62;
+  transition: opacity 120ms ease, color 120ms ease, background 120ms ease, box-shadow 120ms ease;
 }
 
 .repo-tab-wrap.active .repo-tab-close { opacity: 0.72; }
@@ -8889,8 +8891,16 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
 .repo-tab-wrap:focus-within .repo-tab-close { opacity: 1; }
 .repo-tab-close:hover:not(:disabled),
 .repo-tab-close:focus-visible:not(:disabled) {
-  color: #e1848b;
-  background: transparent;
+  color: #ffffff;
+  background: #d93641;
+  box-shadow: inset 0 0 0 1px #f0646d;
+}
+
+:root[data-theme="light"] .repo-tab-close:hover:not(:disabled),
+:root[data-theme="light"] .repo-tab-close:focus-visible:not(:disabled) {
+  color: #ffffff;
+  background: #c92f3a;
+  box-shadow: inset 0 0 0 1px #a9212b;
 }
 
 .repo-tab-add {
@@ -8939,3 +8949,27 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
 :root:not([data-theme="light"]) .repo-tab.management.active > svg {
   color: #d7dae0;
 }
+
+/* Keep every dialog close action neutral until it is intentionally targeted. */
+:root .dialog-close:hover:not(:disabled),
+:root .dialog-close:focus-visible:not(:disabled),
+:root .dialog-icon-button:hover:not(:disabled),
+:root .dialog-icon-button:focus-visible:not(:disabled),
+:root .cred-close:hover:not(:disabled),
+:root .cred-close:focus-visible:not(:disabled) {
+  color: #ffffff;
+  border-color: #f0646d;
+  background: #d93641;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+}
+
+:root[data-theme="light"] .dialog-close:hover:not(:disabled),
+:root[data-theme="light"] .dialog-close:focus-visible:not(:disabled),
+:root[data-theme="light"] .dialog-icon-button:hover:not(:disabled),
+:root[data-theme="light"] .dialog-icon-button:focus-visible:not(:disabled),
+:root[data-theme="light"] .cred-close:hover:not(:disabled),
+:root[data-theme="light"] .cred-close:focus-visible:not(:disabled) {
+  color: #ffffff;
+  border-color: #a9212b;
+  background: #c92f3a;
+}
diff --git a/src/lib/components/HelpOverlay.svelte b/src/lib/components/HelpOverlay.svelte
index 0dad1b9..0911e68 100644
--- a/src/lib/components/HelpOverlay.svelte
+++ b/src/lib/components/HelpOverlay.svelte
@@ -2116,7 +2116,8 @@
   .help-search-icon { position: absolute; left: 12px; display: grid; color: var(--color-ink-faint); pointer-events: none; }
   .help-search input { width: 100%; height: 40px; padding: 0 68px 0 39px; border-color: var(--color-border-input); border-radius: 8px; background: var(--app-input-bg); color: var(--color-ink); font-size: 12.5px; }
   .help-search kbd { position: absolute; right: 8px; }
-  .help-close { justify-self: end; width: 36px; min-height: 36px; padding: 0; border-color: transparent; border-radius: 7px; background: transparent; color: var(--color-ink-muted); }
+  .help-close { justify-self: end; width: 36px; min-height: 36px; padding: 0; border-color: transparent; border-radius: 7px; background: transparent; color: var(--color-ink-muted); transition: color 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease; }
+  .help-close:hover:not(:disabled), .help-close:focus-visible:not(:disabled) { color: #fff; border-color: #f0646d; background: #d93641; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
 
   .help-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 0; }
   .help-nav { display: flex; flex-direction: column; min-height: 0; padding: 14px 10px 12px; border-right: 1px solid var(--color-border); background: var(--color-surface-dim); }