From b9f48d83b21734540340444c3c971eb3b5a7956c Mon Sep 17 00:00:00 2001 From: cyprain-okeke <108260115+cyprain-okeke@users.noreply.github.com> Date: Mon, 27 Oct 2025 13:53:05 +0100 Subject: [PATCH] [PM 25897] Copy and UI Tweaks for Payment Method Component (#16851) * Implement the Ui changes to align as expected * Align the Text in card number, expiration date and security code vertically * Change the Zip to ZIP * Remove readonly modifier from signal declarations --- apps/browser/src/_locales/en/messages.json | 6 ++++++ apps/desktop/src/locales/en/messages.json | 6 ++++++ .../payment/components/enter-billing-address.component.ts | 2 +- .../payment/components/enter-payment-method.component.ts | 6 +++--- .../billing/payment/components/payment-label.component.ts | 2 +- apps/web/src/app/billing/services/stripe.service.ts | 2 ++ apps/web/src/locales/en/messages.json | 6 ++++++ libs/common/src/vault/models/view/identity.view.ts | 2 +- .../cipher-form/components/identity/identity.component.html | 2 +- 9 files changed, 27 insertions(+), 7 deletions(-) diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index 6a0e8c01c4d..29601bfa70c 100644 --- a/apps/browser/src/_locales/en/messages.json +++ b/apps/browser/src/_locales/en/messages.json @@ -5721,5 +5721,11 @@ "settingDisabledByPolicy": { "message": "This setting is disabled by your organization's policy.", "description": "This hint text is displayed when a user setting is disabled due to an organization policy." + }, + "zipPostalCodeLabel": { + "message": "ZIP / Postal code" + }, + "cardNumberLabel": { + "message": "Card number" } } diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json index 3e004e270a3..32545a0c1cd 100644 --- a/apps/desktop/src/locales/en/messages.json +++ b/apps/desktop/src/locales/en/messages.json @@ -4181,5 +4181,11 @@ }, "archiveItemConfirmDesc": { "message": "Archived items are excluded from general search results and autofill suggestions. Are you sure you want to archive this item?" + }, + "zipPostalCodeLabel": { + "message": "ZIP / Postal code" + }, + "cardNumberLabel": { + "message": "Card number" } } diff --git a/apps/web/src/app/billing/payment/components/enter-billing-address.component.ts b/apps/web/src/app/billing/payment/components/enter-billing-address.component.ts index 40785e9b7ea..db95beea7f8 100644 --- a/apps/web/src/app/billing/payment/components/enter-billing-address.component.ts +++ b/apps/web/src/app/billing/payment/components/enter-billing-address.component.ts @@ -70,7 +70,7 @@ type Scenario =
- {{ "zipPostalCode" | i18n }} + {{ "zipPostalCodeLabel" | i18n }}
- {{ "number" | i18n }} + {{ "cardNumberLabel" | i18n }}
@@ -109,7 +109,7 @@ type PaymentMethodFormGroup = FormGroup<{ class="tw-border-none tw-bg-transparent tw-text-primary-600 tw-pr-1" [position]="'above-end'" > - +

{{ "cardSecurityCodeDescription" | i18n }}

@@ -217,7 +217,7 @@ type PaymentMethodFormGroup = FormGroup<{
- {{ "zipPostalCode" | i18n }} + {{ "zipPostalCodeLabel" | i18n }} - ({{ "required" | i18n }}) + ({{ "required" | i18n }})
`, diff --git a/apps/web/src/app/billing/services/stripe.service.ts b/apps/web/src/app/billing/services/stripe.service.ts index 7ea0d7d52c8..f7655ba0c6e 100644 --- a/apps/web/src/app/billing/services/stripe.service.ts +++ b/apps/web/src/app/billing/services/stripe.service.ts @@ -230,6 +230,8 @@ export class StripeService { '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', fontSize: "16px", fontSmoothing: "antialiased", + lineHeight: "1.5", + padding: "8px 12px", "::placeholder": { color: null, }, diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index f2cb9e5fd7b..f88af8aa1a7 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -11939,5 +11939,11 @@ }, "encryptionKeySettingsAlgorithmPopoverArgon2Id": { "message": "Argon2id offers stronger protection against modern attacks. Best for advanced users with powerful devices." + }, + "zipPostalCodeLabel": { + "message": "ZIP / Postal code" + }, + "cardNumberLabel": { + "message": "Card number" } } diff --git a/libs/common/src/vault/models/view/identity.view.ts b/libs/common/src/vault/models/view/identity.view.ts index 5fb0d1acba5..dca54fa04e8 100644 --- a/libs/common/src/vault/models/view/identity.view.ts +++ b/libs/common/src/vault/models/view/identity.view.ts @@ -23,7 +23,7 @@ export class IdentityView extends ItemView implements SdkIdentityView { city: string | undefined; @linkedFieldOption(LinkedId.State, { sortPosition: 16, i18nKey: "stateProvince" }) state: string | undefined; - @linkedFieldOption(LinkedId.PostalCode, { sortPosition: 17, i18nKey: "zipPostalCode" }) + @linkedFieldOption(LinkedId.PostalCode, { sortPosition: 17, i18nKey: "zipPostalCodeLabel" }) postalCode: string | undefined; @linkedFieldOption(LinkedId.Country, { sortPosition: 18 }) country: string | undefined; diff --git a/libs/vault/src/cipher-form/components/identity/identity.component.html b/libs/vault/src/cipher-form/components/identity/identity.component.html index 7f49bc21a10..2489977f63f 100644 --- a/libs/vault/src/cipher-form/components/identity/identity.component.html +++ b/libs/vault/src/cipher-form/components/identity/identity.component.html @@ -144,7 +144,7 @@ - {{ "zipPostalCode" | i18n }} + {{ "zipPostalCodeLabel" | i18n }}