[PM-21395] Vault Nudges Bugs (#14737)

* updates to empty vault and has items nudges

apps/browser/src/_locales/en/messages.json

@@ -5273,8 +5273,14 @@
   "hasItemsVaultNudgeTitle": {
     "message": "Welcome to your vault!"
   },
-  "hasItemsVaultNudgeBody": {
-      "message": "Autofill items for the current page\nFavorite items for easy access\nSearch your vault for something else"
+  "hasItemsVaultNudgeBodyOne": {
+    "message": "Autofill items for the current page"
+  },
+  "hasItemsVaultNudgeBodyTwo": {
+    "message": "Favorite items for easy access"
+  },
+  "hasItemsVaultNudgeBodyThree": {
+    "message": "Search your vault for something else"
   },
   "newLoginNudgeTitle": {
     "message": "Save time with autofill"

apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html

@@ -44,9 +44,13 @@
       <div class="tw-mb-4" *ngIf="showHasItemsVaultSpotlight$ | async">
         <bit-spotlight
           [title]="'hasItemsVaultNudgeTitle' | i18n"
-          [subtitle]="'hasItemsVaultNudgeBody' | i18n"
           (onDismiss)="dismissVaultNudgeSpotlight(VaultNudgeType.HasVaultItems)"
         >
+          <ul class="tw-pl-4 tw-text-main" bitTypography="body2">
+            <li>{{ "hasItemsVaultNudgeBodyOne" | i18n }}</li>
+            <li>{{ "hasItemsVaultNudgeBodyTwo" | i18n }}</li>
+            <li>{{ "hasItemsVaultNudgeBodyThree" | i18n }}</li>
+          </ul>
         </bit-spotlight>
       </div>
       <vault-at-risk-password-callout

apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts

@@ -19,10 +19,17 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CipherId, CollectionId, OrganizationId, UserId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
-import { ButtonModule, DialogService, Icons, NoItemsModule } from "@bitwarden/components";
+import {
+  ButtonModule,
+  DialogService,
+  Icons,
+  NoItemsModule,
+  TypographyModule,
+} from "@bitwarden/components";
 import {
   DecryptionFailureDialogComponent,
   SpotlightComponent,
@@ -86,6 +93,7 @@ enum VaultState {
     NewSettingsCalloutComponent,
     SpotlightComponent,
     RouterModule,
+    TypographyModule,
   ],
   providers: [VaultPageService],
 })
@@ -158,6 +166,7 @@ export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
     private introCarouselService: IntroCarouselService,
     private vaultNudgesService: VaultNudgesService,
     private router: Router,
+    private i18nService: I18nService,
   ) {
     combineLatest([
       this.vaultPopupItemsService.emptyVault$,