From ddaad8862fa8ff9d5a5a003913a9c0426e1a9b91 Mon Sep 17 00:00:00 2001 From: Bob Lee Date: Sat, 29 Aug 2026 17:09:16 +0800 Subject: [PATCH] fix(web): make chat app icons theme-aware --- .../src/app/components/NavPanel/NavPanel.scss | 29 ++++---------- .../RemoteConnectDialog/ChatAppBrandIcon.tsx | 2 +- .../RemoteConnectDialog.contract.test.ts | 39 +++++++++++++++++++ .../RemoteConnectDialog.scss | 32 +++------------ 4 files changed, 53 insertions(+), 49 deletions(-) diff --git a/src/web-ui/src/app/components/NavPanel/NavPanel.scss b/src/web-ui/src/app/components/NavPanel/NavPanel.scss index 957d5ce019..42f65ca10d 100644 --- a/src/web-ui/src/app/components/NavPanel/NavPanel.scss +++ b/src/web-ui/src/app/components/NavPanel/NavPanel.scss @@ -1638,10 +1638,9 @@ $_section-header-height: 22px; line-height: 1.25; } -// Attached remote parties are shown as one badge per device kind in the -// connection-live green the workspace list already teaches in this panel. The -// number lives inside a badge, so twenty attached hosts occupy the same width -// as one and no state sentence sits in permanent navigation chrome. +// Attached remote parties are shown once per device kind. Message-app marks +// stay unframed and inherit the theme foreground; connection state is already +// communicated by the device overview rather than by recoloring the brand. .bitfun-nav-panel__footer-device-status-attached { display: flex; flex-shrink: 0; @@ -1665,17 +1664,9 @@ $_section-header-height: 22px; line-height: 1; &[data-bf-device-kind='message-app'] { - border-color: color-mix( - in srgb, - var(--bf-appearance-token-color-success) 24%, - var(--bf-appearance-token-border-subtle) - ); - background: color-mix( - in srgb, - var(--bf-appearance-token-color-success) 9%, - var(--bf-appearance-token-element-bg-subtle) - ); - color: var(--bf-appearance-token-color-success); + border: 0; + background: transparent; + color: var(--bf-appearance-token-color-text-primary); } } @@ -2238,12 +2229,8 @@ $_section-header-height: 22px; } &[data-bf-device-kind='message-app'] .bitfun-device-overview__device-icon { - background: color-mix( - in srgb, - var(--bf-appearance-token-color-success) 10%, - var(--bf-appearance-token-element-bg-subtle) - ); - color: var(--bf-appearance-token-color-success); + background: transparent; + color: var(--bf-appearance-token-color-text-primary); } strong { diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/ChatAppBrandIcon.tsx b/src/web-ui/src/app/components/RemoteConnectDialog/ChatAppBrandIcon.tsx index e642e7c5c9..aaebdb373e 100644 --- a/src/web-ui/src/app/components/RemoteConnectDialog/ChatAppBrandIcon.tsx +++ b/src/web-ui/src/app/components/RemoteConnectDialog/ChatAppBrandIcon.tsx @@ -7,7 +7,7 @@ interface ChatAppBrandIconProps { /** * Monochrome contours of the actual chat-app marks. The SVGs intentionally - * inherit color from the surrounding identity badge so they work in every + * inherit color from the surrounding UI so they work in every * theme without replacing the recognizable brand silhouettes. * References: telegram.org/tour/screenshots, feishu.cn, and the CC0 * simple-icons WeChat/Telegram vectors. diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.contract.test.ts b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.contract.test.ts index cf86dedeec..a087451a58 100644 --- a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.contract.test.ts +++ b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.contract.test.ts @@ -17,6 +17,10 @@ const deviceStatusControlSource = readFileSync( new URL('../NavPanel/components/DeviceStatusControl.tsx', import.meta.url), 'utf8', ); +const navPanelStyleSource = readFileSync( + new URL('../NavPanel/NavPanel.scss', import.meta.url), + 'utf8', +); const accountPanelSource = readFileSync( new URL('./AccountPanel.tsx', import.meta.url), 'utf8', @@ -101,6 +105,32 @@ describe('Remote Connect safety contracts', () => { }); it('uses the real monochrome app marks for every chat provider', () => { + const overviewBrandStyle = dialogStyleSource.slice( + dialogStyleSource.indexOf('.bitfun-remote-connect__chat-brand-item'), + dialogStyleSource.indexOf( + "[data-bf-component='remote-connect-dialog'][data-bf-part='overviewAction'][data-bf-group='account']", + ), + ); + const identityBrandStyle = dialogStyleSource.slice( + dialogStyleSource.indexOf('.bitfun-remote-connect__bot-identity-icon'), + dialogStyleSource.indexOf('.bitfun-remote-connect__bot-identity-title'), + ); + const connectedBrandStyle = dialogStyleSource.slice( + dialogStyleSource.indexOf('.bitfun-remote-connect__connected-app-icon'), + dialogStyleSource.indexOf('.bitfun-remote-connect__connected-app-copy'), + ); + const footerMessageBrandStyle = navPanelStyleSource.slice( + navPanelStyleSource.indexOf("&[data-bf-device-kind='message-app'] {"), + navPanelStyleSource.indexOf('.bitfun-nav-panel__footer-device-status-attached-count'), + ); + const overviewMessageBrandStart = navPanelStyleSource.indexOf( + "&[data-bf-device-kind='message-app'] .bitfun-device-overview__device-icon {", + ); + const overviewMessageBrandStyle = navPanelStyleSource.slice( + overviewMessageBrandStart, + navPanelStyleSource.indexOf(' strong {', overviewMessageBrandStart), + ); + expect(dialogSource).toContain(''); expect(dialogSource).toContain('bitfun-remote-connect__chat-brand-group'); expect(dialogSource).toContain(''); @@ -110,6 +140,15 @@ describe('Remote Connect safety contracts', () => { expect(chatAppBrandIconSource.match(/fill="currentColor"/g)).toHaveLength(5); expect(deviceStatusControlSource).toContain('chatAppBrandFromIdentity(identity)'); expect(deviceStatusControlSource).toContain(''); + expect(overviewBrandStyle).toContain('border: 0'); + expect(overviewBrandStyle).toContain('background: transparent'); + expect(identityBrandStyle).not.toContain('background:'); + expect(connectedBrandStyle).not.toContain('background:'); + expect(footerMessageBrandStyle).toContain('border: 0'); + expect(footerMessageBrandStyle).toContain('background: transparent'); + expect(footerMessageBrandStyle).toContain('--bf-appearance-token-color-text-primary'); + expect(overviewMessageBrandStyle).toContain('background: transparent'); + expect(overviewMessageBrandStyle).toContain('--bf-appearance-token-color-text-primary'); expect(dialogSource).not.toContain(''); expect(dialogSource).not.toContain(''); expect(dialogSource).not.toContain(''); diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss index 77423820e1..8a66d76923 100644 --- a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss +++ b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss @@ -273,19 +273,9 @@ display: inline-flex; align-items: center; justify-content: center; - border: var(--bf-border-width-default) solid var(--bf-color-border-subtle); - border-radius: var(--bf-radius-base); - background: var(--bf-color-surface-subtle); - color: var(--bf-color-content-secondary); - - &[data-connected='true'] { - background: color-mix( - in srgb, - var(--bf-color-accent-default) 12%, - var(--bf-color-surface-panel) - ); - color: var(--bf-color-accent-default); - } + border: 0; + background: transparent; + color: var(--bf-color-content-primary); } [data-bf-component='remote-connect-dialog'][data-bf-part='overviewAction'][data-bf-group='account'] { @@ -632,13 +622,7 @@ width: 60px; height: 60px; margin-bottom: 16px; - border-radius: var(--bf-radius-pill); - background: color-mix( - in srgb, - var(--bf-color-accent-default) 10%, - var(--bf-color-surface-panel) - ); - color: var(--bf-color-accent-default); + color: var(--bf-color-content-primary); } .bitfun-remote-connect__bot-identity-title { @@ -858,13 +842,7 @@ display: inline-flex; align-items: center; justify-content: center; - border-radius: var(--bf-radius-lg); - background: color-mix( - in srgb, - var(--bf-color-accent-default) 10%, - var(--bf-color-surface-panel) - ); - color: var(--bf-color-accent-default); + color: var(--bf-color-content-primary); } .bitfun-remote-connect__connected-app-copy {