Use the dashboard danger color for the toolbar sign-out confirmation

The hardcoded red had 3:1 contrast on the dark panel, below WCAG AA for
14px text. The dashboard's danger token is 4.8:1 in light and 6:1 in dark.
This commit is contained in:
jelveh committed 2026-10-01 22:27:13 -07:00
1 parent 62ce691ac9
commit 26f7e8eb2e
2 files changed
+12 -3

No files matched your search

@@ -202,8 +202,8 @@ describe('embedded app browser', () => {
describe('embedded toolbar', () => {
async function openToolbar (viewport = { width: 1100, height: 720 }, token = sessionToken, storage = []) {
const context = await browser.newContext({ viewport, storageState: {
async function openToolbar (viewport = { width: 1100, height: 720 }, token = sessionToken, storage = [], contextOptions = {}) {
const context = await browser.newContext({ viewport, ...contextOptions, storageState: {
cookies: [], origins: [{ origin, localStorage: [
...storage,
{ name: 'auth_token_v2', value: token },
@@ -303,6 +303,15 @@ describe('embedded toolbar', () => {
} finally { await context.close(); }
});
it('keeps the sign-out confirmation readable in dark mode', async () => {
const { context, toolbar } = await openToolbar(undefined, sessionToken, [], { colorScheme: 'dark' });
try {
await toolbar.getByRole('button', { name: 'Account', exact: true }).click();
await toolbar.locator('.toolbar-logout').click();
expect(await toolbar.locator('.toolbar-confirm-logout').evaluate(el => getComputedStyle(el).color)).toBe('rgb(248, 113, 113)');
} finally { await context.close(); }
});
it('labels controls with translated text encoded once', async () => {
const { context, toolbar } = await openToolbar(undefined, sessionToken, [{ name: 'user_preferences', value: '{"language":"de"}' }]);
try {
+1 -1
View File
@@ -35,4 +35,4 @@ html, body {
#puter-toolbar [hidden] { display: none; }
.toolbar-confirm { border-top: 1px solid var(--dashboard-border); }
.toolbar-confirm p { margin: 12px 16px; font-size: 14px; line-height: 1.5; }
.toolbar-confirm-logout { color: #c03535; }
.toolbar-confirm-logout { color: var(--dashboard-danger-text); }