From 63ade404e236a942eeb88a39cb5b4301ec8d5c5f Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Mon, 27 Jun 2022 15:31:53 +0200
Subject: [PATCH] refactor: m2-709. user addresses styling

---
 .../components/UserBillingAddresses.vue       | 34 +++---------------
 .../components/UserShippingAddresses.vue      | 36 +++----------------
 .../components/styles/userAddresses.scss      | 27 ++++++++++++++
 3 files changed, 35 insertions(+), 62 deletions(-)
 create mode 100644 packages/theme/modules/checkout/components/styles/userAddresses.scss

diff --git a/packages/theme/modules/checkout/components/UserBillingAddresses.vue b/packages/theme/modules/checkout/components/UserBillingAddresses.vue
index 2cb09d498..85d5c72a7 100644
--- a/packages/theme/modules/checkout/components/UserBillingAddresses.vue
+++ b/packages/theme/modules/checkout/components/UserBillingAddresses.vue
@@ -2,14 +2,14 @@
   <div>
     <SfAddressPicker
       :selected="`${selectedAddress}`"
-      class="billing__addresses"
+      class="addresses"
       @change="setCurrentAddress($event)"
     >
       <SfAddress
         v-for="billingAddress in addressesWithCountryName"
         :key="userBillingGetters.getId(billingAddress)"
         :name="`${userBillingGetters.getId(billingAddress)}`"
-        class="billing__address"
+        class="address"
       >
         <UserAddressDetails :address="billingAddress">
           <template #country>
@@ -22,7 +22,7 @@
       :selected="value"
       name="setAsDefault"
       label="Use this address as my default one."
-      class="billing__setAsDefault"
+      class="setAsDefault"
       @change="$emit('input', $event)"
     />
     <hr class="sf-divider">
@@ -99,31 +99,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.billing {
-  &__address {
-    margin-bottom: var(--spacer-base);
-    @include for-desktop {
-      margin-right: var(--spacer-sm);
-      display: flex;
-      width: 100%;
-      flex-direction: column;
-    }
-  }
-
-  &__addresses {
-    margin-bottom: var(--spacer-xl);
-    @include for-desktop {
-      display: flex;
-    }
-  }
-
-  &__setAsDefault {
-    margin-bottom: var(--spacer-xl);
-  }
-}
-
-.sf-divider,
-.form__action-button--margin-bottom {
-  margin-bottom: var(--spacer-xl);
-}
+@import "./styles/userAddresses";
 </style>
diff --git a/packages/theme/modules/checkout/components/UserShippingAddresses.vue b/packages/theme/modules/checkout/components/UserShippingAddresses.vue
index 6c0aca643..793412457 100644
--- a/packages/theme/modules/checkout/components/UserShippingAddresses.vue
+++ b/packages/theme/modules/checkout/components/UserShippingAddresses.vue
@@ -2,13 +2,13 @@
   <div>
     <SfAddressPicker
       :selected="`${currentAddressId}`"
-      class="shipping__addresses"
+      class="addresses"
       @change="setCurrentAddress($event)"
     >
       <SfAddress
         v-for="shippingAddress in addressesWithCountryName"
         :key="userShippingGetters.getId(shippingAddress)"
-        class="shipping__address"
+        class="address"
         :name="`${userShippingGetters.getId(shippingAddress)}`"
       >
         <UserAddressDetails :address="shippingAddress">
@@ -23,7 +23,7 @@
       :selected="value"
       name="setAsDefault"
       label="Use this address as my default one."
-      class="shipping__setAsDefault"
+      class="setAsDefault"
       @change="$emit('input', $event)"
     />
     <hr class="sf-divider">
@@ -95,33 +95,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.shipping {
-  &__address {
-    margin-bottom: var(--spacer-base);
-    @include for-desktop {
-      margin-right: var(--spacer-sm);
-      display: flex;
-      width: calc(50% - var(--spacer-sm));
-      flex-direction: column;
-    }
-  }
-
-  &__addresses {
-    margin-bottom: var(--spacer-xl);
-    @include for-desktop {
-      display: flex;
-      flex-wrap: wrap;
-      margin-right: var(--spacer-sm)
-    }
-  }
-
-  &__setAsDefault {
-    margin-bottom: var(--spacer-xl);
-  }
-}
-
-.sf-divider,
-.form__action-button--margin-bottom {
-  margin-bottom: var(--spacer-xl);
-}
+@import "./styles/userAddresses";
 </style>
diff --git a/packages/theme/modules/checkout/components/styles/userAddresses.scss b/packages/theme/modules/checkout/components/styles/userAddresses.scss
new file mode 100644
index 000000000..12ee42a7a
--- /dev/null
+++ b/packages/theme/modules/checkout/components/styles/userAddresses.scss
@@ -0,0 +1,27 @@
+.address {
+  margin-bottom: var(--spacer-base);
+  @include for-desktop {
+    margin-right: var(--spacer-sm);
+    display: flex;
+    width: calc(50% - var(--spacer-sm));
+    flex-direction: column;
+  }
+}
+
+.addresses {
+  margin-bottom: var(--spacer-xl);
+  @include for-desktop {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: var(--spacer-sm)
+  }
+}
+
+.setAsDefault {
+  margin-bottom: var(--spacer-xl);
+}
+
+.sf-divider,
+.form__action-button--margin-bottom {
+  margin-bottom: var(--spacer-xl);
+}