[SM-71] Update all badges to use component library (#2999)

apps/web/src/app/organizations/manage/people.component.html

@@ -9,7 +9,7 @@
         (click)="filter(null)"
       >
         {{ "all" | i18n }}
-        <span class="badge badge-pill badge-info" *ngIf="allCount">{{ allCount }}</span>
+        <span bitBadge badgeType="info" *ngIf="allCount">{{ allCount }}</span>
       </button>
       <button
         type="button"
@@ -18,7 +18,7 @@
         (click)="filter(userStatusType.Invited)"
       >
         {{ "invited" | i18n }}
-        <span class="badge badge-pill badge-info" *ngIf="invitedCount">{{ invitedCount }}</span>
+        <span bitBadge badgeType="info" *ngIf="invitedCount">{{ invitedCount }}</span>
       </button>
       <button
         type="button"
@@ -27,9 +27,7 @@
         (click)="filter(userStatusType.Accepted)"
       >
         {{ "accepted" | i18n }}
-        <span class="badge badge-pill badge-warning" *ngIf="acceptedCount">{{
-          acceptedCount
-        }}</span>
+        <span bitBadge badgeType="warning" *ngIf="acceptedCount">{{ acceptedCount }}</span>
       </button>
       <button
         type="button"
@@ -38,9 +36,7 @@
         (click)="filter(userStatusType.Deactivated)"
       >
         {{ "deactivated" | i18n }}
-        <span class="badge badge-pill badge-info" *ngIf="deactivatedCount">{{
-          deactivatedCount
-        }}</span>
+        <span bitBadge badgeType="info" *ngIf="deactivatedCount">{{ deactivatedCount }}</span>
       </button>
     </div>
     <div class="ml-3">
@@ -156,13 +152,13 @@
           </td>
           <td>
             <a href="#" appStopClick (click)="edit(u)">{{ u.email }}</a>
-            <span class="badge badge-secondary" *ngIf="u.status === userStatusType.Invited">{{
+            <span bitBadge badgeType="secondary" *ngIf="u.status === userStatusType.Invited">{{
               "invited" | i18n
             }}</span>
-            <span class="badge badge-warning" *ngIf="u.status === userStatusType.Accepted">{{
+            <span bitBadge badgeType="warning" *ngIf="u.status === userStatusType.Accepted">{{
               "accepted" | i18n
             }}</span>
-            <span class="badge badge-secondary" *ngIf="u.status === userStatusType.Deactivated">{{
+            <span bitBadge badgeType="secondary" *ngIf="u.status === userStatusType.Deactivated">{{
               "deactivated" | i18n
             }}</span>
             <small class="text-muted d-block" *ngIf="u.name">{{ u.name }}</small>

apps/web/src/app/organizations/manage/policies.component.html

@@ -14,7 +14,7 @@
     <tr *ngFor="let p of policies">
       <td *ngIf="p.display(organization)">
         <a href="#" appStopClick (click)="edit(p)">{{ p.name | i18n }}</a>
-        <span class="badge badge-success" *ngIf="policiesEnabledMap.get(p.type)">{{
+        <span bitBadge badgeType="success" *ngIf="policiesEnabledMap.get(p.type)">{{
           "enabled" | i18n
         }}</span>
         <small class="text-muted d-block">{{ p.description | i18n }}</small>

apps/web/src/app/organizations/manage/user-add-edit.component.html

@@ -11,7 +11,9 @@
         <h2 class="modal-title" id="userAddEditTitle">
           {{ title }}
           <small class="text-muted" *ngIf="name">{{ name }}</small>
-          <span class="badge badge-dark" *ngIf="isDeactivated">{{ "deactivated" | i18n }}</span>
+          <span bitBadge badgeType="secondary" *ngIf="isDeactivated">{{
+            "deactivated" | i18n
+          }}</span>
         </h2>
         <button
           type="button"

apps/web/src/app/organizations/settings/organization-subscription.component.html

@@ -62,7 +62,7 @@
               <span class="text-capitalize">{{
                 isSponsoredSubscription ? "sponsored" : subscription.status || "-"
               }}</span>
-              <span class="badge badge-warning" *ngIf="subscriptionMarkedForCancel">{{
+              <span bitBadge badgeType="warning" *ngIf="subscriptionMarkedForCancel">{{
                 "pendingCancellation" | i18n
               }}</span>
             </dd>

apps/web/src/app/organizations/tools/tools.component.html

@@ -28,7 +28,7 @@
               <a
                 href="#"
                 appStopClick
-                class="badge badge-primary"
+                bitBadge
                 *ngIf="!accessReports"
                 (click)="upgradeOrganization()"
               >