1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-10 21:33:27 +00:00

[PM-26984] Use medium instead of semibold or bold (#17194)

This commit is contained in:
Vicki League
2025-11-06 10:09:17 -05:00
committed by GitHub
parent 78d1eb9bed
commit 7cbfcd23a8
23 changed files with 55 additions and 57 deletions

View File

@@ -6,7 +6,7 @@
</popup-header>
<div class="tw-flex tw-flex-col tw-p-2">
<h2 class="tw-font-bold">{{ "premiumFeatures" | i18n }}</h2>
<h2 class="tw-font-medium">{{ "premiumFeatures" | i18n }}</h2>
<bit-section>
<bit-card>
<div class="tw-flex tw-flex-col tw-p-2">

View File

@@ -16,7 +16,7 @@
</header>
<div class="tw-px-14 tw-pb-8">
<div class="tw-flex tw-text-center tw-flex-col tw-pb-4">
<h1 class="tw-font-semibold tw-text-[32px]">
<h1 class="tw-font-medium tw-text-[32px]">
{{ dialogTitle() | i18n }}
</h1>
<p bitTypography="body1" class="tw-text-muted">

View File

@@ -4,7 +4,7 @@
is not supported by the button in the CL. -->
<button
type="button"
class="tw-py-1.5 tw-px-4 tw-flex tw-gap-2 tw-items-center tw-size-full focus-visible:tw-ring-2 focus-visible:tw-ring-offset-0 focus:tw-outline-none focus-visible:tw-outline-none focus-visible:tw-ring-text-alt2 focus-visible:tw-z-10 tw-font-semibold tw-rounded-full tw-transition tw-border tw-border-solid tw-text-left tw-bg-primary-100 tw-text-primary-600 tw-border-primary-600 hover:tw-bg-hover-default hover:tw-text-primary-700 hover:tw-border-primary-700"
class="tw-py-1.5 tw-px-4 tw-flex tw-gap-2 tw-items-center tw-size-full focus-visible:tw-ring-2 focus-visible:tw-ring-offset-0 focus:tw-outline-none focus-visible:tw-outline-none focus-visible:tw-ring-text-alt2 focus-visible:tw-z-10 tw-font-medium tw-rounded-full tw-transition tw-border tw-border-solid tw-text-left tw-bg-primary-100 tw-text-primary-600 tw-border-primary-600 hover:tw-bg-hover-default hover:tw-text-primary-700 hover:tw-border-primary-700"
(click)="upgrade()"
>
<i class="bwi bwi-premium" aria-hidden="true"></i>

View File

@@ -1,6 +1,6 @@
<form [formGroup]="formGroup" [bitSubmit]="submit">
<bit-dialog dialogSize="large" [loading]="loading()">
<span bitDialogTitle class="tw-font-semibold">{{ upgradeToMessage }}</span>
<span bitDialogTitle class="tw-font-medium">{{ upgradeToMessage }}</span>
<ng-container bitDialogContent>
<section>
@if (isFamiliesPlan) {

View File

@@ -37,7 +37,7 @@
></button>
</bit-form-field>
<div class="tw-mt-2 tw-text-sm tw-text-muted" *ngIf="showLastSyncText">
<b class="tw-font-semibold">{{ "lastSync" | i18n }}:</b>
<b class="tw-font-medium">{{ "lastSync" | i18n }}:</b>
{{ lastSyncDate | date: "medium" }}
</div>
<div class="tw-mt-2 tw-text-sm tw-text-danger" *ngIf="showAwaitingSyncText">

View File

@@ -1,12 +1,12 @@
<form [formGroup]="formGroup" [bitSubmit]="submit">
<bit-dialog dialogSize="large" [loading]="loading">
<span bitDialogTitle class="tw-font-semibold">
<span bitDialogTitle class="tw-font-medium">
{{ dialogHeaderName }}
</span>
<div bitDialogContent>
<p>{{ "upgradePlans" | i18n }}</p>
<div class="tw-mb-3 tw-flex tw-justify-between">
<span [hidden]="isSubscriptionCanceled" class="tw-text-lg tw-pr-1 tw-font-bold">{{
<span [hidden]="isSubscriptionCanceled" class="tw-text-lg tw-pr-1 tw-font-medium">{{
"selectAPlan" | i18n
}}</span>
<!-- Discount Badge -->
@@ -57,7 +57,7 @@
selectableProduct.productTier === productTypes.Enterprise &&
!isSubscriptionCanceled
"
class="tw-bg-secondary-100 tw-text-center !tw-border-0 tw-text-sm tw-font-bold tw-py-1"
class="tw-bg-secondary-100 tw-text-center !tw-border-0 tw-text-sm tw-font-medium tw-py-1"
[ngClass]="{
'tw-bg-primary-700 !tw-text-contrast': selectableProduct === selectedPlan,
'tw-bg-secondary-100': !(selectableProduct === selectedPlan),
@@ -73,7 +73,7 @@
}"
>
<h3
class="tw-text-[1.25rem] tw-mt-[6px] tw-font-bold tw-mb-0 tw-leading-[2rem] tw-flex tw-items-center"
class="tw-text-[1.25rem] tw-mt-[6px] tw-font-medium tw-mb-0 tw-leading-[2rem] tw-flex tw-items-center"
>
<span class="tw-capitalize tw-whitespace-nowrap">{{
selectableProduct.nameLocalizationKey | i18n
@@ -91,7 +91,7 @@
<ng-container
*ngIf="selectableProduct.PasswordManager.basePrice && !acceptingSponsorship"
>
<b class="tw-text-lg tw-font-semibold">
<b class="tw-text-lg tw-font-medium">
{{
(selectableProduct.isAnnual
? selectableProduct.PasswordManager.basePrice / 12
@@ -106,7 +106,7 @@
: ("monthPerMember" | i18n)
}}</span
>
<b class="tw-text-sm tw-font-semibold">
<b class="tw-text-sm tw-font-medium">
<ng-container
*ngIf="selectableProduct.PasswordManager.hasAdditionalSeatsOption"
>
@@ -128,7 +128,7 @@
selectableProduct.PasswordManager.hasAdditionalSeatsOption
"
>
<b class="tw-text-lg tw-font-semibold"
<b class="tw-text-lg tw-font-medium"
>{{
"costPerMember"
| i18n
@@ -155,7 +155,7 @@
"
>
<p
class="tw-text-xs tw-px-2 tw-font-semibold tw-mb-1"
class="tw-text-xs tw-px-2 tw-font-medium tw-mb-1"
*ngIf="organization.useSecretsManager"
>
{{ "bitwardenPasswordManager" | i18n }}
@@ -182,7 +182,7 @@
</ul>
<p
class="tw-text-xs tw-px-2 tw-font-semibold tw-mb-1"
class="tw-text-xs tw-px-2 tw-font-medium tw-mb-1"
*ngIf="organization.useSecretsManager"
>
{{ "bitwardenSecretsManager" | i18n }}
@@ -222,7 +222,7 @@
</ng-container>
<ng-template #fullFeatureList>
<p
class="tw-text-xs tw-px-2 tw-font-semibold tw-mb-1"
class="tw-text-xs tw-px-2 tw-font-medium tw-mb-1"
*ngIf="organization.useSecretsManager"
>
{{ "bitwardenPasswordManager" | i18n }}
@@ -274,7 +274,7 @@
</li>
</ul>
<p
class="tw-text-xs tw-px-2 tw-font-semibold tw-mb-1"
class="tw-text-xs tw-px-2 tw-font-medium tw-mb-1"
*ngIf="
organization.useSecretsManager &&
selectableProduct.productTier !== productTypes.Families
@@ -385,7 +385,7 @@
</ng-container>
<div class="tw-mt-4">
<p class="tw-text-lg tw-mb-1">
<span class="tw-font-semibold"
<span class="tw-font-medium"
>{{ "total" | i18n }}:
{{ total - calculateTotalAppliedDiscount(total) | currency: "USD" : "$" }} USD</span
>
@@ -402,7 +402,7 @@
<!-- SM + PM and PM only cost summary -->
<div *ngIf="totalOpened && !isSecretsManagerTrial()" class="tw-flex tw-flex-wrap tw-gap-4">
<bit-hint class="tw-w-1/2" *ngIf="selectedInterval == planIntervals.Annually">
<p class="tw-font-semibold tw-mb-1" *ngIf="organization.useSecretsManager">
<p class="tw-font-medium tw-mb-1" *ngIf="organization.useSecretsManager">
{{ "passwordManager" | i18n }}
</p>
<p
@@ -487,7 +487,7 @@
</ng-container>
</p>
<!-- secrets manager summary for annual -->
<p class="tw-font-semibold tw-mt-3 tw-mb-1" *ngIf="organization.useSecretsManager">
<p class="tw-font-medium tw-mt-3 tw-mb-1" *ngIf="organization.useSecretsManager">
{{ "secretsManager" | i18n }}
</p>
<p
@@ -569,7 +569,7 @@
</p>
</bit-hint>
<bit-hint class="tw-w-1/2" *ngIf="selectedInterval == planIntervals.Monthly">
<p class="tw-font-semibold tw-mb-1" *ngIf="organization.useSecretsManager">
<p class="tw-font-medium tw-mb-1" *ngIf="organization.useSecretsManager">
{{ "passwordManager" | i18n }}
</p>
<p
@@ -642,7 +642,7 @@
</ng-container>
</p>
<!-- secrets manager summary for monthly -->
<p class="tw-font-semibold tw-mt-3 tw-mb-1" *ngIf="organization.useSecretsManager">
<p class="tw-font-medium tw-mt-3 tw-mb-1" *ngIf="organization.useSecretsManager">
{{ "secretsManager" | i18n }}
</p>
<p
@@ -727,7 +727,7 @@
<div *ngIf="totalOpened && isSecretsManagerTrial()" class="tw-flex tw-flex-wrap tw-gap-4">
<bit-hint class="tw-w-1/2" *ngIf="selectedInterval == planIntervals.Annually">
<!-- secrets manager summary for annual -->
<p class="tw-font-semibold tw-mt-2 tw-mb-0" *ngIf="organization.useSecretsManager">
<p class="tw-font-medium tw-mt-2 tw-mb-0" *ngIf="organization.useSecretsManager">
{{ "secretsManager" | i18n }}
</p>
<p
@@ -788,7 +788,7 @@
<span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
</p>
<!-- password manager summary for annual -->
<p class="tw-font-semibold tw-mt-3 tw-mb-0" *ngIf="organization.useSecretsManager">
<p class="tw-font-medium tw-mt-3 tw-mb-0" *ngIf="organization.useSecretsManager">
{{ "passwordManager" | i18n }}
</p>
<p
@@ -846,7 +846,7 @@
</bit-hint>
<bit-hint class="tw-w-1/2" *ngIf="selectedInterval == planIntervals.Monthly">
<!-- secrets manager summary for monthly -->
<p class="tw-font-semibold tw-mt-2 tw-mb-0" *ngIf="organization.useSecretsManager">
<p class="tw-font-medium tw-mt-2 tw-mb-0" *ngIf="organization.useSecretsManager">
{{ "secretsManager" | i18n }}
</p>
<p
@@ -903,7 +903,7 @@
<span>{{ additionalServiceAccountTotal(selectedPlan) | currency: "$" }}</span>
</p>
<!-- password manager summary for monthly -->
<p class="tw-font-semibold tw-mt-3 tw-mb-0" *ngIf="organization.useSecretsManager">
<p class="tw-font-medium tw-mt-3 tw-mb-0" *ngIf="organization.useSecretsManager">
{{ "passwordManager" | i18n }}
</p>
<p
@@ -972,7 +972,7 @@
<p
class="tw-flex tw-justify-between tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-pt-2 tw-mb-0"
>
<span class="tw-font-semibold">
<span class="tw-font-medium">
{{ "estimatedTax" | i18n }}
</span>
<span>
@@ -986,14 +986,12 @@
<p
class="tw-flex tw-justify-between tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-pt-2 tw-mb-0"
>
<span class="tw-font-semibold">
<span class="tw-font-medium">
{{ "total" | i18n }}
</span>
<span>
{{ total - calculateTotalAppliedDiscount(total) | currency: "USD" : "$" }}
<span class="tw-text-xs tw-font-semibold">
/ {{ selectedPlanInterval | i18n }}</span
>
<span class="tw-text-xs tw-font-medium"> / {{ selectedPlanInterval | i18n }}</span>
</span>
</p>
</bit-hint>

View File

@@ -241,7 +241,7 @@
<div class="tw-size-56 tw-content-center">
<bit-icon [icon]="gearIcon" aria-hidden="true"></bit-icon>
</div>
<p class="tw-font-bold">{{ "billingManagedByProvider" | i18n: userOrg.providerName }}</p>
<p class="tw-font-medium">{{ "billingManagedByProvider" | i18n: userOrg.providerName }}</p>
<p>{{ "billingContactProviderForAssistance" | i18n }}</p>
</div>
</ng-template>

View File

@@ -130,7 +130,7 @@
<bit-label class="tw-mb-6 tw-block" *ngIf="!showAutomaticSyncAndManualUpload">
{{ "licenseAndBillingManagementDesc" | i18n }}
</bit-label>
<h3 *ngIf="showAutomaticSyncAndManualUpload" class="tw-font-semibold tw-mt-6">
<h3 *ngIf="showAutomaticSyncAndManualUpload" class="tw-font-medium tw-mt-6">
{{ "uploadLicense" | i18n }}
</h3>
<app-update-license

View File

@@ -12,7 +12,7 @@ import { GearIcon } from "@bitwarden/assets/svg";
<div class="tw-size-56 tw-content-center">
<bit-icon [icon]="gearIcon" aria-hidden="true"></bit-icon>
</div>
<p class="tw-font-bold">{{ "billingManagedByProvider" | i18n: providerName }}</p>
<p class="tw-font-medium">{{ "billingManagedByProvider" | i18n: providerName }}</p>
<p>{{ "billingContactProviderForAssistance" | i18n }}</p>
</div>`,
standalone: false,

View File

@@ -58,7 +58,7 @@ const positiveNumberValidator =
template: `
<form [formGroup]="formGroup" [bitSubmit]="submit">
<bit-dialog>
<span bitDialogTitle class="tw-font-semibold">
<span bitDialogTitle class="tw-font-medium">
{{ "addCredit" | i18n }}
</span>
<div bitDialogContent>

View File

@@ -24,7 +24,7 @@ type DialogParams = {
template: `
<form [formGroup]="formGroup" [bitSubmit]="submit">
<bit-dialog>
<span bitDialogTitle class="tw-font-semibold">
<span bitDialogTitle class="tw-font-medium">
{{ "changePaymentMethod" | i18n }}
</span>
<div bitDialogContent>

View File

@@ -41,7 +41,7 @@ type DialogResult =
template: `
<form [formGroup]="formGroup" [bitSubmit]="submit">
<bit-dialog>
<span bitDialogTitle class="tw-font-semibold">
<span bitDialogTitle class="tw-font-medium">
{{ "editBillingAddress" | i18n }}
</span>
<div bitDialogContent>

View File

@@ -35,7 +35,7 @@ type DialogParams = {
template: `
<form [formGroup]="formGroup" [bitSubmit]="submit">
<bit-dialog>
<span bitDialogTitle class="tw-font-semibold">
<span bitDialogTitle class="tw-font-medium">
{{ "addPaymentMethod" | i18n }}
</span>
<div bitDialogContent>

View File

@@ -1,6 +1,6 @@
<form [formGroup]="formGroup" [bitSubmit]="submit">
<bit-dialog>
<span bitDialogTitle class="tw-font-semibold">
<span bitDialogTitle class="tw-font-medium">
{{ "cancelSubscription" | i18n }}
</span>
<div bitDialogContent>

View File

@@ -11,7 +11,7 @@
<div class="tw-relative">
@if (isRecommended) {
<div
class="tw-bg-secondary-100 tw-text-center !tw-border-0 tw-text-sm tw-font-bold tw-py-1"
class="tw-bg-secondary-100 tw-text-center !tw-border-0 tw-text-sm tw-font-medium tw-py-1"
[ngClass]="{
'tw-bg-primary-700 !tw-text-contrast': plan().isSelected,
'tw-bg-secondary-100': !plan().isSelected,
@@ -28,12 +28,12 @@
}"
>
<h3
class="tw-text-[1.25rem] tw-mt-[6px] tw-font-bold tw-mb-0 tw-leading-[2rem] tw-flex tw-items-center"
class="tw-text-[1.25rem] tw-mt-[6px] tw-font-medium tw-mb-0 tw-leading-[2rem] tw-flex tw-items-center"
>
<span class="tw-capitalize tw-whitespace-nowrap">{{ plan().title }}</span>
</h3>
<span>
<b class="tw-text-lg tw-font-semibold">{{ plan().costPerMember | currency: "$" }} </b>
<b class="tw-text-lg tw-font-medium">{{ plan().costPerMember | currency: "$" }} </b>
<span class="tw-text-xs tw-px-0"> /{{ "monthPerMember" | i18n }}</span>
</span>
</div>

View File

@@ -1,7 +1,7 @@
<ng-container>
<div class="tw-mt-4">
<p class="tw-text-lg tw-mb-1">
<span class="tw-font-semibold"
<span class="tw-font-medium"
>{{ "total" | i18n }}:
{{ summaryData.total - summaryData.totalAppliedDiscount | currency: "USD" : "$" }} USD</span
>
@@ -37,7 +37,7 @@
<ng-container
*ngIf="!summaryData.isSecretsManagerTrial || summaryData.organization.useSecretsManager"
>
<p class="tw-font-semibold tw-mt-3 tw-mb-1">{{ "passwordManager" | i18n }}</p>
<p class="tw-font-medium tw-mt-3 tw-mb-1">{{ "passwordManager" | i18n }}</p>
<!-- Base Price -->
<ng-container *ngIf="summaryData.selectedPlan.PasswordManager.basePrice">
@@ -137,7 +137,7 @@
<!-- Secrets Manager section -->
<ng-template #secretsManagerSection>
<ng-container *ngIf="summaryData.organization.useSecretsManager">
<p class="tw-font-semibold tw-mt-3 tw-mb-1">{{ "secretsManager" | i18n }}</p>
<p class="tw-font-medium tw-mt-3 tw-mb-1">{{ "secretsManager" | i18n }}</p>
<!-- Base Price -->
<ng-container *ngIf="summaryData.selectedPlan?.SecretsManager?.basePrice">
@@ -236,7 +236,7 @@
<p
class="tw-flex tw-justify-between tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-pt-2 tw-mb-0"
>
<span class="tw-font-semibold">{{ "estimatedTax" | i18n }}</span>
<span class="tw-font-medium">{{ "estimatedTax" | i18n }}</span>
<span>{{ summaryData.estimatedTax | currency: "USD" : "$" }}</span>
</p>
</bit-hint>
@@ -247,10 +247,10 @@
<p
class="tw-flex tw-justify-between tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-pt-2 tw-mb-0"
>
<span class="tw-font-semibold">{{ "total" | i18n }}</span>
<span class="tw-font-medium">{{ "total" | i18n }}</span>
<span>
{{ summaryData.total - summaryData.totalAppliedDiscount | currency: "USD" : "$" }}
<span class="tw-text-xs tw-font-semibold"
<span class="tw-text-xs tw-font-medium"
>/ {{ summaryData.selectedPlanInterval | i18n }}</span
>
</span>

View File

@@ -1,5 +1,5 @@
<bit-dialog dialogSize="default">
<span bitDialogTitle class="tw-font-semibold">
<span bitDialogTitle class="tw-font-medium">
{{ "subscribetoEnterprise" | i18n: currentPlanName }}
</span>

View File

@@ -9,7 +9,7 @@
<li>
<p>
{{ "trialConfirmationEmail" | i18n }}
<span class="tw-font-bold">{{ email }}</span
<span class="tw-font-medium">{{ email }}</span
>.
</p>
</li>

View File

@@ -6,7 +6,7 @@
<div class="tw-container tw-mb-3">
<!-- Cadence -->
<div class="tw-mb-6">
<h2 class="tw-mb-3 tw-text-base tw-font-semibold">{{ "billingPlanLabel" | i18n }}</h2>
<h2 class="tw-mb-3 tw-text-base tw-font-medium">{{ "billingPlanLabel" | i18n }}</h2>
<bit-radio-group [formControl]="formGroup.controls.cadence">
<div class="tw-mb-1 tw-items-center">
<bit-radio-button id="annual-cadence-button" [value]="'annually'">
@@ -32,7 +32,7 @@
</div>
<!-- Payment -->
<div class="tw-mb-4">
<h2 class="tw-mb-3 tw-text-base tw-font-semibold">{{ "paymentType" | i18n }}</h2>
<h2 class="tw-mb-3 tw-text-base tw-font-medium">{{ "paymentType" | i18n }}</h2>
<app-enter-payment-method
[group]="formGroup.controls.paymentMethod"
></app-enter-payment-method>

View File

@@ -11,7 +11,7 @@
[attr.aria-expanded]="selected"
>
<span
class="tw-mr-3.5 tw-w-9 tw-rounded-full tw-font-bold tw-leading-9"
class="tw-mr-3.5 tw-w-9 tw-rounded-full tw-font-medium tw-leading-9"
*ngIf="!step.completed"
[ngClass]="{
'tw-bg-primary-600 tw-text-contrast': selected,
@@ -22,7 +22,7 @@
{{ stepNumber }}
</span>
<span
class="tw-mr-3.5 tw-w-9 tw-rounded-full tw-bg-primary-600 tw-font-bold tw-leading-9 tw-text-contrast"
class="tw-mr-3.5 tw-w-9 tw-rounded-full tw-bg-primary-600 tw-font-medium tw-leading-9 tw-text-contrast"
*ngIf="step.completed"
>
<i class="bwi bwi-fw bwi-check tw-p-1" aria-hidden="true"></i>
@@ -30,7 +30,7 @@
<div
class="tw-txt-main tw-mt-3.5 tw-h-12 tw-text-left tw-leading-snug"
[ngClass]="{
'tw-font-bold': selected,
'tw-font-medium': selected,
}"
>
<p

View File

@@ -51,7 +51,7 @@
<tr bitRow>
<td bitCell class="tw-pl-0 tw-py-3"></td>
<td bitCell class="tw-text-right">
<span class="tw-font-bold">Total:</span> {{ totalCost | currency: "$" }} /
<span class="tw-font-medium">Total:</span> {{ totalCost | currency: "$" }} /
{{
getBillingCadenceLabel(activePlans.length > 0 ? activePlans[0] : null) | i18n
}}

View File

@@ -36,7 +36,7 @@
<!-- Price Section -->
<div class="tw-mb-6">
<div class="tw-flex tw-items-baseline tw-gap-1 tw-flex-wrap">
<span class="tw-text-3xl tw-font-bold tw-leading-none tw-m-0">{{
<span class="tw-text-3xl tw-font-medium tw-leading-none tw-m-0">{{
cardDetails.price.amount | currency: "$"
}}</span>
<span bitTypography="helper" class="tw-text-muted">

View File

@@ -22,7 +22,7 @@
@if (price(); as priceValue) {
<div class="tw-mb-6">
<div class="tw-flex tw-items-baseline tw-gap-1 tw-flex-wrap">
<span class="tw-text-3xl tw-font-bold tw-leading-none tw-m-0">{{
<span class="tw-text-3xl tw-font-medium tw-leading-none tw-m-0">{{
priceValue.amount | currency: "$"
}}</span>
<span bitTypography="helper" class="tw-text-muted">