From b3a4aadee82906652273b453b38cd2e13021067f Mon Sep 17 00:00:00 2001
From: Nathaniel Allred <neallred@protonmail.com>
Date: Wed, 5 Apr 2023 08:56:59 -0500
Subject: [PATCH] fix choose different shipping spacing (#22829)

---
 .../choose_different_shipping.scss                     | 10 ++++++++--
 .../channels/src/components/payment_form/mixins.scss   |  4 ++++
 .../src/components/payment_form/payment_form.scss      |  6 ++++--
 3 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 webapp/channels/src/components/payment_form/mixins.scss

diff --git a/webapp/channels/src/components/choose_different_shipping/choose_different_shipping.scss b/webapp/channels/src/components/choose_different_shipping/choose_different_shipping.scss
index 322997fc030..ab86a149827 100644
--- a/webapp/channels/src/components/choose_different_shipping/choose_different_shipping.scss
+++ b/webapp/channels/src/components/choose_different_shipping/choose_different_shipping.scss
@@ -1,10 +1,13 @@
+@import '../payment_form/mixins';
+
 .shipping-address-section {
     display: flex;
-    align-content: flex-start;
+    align-items: center;
     padding-bottom: 24px;
     font-weight: normal;
 
     button.no-style {
+        height: auto;
         padding-left: 0;
         border: none;
         background: transparent;
@@ -26,7 +29,6 @@
         padding-left: 12px;
         cursor: default;
         font-family: 'Open Sans', sans-serif;
-        vertical-align: middle;
     }
 
     .billing_address_btn_text {
@@ -35,3 +37,7 @@
         font-weight: bold;
     }
 }
+
+.PurchaseModal .shipping-address-section {
+    @include payment-form-padding;
+}
diff --git a/webapp/channels/src/components/payment_form/mixins.scss b/webapp/channels/src/components/payment_form/mixins.scss
new file mode 100644
index 00000000000..37b7455c683
--- /dev/null
+++ b/webapp/channels/src/components/payment_form/mixins.scss
@@ -0,0 +1,4 @@
+@mixin payment-form-padding() {
+    padding-right: 96px;
+    padding-left: 96px;
+}
diff --git a/webapp/channels/src/components/payment_form/payment_form.scss b/webapp/channels/src/components/payment_form/payment_form.scss
index f228355589a..e49b086de6e 100644
--- a/webapp/channels/src/components/payment_form/payment_form.scss
+++ b/webapp/channels/src/components/payment_form/payment_form.scss
@@ -1,6 +1,8 @@
+@import './mixins';
+
 .PaymentForm {
-    padding-right: 96px;
-    padding-left: 96px;
+    @include payment-form-padding;
+
     margin: 0 auto;
 
     .form-row {