feat(payment): PAYPAL-1807 fix styles for SPB buttons

sacred-art · Dec 13, 2022 · fd5af3d · fd5af3d
1 parent 57ef520
commit fd5af3d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix the issue with getting product details data if the product details form is valid on page load [#2271](https://github.com/bigcommerce/cornerstone/pull/2271)
 - Delay validation on account signup, message form, and account edit page [#2274](https://github.com/bigcommerce/cornerstone/pull/2274)
 - Update key render-blocking resources to be preloaded via HTTP headers/Early Hints [#2261](https://github.com/bigcommerce/cornerstone/pull/2261)
+- Fixed styles for SPB buttons [#2295](https://github.com/bigcommerce/cornerstone/pull/2295)
 
 ## 6.6.1 (09-14-2022)
 

diff --git a/assets/scss/components/stencil/cart/_cart.scss b/assets/scss/components/stencil/cart/_cart.scss
@@ -25,19 +25,19 @@ $card-preview-zoom-bottom-offset:       6rem;
 // -----------------------------------------------------------------------------
 
 %additionalCheckoutButtons {
-    @include clearfix;
-
     .FloatRight {
-        @include clearfix;
-
         p {
             float: none !important;
             margin: spacing("third") 0;
             text-align: right;
         }
 
-        div {
-            float: right;
+        > div {
+            display: inline-block;
+
+            > div {
+                margin-bottom: 10px;
+            }
         }
     }
 }
@@ -544,6 +544,15 @@ $card-preview-zoom-bottom-offset:       6rem;
 
 .cart-additionalCheckoutButtons {
     @extend %additionalCheckoutButtons;
+    align-items: flex-end;
+    display: flex;
+    flex-direction: column;
+
+    div {
+        align-items: end;
+        display: flex;
+        flex-direction: column;
+    }
 }
 
 // Cart Preview
@@ -689,4 +698,5 @@ $card-preview-zoom-bottom-offset:       6rem;
     @extend %additionalCheckoutButtons;
     padding-bottom: spacing("single");
     padding-right: spacing("single");
+    text-align: right;
 }
diff --git a/assets/scss/components/stencil/previewCart/_previewCart.scss b/assets/scss/components/stencil/previewCart/_previewCart.scss
@@ -83,13 +83,24 @@
 }
 
 .previewCartCheckout-additionalCheckoutButtons {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+
     p {
         float: none !important; // 1
         margin: spacing("third") 0;
     }
 
     .CheckoutButton {
-        margin-bottom: spacing("base");
+        display: inline-block;
+        width: 250px;
+
+        > div {
+            > div {
+                margin-bottom: 10px;
+            }
+        }
 
         &:first-child {
             margin-top: spacing("single");