Replace Boostrap styles in subcomponents with Tailwind

apps/web/src/app/auth/settings/two-factor/two-factor-setup-authenticator.component.html

@@ -41,7 +41,7 @@
           {{ "twoStepAuthenticatorInstructionSuffix" | i18n }}
         </p>
 
-        <p class="text-center">
+        <p class="tw-text-center">
           <a
             href="https://apps.apple.com/ca/app/bitwarden-authenticator/id6497335175"
             target="_blank"

apps/web/src/app/auth/settings/two-factor/two-factor-setup-duo.component.html

@@ -9,7 +9,7 @@
         <app-callout type="success" title="{{ 'enabled' | i18n }}" icon="bwi bwi-check-circle">
           {{ "twoStepLoginProviderEnabled" | i18n }}
         </app-callout>
-        <img class="tw-float-right tw-ml-3 mfaType2" alt="Duo logo" />
+        <img class="tw-float-right tw-ml-3" alt="Duo logo" />
         <strong>{{ "twoFactorDuoClientId" | i18n }}:</strong> {{ clientId }}
         <br />
         <strong>{{ "twoFactorDuoClientSecret" | i18n }}:</strong> {{ clientSecret }}
@@ -17,7 +17,7 @@
         <strong>{{ "twoFactorDuoApiHostname" | i18n }}:</strong> {{ host }}
       </ng-container>
       <ng-container *ngIf="!enabled">
-        <img class="tw-float-right tw-ml-3 mfaType2" alt="Duo logo" />
+        <img class="tw-float-right tw-ml-3" alt="Duo logo" />
         <p bitTypography="body1">{{ "twoFactorDuoDesc" | i18n }}</p>
         <bit-form-field>
           <bit-label>{{ "twoFactorDuoClientId" | i18n }}</bit-label>

apps/web/src/app/auth/settings/two-factor/two-factor-setup-email.component.html

@@ -14,7 +14,7 @@
       <ng-container *ngIf="!enabled">
         <p class="tw-flex">
           <span class="tw-mr-3">{{ "twoFactorEmailDesc" | i18n }}</span>
-          <img class="tw-float-right tw-ml-auto mfaType1" alt="Email logo" />
+          <img class="tw-float-right tw-ml-auto" alt="Email logo" />
         </p>
         <bit-form-field>
           <bit-label>1. {{ "twoFactorEmailEnterEmail" | i18n }}</bit-label>

apps/web/src/app/auth/settings/two-factor/two-factor-setup-webauthn.component.html

@@ -16,7 +16,7 @@
       <app-callout type="warning">
         <p bitTypography="body1">{{ "twoFactorWebAuthnWarning1" | i18n }}</p>
       </app-callout>
-      <img class="tw-float-right tw-ml-5 mfaType7" alt="FIDO2 WebAuthn logo" />
+      <img class="tw-float-right tw-ml-5" alt="FIDO2 WebAuthn logo" />
       <ul class="bwi-ul">
         <li *ngFor="let k of keys; let i = index" #removeKeyBtn [appApiAction]="k.removePromise">
           <i class="bwi bwi-li bwi-key"></i>

apps/web/src/app/auth/settings/two-factor/two-factor-setup-yubikey.component.html

@@ -20,7 +20,7 @@
           <li>{{ "twoFactorYubikeySupportMobile" | i18n }}</li>
         </ul>
       </app-callout>
-      <img class="tw-float-right mfaType3" alt="YubiKey OTP security key logo" />
+      <img class="tw-float-right" alt="YubiKey OTP security key logo" />
       <p bitTypography="body1">{{ "twoFactorYubikeyAdd" | i18n }}:</p>
       <ol bitTypography="body1">
         <li>{{ "twoFactorYubikeyPlugIn" | i18n }}</li>

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

@@ -1,7 +1,7 @@
 <app-header *ngIf="organizationId != null"></app-header>
 
 <bit-container>
-  <div class="tabbed-header" *ngIf="organizationId == null">
+  <div class="tw-mt-6 tw-mb-2 tw-pb-2" *ngIf="organizationId == null">
     <h1 *ngIf="!organizationId || !isEnterpriseOrg">{{ "twoStepLogin" | i18n }}</h1>
     <h1 *ngIf="organizationId && isEnterpriseOrg">{{ "twoStepLoginEnforcement" | i18n }}</h1>
   </div>
@@ -35,7 +35,7 @@
     {{ "providers" | i18n }}
     <small *ngIf="loading">
       <i
-        class="bwi bwi-spinner bwi-spin bwi-fw text-muted"
+        class="bwi bwi-spinner bwi-spin bwi-fw tw-text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
@@ -45,22 +45,22 @@
   <bit-callout type="warning" *ngIf="showPolicyWarning">
     {{ "twoStepLoginPolicyUserWarning" | i18n }}
   </bit-callout>
-  <ul class="list-group list-group-2fa">
-    <li *ngFor="let p of providers" class="list-group-item d-flex align-items-center">
-      <div class="logo-2fa d-flex justify-content-center">
+  <ul class="tw-divide-y">
+    <li *ngFor="let p of providers" class="tw-flex tw-items-center tw-p-4">
+      <div class="tw-flex tw-justify-center">
         <auth-two-factor-icon [provider]="p.type" [name]="p.name" />
       </div>
-      <div class="mx-4">
-        <h3 class="mb-0">
+      <div class="tw-mx-4">
+        <h3 class="tw-mb-0">
           <div
-            class="font-weight-semibold tw-text-base"
+            class="tw-font-semibold tw-text-base"
             [style]="p.enabled || p.premium ? 'display:inline-block' : ''"
           >
             {{ p.name }}
           </div>
           <ng-container *ngIf="p.enabled">
             <i
-              class="bwi bwi-check text-success bwi-fw"
+              class="bwi bwi-check tw-text-success bwi-fw"
               title="{{ 'enabled' | i18n }}"
               aria-hidden="true"
             ></i>
@@ -70,7 +70,7 @@
         </h3>
         {{ p.description }}
       </div>
-      <div class="ml-auto">
+      <div class="tw-ml-auto">
         <button
           type="button"
           bitButton