From c5a267baadc70f294467a6d7f48809431e308a54 Mon Sep 17 00:00:00 2001 From: rr-bw <102181210+rr-bw@users.noreply.github.com> Date: Sat, 31 Aug 2024 12:26:11 -0700 Subject: [PATCH] [PM-11000] AnonLayout Icon/Logo theme refactor (#10549) * update base anon-layout logo/icon * update ExtensionAnonLayout logo/icon based on theme * remove hard-coded fill * remove solarizedDark class --------- Co-authored-by: Bernd Schoolmann --- ...extension-anon-layout-wrapper.component.ts | 19 ++------- .../extension-anon-layout-wrapper.stories.ts | 9 ---- .../extension-bitwarden-logo.icon.ts | 21 +--------- .../anon-layout-wrapper.stories.ts | 9 ---- .../anon-layout/anon-layout.component.ts | 42 ++++--------------- .../anon-layout/anon-layout.stories.ts | 9 +--- .../src/angular/icons/bitwarden-logo.icon.ts | 16 ++----- .../angular/icons/bitwarden-shield.icon.ts | 12 ++---- libs/components/src/tw-theme.css | 8 ++++ libs/components/tailwind.config.base.js | 1 + 10 files changed, 29 insertions(+), 117 deletions(-) diff --git a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts b/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts index 7a5b156a50..350b4a8a84 100644 --- a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts +++ b/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts @@ -1,7 +1,7 @@ import { CommonModule } from "@angular/common"; import { Component, OnDestroy, OnInit } from "@angular/core"; import { ActivatedRoute, Data, NavigationEnd, Router, RouterModule } from "@angular/router"; -import { Subject, filter, firstValueFrom, switchMap, takeUntil, tap } from "rxjs"; +import { Subject, filter, switchMap, takeUntil, tap } from "rxjs"; import { AnonLayoutComponent, @@ -9,7 +9,6 @@ import { AnonLayoutWrapperDataService, } from "@bitwarden/auth/angular"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; -import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; import { Icon, IconModule } from "@bitwarden/components"; import { PopOutComponent } from "../../../platform/popup/components/pop-out.component"; @@ -17,10 +16,7 @@ import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-heade import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component"; import { CurrentAccountComponent } from "../account-switching/current-account.component"; -import { - ExtensionBitwardenLogoPrimary, - ExtensionBitwardenLogoWhite, -} from "./extension-bitwarden-logo.icon"; +import { ExtensionBitwardenLogo } from "./extension-bitwarden-logo.icon"; export interface ExtensionAnonLayoutWrapperData extends AnonLayoutWrapperData { showAcctSwitcher?: boolean; @@ -56,14 +52,13 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy { protected maxWidth: "md" | "3xl"; protected theme: string; - protected logo: Icon; + protected logo = ExtensionBitwardenLogo; constructor( private router: Router, private route: ActivatedRoute, private i18nService: I18nService, private extensionAnonLayoutWrapperDataService: AnonLayoutWrapperDataService, - private themeStateService: ThemeStateService, ) {} async ngOnInit(): Promise { @@ -73,14 +68,6 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy { // Listen for page changes and update the page data appropriately this.listenForPageDataChanges(); this.listenForServiceDataChanges(); - - this.theme = await firstValueFrom(this.themeStateService.selectedTheme$); - - if (this.theme === "dark") { - this.logo = ExtensionBitwardenLogoWhite; - } else { - this.logo = ExtensionBitwardenLogoPrimary; - } } private listenForPageDataChanges() { diff --git a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts b/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts index 44060f991f..beb07f3523 100644 --- a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts +++ b/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts @@ -22,8 +22,6 @@ import { } 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 { ThemeType } from "@bitwarden/common/platform/enums"; -import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; import { UserId } from "@bitwarden/common/types/guid"; import { ButtonModule, I18nMockService } from "@bitwarden/components"; @@ -47,7 +45,6 @@ const decorators = (options: { applicationVersion?: string; clientType?: ClientType; hostName?: string; - themeType?: ThemeType; }) => { return [ componentWrapperDecorator( @@ -120,12 +117,6 @@ const decorators = (options: { getClientType: () => options.clientType || ClientType.Web, } as Partial, }, - { - provide: ThemeStateService, - useValue: { - selectedTheme$: of(options.themeType || ThemeType.Light), - } as Partial, - }, { provide: I18nService, useFactory: () => { diff --git a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-bitwarden-logo.icon.ts b/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-bitwarden-logo.icon.ts index 569edaae97..51d748e1fb 100644 --- a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-bitwarden-logo.icon.ts +++ b/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-bitwarden-logo.icon.ts @@ -1,6 +1,6 @@ import { svgIcon } from "@bitwarden/components"; -export const ExtensionBitwardenLogoPrimary = svgIcon` +export const ExtensionBitwardenLogo = svgIcon` - -`; - -export const ExtensionBitwardenLogoWhite = svgIcon` - - `; diff --git a/libs/auth/src/angular/anon-layout/anon-layout-wrapper.stories.ts b/libs/auth/src/angular/anon-layout/anon-layout-wrapper.stories.ts index c05f491acd..87e26bd2df 100644 --- a/libs/auth/src/angular/anon-layout/anon-layout-wrapper.stories.ts +++ b/libs/auth/src/angular/anon-layout/anon-layout-wrapper.stories.ts @@ -15,8 +15,6 @@ import { Environment, } from "@bitwarden/common/platform/abstractions/environment.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; -import { ThemeType } from "@bitwarden/common/platform/enums"; -import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service"; import { ButtonModule } from "@bitwarden/components"; // FIXME: remove `/apps` import from `/libs` @@ -40,7 +38,6 @@ const decorators = (options: { applicationVersion?: string; clientType?: ClientType; hostName?: string; - themeType?: ThemeType; }) => { return [ componentWrapperDecorator( @@ -84,12 +81,6 @@ const decorators = (options: { getClientType: () => options.clientType || ClientType.Web, } as Partial, }, - { - provide: ThemeStateService, - useValue: { - selectedTheme$: of(options.themeType || ThemeType.Light), - } as Partial, - }, ], }), applicationConfig({ 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 fc3026dad3..a40fafc5db 100644 --- a/libs/auth/src/angular/anon-layout/anon-layout.component.ts +++ b/libs/auth/src/angular/anon-layout/anon-layout.component.ts @@ -5,13 +5,11 @@ 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 { BitwardenLogoPrimary, BitwardenLogoWhite } from "../icons"; -import { BitwardenShieldPrimary, BitwardenShieldWhite } from "../icons/bitwarden-shield.icon"; +import { BitwardenLogo, BitwardenShield } from "../icons"; @Component({ standalone: true, @@ -34,20 +32,17 @@ export class AnonLayoutComponent implements OnInit, OnChanges { */ @Input() maxWidth: "md" | "3xl" = "md"; - protected logo: Icon; - + protected logo = BitwardenLogo; protected year = "2024"; protected clientType: ClientType; protected hostname: string; protected version: string; - protected theme: string; protected hideYearAndVersion = false; constructor( private environmentService: EnvironmentService, private platformUtilsService: PlatformUtilsService, - private themeStateService: ThemeStateService, ) { this.year = new Date().getFullYear().toString(); this.clientType = this.platformUtilsService.getClientType(); @@ -56,41 +51,18 @@ export class AnonLayoutComponent implements OnInit, OnChanges { async ngOnInit() { this.maxWidth = this.maxWidth ?? "md"; - - this.theme = await firstValueFrom(this.themeStateService.selectedTheme$); - - if (this.theme === "dark") { - this.logo = BitwardenLogoWhite; - } else { - this.logo = BitwardenLogoPrimary; - } - - await this.updateIcon(this.theme); - this.hostname = (await firstValueFrom(this.environmentService.environment$)).getHostname(); this.version = await this.platformUtilsService.getApplicationVersion(); + + // If there is no icon input, then use the default icon + if (this.icon == null) { + this.icon = BitwardenShield; + } } async ngOnChanges(changes: SimpleChanges) { - if (changes.icon) { - const theme = await firstValueFrom(this.themeStateService.selectedTheme$); - await this.updateIcon(theme); - } - if (changes.maxWidth) { this.maxWidth = changes.maxWidth.currentValue ?? "md"; } } - - private async updateIcon(theme: string) { - if (this.icon == null) { - if (theme === "dark") { - this.icon = BitwardenShieldWhite; - } - - if (theme !== "dark") { - this.icon = BitwardenShieldPrimary; - } - } - } } 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 edf6c8d70a..110bda7ce8 100644 --- a/libs/auth/src/angular/anon-layout/anon-layout.stories.ts +++ b/libs/auth/src/angular/anon-layout/anon-layout.stories.ts @@ -1,11 +1,10 @@ import { Meta, StoryObj, moduleMetadata } from "@storybook/angular"; -import { BehaviorSubject, of } from "rxjs"; +import { BehaviorSubject } 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"; @@ -47,12 +46,6 @@ 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 b9094befff..2a1ae48526 100644 --- a/libs/auth/src/angular/icons/bitwarden-logo.icon.ts +++ b/libs/auth/src/angular/icons/bitwarden-logo.icon.ts @@ -1,17 +1,9 @@ import { svgIcon } from "@bitwarden/components"; -export const BitwardenLogoPrimary = svgIcon` - +export const BitwardenLogo = svgIcon` + Bitwarden - - - -`; - -export const BitwardenLogoWhite = svgIcon` - - Bitwarden - - + + `; diff --git a/libs/auth/src/angular/icons/bitwarden-shield.icon.ts b/libs/auth/src/angular/icons/bitwarden-shield.icon.ts index a81a9906a6..86e3a0bb1b 100644 --- a/libs/auth/src/angular/icons/bitwarden-shield.icon.ts +++ b/libs/auth/src/angular/icons/bitwarden-shield.icon.ts @@ -1,13 +1,7 @@ import { svgIcon } from "@bitwarden/components"; -export const BitwardenShieldPrimary = svgIcon` - - - -`; - -export const BitwardenShieldWhite = svgIcon` - - +export const BitwardenShield = svgIcon` + + `; diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css index 00ab2ff717..6234ba380b 100644 --- a/libs/components/src/tw-theme.css +++ b/libs/components/src/tw-theme.css @@ -49,6 +49,8 @@ --color-text-code: 192 17 118; --color-text-headers: 2 15 102; + --color-marketing-logo: 23 93 220; + --tw-ring-offset-color: #ffffff; } @@ -95,6 +97,8 @@ --color-text-code: 240 141 199; --color-text-headers: 226 227 228; + --color-marketing-logo: 255 255 255; + --tw-ring-offset-color: #1f242e; } @@ -134,6 +138,8 @@ --color-text-alt2: 255 255 255; --color-text-code: 219 177 211; + --color-marketing-logo: 255 255 255; + --tw-ring-offset-color: #434c5e; } @@ -173,6 +179,8 @@ --color-text-alt2: 255 255 255; --color-text-code: 240 141 199; + --color-marketing-logo: 255 255 255; + --tw-ring-offset-color: #002b36; } diff --git a/libs/components/tailwind.config.base.js b/libs/components/tailwind.config.base.js index 88e7549780..236baed74c 100644 --- a/libs/components/tailwind.config.base.js +++ b/libs/components/tailwind.config.base.js @@ -69,6 +69,7 @@ module.exports = { alt3: rgba("--color-background-alt3"), alt4: rgba("--color-background-alt4"), }, + "marketing-logo": rgba("--color-marketing-logo"), }, textColor: { main: rgba("--color-text-main"),