From 7d8ebbc9a85dc33ae81e61604e0990175e048031 Mon Sep 17 00:00:00 2001 From: David Dossett <25163139+daviddossett@users.noreply.github.com> Date: Tue, 17 Feb 2026 10:48:33 -0800 Subject: [PATCH] Chat input styling: border radius, icon colors, toolbar tweaks (#294351) * Chat input styling: border radius, icon colors, toolbar tweaks * Swap all send icons to arrowUp, fix toolbar icon colors * Fix missing semicolon, move inline styles to CSS class * Update 2026 theme chat input radius to radius-lg * Update descriptionForeground to #888888 in 2026 dark theme * Revert background agent Copilot CLI customizations --- extensions/theme-2026/themes/2026-dark.json | 2 +- extensions/theme-2026/themes/styles.css | 6 ++--- .../browser/actions/chatExecuteActions.ts | 6 ++--- .../widget/input/chatQueuePickerActionItem.ts | 4 ++-- .../chat/browser/widget/media/chat.css | 23 +++++++++++++------ 5 files changed, 25 insertions(+), 16 deletions(-) diff --git a/extensions/theme-2026/themes/2026-dark.json b/extensions/theme-2026/themes/2026-dark.json index 2ea52123207..b998917df47 100644 --- a/extensions/theme-2026/themes/2026-dark.json +++ b/extensions/theme-2026/themes/2026-dark.json @@ -7,7 +7,7 @@ "foreground": "#bfbfbf", "disabledForeground": "#666666", "errorForeground": "#f48771", - "descriptionForeground": "#999999", + "descriptionForeground": "#888888", "icon.foreground": "#888888", "focusBorder": "#3994BCB3", "textBlockQuote.background": "#242526", diff --git a/extensions/theme-2026/themes/styles.css b/extensions/theme-2026/themes/styles.css index 8ea22bafb03..6dfbb2888a4 100644 --- a/extensions/theme-2026/themes/styles.css +++ b/extensions/theme-2026/themes/styles.css @@ -242,16 +242,16 @@ /* Chat Widget */ .monaco-workbench .interactive-session .chat-input-container { box-shadow: inset var(--shadow-sm); - border-radius: var(--radius-md); + border-radius: var(--radius-lg); } .monaco-workbench .interactive-session .interactive-input-part .chat-editor-container .interactive-input-editor .monaco-editor, .monaco-workbench .interactive-session .chat-editing-session .chat-editing-session-container { - border-radius: var(--radius-sm) var(--radius-sm) 0 0; + border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .monaco-workbench .interactive-input-part:has(.chat-editing-session > .chat-editing-session-container) .chat-input-container { - border-radius: 0 0 var(--radius-md) var(--radius-md); + border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .monaco-workbench .part.panel .interactive-session, diff --git a/src/vs/workbench/contrib/chat/browser/actions/chatExecuteActions.ts b/src/vs/workbench/contrib/chat/browser/actions/chatExecuteActions.ts index 5291b8e36cb..27fb21ed7be 100644 --- a/src/vs/workbench/contrib/chat/browser/actions/chatExecuteActions.ts +++ b/src/vs/workbench/contrib/chat/browser/actions/chatExecuteActions.ts @@ -198,11 +198,11 @@ export class ChatSubmitAction extends SubmitAction { title: localize2('interactive.submit.label', "Send"), f1: false, category: CHAT_CATEGORY, - icon: Codicon.send, + icon: Codicon.arrowUp, precondition, toggled: { condition: ChatContextKeys.lockedToCodingAgent, - icon: Codicon.send, + icon: Codicon.arrowUp, tooltip: localize('sendToAgent', "Send to Agent"), }, keybinding: { @@ -676,7 +676,7 @@ export class ChatEditingSessionSubmitAction extends SubmitAction { title: localize2('edits.submit.label', "Send"), f1: false, category: CHAT_CATEGORY, - icon: Codicon.send, + icon: Codicon.arrowUp, precondition, menu: [ { diff --git a/src/vs/workbench/contrib/chat/browser/widget/input/chatQueuePickerActionItem.ts b/src/vs/workbench/contrib/chat/browser/widget/input/chatQueuePickerActionItem.ts index 5d5b59ccca8..fac726fe312 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/input/chatQueuePickerActionItem.ts +++ b/src/vs/workbench/contrib/chat/browser/widget/input/chatQueuePickerActionItem.ts @@ -61,7 +61,7 @@ export class ChatQueuePickerActionItem extends BaseActionViewItem { this._primaryActionAction = this._register(new Action( 'chat.queuePickerPrimary', isSteerDefault ? localize('chat.steerWithMessage', "Steer with Message") : localize('chat.queueMessage', "Add to Queue"), - ThemeIcon.asClassName(Codicon.send), + ThemeIcon.asClassName(Codicon.arrowUp), !!contextKeyService.getContextKeyValue(ChatContextKeys.inputHasText.key), () => this._runDefaultAction() )); @@ -194,7 +194,7 @@ export class ChatQueuePickerActionItem extends BaseActionViewItem { label: localize('chat.sendImmediately', "Stop and Send"), tooltip: '', enabled: true, - icon: Codicon.send, + icon: Codicon.arrowUp, class: undefined, hover: { content: localize('chat.sendImmediately.hover', "Cancel the current request and send this message immediately."), diff --git a/src/vs/workbench/contrib/chat/browser/widget/media/chat.css b/src/vs/workbench/contrib/chat/browser/widget/media/chat.css index c0abfa14e97..4580ea562d7 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/media/chat.css +++ b/src/vs/workbench/contrib/chat/browser/widget/media/chat.css @@ -795,12 +795,12 @@ have to be updated for changes to the rules above, or to support more deeply nes margin-right: 3px; } -.interactive-session .chat-input-container { +.monaco-workbench .interactive-session .chat-input-container { box-sizing: border-box; cursor: text; background-color: var(--vscode-input-background); border: 1px solid var(--vscode-input-border, transparent); - border-radius: 4px; + border-radius: var(--vscode-cornerRadius-large); padding: 0 6px 6px 6px; /* top padding is inside the editor widget */ width: 100%; @@ -837,13 +837,13 @@ have to be updated for changes to the rules above, or to support more deeply nes position: relative; } -.interactive-session .chat-editing-session .chat-editing-session-container { +.monaco-workbench .interactive-session .chat-editing-session .chat-editing-session-container { padding: 4px 3px 4px 3px; box-sizing: border-box; background-color: var(--vscode-editor-background); border: 1px solid var(--vscode-input-border, transparent); border-bottom: none; - border-radius: 4px 4px 0 0; + border-radius: var(--vscode-cornerRadius-large) var(--vscode-cornerRadius-large) 0 0; display: flex; flex-direction: column; gap: 2px; @@ -937,7 +937,7 @@ have to be updated for changes to the rules above, or to support more deeply nes border-radius: 2px; border: none; background-color: unset; - color: var(--vscode-foreground) + color: var(--vscode-descriptionForeground); } .monaco-button:focus-visible { @@ -1300,6 +1300,10 @@ have to be updated for changes to the rules above, or to support more deeply nes padding-left: 4px; } +.interactive-session .chat-editor-container .monaco-editor .view-lines { + padding-left: 4px; +} + .interactive-session .chat-input-toolbars { display: flex; } @@ -1371,11 +1375,16 @@ have to be updated for changes to the rules above, or to support more deeply nes padding: 3px 0px 3px 6px; display: flex; align-items: center; + color: var(--vscode-descriptionForeground); } +.monaco-workbench .interactive-session .chat-input-toolbars .monaco-action-bar .action-item .codicon.codicon, +.monaco-workbench .interactive-session .chat-input-toolbars .action-label .codicon.codicon { + color: var(--vscode-descriptionForeground) !important; +} -.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label .codicon-chevron-down, -.interactive-session .chat-input-toolbar .chat-sessionPicker-item .action-label .codicon-chevron-down { +.monaco-workbench .interactive-session .chat-input-toolbar .chat-input-picker-item .action-label .codicon-chevron-down, +.monaco-workbench .interactive-session .chat-input-toolbar .chat-sessionPicker-item .action-label .codicon-chevron-down { font-size: 12px; margin-left: 2px; }