From 8eddefef3b2f7dabd6e9c87addee8c91e1addf1d Mon Sep 17 00:00:00 2001 From: Markus Olsson Date: Tue, 3 Dec 2024 14:39:18 +0100 Subject: [PATCH 01/11] Include user agent when fetching changelog --- app/src/lib/release-notes.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/src/lib/release-notes.ts b/app/src/lib/release-notes.ts index c9590800fee..6043c3a1250 100644 --- a/app/src/lib/release-notes.ts +++ b/app/src/lib/release-notes.ts @@ -10,6 +10,7 @@ import { getVersion } from '../ui/lib/app-proxy' import { formatDate } from './format-date' import { offsetFromNow } from './offset-from' import { encodePathAsUrl } from './path' +import { getUserAgent } from './http' // expects a release note entry to contain a header and then some text // example: @@ -102,7 +103,9 @@ export async function getChangeLog( changelogURL.searchParams.set('limit', limit.toString()) } - const response = await fetch(changelogURL.toString()) + const response = await fetch(changelogURL.toString(), { + headers: { 'user-agent': getUserAgent() }, + }) if (response.ok) { const releases: ReadonlyArray = await response.json() return releases From 5d2a15c4b8f755e0466acb7a6fc9ebc1a4044e8a Mon Sep 17 00:00:00 2001 From: Markus Olsson Date: Tue, 3 Dec 2024 14:39:28 +0100 Subject: [PATCH 02/11] Include user agent when posting stats --- app/src/lib/stats/stats-store.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/src/lib/stats/stats-store.ts b/app/src/lib/stats/stats-store.ts index 27c99f8bb43..6bb2cb08189 100644 --- a/app/src/lib/stats/stats-store.ts +++ b/app/src/lib/stats/stats-store.ts @@ -36,6 +36,7 @@ import { isInApplicationFolder } from '../../ui/main-process-proxy' import { getRendererGUID } from '../get-renderer-guid' import { ValidNotificationPullRequestReviewState } from '../valid-notification-pull-request-review' import { useExternalCredentialHelperKey } from '../trampoline/use-external-credential-helper' +import { getUserAgent } from '../http' type PullRequestReviewStatFieldInfix = | 'Approved' @@ -424,7 +425,10 @@ export interface IStatsStore { const defaultPostImplementation = (body: Record) => fetch(StatsEndpoint, { method: 'POST', - headers: new Headers({ 'Content-Type': 'application/json' }), + headers: { + 'Content-Type': 'application/json', + 'user-agent': getUserAgent(), + }, body: JSON.stringify(body), }) From 923eff2fda027f0f24235e7682186aa845116638 Mon Sep 17 00:00:00 2001 From: Markus Olsson Date: Tue, 3 Dec 2024 14:59:30 +0100 Subject: [PATCH 03/11] Expose priority update status --- app/src/ui/lib/update-store.ts | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/app/src/ui/lib/update-store.ts b/app/src/ui/lib/update-store.ts index 00b2b9728d6..59ac4cac33b 100644 --- a/app/src/ui/lib/update-store.ts +++ b/app/src/ui/lib/update-store.ts @@ -23,6 +23,7 @@ import { enableUpdateFromEmulatedX64ToARM64 } from '../../lib/feature-flag' import { offsetFromNow } from '../../lib/offset-from' import { gte, SemVer } from 'semver' import { getVersion } from './app-proxy' +import { getUserAgent } from '../../lib/http' /** The last version a showcase was seen. */ export const lastShowCaseVersionSeen = 'version-of-last-showcase' @@ -62,6 +63,11 @@ class UpdateStore { /** Is the most recent update check user initiated? */ private userInitiatedUpdate = true + private _prioritizeUpdate = false + + public get prioritizeUpdate() { + return this._prioritizeUpdate + } public constructor() { const lastSuccessfulCheckTime = getNumber(lastSuccessfulCheckKey, 0) @@ -127,6 +133,8 @@ class UpdateStore { (await isRunningUnderARM64Translation()) this.status = UpdateStatus.UpdateReady this.emitDidChange() + + this.updatePriorityUpdateStatus() } /** @@ -187,6 +195,7 @@ class UpdateStore { // button to crash the app if in the subsequent check, there is no update // available anymore due to a disabled update. if (this.status === UpdateStatus.UpdateReady) { + this.updatePriorityUpdateStatus() return } @@ -252,6 +261,25 @@ class UpdateStore { quitAndInstallUpdate() } + private async updatePriorityUpdateStatus() { + try { + const response = await fetch(await this.getUpdatesUrl(false), { + method: 'HEAD', + headers: { 'user-agent': getUserAgent() }, + }) + + const prioritizeUpdate = + response.headers.get('x-prioritize-update') === 'true' + + if (this._prioritizeUpdate !== prioritizeUpdate) { + this._prioritizeUpdate = prioritizeUpdate + this.emitDidChange() + } + } catch (e) { + log.error('Error updating priority update status', e) + } + } + /** * Method to determine if we should show an update showcase call to action. * From ae93744c58d182e16433889d887f848466c98339 Mon Sep 17 00:00:00 2001 From: Markus Olsson Date: Tue, 3 Dec 2024 15:22:53 +0100 Subject: [PATCH 04/11] Add nondismissable mode for update banner --- app/src/ui/app.tsx | 1 + app/src/ui/banners/update-available.tsx | 12 +++++++----- app/src/ui/lib/update-store.ts | 2 ++ 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/app/src/ui/app.tsx b/app/src/ui/app.tsx index a636924ed98..77ac6c92ad9 100644 --- a/app/src/ui/app.tsx +++ b/app/src/ui/app.tsx @@ -3130,6 +3130,7 @@ export class App extends React.Component { isX64ToARM64ImmediateAutoUpdate={ updateStore.state.isX64ToARM64ImmediateAutoUpdate } + prioritizeUpdate={updateStore.state.prioritizeUpdate} onDismissed={this.onUpdateAvailableDismissed} isUpdateShowcaseVisible={this.state.isUpdateShowcaseVisible} emoji={this.state.emoji} diff --git a/app/src/ui/banners/update-available.tsx b/app/src/ui/banners/update-available.tsx index fc1bbea495f..fc14e42a40a 100644 --- a/app/src/ui/banners/update-available.tsx +++ b/app/src/ui/banners/update-available.tsx @@ -24,19 +24,21 @@ interface IUpdateAvailableProps { readonly isUpdateShowcaseVisible: boolean readonly emoji: Map readonly onDismissed: () => void + readonly prioritizeUpdate: boolean } /** * A component which tells the user an update is available and gives them the * option of moving into the future or being a luddite. */ -export class UpdateAvailable extends React.Component< - IUpdateAvailableProps, - {} -> { +export class UpdateAvailable extends React.Component { public render() { return ( - + {!this.props.isUpdateShowcaseVisible && ( | null + prioritizeUpdate: boolean } /** A store which contains the current state of the auto updater. */ @@ -176,6 +177,7 @@ class UpdateStore { lastSuccessfulCheck: this.lastSuccessfulCheck, newReleases: this.newReleases, isX64ToARM64ImmediateAutoUpdate: this.isX64ToARM64ImmediateAutoUpdate, + prioritizeUpdate: this.prioritizeUpdate, } } From f92fd9fc539a93ba871b7f76548e6bb3f4d9ac51 Mon Sep 17 00:00:00 2001 From: Markus Olsson Date: Tue, 3 Dec 2024 15:23:05 +0100 Subject: [PATCH 05/11] Add testing menu item for showing priority update banner --- app/src/main-process/menu/build-test-menu.ts | 4 ++++ app/src/main-process/menu/menu-event.ts | 1 + .../ui/lib/test-ui-components/test-ui-components.ts | 7 +++++++ app/src/ui/lib/update-store.ts | 13 +++++++++++++ 4 files changed, 25 insertions(+) diff --git a/app/src/main-process/menu/build-test-menu.ts b/app/src/main-process/menu/build-test-menu.ts index bad757febf4..0026f449e83 100644 --- a/app/src/main-process/menu/build-test-menu.ts +++ b/app/src/main-process/menu/build-test-menu.ts @@ -146,6 +146,10 @@ export function buildTestMenu() { label: 'Update banner', click: emit('test-update-banner'), }, + { + label: 'Update banner (priority)', + click: emit('test-prioritized-update-banner'), + }, { label: `Showcase Update banner`, click: emit('test-showcase-update-banner'), diff --git a/app/src/main-process/menu/menu-event.ts b/app/src/main-process/menu/menu-event.ts index 78dc361f0a2..93ca7880b07 100644 --- a/app/src/main-process/menu/menu-event.ts +++ b/app/src/main-process/menu/menu-event.ts @@ -82,6 +82,7 @@ const TestMenuEvents = [ 'test-undone-banner', 'test-untrusted-server', 'test-update-banner', + 'test-prioritized-update-banner', 'test-update-existing-git-lfs-filters', 'test-upstream-already-exists', ] as const diff --git a/app/src/ui/lib/test-ui-components/test-ui-components.ts b/app/src/ui/lib/test-ui-components/test-ui-components.ts index 0db4c6dab15..c78ca6911fa 100644 --- a/app/src/ui/lib/test-ui-components/test-ui-components.ts +++ b/app/src/ui/lib/test-ui-components/test-ui-components.ts @@ -156,6 +156,8 @@ export function showTestUI( }) case 'test-update-banner': return showFakeUpdateBanner({}) + case 'test-prioritized-update-banner': + return showFakeUpdateBanner({ isPriority: true }) case 'test-update-existing-git-lfs-filters': return dispatcher.showPopup({ type: PopupType.LFSAttributeMismatch }) case 'test-upstream-already-exists': @@ -179,6 +181,7 @@ export function showTestUI( function showFakeUpdateBanner(options: { isArm64?: boolean isShowcase?: boolean + isPriority?: boolean }) { updateStore.setIsx64ToARM64ImmediateAutoUpdate(options.isArm64 === true) @@ -187,6 +190,10 @@ export function showTestUI( return } + if (options.isPriority !== undefined) { + updateStore.setPrioritizeUpdate(options.isPriority) + } + dispatcher.setUpdateBannerVisibility(true) } diff --git a/app/src/ui/lib/update-store.ts b/app/src/ui/lib/update-store.ts index ba5bbf1ef62..95efdb0b8e4 100644 --- a/app/src/ui/lib/update-store.ts +++ b/app/src/ui/lib/update-store.ts @@ -332,6 +332,19 @@ class UpdateStore { this.isX64ToARM64ImmediateAutoUpdate = value } + + /** This method has only been added for ease of testing the update banner in + * this state and as such is limite to dev and test environments */ + public setPrioritizeUpdate(value: boolean) { + if ( + __RELEASE_CHANNEL__ !== 'development' && + __RELEASE_CHANNEL__ !== 'test' + ) { + return + } + + this._prioritizeUpdate = value + } } /** The store which contains the current state of the auto updater. */ From 977981f56e2a23a443a4efa4bae23680d92b1683 Mon Sep 17 00:00:00 2001 From: Markus Olsson Date: Tue, 3 Dec 2024 15:58:04 +0100 Subject: [PATCH 06/11] Allow for info url --- app/src/ui/app.tsx | 1 + app/src/ui/banners/banner.tsx | 5 +++- app/src/ui/banners/update-available.tsx | 22 ++++++++++++++ .../test-ui-components/test-ui-components.ts | 8 ++++- app/src/ui/lib/update-store.ts | 29 ++++++++++++++++++- 5 files changed, 62 insertions(+), 3 deletions(-) diff --git a/app/src/ui/app.tsx b/app/src/ui/app.tsx index 77ac6c92ad9..db2cc8fe977 100644 --- a/app/src/ui/app.tsx +++ b/app/src/ui/app.tsx @@ -3131,6 +3131,7 @@ export class App extends React.Component { updateStore.state.isX64ToARM64ImmediateAutoUpdate } prioritizeUpdate={updateStore.state.prioritizeUpdate} + prioritizeUpdateInfoUrl={updateStore.state.prioritizeUpdateInfoUrl} onDismissed={this.onUpdateAvailableDismissed} isUpdateShowcaseVisible={this.state.isUpdateShowcaseVisible} emoji={this.state.emoji} diff --git a/app/src/ui/banners/banner.tsx b/app/src/ui/banners/banner.tsx index 8b768b0a552..9c3762ae986 100644 --- a/app/src/ui/banners/banner.tsx +++ b/app/src/ui/banners/banner.tsx @@ -1,11 +1,13 @@ import * as React from 'react' import { Octicon } from '../octicons' import * as octicons from '../octicons/octicons.generated' +import classNames from 'classnames' interface IBannerProps { readonly id?: string readonly timeout?: number readonly dismissable?: boolean + readonly className?: string readonly onDismissed: () => void } @@ -19,8 +21,9 @@ export class Banner extends React.Component { private dismissalTimeoutId: number | null = null public render() { + const cn = classNames('banner', this.props.className) return ( -
+
{this.props.children}
{this.renderCloseButton()}
diff --git a/app/src/ui/banners/update-available.tsx b/app/src/ui/banners/update-available.tsx index fc14e42a40a..9b4c815a3bf 100644 --- a/app/src/ui/banners/update-available.tsx +++ b/app/src/ui/banners/update-available.tsx @@ -25,6 +25,7 @@ interface IUpdateAvailableProps { readonly emoji: Map readonly onDismissed: () => void readonly prioritizeUpdate: boolean + readonly prioritizeUpdateInfoUrl: string | undefined } /** @@ -36,6 +37,7 @@ export class UpdateAvailable extends React.Component { return ( @@ -89,6 +91,26 @@ export class UpdateAvailable extends React.Component { ) } + if (this.props.prioritizeUpdate) { + return ( + + This version of GitHub Desktop is missing important updates. Please{' '} + + restart GitHub Desktop + {' '} + now to install pending updates. + {this.props.prioritizeUpdateInfoUrl && ( + <> + {' '} + + Read more + + + )} + + ) + } + return ( An updated version of GitHub Desktop is available and will be installed diff --git a/app/src/ui/lib/test-ui-components/test-ui-components.ts b/app/src/ui/lib/test-ui-components/test-ui-components.ts index c78ca6911fa..8bba75729dc 100644 --- a/app/src/ui/lib/test-ui-components/test-ui-components.ts +++ b/app/src/ui/lib/test-ui-components/test-ui-components.ts @@ -157,7 +157,10 @@ export function showTestUI( case 'test-update-banner': return showFakeUpdateBanner({}) case 'test-prioritized-update-banner': - return showFakeUpdateBanner({ isPriority: true }) + return showFakeUpdateBanner({ + isPriority: true, + priorityInfoUrl: 'https://desktop.github.com', + }) case 'test-update-existing-git-lfs-filters': return dispatcher.showPopup({ type: PopupType.LFSAttributeMismatch }) case 'test-upstream-already-exists': @@ -182,6 +185,7 @@ export function showTestUI( isArm64?: boolean isShowcase?: boolean isPriority?: boolean + priorityInfoUrl?: string }) { updateStore.setIsx64ToARM64ImmediateAutoUpdate(options.isArm64 === true) @@ -194,6 +198,8 @@ export function showTestUI( updateStore.setPrioritizeUpdate(options.isPriority) } + updateStore.setPrioritizeUpdateInfoUrl(options.priorityInfoUrl) + dispatcher.setUpdateBannerVisibility(true) } diff --git a/app/src/ui/lib/update-store.ts b/app/src/ui/lib/update-store.ts index 95efdb0b8e4..ce26a5ab4fd 100644 --- a/app/src/ui/lib/update-store.ts +++ b/app/src/ui/lib/update-store.ts @@ -52,6 +52,7 @@ export interface IUpdateState { isX64ToARM64ImmediateAutoUpdate: boolean newReleases: ReadonlyArray | null prioritizeUpdate: boolean + prioritizeUpdateInfoUrl: string | undefined } /** A store which contains the current state of the auto updater. */ @@ -65,11 +66,16 @@ class UpdateStore { /** Is the most recent update check user initiated? */ private userInitiatedUpdate = true private _prioritizeUpdate = false + private _prioritizeUpdateInfoUrl: string | undefined = undefined public get prioritizeUpdate() { return this._prioritizeUpdate } + public get prioritizeUpdateInfoUrl() { + return this._prioritizeUpdateInfoUrl + } + public constructor() { const lastSuccessfulCheckTime = getNumber(lastSuccessfulCheckKey, 0) @@ -178,6 +184,7 @@ class UpdateStore { newReleases: this.newReleases, isX64ToARM64ImmediateAutoUpdate: this.isX64ToARM64ImmediateAutoUpdate, prioritizeUpdate: this.prioritizeUpdate, + prioritizeUpdateInfoUrl: this.prioritizeUpdateInfoUrl, } } @@ -273,8 +280,15 @@ class UpdateStore { const prioritizeUpdate = response.headers.get('x-prioritize-update') === 'true' - if (this._prioritizeUpdate !== prioritizeUpdate) { + const prioritizeUpdateInfoUrl = + response.headers.get('x-prioritize-update-info-url') ?? undefined + + if ( + this._prioritizeUpdate !== prioritizeUpdate || + this._prioritizeUpdateInfoUrl !== prioritizeUpdateInfoUrl + ) { this._prioritizeUpdate = prioritizeUpdate + this._prioritizeUpdateInfoUrl = prioritizeUpdateInfoUrl this.emitDidChange() } } catch (e) { @@ -345,6 +359,19 @@ class UpdateStore { this._prioritizeUpdate = value } + + /** This method has only been added for ease of testing the update banner in + * this state and as such is limite to dev and test environments */ + public setPrioritizeUpdateInfoUrl(value: string | undefined) { + if ( + __RELEASE_CHANNEL__ !== 'development' && + __RELEASE_CHANNEL__ !== 'test' + ) { + return + } + + this._prioritizeUpdateInfoUrl = value + } } /** The store which contains the current state of the auto updater. */ From de6455e7be0a40e823b49dc8eed06b660827ef07 Mon Sep 17 00:00:00 2001 From: Markus Olsson Date: Tue, 3 Dec 2024 15:58:10 +0100 Subject: [PATCH 07/11] Some basic styling --- app/styles/_variables.scss | 5 +++++ app/styles/themes/_dark.scss | 5 +++++ app/styles/ui/banners/_update-available.scss | 9 +++++++++ 3 files changed, 19 insertions(+) diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss index 495b88deb1e..a6fc9e1bfe0 100644 --- a/app/styles/_variables.scss +++ b/app/styles/_variables.scss @@ -477,6 +477,11 @@ $overlay-background-color: rgba(0, 0, 0, 0.4); --dialog-information-color: #{$blue-400}; --dialog-error-color: #{$red}; + /** Banner */ + --banner-warning-background: #{$yellow-700}; + --banner-warning-text-color: var(--text-color); + --banner-warning-link-color: #{$blue-700}; + /** File warning */ --file-warning-background-color: #{$yellow-100}; --file-warning-color: #{darken($yellow-700, 10%)}; diff --git a/app/styles/themes/_dark.scss b/app/styles/themes/_dark.scss index 55bedc8ac5b..2bb15456221 100644 --- a/app/styles/themes/_dark.scss +++ b/app/styles/themes/_dark.scss @@ -376,6 +376,11 @@ body.theme-dark { --dialog-information-color: #{$blue-400}; --dialog-error-color: #{$red-600}; + /** Banner */ + --banner-warning-background: #{darken($orange-900, 20%)}; + --banner-warning-text-color: var(--text-color); + --banner-warning-link-color: #4285fb; + /** File warning */ --file-warning-background-color: #{rgba($yellow-900, 0.4)}; --file-warning-color: #{$yellow-700}; diff --git a/app/styles/ui/banners/_update-available.scss b/app/styles/ui/banners/_update-available.scss index 2e1abd9aedf..76349116597 100644 --- a/app/styles/ui/banners/_update-available.scss +++ b/app/styles/ui/banners/_update-available.scss @@ -7,4 +7,13 @@ display: inline-block; margin-right: var(--spacing-half); } + + &.priority { + background-color: var(--banner-warning-background); + color: var(--banner-warning-text-color); + + a { + color: var(--banner-warning-link-color); + } + } } From b29e6d52f0cf2fae658ff05dcc1c130196997b7d Mon Sep 17 00:00:00 2001 From: Markus Olsson Date: Tue, 3 Dec 2024 16:17:39 +0100 Subject: [PATCH 08/11] Don't add a "read more" link --- app/src/ui/banners/update-available.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/app/src/ui/banners/update-available.tsx b/app/src/ui/banners/update-available.tsx index 9b4c815a3bf..1f8a88d2e34 100644 --- a/app/src/ui/banners/update-available.tsx +++ b/app/src/ui/banners/update-available.tsx @@ -94,19 +94,19 @@ export class UpdateAvailable extends React.Component { if (this.props.prioritizeUpdate) { return ( - This version of GitHub Desktop is missing important updates. Please{' '} + This version of GitHub Desktop is missing{' '} + {this.props.prioritizeUpdateInfoUrl ? ( + + important updates + + ) : ( + 'important updates' + )} + . Please{' '} restart GitHub Desktop {' '} now to install pending updates. - {this.props.prioritizeUpdateInfoUrl && ( - <> - {' '} - - Read more - - - )} ) } From fda8fc0355fc96cbd4822682eddebb844ec2254d Mon Sep 17 00:00:00 2001 From: Markus Olsson Date: Tue, 3 Dec 2024 16:31:49 +0100 Subject: [PATCH 09/11] Use alert icon to convey urgency --- app/src/ui/banners/update-available.tsx | 22 +++++++++++++------- app/styles/ui/banners/_update-available.scss | 3 ++- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/app/src/ui/banners/update-available.tsx b/app/src/ui/banners/update-available.tsx index 1f8a88d2e34..ea0bd6c14dd 100644 --- a/app/src/ui/banners/update-available.tsx +++ b/app/src/ui/banners/update-available.tsx @@ -41,18 +41,26 @@ export class UpdateAvailable extends React.Component { dismissable={!this.props.prioritizeUpdate} onDismissed={this.props.onDismissed} > - {!this.props.isUpdateShowcaseVisible && ( - - )} - + {this.renderIcon()} {this.renderMessage()} ) } + private renderIcon() { + if (this.props.isUpdateShowcaseVisible) { + return null + } + + if (this.props.prioritizeUpdate) { + return + } + + return ( + + ) + } + private renderMessage = () => { if (this.props.isX64ToARM64ImmediateAutoUpdate) { return ( diff --git a/app/styles/ui/banners/_update-available.scss b/app/styles/ui/banners/_update-available.scss index 76349116597..79a21df2cdd 100644 --- a/app/styles/ui/banners/_update-available.scss +++ b/app/styles/ui/banners/_update-available.scss @@ -1,5 +1,6 @@ #update-available { - .download-icon { + .download-icon, + .warning-icon { margin-right: var(--spacing); } From 4a926724d8791a6aff07f5d80226a78a7c73e260 Mon Sep 17 00:00:00 2001 From: Markus Olsson Date: Thu, 5 Dec 2024 08:59:38 +0100 Subject: [PATCH 10/11] a11y contrast requirements --- app/styles/_variables.scss | 5 +++-- app/styles/themes/_dark.scss | 5 +++-- app/styles/ui/banners/_update-available.scss | 1 + 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss index a6fc9e1bfe0..b5d2d516973 100644 --- a/app/styles/_variables.scss +++ b/app/styles/_variables.scss @@ -478,9 +478,10 @@ $overlay-background-color: rgba(0, 0, 0, 0.4); --dialog-error-color: #{$red}; /** Banner */ - --banner-warning-background: #{$yellow-700}; + --banner-warning-background: #{$yellow-100}; --banner-warning-text-color: var(--text-color); - --banner-warning-link-color: #{$blue-700}; + --banner-warning-link-color: #{$blue}; + --banner-warning-icon-color: #{darken($yellow-700, 10%)}; /** File warning */ --file-warning-background-color: #{$yellow-100}; diff --git a/app/styles/themes/_dark.scss b/app/styles/themes/_dark.scss index 2bb15456221..9de9ad46139 100644 --- a/app/styles/themes/_dark.scss +++ b/app/styles/themes/_dark.scss @@ -377,9 +377,10 @@ body.theme-dark { --dialog-error-color: #{$red-600}; /** Banner */ - --banner-warning-background: #{darken($orange-900, 20%)}; + --banner-warning-background: #{rgba($yellow-900, 0.4)}; --banner-warning-text-color: var(--text-color); - --banner-warning-link-color: #4285fb; + --banner-warning-link-color: #78a8fc; + --banner-warning-icon-color: #{$yellow-700}; /** File warning */ --file-warning-background-color: #{rgba($yellow-900, 0.4)}; diff --git a/app/styles/ui/banners/_update-available.scss b/app/styles/ui/banners/_update-available.scss index 79a21df2cdd..c0d1e36073a 100644 --- a/app/styles/ui/banners/_update-available.scss +++ b/app/styles/ui/banners/_update-available.scss @@ -2,6 +2,7 @@ .download-icon, .warning-icon { margin-right: var(--spacing); + color: var(--banner-warning-icon-color); } .banner-emoji { From afd1754ec46ef5df76b4fb8a5434b70671e05724 Mon Sep 17 00:00:00 2001 From: Markus Olsson Date: Thu, 5 Dec 2024 15:19:34 +0100 Subject: [PATCH 11/11] Color contrast take one thousand --- app/styles/_variables.scss | 2 +- app/styles/themes/_dark.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss index b5d2d516973..98fe19c9a71 100644 --- a/app/styles/_variables.scss +++ b/app/styles/_variables.scss @@ -480,7 +480,7 @@ $overlay-background-color: rgba(0, 0, 0, 0.4); /** Banner */ --banner-warning-background: #{$yellow-100}; --banner-warning-text-color: var(--text-color); - --banner-warning-link-color: #{$blue}; + --banner-warning-link-color: #046ee7; --banner-warning-icon-color: #{darken($yellow-700, 10%)}; /** File warning */ diff --git a/app/styles/themes/_dark.scss b/app/styles/themes/_dark.scss index 9de9ad46139..290c97ad9ce 100644 --- a/app/styles/themes/_dark.scss +++ b/app/styles/themes/_dark.scss @@ -377,9 +377,9 @@ body.theme-dark { --dialog-error-color: #{$red-600}; /** Banner */ - --banner-warning-background: #{rgba($yellow-900, 0.4)}; + --banner-warning-background: #272216; --banner-warning-text-color: var(--text-color); - --banner-warning-link-color: #78a8fc; + --banner-warning-link-color: #6682ff; --banner-warning-icon-color: #{$yellow-700}; /** File warning */