multiple fixes for bitwarden component (#14685)

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

@@ -4551,6 +4551,12 @@
   "downloadFromBitwardenNow": {
     "message": "Download from bitwarden.com now"
   },
+  "getItOnGooglePlay": {
+    "message": "Get it on Google Play"
+  },
+  "downloadOnTheAppStore": {
+    "message": "Download on the App Store"
+  },
   "permanentlyDeleteAttachmentConfirmation": {
     "message": "Are you sure you want to permanently delete this attachment?"
   },

apps/browser/src/vault/popup/settings/download-bitwarden.component.html

@@ -2,7 +2,6 @@
   <popup-header slot="header" pageTitle="{{ 'downloadBitwarden' | i18n }}" showBackButton>
     <ng-container slot="end">
       <app-pop-out></app-pop-out>
-      <app-current-account></app-current-account>
     </ng-container>
   </popup-header>
   <h2 bitTypography="h6">
@@ -20,17 +19,31 @@
       />
     </div>
     <div class="tw-flex tw-justify-center tw-gap-4">
-      <div class="tw-w-[43%]">
+      <a
-        <a href="https://apps.apple.com/app/bitwarden-password-manager/id1137397744">
+        class="tw-w-[43%] !tw-py-0"
-          <img class="tw-w-full" src="../../../images/app-store.png" alt="" />
+        target="_blank"
+        href="https://apps.apple.com/app/bitwarden-password-manager/id1137397744"
+        bitLink
+      >
+        <img
+          class="tw-w-full"
+          src="../../../images/app-store.png"
+          alt="{{ 'downloadOnTheAppStore' | i18n }}"
+        />
       </a>
-      </div>
+      <a
-      <div class="tw-w-[43%]">
+        class="tw-w-[43%] !tw-py-0"
-        <a href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden">
+        target="_blank"
-          <img class="tw-w-full" src="../../../images/google-play.png" alt="" />
+        href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden"
+        bitLink
+      >
+        <img
+          class="tw-w-full"
+          src="../../../images/google-play.png"
+          alt="{{ 'getItOnGooglePlay' | i18n }}"
+        />
       </a>
     </div>
-    </div>
   </bit-card>
 
   <h2 class="tw-mt-6" bitTypography="h6">
@@ -41,6 +54,7 @@
     <a
       class="tw-text-primary-600 tw-mt-4 tw-flex tw-no-underline tw-gap-2 tw-items-center"
       href="https://bitwarden.com/download/#downloads-desktop"
+      bitLink
       target="_blank"
     >
       {{ "downloadFromBitwardenNow" | i18n }}

apps/browser/src/vault/popup/settings/download-bitwarden.component.ts

@@ -6,7 +6,7 @@ import { firstValueFrom } from "rxjs";
 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 { CardComponent, TypographyModule } from "@bitwarden/components";
+import { CardComponent, LinkModule, TypographyModule } from "@bitwarden/components";
 import { VaultNudgesService, VaultNudgeType } from "@bitwarden/vault";
 
 import { CurrentAccountComponent } from "../../../auth/popup/account-switching/current-account.component";
@@ -27,6 +27,7 @@ import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.co
     CardComponent,
     TypographyModule,
     CurrentAccountComponent,
+    LinkModule,
   ],
 })
 export class DownloadBitwardenComponent implements OnInit {