diff --git a/apps/web/src/app/billing/services/stripe.service.ts b/apps/web/src/app/billing/services/stripe.service.ts index aac86107e26..5c35923c1f4 100644 --- a/apps/web/src/app/billing/services/stripe.service.ts +++ b/apps/web/src/app/billing/services/stripe.service.ts @@ -161,6 +161,7 @@ export class StripeService { }, }, classes: { + base: "tw-stripe-form-control", focus: "is-focused", empty: "is-empty", invalid: "is-invalid", @@ -168,7 +169,6 @@ export class StripeService { }; options.style.base.fontWeight = "500"; - options.classes.base = "v2"; // Remove the placeholder for number and CVC fields if (["cardNumber", "cardCvc"].includes(element)) { diff --git a/apps/web/src/app/billing/shared/payment/payment.component.html b/apps/web/src/app/billing/shared/payment/payment.component.html index af261155171..34b2c54d8b5 100644 --- a/apps/web/src/app/billing/shared/payment/payment.component.html +++ b/apps/web/src/app/billing/shared/payment/payment.component.html @@ -46,7 +46,7 @@ {{ "number" | i18n }} -
+
{{ "expiration" | i18n }} -
+
@@ -74,7 +74,7 @@ -
+
diff --git a/apps/web/src/scss/forms.scss b/apps/web/src/scss/forms.scss index 330bc5f6547..fd40d977911 100644 --- a/apps/web/src/scss/forms.scss +++ b/apps/web/src/scss/forms.scss @@ -98,58 +98,6 @@ input[type="checkbox"] { cursor: pointer; } -.form-control.stripe-form-control:not(.v2) { - padding-top: 0.55rem; - - &.is-focused { - outline: 0; - @include themify($themes) { - background-color: themed("inputBackgroundColor"); - border-color: themed("inputBorderColor"); - box-shadow: 0 0 0 $input-focus-width - rgba(mix(color-yiq(themed("primary")), themed("primary"), 15%), 0.5); - color: themed("inputTextColor"); - } - - &.is-invalid { - opacity: 0.75; - @include themify($themes) { - box-shadow: 0 0 0 $input-focus-width themed("danger"); - } - } - } - - &.is-invalid { - @include themify($themes) { - border-color: themed("danger"); - } - } -} - -.form-control.stripe-form-control.v2 { - padding: 0.6875rem 0.875rem; - border-radius: 0.5rem; - border-color: rgb(var(--color-text-muted)); - height: unset; - font-weight: 500; - color: rgb(var(--color-text-main)); - background-color: rgb(var(--color-background)); - - &:hover { - border-color: rgb(var(--color-primary-600)); - } - - &.is-focused { - outline: 0; - border-color: rgb(var(--color-primary-600)); - } - - &.is-invalid { - color: rgb(var(--color-text-main)); - border-color: rgb(var(--color-danger-600)); - } -} - .dropdown-menu, .dropdown-item { @include themify($themes) { diff --git a/apps/web/src/scss/tailwind.css b/apps/web/src/scss/tailwind.css index 0ae3c291b56..d0878ac080b 100644 --- a/apps/web/src/scss/tailwind.css +++ b/apps/web/src/scss/tailwind.css @@ -29,6 +29,29 @@ @apply tw-text-muted !important; } + /** + * Stripe form control styling + */ + .tw-stripe-form-control { + @apply tw-block tw-w-full tw-h-11 tw-rounded-lg tw-bg-background tw-border tw-border-solid tw-border-secondary-500 tw-px-3 tw-py-2 tw-text-main; + + @apply hover:tw-border-primary-600; + + @apply focus:tw-outline-none focus:tw-border-primary-600 focus:tw-border-2 focus:tw-ring-1 focus:tw-ring-inset focus:tw-ring-primary-600; + + &.is-invalid { + @apply tw-border-danger-600 hover:tw-border-danger-700; + } + + &.is-focused { + @apply tw-outline-none tw-border-primary-600 focus:tw-border-primary-600; + + &.is-invalid { + @apply tw-border-danger-600; + } + } + } + /** * Loading page */