create logo slot for anon layout

apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html

@@ -1,5 +1,5 @@
 <popup-page [disablePadding]="true">
-  <popup-header
+  <!-- <popup-header
     slot="header"
     [background]="'alt'"
     [showBackButton]="showBackButton"
@@ -13,7 +13,7 @@
       <app-pop-out></app-pop-out>
       <app-current-account *ngIf="showAcctSwitcher && hasLoggedInAccount"></app-current-account>
     </ng-container>
-  </popup-header>
+  </popup-header> -->
 
   <auth-anon-layout
     [title]="pageTitle"
@@ -26,6 +26,17 @@
     [hideCardWrapper]="hideCardWrapper"
   >
     <router-outlet></router-outlet>
+    @if (showLogo) {
+      <div slot="custom-logo" class="tw-w-32">
+        <bit-icon [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
+      </div>
+    }
+    <div class="tw-flex tw-gap-2" slot="header-actions">
+      <app-pop-out></app-pop-out>
+      @if (showAcctSwitcher && hasLoggedInAccount) {
+        <app-current-account slot="header-actions"></app-current-account>
+      }
+    </div>
     <router-outlet slot="secondary" name="secondary"></router-outlet>
     <router-outlet slot="environment-selector" name="environment-selector"></router-outlet>
   </auth-anon-layout>

libs/components/src/anon-layout/anon-layout.component.html

@@ -1,3 +1,16 @@
+<header
+  class="tw-p-5 tw-pb-7 tw-bg-background-alt tw-flex tw-justify-between tw-items-center tw-w-full"
+>
+  @if (!hideLogo()) {
+    <a [routerLink]="['/']" class="tw-w-[200px] tw-self-start tw-block [&>*]:tw-align-top">
+      <bit-icon [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
+    </a>
+  }
+  <ng-content select="[slot=custom-logo]"></ng-content>
+  <div class="tw-ms-auto">
+    <ng-content select="[slot=header-actions]"></ng-content>
+  </div>
+</header>
 <main
   class="tw-relative tw-flex tw-w-full tw-mx-auto tw-flex-col tw-bg-background-alt tw-p-5 tw-text-main"
   [ngClass]="{
@@ -5,17 +18,6 @@
     'tw-min-h-full': clientType === 'browser' || clientType === 'desktop',
   }"
 >
-  <div class="tw-flex tw-justify-between tw-items-center tw-w-full tw-mb-12">
-    @if (!hideLogo()) {
-      <a [routerLink]="['/']" class="tw-w-[200px] tw-self-start tw-block [&>*]:tw-align-top">
-        <bit-icon [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
-      </a>
-    }
-    <div class="tw-ms-auto">
-      <ng-content select="[slot=header-actions]"></ng-content>
-    </div>
-  </div>
-
   <div class="tw-text-center tw-mb-4 sm:tw-mb-6 tw-mx-auto" [ngClass]="maxWidthClass">
     @let iconInput = icon();
 

libs/components/src/anon-layout/anon-layout.component.ts

@@ -43,6 +43,15 @@ export type AnonLayoutMaxWidth = "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
   ],
 })
 export class AnonLayoutComponent implements OnInit, OnChanges {
+  constructor(
+    private environmentService: EnvironmentService,
+    private platformUtilsService: PlatformUtilsService,
+  ) {
+    this.year = new Date().getFullYear().toString();
+    this.clientType = this.platformUtilsService.getClientType();
+    this.hideYearAndVersion = this.clientType !== ClientType.Web;
+  }
+
   @HostBinding("class")
   get classList() {
     // AnonLayout should take up full height of parent container for proper footer placement.
@@ -94,15 +103,6 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
     }
   }
 
-  constructor(
-    private environmentService: EnvironmentService,
-    private platformUtilsService: PlatformUtilsService,
-  ) {
-    this.year = new Date().getFullYear().toString();
-    this.clientType = this.platformUtilsService.getClientType();
-    this.hideYearAndVersion = this.clientType !== ClientType.Web;
-  }
-
   async ngOnInit() {
     this.maxWidth.set(this.maxWidth() ?? "md");
     this.hostname = (await firstValueFrom(this.environmentService.environment$)).getHostname();