From b94835206d39900d699b356da2fc0ac06713c7ae Mon Sep 17 00:00:00 2001
From: JaredScar <thewolfbadger@gmail.com>
Date: Wed, 21 Jan 2026 17:05:49 -0500
Subject: [PATCH] Fixing some tech debt before implementing actual fix of
 implementation

---
 .../layouts/header/web-header.component.html    |  9 ++++-----
 .../app/layouts/header/web-header.component.ts  | 17 ++++++++---------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/app/layouts/header/web-header.component.html b/apps/web/src/app/layouts/header/web-header.component.html
index 4b833e771dd..5ef07599eb3 100644
--- a/apps/web/src/app/layouts/header/web-header.component.html
+++ b/apps/web/src/app/layouts/header/web-header.component.html
@@ -3,21 +3,20 @@
   class="-tw-mt-6 -tw-mx-8 tw-mb-3 tw-flex tw-flex-col tw-py-6 tw-px-8"
   [ngClass]="{
     'tw-border-0 tw-border-b tw-border-solid tw-border-secondary-100 tw-bg-background-alt tw-pb-0':
-      tabsContainer.childElementCount !== 0,
+      tabsContainer.childElementCount !== 0 || useAltBackground,
   }"
 >
   <div class="tw-flex">
     <div class="tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2">
       <ng-content select="[slot=breadcrumbs]"></ng-content>
       <h1
-        bitTypography="h1"
         noMargin
         class="tw-m-0 tw-mr-2 tw-leading-10 tw-flex tw-gap-1"
-        [title]="title || (routeData.titleId | i18n)"
+        [title]="title() || (routeData.titleId | i18n)"
       >
         <div class="tw-truncate">
-          <i *ngIf="icon" class="bwi {{ icon }}" aria-hidden="true"></i>
-          {{ title || (routeData.titleId | i18n) }}
+          <i *ngIf="icon" class="bwi {{ icon() }}" aria-hidden="true"></i>
+          {{ title() || (routeData.titleId | i18n) }}
         </div>
         <div><ng-content select="[slot=title-suffix]"></ng-content></div>
       </h1>
diff --git a/apps/web/src/app/layouts/header/web-header.component.ts b/apps/web/src/app/layouts/header/web-header.component.ts
index 694ee5c4ae9..678e027832d 100644
--- a/apps/web/src/app/layouts/header/web-header.component.ts
+++ b/apps/web/src/app/layouts/header/web-header.component.ts
@@ -1,6 +1,4 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import { Component, Input } from "@angular/core";
+import { Component, input, InputSignal } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { map, Observable } from "rxjs";
 
@@ -25,16 +23,17 @@ export class WebHeaderComponent {
   /**
    * Custom title that overrides the route data `titleId`
    */
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() title: string;
+  readonly title: InputSignal<string> = input();
 
   /**
    * Icon to show before the title
    */
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() icon: string;
+  readonly icon: InputSignal<string> = input();
+
+  /**
+   * Utilize the alt background on pages where it is still needed
+   */
+  readonly useAltBackground: InputSignal<boolean> = input(false);
 
   protected routeData$: Observable<{ titleId: string }>;
   protected account$: Observable<User & { id: UserId }>;