[AC-217] Migrate to Banner Component (#8899)

* convert premium card to banner component

- create VaultBanners component that will handle all banner logic

* move upgrade browser notice to banner component

* refactor verify email component to use the banner component

* add email banner to VaultBanners component

* move low KDF message to banner component

* remove unused KDF component

* allow multiple banners to be displayed at once

* use vault service to consolidate premium banner logic
- Implement prompt thresholds for premium banner
- Update dismiss logic to re-run visibility logic

* update variable name

* move all dismiss/show logic to vault banner service

* rename tense of methods for readability

* apply underline to send email button to match other banner actions

* fix dark mode styling across banners

* remove unused variable

* use bitLink directive for styling rather than tailwind

* move premium banner to a standalone observable

* update bootstrap styles to tailwind

* use new KDF service for vault banners

* move the VerifyEmailComponent to a standalone component

* convert premium banner to a singular observable

* remove unneeded import

* AC-2589 add unique id for each vault banner

* AC-2588 poll sync service to only show premium banner after a sync

* close subscription to syncCompleted$ after one emit

* remove unneeded ReplaySubject

apps/web/src/app/shared/loose-components.module.ts

@@ -53,7 +53,6 @@ import { TwoFactorSetupComponent } from "../auth/settings/two-factor-setup.compo
 import { TwoFactorVerifyComponent } from "../auth/settings/two-factor-verify.component";
 import { TwoFactorWebAuthnComponent } from "../auth/settings/two-factor-webauthn.component";
 import { TwoFactorYubiKeyComponent } from "../auth/settings/two-factor-yubikey.component";
-import { VerifyEmailComponent } from "../auth/settings/verify-email.component";
 import { UserVerificationModule } from "../auth/shared/components/user-verification";
 import { SsoComponent } from "../auth/sso.component";
 import { TwoFactorOptionsComponent } from "../auth/two-factor-options.component";
@@ -70,7 +69,6 @@ import { HeaderModule } from "../layouts/header/header.module";
 import { ProductSwitcherModule } from "../layouts/product-switcher/product-switcher.module";
 import { UserLayoutComponent } from "../layouts/user-layout.component";
 import { DomainRulesComponent } from "../settings/domain-rules.component";
-import { LowKdfComponent } from "../settings/low-kdf.component";
 import { PreferencesComponent } from "../settings/preferences.component";
 import { VaultTimeoutInputComponent } from "../settings/vault-timeout-input.component";
 import { GeneratorComponent } from "../tools/generator.component";
@@ -186,11 +184,9 @@ import { SharedModule } from "./shared.module";
     UpdatePasswordComponent,
     UpdateTempPasswordComponent,
     VaultTimeoutInputComponent,
-    VerifyEmailComponent,
     VerifyEmailTokenComponent,
     VerifyRecoverDeleteComponent,
     VerifyRecoverDeleteProviderComponent,
-    LowKdfComponent,
   ],
   exports: [
     UserVerificationModule,
@@ -264,11 +260,9 @@ import { SharedModule } from "./shared.module";
     UpdateTempPasswordComponent,
     UserLayoutComponent,
     VaultTimeoutInputComponent,
-    VerifyEmailComponent,
     VerifyEmailTokenComponent,
     VerifyRecoverDeleteComponent,
     VerifyRecoverDeleteProviderComponent,
-    LowKdfComponent,
     HeaderModule,
     DangerZoneComponent,
   ],