[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

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

@@ -1,5 +1,5 @@
-<div class="page-header">
+<div class="tw-mb-2 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300">
-  <h1>
+  <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="tw-flex-col">
-    <div class="col-4">
+    <dl class="tw-grid tw-grid-flow-col tw-grid-rows-2">
-      <dl>
+      <dt>{{ "billingPlan" | i18n }}</dt>
-        <dt>{{ "billingPlan" | i18n }}</dt>
+      <dd>{{ sub.plan.name }}</dd>
-        <dd>{{ sub.plan.name }}</dd>
+      <ng-container *ngIf="subscription">
-        <ng-container *ngIf="subscription">
+        <dt>{{ "status" | i18n }}</dt>
-          <dt>{{ "status" | i18n }}</dt>
+        <dd>
-          <dd>
+          <span class="tw-capitalize">{{
-            <span class="text-capitalize">{{
+            isSponsoredSubscription ? "sponsored" : subscription.status || "-"
-              isSponsoredSubscription ? "sponsored" : subscription.status || "-"
+          }}</span>
-            }}</span>
+          <span bitBadge badgeType="warning" *ngIf="subscriptionMarkedForCancel">{{
-            <span bitBadge badgeType="warning" *ngIf="subscriptionMarkedForCancel">{{
+            "pendingCancellation" | i18n
-              "pendingCancellation" | i18n
+          }}</span>
-            }}</span>
+        </dd>
-          </dd>
+        <dt [ngClass]="{ 'tw-text-danger': isExpired }">
-          <dt [ngClass]="{ 'tw-text-danger': isExpired }">
+          {{ "subscriptionExpiration" | i18n }}
-            {{ "subscriptionExpiration" | i18n }}
+        </dt>
-          </dt>
+        <dd [ngClass]="{ 'tw-text-danger': isExpired }">
-          <dd [ngClass]="{ 'tw-text-danger': isExpired }">
+          {{ nextInvoice ? (nextInvoice.date | date : "mediumDate") : "-" }}
-            {{ nextInvoice ? (nextInvoice.date | date : "mediumDate") : "-" }}
+        </dd>
-          </dd>
+      </ng-container>
-        </ng-container>
+    </dl>
-      </dl>
-    </div>
     <ng-container *ngIf="userOrg.canEditSubscription">
-      <div class="col-8" *ngIf="subscription">
+      <div class="tw-flex-col" *ngIf="subscription">
-        <strong class="d-block mb-1">{{ "details" | i18n }}</strong>
+        <strong class="tw-mb-1 tw-block">{{ "details" | i18n }}</strong>
-        <table class="table">
+        <bit-table>
-          <tbody>
+          <ng-template body>
-            <tr *ngFor="let i of subscription.items">
+            <tr bitRow *ngFor="let i of subscription.items">
-              <td>
+              <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>
+          </ng-template>
-        </table>
+        </bit-table>
       </div>
     </ng-container>
   </div>
@@ -108,24 +106,23 @@
   </ng-container>
 
   <ng-container *ngIf="userOrg.canEditSubscription">
-    <h2 class="spaced-header">{{ "manageSubscription" | i18n }}</h2>
+    <h2 bitTypography="h2" class="tw-mt-7">{{ "manageSubscription" | i18n }}</h2>
-    <p class="mb-4">{{ subscriptionDesc }}</p>
+    <p bitTypography="body1">{{ subscriptionDesc }}</p>
     <ng-container
       *ngIf="
         subscription && canAdjustSeats && !subscription.cancelled && !subscriptionMarkedForCancel
       "
     >
-      <div class="mt-3">
+      <h3 bitTypography="h3" class="tw-mt-7">{{ "passwordManager" | i18n }}</h3>
-        <app-adjust-subscription
+      <app-adjust-subscription
-          [seatPrice]="seatPrice"
+        [seatPrice]="seatPrice"
-          [organizationId]="organizationId"
+        [organizationId]="organizationId"
-          [interval]="billingInterval"
+        [interval]="billingInterval"
-          [currentSeatCount]="seats"
+        [currentSeatCount]="seats"
-          [maxAutoscaleSeats]="maxAutoscaleSeats"
+        [maxAutoscaleSeats]="maxAutoscaleSeats"
-          (onAdjusted)="subscriptionAdjusted()"
+        (onAdjusted)="subscriptionAdjusted()"
-        >
+      >
-        </app-adjust-subscription>
+      </app-adjust-subscription>
-      </div>
     </ng-container>
     <button
       bitButton
@@ -136,33 +133,18 @@
     >
       {{ "removeSponsorship" | i18n }}
     </button>
-    <h2 class="spaced-header">{{ "storage" | i18n }}</h2>
+    <h4 bitTypography="h4" class="tw-mt-9">{{ "storage" | i18n }}</h4>
-    <p>{{ "subscriptionStorage" | i18n : sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}</p>
+    <p bitTypography="body1">
-    <div class="progress">
+      {{ "subscriptionStorage" | i18n : sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}
-      <div
+    </p>
-        class="progress-bar bg-success"
+    <bit-progress [barWidth]="storagePercentage" [minWidth]="5" bgColor="success"></bit-progress>
-        role="progressbar"
-        [ngStyle]="{ width: storageProgressWidth + '%' }"
-        [attr.aria-valuenow]="storagePercentage"
-        aria-valuemin="0"
-        aria-valuemax="100"
-      >
-        {{ storagePercentage / 100 | percent }}
-      </div>
-    </div>
     <ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
-      <div class="mt-3">
+      <div class="tw-mt-3">
-        <div class="d-flex" *ngIf="!showAdjustStorage">
+        <div class="tw-flex tw-space-x-2" *ngIf="!showAdjustStorage">
           <button bitButton buttonType="secondary" type="button" (click)="adjustStorage(true)">
             {{ "addStorage" | i18n }}
           </button>
-          <button
+          <button bitButton buttonType="secondary" type="button" (click)="adjustStorage(false)">
-            bitButton
-            buttonType="secondary"
-            type="button"
-            class="ml-1"
-            (click)="adjustStorage(false)"
-          >
             {{ "removeStorage" | i18n }}
           </button>
         </div>
@@ -179,11 +161,11 @@
     </ng-container>
   </ng-container>
 
-  <h2 class="spaced-header">{{ "selfHostingTitle" | i18n }}</h2>
+  <h2 bitTypography="h2" class="tw-mt-7">{{ "selfHostingTitle" | i18n }}</h2>
-  <p class="mb-4">
+  <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>
+    <h2 bitTypography="h2" class="tw-mt-7">{{ "additionalOptions" | i18n }}</h2>
-    <p class="mb-4">
+    <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 }}

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>
+  <h2 bitTypography="h2" class="tw-mt-7">{{ "secretsManagerBeta" | i18n }}</h2>
-  <p>{{ "secretsManagerSubscriptionDesc" | i18n }}</p>
+  <p bitTypography="body1">{{ "secretsManagerSubscriptionDesc" | i18n }}</p>
 
   <bit-form-control>
     <input type="checkbox" bitCheckbox formControlName="enabled" />

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"
   }
 }