diff --git a/libs/auth/src/angular/anon-layout/anon-layout.component.ts b/libs/auth/src/angular/anon-layout/anon-layout.component.ts index 6aa644ea7c3..ed531e3d2c6 100644 --- a/libs/auth/src/angular/anon-layout/anon-layout.component.ts +++ b/libs/auth/src/angular/anon-layout/anon-layout.component.ts @@ -5,11 +5,12 @@ import { firstValueFrom } from "rxjs"; import { ClientType } from "@bitwarden/common/enums"; import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; +import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; import { IconModule, Icon } from "../../../../components/src/icon"; import { SharedModule } from "../../../../components/src/shared"; import { TypographyModule } from "../../../../components/src/typography"; -import { BitwardenLogo } from "../icons/bitwarden-logo.icon"; +import { BitwardenLogoPrimary, BitwardenLogoWhite } from "../icons/bitwarden-logo.icon"; @Component({ standalone: true, @@ -23,18 +24,20 @@ export class AnonLayoutComponent { @Input() icon: Icon; @Input() showReadonlyHostname: boolean; - protected logo = BitwardenLogo; + protected logo: Icon; protected year = "2024"; protected clientType: ClientType; protected hostname: string; protected version: string; + protected theme: string; protected showYearAndVersion = true; constructor( private environmentService: EnvironmentService, private platformUtilsService: PlatformUtilsService, + private themeStateService: ThemeStateService, ) { this.year = new Date().getFullYear().toString(); this.clientType = this.platformUtilsService.getClientType(); @@ -44,5 +47,12 @@ export class AnonLayoutComponent { async ngOnInit() { this.hostname = (await firstValueFrom(this.environmentService.environment$)).getHostname(); this.version = await this.platformUtilsService.getApplicationVersion(); + this.theme = await firstValueFrom(this.themeStateService.selectedTheme$); + + if (this.theme === "dark") { + this.logo = BitwardenLogoWhite; + } else { + this.logo = BitwardenLogoPrimary; + } } } diff --git a/libs/auth/src/angular/anon-layout/anon-layout.mdx b/libs/auth/src/angular/anon-layout/anon-layout.mdx index 3b1de735382..8aec3a06767 100644 --- a/libs/auth/src/angular/anon-layout/anon-layout.mdx +++ b/libs/auth/src/angular/anon-layout/anon-layout.mdx @@ -6,8 +6,11 @@ import * as stories from "./anon-layout.stories"; # AnonLayout Component -The Auth-owned AnonLayoutComponent is to be used for unauthenticated pages, where we don't know who -the user is (this includes viewing a Send). +The Auth-owned AnonLayoutComponent is to be used primarily for unauthenticated pages\*, where we +don't know who the user is. + +\*There will be a few exceptions to this—that is, AnonLayout will also be used for the Unlock +and View Send pages. --- diff --git a/libs/auth/src/angular/anon-layout/anon-layout.stories.ts b/libs/auth/src/angular/anon-layout/anon-layout.stories.ts index c9054fb5e63..afed1d10470 100644 --- a/libs/auth/src/angular/anon-layout/anon-layout.stories.ts +++ b/libs/auth/src/angular/anon-layout/anon-layout.stories.ts @@ -1,10 +1,11 @@ import { Meta, StoryObj, moduleMetadata } from "@storybook/angular"; -import { BehaviorSubject } from "rxjs"; +import { BehaviorSubject, of } from "rxjs"; import { ClientType } from "@bitwarden/common/enums"; import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; +import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; import { ButtonModule } from "../../../../components/src/button"; import { I18nMockService } from "../../../../components/src/utils/i18n-mock.service"; @@ -46,6 +47,12 @@ export default { }).asObservable(), }, }, + { + provide: ThemeStateService, + useValue: { + selectedTheme$: of("light"), + }, + }, ], }), ], diff --git a/libs/auth/src/angular/icons/bitwarden-logo.icon.ts b/libs/auth/src/angular/icons/bitwarden-logo.icon.ts index 872228e75dd..b9094befff1 100644 --- a/libs/auth/src/angular/icons/bitwarden-logo.icon.ts +++ b/libs/auth/src/angular/icons/bitwarden-logo.icon.ts @@ -1,9 +1,17 @@ import { svgIcon } from "@bitwarden/components"; -export const BitwardenLogo = svgIcon` - +export const BitwardenLogoPrimary = svgIcon` + Bitwarden - - + + + +`; + +export const BitwardenLogoWhite = svgIcon` + + Bitwarden + + `;