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 }}
-
+
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
*/