From cdbbbb365b0b3857fca87b92f0aeb96df5c0b37e Mon Sep 17 00:00:00 2001
From: Conner Turnbull <133619638+cturnbull-bitwarden@users.noreply.github.com>
Date: Wed, 26 Feb 2025 14:09:36 -0500
Subject: [PATCH] Bootstrap to tailwind updates (#13582)

---
 .../change-plan-dialog.component.html         | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/app/billing/organizations/change-plan-dialog.component.html b/apps/web/src/app/billing/organizations/change-plan-dialog.component.html
index ca1b9245c0b..64a694cdef0 100644
--- a/apps/web/src/app/billing/organizations/change-plan-dialog.component.html
+++ b/apps/web/src/app/billing/organizations/change-plan-dialog.component.html
@@ -55,7 +55,7 @@
           class="tw-grid tw-grid-flow-col tw-gap-4 tw-mb-4"
           [class]="'tw-grid-cols-' + selectableProducts.length"
         >
-          <div
+          <bit-card
             *ngFor="
               let selectableProduct of selectableProducts;
               trackBy: manageSelectableProduct;
@@ -64,7 +64,6 @@
             [ngClass]="getPlanCardContainerClasses(selectableProduct, i)"
             (click)="selectPlan(selectableProduct)"
             [attr.tabindex]="focusedIndex !== i || isCardDisabled(i) ? '-1' : '0'"
-            class="product-card"
             (keyup)="onKeydown($event, i)"
             (focus)="onFocus(i)"
             [attr.aria-disabled]="isCardDisabled(i)"
@@ -322,7 +321,7 @@
                 </ul>
               </ng-template>
             </ng-template>
-          </div>
+          </bit-card>
         </div>
         <br />
         <bit-callout
@@ -353,7 +352,7 @@
         >
           <i class="bwi bwi-fw" [ngClass]="paymentSourceClasses"></i>
           {{ paymentSource?.description }}
-          <span class="ml-2 tw-text-primary-600 tw-cursor-pointer" (click)="toggleShowPayment()">
+          <span class="tw-ml-2 tw-text-primary-600 tw-cursor-pointer" (click)="toggleShowPayment()">
             {{ "changePaymentMethod" | i18n }}
           </span>
           <a></a>
@@ -382,8 +381,8 @@
           </p>
         </div>
         <!-- SM + PM and PM only cost summary -->
-        <div *ngIf="totalOpened && !isSecretsManagerTrial()" class="row">
-          <bit-hint class="col-6" *ngIf="selectedInterval == planIntervals.Annually">
+        <div *ngIf="totalOpened && !isSecretsManagerTrial()" class="tw-flex tw-flex-wrap tw-gap-4">
+          <bit-hint class="tw-w-1/2" *ngIf="selectedInterval == planIntervals.Annually">
             <p class="tw-font-semibold tw-mb-1" *ngIf="organization.useSecretsManager">
               {{ "passwordManager" | i18n }}
             </p>
@@ -550,7 +549,7 @@
               </ng-container>
             </p>
           </bit-hint>
-          <bit-hint class="col-6" *ngIf="selectedInterval == planIntervals.Monthly">
+          <bit-hint class="tw-w-1/2" *ngIf="selectedInterval == planIntervals.Monthly">
             <p class="tw-font-semibold tw-mb-1" *ngIf="organization.useSecretsManager">
               {{ "passwordManager" | i18n }}
             </p>
@@ -706,8 +705,8 @@
           </bit-hint>
         </div>
         <!-- SM + Free PM cost summary -->
-        <div *ngIf="totalOpened && isSecretsManagerTrial()" class="row">
-          <bit-hint class="col-6" *ngIf="selectedInterval == planIntervals.Annually">
+        <div *ngIf="totalOpened && isSecretsManagerTrial()" class="tw-flex tw-flex-wrap tw-gap-4">
+          <bit-hint class="tw-w-1/2" *ngIf="selectedInterval == planIntervals.Annually">
             <!-- secrets manager summary for annual -->
             <p class="tw-font-semibold tw-mt-2 tw-mb-0" *ngIf="organization.useSecretsManager">
               {{ "secretsManager" | i18n }}
@@ -826,7 +825,7 @@
               </span>
             </p>
           </bit-hint>
-          <bit-hint class="col-6" *ngIf="selectedInterval == planIntervals.Monthly">
+          <bit-hint class="tw-w-1/2" *ngIf="selectedInterval == planIntervals.Monthly">
             <!-- secrets manager summary for monthly -->
             <p class="tw-font-semibold tw-mt-2 tw-mb-0" *ngIf="organization.useSecretsManager">
               {{ "secretsManager" | i18n }}
@@ -930,9 +929,9 @@
         <!-- discountPercentage to PM Only -->
         <div
           *ngIf="totalOpened && discountPercentage && !organization.useSecretsManager"
-          class="row"
+          class="tw-flex tw-flex-wrap tw-gap-4"
         >
-          <bit-hint class="col-6">
+          <bit-hint class="tw-w-1/2">
             <p
               class="tw-mb-0 tw-flex tw-justify-between"
               bitTypography="body2"
@@ -949,8 +948,8 @@
             </p>
           </bit-hint>
         </div>
-        <div *ngIf="totalOpened" class="row tw-mt-4">
-          <bit-hint class="col-6">
+        <div *ngIf="totalOpened" class="tw-flex tw-flex-wrap tw-gap-4 tw-mt-4">
+          <bit-hint class="tw-w-1/2">
             <p
               class="tw-flex tw-justify-between tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-pt-2 tw-mb-0"
             >
@@ -963,8 +962,8 @@
             </p>
           </bit-hint>
         </div>
-        <div *ngIf="totalOpened" class="row tw-mt-4">
-          <bit-hint class="col-6">
+        <div *ngIf="totalOpened" class="tw-flex tw-flex-wrap tw-gap-4 tw-mt-4">
+          <bit-hint class="tw-w-1/2">
             <p
               class="tw-flex tw-justify-between tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-pt-2 tw-mb-0"
             >