[PM-11000] AnonLayout Icon/Logo theme refactor

apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts

@@ -1,26 +1,22 @@
 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,
   AnonLayoutWrapperData,
   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";
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
 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 @@
   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<void> {
@@ -73,14 +68,6 @@
     // 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() {

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<PlatformUtilsService>,
         },
-        {
-          provide: ThemeStateService,
-          useValue: {
-            selectedTheme$: of(options.themeType || ThemeType.Light),
-          } as Partial<ThemeStateService>,
-        },
         {
           provide: I18nService,
           useFactory: () => {

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<PlatformUtilsService>,
         },
-        {
-          provide: ThemeStateService,
-          useValue: {
-            selectedTheme$: of(options.themeType || ThemeType.Light),
-          } as Partial<ThemeStateService>,
-        },
       ],
     }),
     applicationConfig({

libs/auth/src/angular/anon-layout/anon-layout.component.ts

@@ -5,13 +5,11 @@
 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 @@
    */
   @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 @@
 
   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();
-  }
 
-  async ngOnChanges(changes: SimpleChanges) {
-    if (changes.icon) {
-      const theme = await firstValueFrom(this.themeStateService.selectedTheme$);
-      await this.updateIcon(theme);
+    // If there is no icon input, then use the default icon
+    if (this.icon == null) {
+      this.icon = BitwardenShield;
     }
+  }
 
+  async ngOnChanges(changes: SimpleChanges) {
     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;
-      }
-    }
-  }
 }

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 @@
             }).asObservable(),
           },
         },
-        {
-          provide: ThemeStateService,
-          useValue: {
-            selectedTheme$: of("light"),
-          },
-        },
       ],
     }),
   ],