From c1ace45915c8d33d70fc738bd5b5e95e4123b5db Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Mon, 4 Jul 2022 11:00:13 +0200
Subject: [PATCH] [SM-71] Update all badges to use component library (#2999)

---
 .../manage/entity-users.component.html        | 10 ++--
 .../manage/people.component.html              | 18 +++---
 .../manage/policies.component.html            |  2 +-
 .../manage/user-add-edit.component.html       |  4 +-
 .../organization-subscription.component.html  |  2 +-
 .../organizations/tools/tools.component.html  |  2 +-
 apps/web/src/app/oss.module.ts                |  8 ++-
 .../exposed-passwords-report.component.html   |  2 +-
 .../inactive-two-factor-report.component.html |  2 +-
 .../reused-passwords-report.component.html    |  2 +-
 .../weak-passwords-report.component.html      |  2 +-
 .../settings/emergency-access.component.html  | 56 ++++++++++---------
 .../web/src/app/vault/add-edit.component.html |  4 +-
 apps/web/src/scss/buttons.scss                | 49 ----------------
 apps/web/src/scss/styles.scss                 | 17 +++---
 .../providers/manage/people.component.html    | 12 ++--
 16 files changed, 74 insertions(+), 118 deletions(-)

diff --git a/apps/web/src/app/modules/organizations/manage/entity-users.component.html b/apps/web/src/app/modules/organizations/manage/entity-users.component.html
index f4c157a941..92f95bae3b 100644
--- a/apps/web/src/app/modules/organizations/manage/entity-users.component.html
+++ b/apps/web/src/app/modules/organizations/manage/entity-users.component.html
@@ -64,9 +64,7 @@
                 (click)="filterSelected(true)"
               >
                 {{ "selected" | i18n }}
-                <span class="badge badge-pill badge-info" *ngIf="selectedCount">{{
-                  selectedCount
-                }}</span>
+                <span bitBadge badgeType="info" *ngIf="selectedCount">{{ selectedCount }}</span>
               </button>
             </div>
           </div>
@@ -115,12 +113,14 @@
                 <td>
                   {{ u.email }}
                   <span
-                    class="badge badge-secondary"
+                    bitBadge
+                    badgeType="secondary"
                     *ngIf="u.status === organizationUserStatusType.Invited"
                     >{{ "invited" | i18n }}</span
                   >
                   <span
-                    class="badge badge-warning"
+                    bitBadge
+                    badgeType="warning"
                     *ngIf="u.status === organizationUserStatusType.Accepted"
                     >{{ "accepted" | i18n }}</span
                   >
diff --git a/apps/web/src/app/organizations/manage/people.component.html b/apps/web/src/app/organizations/manage/people.component.html
index 902dd85d6e..a20a95d20a 100644
--- a/apps/web/src/app/organizations/manage/people.component.html
+++ b/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>
diff --git a/apps/web/src/app/organizations/manage/policies.component.html b/apps/web/src/app/organizations/manage/policies.component.html
index 0f8b890c8f..f1941d097d 100644
--- a/apps/web/src/app/organizations/manage/policies.component.html
+++ b/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>
diff --git a/apps/web/src/app/organizations/manage/user-add-edit.component.html b/apps/web/src/app/organizations/manage/user-add-edit.component.html
index a11aeda15b..50a1a8bf1e 100644
--- a/apps/web/src/app/organizations/manage/user-add-edit.component.html
+++ b/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"
diff --git a/apps/web/src/app/organizations/settings/organization-subscription.component.html b/apps/web/src/app/organizations/settings/organization-subscription.component.html
index 60e1341475..e54aa47018 100644
--- a/apps/web/src/app/organizations/settings/organization-subscription.component.html
+++ b/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>
diff --git a/apps/web/src/app/organizations/tools/tools.component.html b/apps/web/src/app/organizations/tools/tools.component.html
index 1cc93bff8c..de83652b46 100644
--- a/apps/web/src/app/organizations/tools/tools.component.html
+++ b/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()"
               >
diff --git a/apps/web/src/app/oss.module.ts b/apps/web/src/app/oss.module.ts
index cd4d3d9d05..6a0d27af1a 100644
--- a/apps/web/src/app/oss.module.ts
+++ b/apps/web/src/app/oss.module.ts
@@ -18,7 +18,13 @@ import { OrganizationBadgeModule } from "./modules/vault/modules/organization-ba
     OrganizationManageModule,
     OrganizationUserModule,
   ],
-  exports: [LooseComponentsModule, VaultFilterModule, OrganizationBadgeModule, PipesModule],
+  exports: [
+    SharedModule,
+    LooseComponentsModule,
+    VaultFilterModule,
+    OrganizationBadgeModule,
+    PipesModule,
+  ],
   bootstrap: [],
 })
 export class OssModule {}
diff --git a/apps/web/src/app/reports/exposed-passwords-report.component.html b/apps/web/src/app/reports/exposed-passwords-report.component.html
index 32cfaf2019..2c5547efc7 100644
--- a/apps/web/src/app/reports/exposed-passwords-report.component.html
+++ b/apps/web/src/app/reports/exposed-passwords-report.component.html
@@ -50,7 +50,7 @@
             <small>{{ c.subTitle }}</small>
           </td>
           <td class="text-right">
-            <span class="badge badge-warning">
+            <span bitBadge badgeType="warning">
               {{ "exposedXTimes" | i18n: (exposedPasswordMap.get(c.id) | number) }}
             </span>
           </td>
diff --git a/apps/web/src/app/reports/inactive-two-factor-report.component.html b/apps/web/src/app/reports/inactive-two-factor-report.component.html
index b472498093..961d3e1ace 100644
--- a/apps/web/src/app/reports/inactive-two-factor-report.component.html
+++ b/apps/web/src/app/reports/inactive-two-factor-report.component.html
@@ -61,7 +61,7 @@
           </td>
           <td class="text-right">
             <a
-              class="badge badge-primary"
+              bitBadge
               href="{{ cipherDocs.get(c.id) }}"
               target="_blank"
               rel="noopener"
diff --git a/apps/web/src/app/reports/reused-passwords-report.component.html b/apps/web/src/app/reports/reused-passwords-report.component.html
index e4e1c41bd4..862133f2a8 100644
--- a/apps/web/src/app/reports/reused-passwords-report.component.html
+++ b/apps/web/src/app/reports/reused-passwords-report.component.html
@@ -65,7 +65,7 @@
             <small>{{ c.subTitle }}</small>
           </td>
           <td class="text-right">
-            <span class="badge badge-warning">
+            <span bitBadge badgeType="warning">
               {{ "reusedXTimes" | i18n: passwordUseMap.get(c.login.password) }}
             </span>
           </td>
diff --git a/apps/web/src/app/reports/weak-passwords-report.component.html b/apps/web/src/app/reports/weak-passwords-report.component.html
index 15315b5c2d..414cdb086e 100644
--- a/apps/web/src/app/reports/weak-passwords-report.component.html
+++ b/apps/web/src/app/reports/weak-passwords-report.component.html
@@ -65,7 +65,7 @@
             <small>{{ c.subTitle }}</small>
           </td>
           <td class="text-right">
-            <span class="badge badge-{{ passwordStrengthMap.get(c.id)[1] }}">
+            <span bitBadge [badgeType]="passwordStrengthMap.get(c.id)[1]">
               {{ passwordStrengthMap.get(c.id)[0] | i18n }}
             </span>
           </td>
diff --git a/apps/web/src/app/settings/emergency-access.component.html b/apps/web/src/app/settings/emergency-access.component.html
index f6df2a30f3..8d79d1aa02 100644
--- a/apps/web/src/app/settings/emergency-access.component.html
+++ b/apps/web/src/app/settings/emergency-access.component.html
@@ -46,28 +46,29 @@
       <td>
         <a href="#" appStopClick (click)="edit(c)">{{ c.email }}</a>
         <span
-          class="badge badge-secondary"
+          bitBadge
+          badgeType="secondary"
           *ngIf="c.status === emergencyAccessStatusType.Invited"
           >{{ "invited" | i18n }}</span
         >
-        <span class="badge badge-warning" *ngIf="c.status === emergencyAccessStatusType.Accepted">{{
-          "accepted" | i18n
-        }}</span>
         <span
-          class="badge badge-warning"
+          bitBadge
+          badgeType="warning"
+          *ngIf="c.status === emergencyAccessStatusType.Accepted"
+          >{{ "accepted" | i18n }}</span
+        >
+        <span
+          bitBadge
+          badgeType="warning"
           *ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
           >{{ "emergencyAccessRecoveryInitiated" | i18n }}</span
         >
-        <span
-          class="badge badge-success"
-          *ngIf="c.status === emergencyAccessStatusType.RecoveryApproved"
-          >{{ "emergencyAccessRecoveryApproved" | i18n }}</span
-        >
-
-        <span class="badge badge-primary" *ngIf="c.type === emergencyAccessType.View">{{
-          "view" | i18n
+        <span bitBadge *ngIf="c.status === emergencyAccessStatusType.RecoveryApproved">{{
+          "emergencyAccessRecoveryApproved" | i18n
         }}</span>
-        <span class="badge badge-primary" *ngIf="c.type === emergencyAccessType.Takeover">{{
+
+        <span bitBadge *ngIf="c.type === emergencyAccessType.View">{{ "view" | i18n }}</span>
+        <span bitBadge *ngIf="c.type === emergencyAccessType.Takeover">{{
           "takeover" | i18n
         }}</span>
 
@@ -159,29 +160,30 @@
       </td>
       <td>
         <span>{{ c.email }}</span>
-        <span
-          class="badge badge-secondary"
-          *ngIf="c.status === emergencyAccessStatusType.Invited"
-          >{{ "invited" | i18n }}</span
-        >
-        <span class="badge badge-warning" *ngIf="c.status === emergencyAccessStatusType.Accepted">{{
-          "accepted" | i18n
+        <span bitBadge *ngIf="c.status === emergencyAccessStatusType.Invited">{{
+          "invited" | i18n
         }}</span>
         <span
-          class="badge badge-warning"
+          bitBadge
+          badgeType="warning"
+          *ngIf="c.status === emergencyAccessStatusType.Accepted"
+          >{{ "accepted" | i18n }}</span
+        >
+        <span
+          bitBadge
+          badgeType="warning"
           *ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
           >{{ "emergencyAccessRecoveryInitiated" | i18n }}</span
         >
         <span
-          class="badge badge-success"
+          bitBadge
+          badgeType="success"
           *ngIf="c.status === emergencyAccessStatusType.RecoveryApproved"
           >{{ "emergencyAccessRecoveryApproved" | i18n }}</span
         >
 
-        <span class="badge badge-primary" *ngIf="c.type === emergencyAccessType.View">{{
-          "view" | i18n
-        }}</span>
-        <span class="badge badge-primary" *ngIf="c.type === emergencyAccessType.Takeover">{{
+        <span bitBadge *ngIf="c.type === emergencyAccessType.View">{{ "view" | i18n }}</span>
+        <span bitBadge *ngIf="c.type === emergencyAccessType.Takeover">{{
           "takeover" | i18n
         }}</span>
 
diff --git a/apps/web/src/app/vault/add-edit.component.html b/apps/web/src/app/vault/add-edit.component.html
index 37410ea595..e21b1ae10a 100644
--- a/apps/web/src/app/vault/add-edit.component.html
+++ b/apps/web/src/app/vault/add-edit.component.html
@@ -194,7 +194,9 @@
                 <a
                   href="#"
                   appStopClick
-                  class="badge badge-primary ml-3"
+                  bitBadge
+                  badgeType="primary"
+                  class="tw-ml-4"
                   (click)="upgradeOrganization()"
                   *ngIf="
                     (organization && !organization.useTotp) ||
diff --git a/apps/web/src/scss/buttons.scss b/apps/web/src/scss/buttons.scss
index 6713a97abe..9c854806cb 100644
--- a/apps/web/src/scss/buttons.scss
+++ b/apps/web/src/scss/buttons.scss
@@ -202,52 +202,3 @@ button.no-btn {
     color: inherit;
   }
 }
-
-.badge-primary {
-  @include themify($themes) {
-    background-color: themed("badgePrimaryBackground");
-    color: themed("badgePrimaryText");
-  }
-
-  &:hover {
-    @include themify($themes) {
-      background-color: themed("badgePrimaryBackgroundHover");
-      color: themed("badgePrimaryText");
-    }
-  }
-}
-
-.badge-secondary {
-  @include themify($themes) {
-    background-color: themed("badgeSecondaryBackground");
-    color: themed("badgeSecondaryText");
-  }
-}
-
-.badge-info {
-  @include themify($themes) {
-    background-color: themed("badgeInfoBackground");
-    color: themed("badgeInfoText");
-  }
-}
-
-.badge-danger {
-  @include themify($themes) {
-    background-color: themed("badgeDangerBackground");
-    color: themed("badgeDangerText");
-  }
-}
-
-.badge-warning {
-  @include themify($themes) {
-    background-color: themed("warning");
-    color: themed("textWarningColor");
-  }
-}
-
-.badge-success {
-  @include themify($themes) {
-    background-color: themed("success");
-    color: themed("textSuccessColor");
-  }
-}
diff --git a/apps/web/src/scss/styles.scss b/apps/web/src/scss/styles.scss
index d218ee1d76..dc1c740b4b 100644
--- a/apps/web/src/scss/styles.scss
+++ b/apps/web/src/scss/styles.scss
@@ -21,25 +21,24 @@
 @import "~bootstrap/scss/_dropdown";
 @import "~bootstrap/scss/_button-group";
 @import "~bootstrap/scss/_input-group";
-@import "~bootstrap/scss/_custom-forms";
+// @import "~bootstrap/scss/_custom-forms";
 @import "~bootstrap/scss/_nav";
 @import "~bootstrap/scss/_navbar";
 @import "~bootstrap/scss/_card";
-@import "~bootstrap/scss/_breadcrumb";
-@import "~bootstrap/scss/_pagination";
-@import "~bootstrap/scss/_badge";
-@import "~bootstrap/scss/_jumbotron";
-@import "~bootstrap/scss/_alert";
+// @import "~bootstrap/scss/_breadcrumb";
+// @import "~bootstrap/scss/_pagination";
+// @import "~bootstrap/scss/_jumbotron";
+// @import "~bootstrap/scss/_alert";
 @import "~bootstrap/scss/_progress";
-@import "~bootstrap/scss/_media";
+// @import "~bootstrap/scss/_media";
 @import "~bootstrap/scss/_list-group";
 @import "~bootstrap/scss/_close";
 //@import "~bootstrap/scss/_toasts";
 @import "~bootstrap/scss/_modal";
 @import "~bootstrap/scss/_tooltip";
 @import "~bootstrap/scss/_popover";
-@import "~bootstrap/scss/_carousel";
-@import "~bootstrap/scss/_spinners";
+// @import "~bootstrap/scss/_carousel";
+// @import "~bootstrap/scss/_spinners";
 @import "~bootstrap/scss/_utilities";
 @import "~bootstrap/scss/_print";
 
diff --git a/bitwarden_license/bit-web/src/app/providers/manage/people.component.html b/bitwarden_license/bit-web/src/app/providers/manage/people.component.html
index 884a6bafb1..0171948e5b 100644
--- a/bitwarden_license/bit-web/src/app/providers/manage/people.component.html
+++ b/bitwarden_license/bit-web/src/app/providers/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>
     </div>
     <div class="ml-3">
@@ -137,10 +135,10 @@
           </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>
             <small class="text-muted d-block" *ngIf="u.name">{{ u.name }}</small>