[PM-1802] Update 2fa provider icons and description (#9568)

* Update yubikey to yubico

* Update icons and descriptions

* Change order of 2fa providers

* Refactor 2fa providers into separate component

* Update i18n messages for 2fa providers

* Update design

* Fix link

* Remove unused SVGs

* Undo changes to scss

* Add speedbumps to links

* Fix missing i18n string

* Add a11y tags

* Fix incorrect filepath

* Remove unused i18n strings

* Delete accidentally committed file

* Fix premium and enabled checkmark being in new line

* Rename two-factor-icon selector

* Update authenticator names in two-factor-authenticator setup component

* Update text according to figma design

* Update keys to notify crowdin translators of changed content

* Move svg icons to separate file

* Fix incorrect i18n key

apps/web/src/app/auth/two-factor-options.component.html

@@ -5,8 +5,8 @@
   <ng-container bitDialogContent>
     <div *ngFor="let p of providers" class="tw-m-2">
       <div class="tw-flex tw-items-center tw-justify-center tw-gap-4">
-        <div class="tw-flex tw-items-center tw-justify-center tw-min-w-[100px]">
-          <img [class]="'mfaType' + p.type" [alt]="p.name + ' logo'" />
+        <div class="tw-flex tw-items-center tw-justify-center tw-min-w-[120px]">
+          <auth-two-factor-icon [provider]="p.type" />
         </div>
         <div class="tw-flex-1">
           <h3 bitTypography="h3">{{ p.name }}</h3>
@@ -22,8 +22,8 @@
     </div>
     <div class="tw-m-2" (click)="recover()">
       <div class="tw-flex tw-items-center tw-justify-center tw-gap-4">
-        <div class="tw-flex tw-items-center tw-justify-center tw-min-w-[100px]">
-          <img class="recovery-code-img" alt="rc logo" />
+        <div class="tw-flex tw-items-center tw-justify-center tw-min-w-[120px]">
+          <auth-two-factor-icon provider="rc" />
         </div>
         <div class="tw-flex-1">
           <h3 bitTypography="h3">{{ "recoveryCodeTitle" | i18n }}</h3>