Migrated Stripe payment fields from Bootstrap to Tailwind (#13633)

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)) {

apps/web/src/app/billing/shared/payment/payment.component.html

@@ -46,7 +46,7 @@
         <app-payment-label for="stripe-card-number" required>
           {{ "number" | i18n }}
         </app-payment-label>
-        <div id="stripe-card-number" class="form-control stripe-form-control"></div>
+        <div id="stripe-card-number" class="tw-stripe-form-control"></div>
       </div>
       <div class="tw-col-span-1 tw-flex tw-items-end">
         <img
@@ -59,7 +59,7 @@
         <app-payment-label for="stripe-card-expiry" required>
           {{ "expiration" | i18n }}
         </app-payment-label>
-        <div id="stripe-card-expiry" class="form-control stripe-form-control"></div>
+        <div id="stripe-card-expiry" class="tw-stripe-form-control"></div>
       </div>
       <div class="tw-col-span-1">
         <app-payment-label for="stripe-card-cvc" required>
@@ -74,7 +74,7 @@
             <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
         </app-payment-label>
-        <div id="stripe-card-cvc" class="form-control stripe-form-control"></div>
+        <div id="stripe-card-cvc" class="tw-stripe-form-control"></div>
       </div>
     </div>
   </ng-container>

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) {

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