From c3440f53e1f19650f44167bc957a32097f9882df Mon Sep 17 00:00:00 2001 From: Brian Love Date: Fri, 1 May 2026 19:10:11 -0700 Subject: [PATCH] =?UTF-8?q?fix(chat):=20visual=20polish=20=E2=80=94=20side?= =?UTF-8?q?bar/popup=20borders=20+=20send=20disabled=20state?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three small fixes from the 0.0.5 smoke test: 1. chat-sidebar panel: white-on-white blends into a white app body, only the soft 8px shadow distinguishes them. Add a 1px border-left in --ngaf-chat-separator so the panel reads as a distinct surface. Slightly soften the box-shadow (.16 → .08) since the border now carries the visual definition. 2. chat-popup window: same issue at the floating window's edges. Add a 1px border in --ngaf-chat-separator. Shadow stays as-is (it's the dominant visual cue for popups). 3. chat-input send button disabled state: the previous styling (white-on-muted-grey) had near-zero contrast for the icon — visually unreadable. Switch to surface-alt bg + muted-text icon + 0.7 opacity, which reads clearly as disabled without falling below contrast thresholds. Bumps @ngaf/chat to 0.0.6. Co-Authored-By: Claude Opus 4.7 (1M context) --- libs/chat/package.json | 2 +- .../lib/compositions/chat-popup/chat-popup.component.ts | 1 + .../compositions/chat-sidebar/chat-sidebar.component.ts | 3 ++- libs/chat/src/lib/styles/chat-input.styles.ts | 7 ++++++- 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/libs/chat/package.json b/libs/chat/package.json index 826123da7..4f6b98399 100644 --- a/libs/chat/package.json +++ b/libs/chat/package.json @@ -1,6 +1,6 @@ { "name": "@ngaf/chat", - "version": "0.0.5", + "version": "0.0.6", "exports": { ".": { "types": "./index.d.ts", diff --git a/libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts b/libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts index 9fd794c0a..3a1612274 100644 --- a/libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts +++ b/libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts @@ -22,6 +22,7 @@ import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens'; height: 600px; max-height: calc(100vh - 6rem); background: var(--ngaf-chat-bg); + border: 1px solid var(--ngaf-chat-separator); border-radius: 0.75rem; box-shadow: 0 5px 40px rgba(0,0,0,.16); transform-origin: bottom right; diff --git a/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts b/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts index 4cff95c7a..5c18780e7 100644 --- a/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts +++ b/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts @@ -26,7 +26,8 @@ import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens'; top: 0; right: 0; bottom: 0; width: 28rem; background: var(--ngaf-chat-bg); - box-shadow: -8px 0 32px rgba(0,0,0,.12); + border-left: 1px solid var(--ngaf-chat-separator); + box-shadow: -8px 0 32px rgba(0,0,0,.08); transform: translateX(100%); transition: transform 200ms ease-out; z-index: 30; diff --git a/libs/chat/src/lib/styles/chat-input.styles.ts b/libs/chat/src/lib/styles/chat-input.styles.ts index d3fb17276..dd6bec644 100644 --- a/libs/chat/src/lib/styles/chat-input.styles.ts +++ b/libs/chat/src/lib/styles/chat-input.styles.ts @@ -62,6 +62,11 @@ export const CHAT_INPUT_STYLES = ` transition: transform 200ms ease, background 200ms ease; } .chat-input__send:hover:not(:disabled) { transform: scale(1.05); } - .chat-input__send:disabled { background: var(--ngaf-chat-muted); color: var(--ngaf-chat-on-primary); cursor: not-allowed; } + .chat-input__send:disabled { + background: var(--ngaf-chat-surface-alt); + color: var(--ngaf-chat-muted); + cursor: not-allowed; + opacity: 0.7; + } .chat-input__send svg { width: 16px; height: 16px; } `;