🪟 feat: Make Chat Header Transparent (#11122)

* feat: Make top bar transparent

* style(AddMultiConvo): update PlusCircle icon size for consistency

* refactor(Header): use semantic presentation token for header gradient

* style: update buttons background color to use presentation

---------

Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>
This commit is contained in:
Joel Hirzel 2025-12-29 16:47:34 +01:00 committed by GitHub
parent d0835d5222
commit 29275cdc2a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 9 additions and 9 deletions

View file

@ -170,7 +170,7 @@ const BookmarkMenu: FC = () => {
id="bookmark-menu-button"
aria-label={localize('com_ui_bookmarks_add')}
className={cn(
'mt-text-sm flex size-10 flex-shrink-0 items-center justify-center gap-2 rounded-xl border border-border-light text-sm transition-colors duration-200 hover:bg-surface-hover',
'mt-text-sm flex size-10 flex-shrink-0 items-center justify-center gap-2 rounded-xl border border-border-light bg-presentation text-sm transition-colors duration-200 hover:bg-surface-hover',
isMenuOpen ? 'bg-surface-hover' : '',
)}
data-testid="bookmark-menu"

View file

@ -58,7 +58,7 @@ const PresetsMenu: FC = () => {
id="presets-button"
data-testid="presets-button"
aria-label={localize('com_endpoint_examples')}
className="rounded-xl p-2 duration-0 hover:bg-surface-active-alt max-md:hidden"
className="rounded-xl bg-presentation p-2 duration-0 hover:bg-surface-active-alt max-md:hidden"
// className="inline-flex size-10 flex-shrink-0 items-center justify-center rounded-xl border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
>
<BookCopy className="icon-lg" aria-hidden="true" />
@ -80,7 +80,7 @@ const PresetsMenu: FC = () => {
<Content
side="bottom"
align="center"
className="mt-2 max-h-[495px] overflow-x-hidden rounded-lg border border-border-light bg-surface-secondary text-text-primary shadow-lg md:min-w-[400px]"
className="mt-2 max-h-[495px] overflow-x-hidden rounded-lg border border-border-light bg-presentation text-text-primary shadow-lg md:min-w-[400px]"
>
<PresetItems
presets={presetsQuery.data}