From ce4fd3425a26059688277da74e740609f2e90211 Mon Sep 17 00:00:00 2001
From: Shane Melton <smelton@bitwarden.com>
Date: Mon, 12 Jun 2023 10:25:36 -0700
Subject: [PATCH] [AC-1423] Update cloud subscription page styles

- Remove bootstrap styles
- Use CL components where applicable
- Use CL typography directives
- Update heading levels to prepare for new SM sections
---
 ...nization-subscription-cloud.component.html | 142 ++++++++----------
 .../secrets-manager/enroll.component.html     |   4 +-
 apps/web/src/locales/en/messages.json         |   3 +
 3 files changed, 66 insertions(+), 83 deletions(-)

diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
index c28bdd4ddc3..211e82a3c07 100644
--- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
+++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
@@ -1,5 +1,5 @@
-<div class="page-header">
-  <h1>
+<div class="tw-mb-2 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300">
+  <h1 bitTypography="h1">
     {{ "subscription" | i18n }}
     <small *ngIf="firstLoaded && loading">
       <i
@@ -7,7 +7,7 @@
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
+      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
     </small>
   </h1>
 </div>
@@ -40,44 +40,42 @@
     </button>
   </bit-callout>
 
-  <div class="row">
-    <div class="col-4">
-      <dl>
-        <dt>{{ "billingPlan" | i18n }}</dt>
-        <dd>{{ sub.plan.name }}</dd>
-        <ng-container *ngIf="subscription">
-          <dt>{{ "status" | i18n }}</dt>
-          <dd>
-            <span class="text-capitalize">{{
-              isSponsoredSubscription ? "sponsored" : subscription.status || "-"
-            }}</span>
-            <span bitBadge badgeType="warning" *ngIf="subscriptionMarkedForCancel">{{
-              "pendingCancellation" | i18n
-            }}</span>
-          </dd>
-          <dt [ngClass]="{ 'tw-text-danger': isExpired }">
-            {{ "subscriptionExpiration" | i18n }}
-          </dt>
-          <dd [ngClass]="{ 'tw-text-danger': isExpired }">
-            {{ nextInvoice ? (nextInvoice.date | date : "mediumDate") : "-" }}
-          </dd>
-        </ng-container>
-      </dl>
-    </div>
+  <div class="tw-flex-col">
+    <dl class="tw-grid tw-grid-flow-col tw-grid-rows-2">
+      <dt>{{ "billingPlan" | i18n }}</dt>
+      <dd>{{ sub.plan.name }}</dd>
+      <ng-container *ngIf="subscription">
+        <dt>{{ "status" | i18n }}</dt>
+        <dd>
+          <span class="tw-capitalize">{{
+            isSponsoredSubscription ? "sponsored" : subscription.status || "-"
+          }}</span>
+          <span bitBadge badgeType="warning" *ngIf="subscriptionMarkedForCancel">{{
+            "pendingCancellation" | i18n
+          }}</span>
+        </dd>
+        <dt [ngClass]="{ 'tw-text-danger': isExpired }">
+          {{ "subscriptionExpiration" | i18n }}
+        </dt>
+        <dd [ngClass]="{ 'tw-text-danger': isExpired }">
+          {{ nextInvoice ? (nextInvoice.date | date : "mediumDate") : "-" }}
+        </dd>
+      </ng-container>
+    </dl>
     <ng-container *ngIf="userOrg.canEditSubscription">
-      <div class="col-8" *ngIf="subscription">
-        <strong class="d-block mb-1">{{ "details" | i18n }}</strong>
-        <table class="table">
-          <tbody>
-            <tr *ngFor="let i of subscription.items">
-              <td>
+      <div class="tw-flex-col" *ngIf="subscription">
+        <strong class="tw-mb-1 tw-block">{{ "details" | i18n }}</strong>
+        <bit-table>
+          <ng-template body>
+            <tr bitRow *ngFor="let i of subscription.items">
+              <td bitCell>
                 {{ i.name }} {{ i.quantity > 1 ? "&times;" + i.quantity : "" }} @
                 {{ i.amount | currency : "$" }}
               </td>
-              <td>{{ i.quantity * i.amount | currency : "$" }} /{{ i.interval | i18n }}</td>
+              <td bitCell>{{ i.quantity * i.amount | currency : "$" }} /{{ i.interval | i18n }}</td>
             </tr>
-          </tbody>
-        </table>
+          </ng-template>
+        </bit-table>
       </div>
     </ng-container>
   </div>
@@ -108,24 +106,23 @@
   </ng-container>
 
   <ng-container *ngIf="userOrg.canEditSubscription">
-    <h2 class="spaced-header">{{ "manageSubscription" | i18n }}</h2>
-    <p class="mb-4">{{ subscriptionDesc }}</p>
+    <h2 bitTypography="h2" class="tw-mt-7">{{ "manageSubscription" | i18n }}</h2>
+    <p bitTypography="body1">{{ subscriptionDesc }}</p>
     <ng-container
       *ngIf="
         subscription && canAdjustSeats && !subscription.cancelled && !subscriptionMarkedForCancel
       "
     >
-      <div class="mt-3">
-        <app-adjust-subscription
-          [seatPrice]="seatPrice"
-          [organizationId]="organizationId"
-          [interval]="billingInterval"
-          [currentSeatCount]="seats"
-          [maxAutoscaleSeats]="maxAutoscaleSeats"
-          (onAdjusted)="subscriptionAdjusted()"
-        >
-        </app-adjust-subscription>
-      </div>
+      <h3 bitTypography="h3" class="tw-mt-7">{{ "passwordManager" | i18n }}</h3>
+      <app-adjust-subscription
+        [seatPrice]="seatPrice"
+        [organizationId]="organizationId"
+        [interval]="billingInterval"
+        [currentSeatCount]="seats"
+        [maxAutoscaleSeats]="maxAutoscaleSeats"
+        (onAdjusted)="subscriptionAdjusted()"
+      >
+      </app-adjust-subscription>
     </ng-container>
     <button
       bitButton
@@ -136,33 +133,18 @@
     >
       {{ "removeSponsorship" | i18n }}
     </button>
-    <h2 class="spaced-header">{{ "storage" | i18n }}</h2>
-    <p>{{ "subscriptionStorage" | i18n : sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}</p>
-    <div class="progress">
-      <div
-        class="progress-bar bg-success"
-        role="progressbar"
-        [ngStyle]="{ width: storageProgressWidth + '%' }"
-        [attr.aria-valuenow]="storagePercentage"
-        aria-valuemin="0"
-        aria-valuemax="100"
-      >
-        {{ storagePercentage / 100 | percent }}
-      </div>
-    </div>
+    <h4 bitTypography="h4" class="tw-mt-9">{{ "storage" | i18n }}</h4>
+    <p bitTypography="body1">
+      {{ "subscriptionStorage" | i18n : sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}
+    </p>
+    <bit-progress [barWidth]="storagePercentage" [minWidth]="5" bgColor="success"></bit-progress>
     <ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
-      <div class="mt-3">
-        <div class="d-flex" *ngIf="!showAdjustStorage">
+      <div class="tw-mt-3">
+        <div class="tw-flex tw-space-x-2" *ngIf="!showAdjustStorage">
           <button bitButton buttonType="secondary" type="button" (click)="adjustStorage(true)">
             {{ "addStorage" | i18n }}
           </button>
-          <button
-            bitButton
-            buttonType="secondary"
-            type="button"
-            class="ml-1"
-            (click)="adjustStorage(false)"
-          >
+          <button bitButton buttonType="secondary" type="button" (click)="adjustStorage(false)">
             {{ "removeStorage" | i18n }}
           </button>
         </div>
@@ -179,11 +161,11 @@
     </ng-container>
   </ng-container>
 
-  <h2 class="spaced-header">{{ "selfHostingTitle" | i18n }}</h2>
-  <p class="mb-4">
+  <h2 bitTypography="h2" class="tw-mt-7">{{ "selfHostingTitle" | i18n }}</h2>
+  <p bitTypography="body1">
     {{ "selfHostingEnterpriseOrganizationSectionCopy" | i18n }}
   </p>
-  <div class="d-flex">
+  <div class="tw-flex tw-space-x-2">
     <button
       bitButton
       buttonType="secondary"
@@ -198,14 +180,13 @@
       bitButton
       buttonType="secondary"
       type="button"
-      class="ml-1"
       (click)="manageBillingSync()"
       *ngIf="canManageBillingSync"
     >
       {{ (hasBillingSyncToken ? "manageBillingSync" : "setUpBillingSync") | i18n }}
     </button>
   </div>
-  <div class="mt-3" *ngIf="showDownloadLicense">
+  <div class="tw-mt-3" *ngIf="showDownloadLicense">
     <app-download-license
       [organizationId]="organizationId"
       (onDownloaded)="closeDownloadLicense()"
@@ -213,17 +194,16 @@
     ></app-download-license>
   </div>
   <ng-container *ngIf="userOrg.canEditSubscription">
-    <h2 class="spaced-header">{{ "additionalOptions" | i18n }}</h2>
-    <p class="mb-4">
+    <h2 bitTypography="h2" class="tw-mt-7">{{ "additionalOptions" | i18n }}</h2>
+    <p bitTypography="body1">
       {{ "additionalOptionsDesc" | i18n }}
     </p>
-    <div class="d-flex">
+    <div class="tw-flex tw-space-x-2">
       <button
         bitButton
         buttonType="danger"
         [bitAction]="cancel"
         type="button"
-        class="ml-1"
         *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel"
       >
         {{ "cancelSubscription" | i18n }}
diff --git a/apps/web/src/app/billing/organizations/secrets-manager/enroll.component.html b/apps/web/src/app/billing/organizations/secrets-manager/enroll.component.html
index 56a48e09fe7..de2b6aa566d 100644
--- a/apps/web/src/app/billing/organizations/secrets-manager/enroll.component.html
+++ b/apps/web/src/app/billing/organizations/secrets-manager/enroll.component.html
@@ -1,6 +1,6 @@
 <form *ngIf="showSecretsManager" [formGroup]="formGroup" [bitSubmit]="submit">
-  <h2 class="spaced-header">{{ "secretsManagerBeta" | i18n }}</h2>
-  <p>{{ "secretsManagerSubscriptionDesc" | i18n }}</p>
+  <h2 bitTypography="h2" class="tw-mt-7">{{ "secretsManagerBeta" | i18n }}</h2>
+  <p bitTypography="body1">{{ "secretsManagerSubscriptionDesc" | i18n }}</p>
 
   <bit-form-control>
     <input type="checkbox" bitCheckbox formControlName="enabled" />
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 9224bfe8d11..c127ce921fb 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -6844,5 +6844,8 @@
   },
   "updatedTempPassword": {
     "message": "User updated a password issued through account recovery."
+  },
+  "passwordManager": {
+    "message": "Password Manager"
   }
 }