mirror of
https://github.com/bitwarden/browser.git
synced 2024-12-02 13:23:29 +01:00
[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
This commit is contained in:
Shane Melton
parent
ae523f462e
commit
ce4fd3425a
@ -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 ? "×" + 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 }}
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -6844,5 +6844,8 @@
|
||||
},
|
||||
"updatedTempPassword": {
|
||||
"message": "User updated a password issued through account recovery."
|
||||
},
|
||||
"passwordManager": {
|
||||
"message": "Password Manager"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user