[PM-21184] Migrate free-bitwarden-families.component.html to Tailwind complying

apps/web/src/app/billing/members/free-bitwarden-families.component.html

@@ -56,20 +56,21 @@ <h2 bitTypography="h2" class="">{{ "sponsoredBitwardenFamilies" | i18n }}</h2>
                       appA11yTitle="{{ 'options' | i18n }}"
                     ></button>
                     <bit-menu #appListDropdown>
-                      <button
-                        type="button"
-                        bitMenuItem
-                        [attr.aria-label]="'resendEmailLabel' | i18n"
-                        *ngIf="!isSelfHosted && !sponsoredFamily.validUntil"
-                        (click)="resendEmail(sponsoredFamily)"
-                      >
-                        <i aria-hidden="true" class="bwi bwi-envelope"></i>
-                        {{ "resendInvitation" | i18n }}
-                      </button>
+                      @if (!isSelfHosted && !sponsoredFamily.validUntil) {
+                        <button
+                          type="button"
+                          bitMenuItem
+                          [attr.aria-label]="'resendEmailLabel' | i18n"
+                          (click)="resendEmail(sponsoredFamily)"
+                        >
+                          <i aria-hidden="true" class="bwi bwi-envelope"></i>
+                          {{ "resendInvitation" | i18n }}
+                        </button>
+                      }
 
-                      <ng-container *ngIf="!isSelfHosted && !sponsoredFamily.validUntil">
+                      @if (!isSelfHosted && !sponsoredFamily.validUntil) {
                         <hr class="tw-m-0" />
-                      </ng-container>
+                      }
 
                       <button
                         type="button"
@@ -78,7 +79,7 @@ <h2 bitTypography="h2" class="">{{ "sponsoredBitwardenFamilies" | i18n }}</h2>
                         (click)="removeSponsorship(sponsoredFamily)"
                       >
                         <i aria-hidden="true" class="bwi bwi-close tw-text-danger"></i>
-                        <span class="tw-text-danger pl-1">{{ "remove" | i18n }}</span>
+                        <span class="tw-text-danger tw-pl-1">{{ "remove" | i18n }}</span>
                       </button>
                     </bit-menu>
                   </td>
@@ -87,7 +88,7 @@ <h2 bitTypography="h2" class="">{{ "sponsoredBitwardenFamilies" | i18n }}</h2>
             }
           </ng-template>
         </bit-table>
-        <hr class="mt-0" />
+        <hr class="tw-mt-0" />
       </ng-container>
     } @else if (!loading()) {
       <div class="tw-my-5 tw-py-5 tw-flex tw-flex-col tw-items-center">

apps/web/src/app/shared/loose-components.module.ts

@@ -26,6 +26,7 @@ import { UpdatePasswordComponent } from "../auth/update-password.component";
 import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component";
 import { VerifyEmailTokenComponent } from "../auth/verify-email-token.component";
 import { VerifyRecoverDeleteComponent } from "../auth/verify-recover-delete.component";
+import { FreeBitwardenFamiliesComponent } from "../billing/members/free-bitwarden-families.component";
 import { SponsoredFamiliesComponent } from "../billing/settings/sponsored-families.component";
 import { SponsoringOrgRowComponent } from "../billing/settings/sponsoring-org-row.component";
 // eslint-disable-next-line no-restricted-imports -- Temporarily disabled until DIRT refactors these out of this module
@@ -46,7 +47,6 @@ import { OrganizationBadgeModule } from "../vault/individual-vault/organization-
 import { PipesModule } from "../vault/individual-vault/pipes/pipes.module";
 import { PurgeVaultComponent } from "../vault/settings/purge-vault.component";
 
-import { FreeBitwardenFamiliesComponent } from "./../billing/members/free-bitwarden-families.component";
 import { AccountFingerprintComponent } from "./components/account-fingerprint/account-fingerprint.component";
 import { SharedModule } from "./shared.module";