From ce94a92c7f369c8cdbf05368ea806203772a480f Mon Sep 17 00:00:00 2001
From: ctlbd <ctlbd@users.noreply.github.com>
Date: Mon, 11 May 2026 23:44:58 +0300
Subject: [PATCH] UI polish: scrollbar, focus ring, nav active state,
 transitions, sidebar border
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Scrollbar width 1px → 6px for better usability
- Add *:focus-visible outline (hl-500) — restores keyboard accessibility without affecting mouse users
- Input fields: add visible border + focus color shift
- Transitions: 100ms → 150ms across buttons and focusable elements
- Buttons: rounded-md → rounded-lg for a more modern look
- Sidebar: add subtle right border (bg-600) to separate from main content
- Active nav item: hl-800 background + blue left-border accent instead of barely-visible hl-900
- Logo: text-lg + tracking-wide, accent color brightened to hl-400

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/Navigation.tsx |  4 ++--
 web/app.css        |  4 +++-
 web/tailwind.css   | 15 ++++++++++-----
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/web/Navigation.tsx b/web/Navigation.tsx
index f39a48302..926e1e928 100644
--- a/web/Navigation.tsx
+++ b/web/Navigation.tsx
@@ -184,10 +184,10 @@ const Navigation: Component = () => {
                 aria-label="Agnaistic main page"
               >
                 <div
-                  class="flex h-8 w-full items-center justify-center rounded-lg font-bold"
+                  class="flex h-8 w-full items-center justify-center rounded-lg text-lg font-bold tracking-wide"
                   aria-hidden="true"
                 >
-                  Agn<span class="text-[var(--hl-500)]">ai</span>
+                  Agn<span class="text-[var(--hl-400)]">ai</span>
                   {suffix()}
                 </div>
               </A>
diff --git a/web/app.css b/web/app.css
index dfaed5b61..663a953eb 100644
--- a/web/app.css
+++ b/web/app.css
@@ -59,6 +59,7 @@ html {
   transition: 400ms ease;
   @apply bg-[var(--bg-800)] sm:top-0 sm:clear-none;
   @apply z-20 sm:z-0;
+  @apply border-r border-[var(--bg-600)];
 }
 
 #main-content {
@@ -94,7 +95,8 @@ html {
 }
 
 .drawer > * > a.active {
-  @apply bg-[var(--hl-900)];
+  @apply bg-[var(--hl-800)] border-l-2 border-[var(--hl-400)];
+  padding-left: calc(0.5rem - 2px);
 }
 
 @keyframes hideDrawer {
diff --git a/web/tailwind.css b/web/tailwind.css
index a56f7fae8..0f2f01037 100644
--- a/web/tailwind.css
+++ b/web/tailwind.css
@@ -6,6 +6,11 @@
 *:focus {
   @apply outline-none;
 }
+*:focus-visible {
+  outline: 2px solid var(--hl-500);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
 
 * > code {
   @apply rounded-md bg-[var(--bg-600)] p-1 text-[var(--text-900)];
@@ -231,7 +236,7 @@ body {
    */
 
   ::-webkit-scrollbar {
-    @apply h-1 w-1;
+    @apply h-1.5 w-1.5;
   }
   ::-webkit-scrollbar-track {
     @apply bg-[var(--bg-700)];
@@ -247,14 +252,14 @@ body {
    * Focus/accessibility-related utilities.
    */
   ._focusable-base {
-    @apply transition-all duration-100;
+    @apply transition-all duration-150;
   }
 
   .focusable-field {
     @apply _focusable-base;
     @apply bg-[var(--bg-800)] hover:bg-[var(--bg-700)];
     @apply placeholder:text-[var(--text-600)];
-    @apply border-[var(--bg-700)];
+    @apply border border-[var(--bg-600)] focus:border-[var(--hl-600)];
   }
 
   .focusable-icon-button,
@@ -289,8 +294,8 @@ body {
    */
   .btn-base {
     @apply flex h-fit gap-1;
-    @apply transition-colors duration-100;
-    @apply rounded-md px-3;
+    @apply transition-colors duration-150;
+    @apply rounded-lg px-3;
     @apply disabled:cursor-not-allowed;
   }