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">
+  <ul class="tw-divide-y">
-    <li *ngFor="let p of providers" class="list-group-item d-flex align-items-center">
+    <li *ngFor="let p of providers" class="tw-flex tw-items-center tw-p-4">
-      <div class="logo-2fa d-flex justify-content-center">
+      <div class="tw-flex tw-justify-center">
         <auth-two-factor-icon [provider]="p.type" [name]="p.name" />
       </div>
-      <div class="mx-4">
+      <div class="tw-mx-4">
-        <h3 class="mb-0">
+        <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

libs/angular/src/auth/components/two-factor-auth/two-factor-auth-webauthn.component.html

@@ -2,9 +2,9 @@
   <iframe id="webauthn_iframe" sandbox="allow-scripts allow-same-origin"></iframe>
 </div>
 <ng-container *ngIf="webAuthnNewTab">
-  <div class="content text-center" *ngIf="webAuthnNewTab">
+  <div class="tw-text-center" *ngIf="webAuthnNewTab">
-    <p class="text-center">{{ "webAuthnNewTab" | i18n }}</p>
+    <p class="tw-text-center">{{ "webAuthnNewTab" | i18n }}</p>
-    <button type="button" class="btn primary block" (click)="authWebAuthn()" appStopClick>
+    <button type="button" (click)="authWebAuthn()" appStopClick>
       {{ "webAuthnNewTabOpen" | i18n }}
     </button>
   </div>

libs/angular/src/auth/components/two-factor-auth/two-factor-auth-yubikey.component.html

@@ -2,7 +2,7 @@
 <picture>
   <source srcset="../../images/yubikey.avif" type="image/avif" />
   <source srcset="../../images/yubikey.webp" type="image/webp" />
-  <img src="../../images/yubikey.jpg" class="tw-rounded img-fluid tw-mb-3" alt="" />
+  <img src="../../images/yubikey.jpg" class="tw-rounded tw-max-w-full tw-h-auto tw-mb-3" alt="" />
 </picture>
 <bit-form-field>
   <bit-label class="tw-sr-only">{{ "verificationCode" | i18n }}</bit-label>

libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.html

@@ -68,7 +68,7 @@
       {{ "cancel" | i18n }}
     </a>
   </div>
-  <div class="text-center">
+  <div class="tw-text-center">
     <a bitLink href="#" appStopClick (click)="selectOtherTwoFactorMethod()">{{
       "useAnotherTwoStepMethod" | i18n
     }}</a>

libs/angular/src/auth/components/two-factor-auth/two-factor-options.component.html

@@ -29,7 +29,7 @@
           class="tw-flex tw-items-center tw-justify-center tw-min-w-[100px]"
           *ngIf="!areIconsDisabled"
         >
-          <img class="recovery-code-img" alt="rc logo" />
+          <img class="tw-max-w-24 tw-max-h-12 tw-size-auto" alt="rc logo" />
         </div>
         <div class="tw-flex-1">
           <h3 bitTypography="h3">{{ "recoveryCodeTitle" | i18n }}</h3>