From dd40faf72e43c38cb7be00de93a0cf0ebbdb3c0f Mon Sep 17 00:00:00 2001 From: rr-bw <102181210+rr-bw@users.noreply.github.com> Date: Tue, 9 Jul 2024 09:11:21 -0700 Subject: [PATCH] [PM-9314] AnonLayout Logo and Storybook Doc updates (#9849) * set logo color based on theme * update to text-alt2 * hardcode marketing brand colors * add comment about AnonLayout usage --- .../angular/anon-layout/anon-layout.component.ts | 14 ++++++++++++-- .../auth/src/angular/anon-layout/anon-layout.mdx | 7 +++++-- .../angular/anon-layout/anon-layout.stories.ts | 9 ++++++++- .../src/angular/icons/bitwarden-logo.icon.ts | 16 ++++++++++++---- 4 files changed, 37 insertions(+), 9 deletions(-) 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 + + `;