[PM-34012] - Replace image in welcome dialog with extension prompt (#19720) (#19735)

* update web vault extension prompt dialog icon

* remove old image

* add index

apps/web/src/app/vault/components/web-vault-extension-prompt/web-vault-extension-prompt-dialog.component.html

@@ -1,11 +1,13 @@
 <div
   class="tw-max-w-3xl tw-p-9 tw-border tw-border-solid tw-border-border-base tw-rounded-xl tw-bg-background tw-text-center"
 >
-  <img
-    src="/images/vault/extension-mock-login.png"
-    [alt]="'extensionPromptImageAlt' | i18n"
-    class="tw-mb-[1.875rem]"
-  />
+  <div [attr.alt]="'extensionPromptImageAlt' | i18n" class="tw-mb-[1.875rem]">
+    <bit-svg
+      [content]="extensionMockLogin"
+      [ariaLabel]="'extensionPromptImageAlt' | i18n"
+      class="tw-mb-[1.875rem]"
+    ></bit-svg>
+  </div>
   <div class="tw-flex tw-flex-col tw-gap-[1.6875rem]">
     <h2 class="tw-mb-0">
       {{ "extensionPromptHeading" | i18n }}

apps/web/src/app/vault/components/web-vault-extension-prompt/web-vault-extension-prompt-dialog.component.ts

@@ -4,6 +4,7 @@ import { CommonModule } from "@angular/common";
 import { Component, ChangeDetectionStrategy, OnInit } from "@angular/core";
 import { firstValueFrom } from "rxjs";
 
+import { ExtensionMockLogin } from "@bitwarden/assets/svg";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@@ -14,6 +15,7 @@ import {
   DialogRef,
   DialogService,
   IconComponent,
+  SvgComponent,
 } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
@@ -22,7 +24,7 @@ import { WebVaultExtensionPromptService } from "../../services/web-vault-extensi
 @Component({
   selector: "web-vault-extension-prompt-dialog",
   templateUrl: "./web-vault-extension-prompt-dialog.component.html",
-  imports: [CommonModule, ButtonModule, DialogModule, I18nPipe, IconComponent],
+  imports: [CommonModule, ButtonModule, DialogModule, I18nPipe, IconComponent, SvgComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class WebVaultExtensionPromptDialogComponent implements OnInit {
@@ -36,6 +38,8 @@ export class WebVaultExtensionPromptDialogComponent implements OnInit {
   /** Download Url for the extension based on the browser */
   protected webStoreUrl: string = "";
 
+  protected extensionMockLogin = ExtensionMockLogin;
+
   ngOnInit(): void {
     this.webStoreUrl = getWebStoreUrl(this.platformUtilsService.getDevice());
   }

libs/assets/src/svg/svgs/index.ts

@@ -15,6 +15,7 @@ export * from "./deactivated-org";
 export * from "./devices.icon";
 export * from "./domain.icon";
 export * from "./empty-trash";
+export * from "./extension-mock-login";
 export * from "./favorites.icon";
 export * from "./gear";
 export * from "./generator";