From d83d235d0108f846cbc9cba354dd63717c713281 Mon Sep 17 00:00:00 2001
From: luklus <ll_code@outlook.com>
Date: Tue, 23 Jun 2020 10:08:56 +0200
Subject: [PATCH 1/6] fix(default-theme): align button

---
 .../default-theme/components/forms/SwAddress.vue     | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/default-theme/components/forms/SwAddress.vue b/packages/default-theme/components/forms/SwAddress.vue
index b5da91ae2..0f8f4a4a6 100644
--- a/packages/default-theme/components/forms/SwAddress.vue
+++ b/packages/default-theme/components/forms/SwAddress.vue
@@ -312,11 +312,17 @@ export default {
   }
   &__button {
     width: 100%;
+
+    &--back {
+      margin: var(--spacer-base) 0 0 0;
+    }
+
     @include for-desktop {
       width: auto;
-    }
-    &--back {
-      margin-left: var(--spacer-base);
+
+      &--back {
+        margin: 0 0 0 var(--spacer-base);
+      }
     }
   }
 }

From af54a4639484898af5178cb02f2df90b82915e25 Mon Sep 17 00:00:00 2001
From: luklus <ll_code@outlook.com>
Date: Mon, 29 Jun 2020 10:08:06 +0200
Subject: [PATCH 2/6] feat: update eslint rules on pages

---
 .../components/forms/SwAddress.vue            | 33 +++++++++----------
 .../default-theme/pages/_lang/account.vue     | 10 +++---
 .../pages/_lang/account/addresses/index.vue   | 21 +++++-------
 .../pages/_lang/account/orders/index.vue      |  5 ++-
 .../pages/_lang/account/profile.vue           |  1 -
 .../default-theme/pages/_lang/checkout.vue    |  4 +--
 packages/default-theme/pages/_lang/order.vue  |  4 +--
 packages/default-theme/pages/_lang/search.vue | 20 ++++-------
 8 files changed, 41 insertions(+), 57 deletions(-)

diff --git a/packages/default-theme/components/forms/SwAddress.vue b/packages/default-theme/components/forms/SwAddress.vue
index c4a9ee653..619a29c9f 100644
--- a/packages/default-theme/components/forms/SwAddress.vue
+++ b/packages/default-theme/components/forms/SwAddress.vue
@@ -16,9 +16,9 @@
         label="First Name"
         error-message="First name is required"
         :valid="!$v.form.firstName.$error"
-        @blur="$v.form.firstName.$touch()"
         required
         class="form__element form__element--half"
+        @blur="$v.form.firstName.$touch()"
       />
       <SwInput
         v-model="form.lastName"
@@ -26,9 +26,9 @@
         label="Last Name"
         error-message="Last name is required"
         :valid="!$v.form.lastName.$error"
-        @blur="$v.form.lastName.$touch()"
         required
         class="form__element form__element--half form__element--half-even"
+        @blur="$v.form.lastName.$touch()"
       />
       <SfSelect
         v-model="form.salutation"
@@ -36,8 +36,8 @@
         error-message="Salutation must be selected"
         required
         :valid="!$v.form.salutation.$error"
-        @blur="$v.form.salutaiton.$touch()"
         class="sf-select--underlined form__element form__element--half form__element--half form__select"
+        @blur="$v.form.salutaiton.$touch()"
       >
         <SfSelectOption
           v-for="salutationOption in getMappedSalutations"
@@ -53,9 +53,9 @@
         label="Street Name"
         error-message="Street name is required"
         :valid="!$v.form.street.$error"
-        @blur="$v.form.street.$touch()"
         required
         class="form__element form__element--half form__element--half-even"
+        @blur="$v.form.street.$touch()"
       />
       <SwInput
         v-model="form.apartment"
@@ -63,9 +63,9 @@
         label="House/Apartment number"
         error-message="Apartment is required"
         :valid="!$v.form.apartment.$error"
-        @blur="$v.form.apartment.$touch()"
         required
         class="form__element"
+        @blur="$v.form.apartment.$touch()"
       />
       <SwInput
         v-model="form.city"
@@ -73,9 +73,9 @@
         label="City"
         error-message="City is required"
         :valid="!$v.form.city.$error"
-        @blur="$v.form.city.$touch()"
         required
         class="form__element form__element--half"
+        @blur="$v.form.city.$touch()"
       />
       <SwInput
         v-model="form.state"
@@ -83,9 +83,9 @@
         label="State/Province"
         error-message="State is required"
         :valid="!$v.form.state.$error"
-        @blur="$v.form.state.$touch()"
         required
         class="form__element form__element--half form__element--half-even"
+        @blur="$v.form.state.$touch()"
       />
       <SwInput
         v-model="form.zipcode"
@@ -93,18 +93,18 @@
         label="Zip-code"
         error-message="Zip code is required"
         :valid="!$v.form.zipcode.$error"
-        @blur="$v.form.zipcode.$touch()"
         required
         class="form__element form__element--half"
+        @blur="$v.form.zipcode.$touch()"
       />
       <SfSelect
         v-model="form.country"
         label="Country"
         error-message="Country must be selected"
         :valid="!$v.form.country.$error"
-        @blur="$v.form.country.$touch()"
         required
         class="sf-select--underlined form__element form__element--half form__element--half-even form__select"
+        @blur="$v.form.country.$touch()"
       >
         <SfSelectOption
           v-for="countryOption in getMappedCountries"
@@ -120,9 +120,9 @@
         label="Phone number"
         error-message="Wrong phone number"
         :valid="!$v.form.phoneNumber.$error"
-        @blur="$v.form.phoneNumber.$touch()"
         required
         class="form__element"
+        @blur="$v.form.phoneNumber.$touch()"
       />
       <SwButton class="form__button" @click="updateAddress">
         Update the address
@@ -140,8 +140,8 @@
 <script>
 import { validationMixin } from "vuelidate"
 import { required } from "vuelidate/lib/validators"
-import { computed, reactive, ref, onBeforeMount } from "@vue/composition-api"
-import { SfAlert, SfTabs, SfSelect, SfIcon } from "@storefront-ui/vue"
+import { computed, reactive, ref } from "@vue/composition-api"
+import { SfAlert, SfSelect } from "@storefront-ui/vue"
 import {
   useCountries,
   useUser,
@@ -153,7 +153,7 @@ import SwInput from "@shopware-pwa/default-theme/components/atoms/SwInput"
 
 export default {
   name: "SwAddress",
-  components: { SfAlert, SfTabs, SwInput, SwButton, SfSelect, SfIcon },
+  components: { SfAlert, SwInput, SwButton, SfSelect },
   mixins: [validationMixin],
   props: {
     address: {
@@ -171,12 +171,11 @@ export default {
       }),
     },
   },
-  setup(props) {
-    const { getSalutations, error: salutationsError } = useSalutations(root)
+  setup(props, { root }) {
+    const { getSalutations } = useSalutations(root)
     const { addAddress, error: userError } = useUser(root)
     const { getCountries, error: countriesError } = useCountries(root)
-    const editAddress = ref(false)
-    const editedAddress = ref(-1)
+
     const form = reactive(JSON.parse(JSON.stringify(props.address)))
 
     const getMappedCountries = computed(() => mapCountries(getCountries.value))
diff --git a/packages/default-theme/pages/_lang/account.vue b/packages/default-theme/pages/_lang/account.vue
index 785bd7c19..c41fbcded 100644
--- a/packages/default-theme/pages/_lang/account.vue
+++ b/packages/default-theme/pages/_lang/account.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="my-account" :key="$route.fullPath">
+  <div :key="$route.fullPath" class="my-account">
     <SfContentPages
       :title="$t('My account')"
       :active="activePage"
@@ -26,7 +26,7 @@
   </div>
 </template>
 <script>
-import { computed, onBeforeMount } from "@vue/composition-api"
+import { computed } from "@vue/composition-api"
 import { SfContentPages, SfTabs } from "@storefront-ui/vue"
 import { useUser } from "@shopware-pwa/composables"
 import { PAGE_LOGIN } from "@shopware-pwa/default-theme/helpers/pages"
@@ -59,9 +59,6 @@ export default {
       return (this.user && this.user && this.user.activeShippingAddress) || {}
     },
   },
-  mounted() {
-    this.updateActivePage(this.activePage)
-  },
   watch: {
     $route(to, from) {
       if (to.name === "account-profile") {
@@ -69,6 +66,9 @@ export default {
       }
     },
   },
+  mounted() {
+    this.updateActivePage(this.activePage)
+  },
   methods: {
     async updateActivePage(title) {
       switch (title) {
diff --git a/packages/default-theme/pages/_lang/account/addresses/index.vue b/packages/default-theme/pages/_lang/account/addresses/index.vue
index 8a76275b6..df1ee0d4f 100644
--- a/packages/default-theme/pages/_lang/account/addresses/index.vue
+++ b/packages/default-theme/pages/_lang/account/addresses/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="shipping-list">
-    <SfTabs key="address-list" v-if="listAddresses">
+    <SfTabs v-if="listAddresses" key="address-list">
       <SfTab title="Shipping details">
         <p class="message">
           Manage all the shipping addresses you want (work place, home address
@@ -21,8 +21,6 @@
   </div>
 </template>
 <script>
-import { SfTabs } from "@storefront-ui/vue"
-import { useUser } from "@shopware-pwa/composables"
 import SwAddressList from "@shopware-pwa/default-theme/components/SwAddressList.vue"
 import SwButton from "@shopware-pwa/default-theme/components/atoms/SwButton"
 
@@ -30,7 +28,6 @@ export default {
   name: "MyAddresses",
   components: {
     SwButton,
-    SfTabs,
     SwAddressList,
   },
   data() {
@@ -38,14 +35,6 @@ export default {
       listAddresses: true,
     }
   },
-  methods: {
-    changeAddress() {
-      this.$router.push(this.$i18n.path("/account/addresses/add"))
-    },
-    editAddress(addressId) {
-      this.$router.push(this.$i18n.path(`/account/addresses/add/${addressId}`))
-    },
-  },
   watch: {
     $route: {
       deep: true,
@@ -54,6 +43,14 @@ export default {
       },
     },
   },
+  methods: {
+    changeAddress() {
+      this.$router.push(this.$i18n.path("/account/addresses/add"))
+    },
+    editAddress(addressId) {
+      this.$router.push(this.$i18n.path(`/account/addresses/add/${addressId}`))
+    },
+  },
 }
 </script>
 
diff --git a/packages/default-theme/pages/_lang/account/orders/index.vue b/packages/default-theme/pages/_lang/account/orders/index.vue
index 4cf3390d6..741387b91 100644
--- a/packages/default-theme/pages/_lang/account/orders/index.vue
+++ b/packages/default-theme/pages/_lang/account/orders/index.vue
@@ -12,14 +12,14 @@
       <SfTable v-else class="orders">
         <SfTableHeading>
           <SfTableHeader
-            class="orders__header"
             v-for="tableHeader in tableHeaders"
             :key="tableHeader"
+            class="orders__header"
             >{{ tableHeader }}</SfTableHeader
           >
         </SfTableHeading>
         <!-- consider making SfTableRow public (not internal component) to split it down to smaller components. -->
-        <Order :order="order" v-for="order in orderList" :key="order.id" />
+        <Order v-for="order in orderList" :key="order.id" :order="order" />
       </SfTable>
     </SfTab>
   </SfTabs>
@@ -28,7 +28,6 @@
 import { SfTabs, SfTable } from "@storefront-ui/vue"
 import { useUser } from "@shopware-pwa/composables"
 import Order from "@shopware-pwa/default-theme/components/account/orders/Order"
-import { formatDate, formatPrice } from "@shopware-pwa/default-theme/helpers"
 
 export default {
   name: "OrderHistory",
diff --git a/packages/default-theme/pages/_lang/account/profile.vue b/packages/default-theme/pages/_lang/account/profile.vue
index 6ed6dcd61..e0d4b9bbf 100644
--- a/packages/default-theme/pages/_lang/account/profile.vue
+++ b/packages/default-theme/pages/_lang/account/profile.vue
@@ -25,7 +25,6 @@
 
 <script>
 import { SfTabs } from "@storefront-ui/vue"
-import { useUser } from "@shopware-pwa/composables"
 import SwPassword from "@shopware-pwa/default-theme/components/forms/SwPassword"
 import SwPersonalInfo from "@shopware-pwa/default-theme/components/forms/SwPersonalInfo"
 
diff --git a/packages/default-theme/pages/_lang/checkout.vue b/packages/default-theme/pages/_lang/checkout.vue
index 0be7cdda3..9497ae1b2 100644
--- a/packages/default-theme/pages/_lang/checkout.vue
+++ b/packages/default-theme/pages/_lang/checkout.vue
@@ -52,10 +52,8 @@ import PaymentStep from "@shopware-pwa/default-theme/components/checkout/steps/P
 import PersonalDetailsStep from "@shopware-pwa/default-theme/components/checkout/steps/PersonalDetailsStep"
 import ShippingStep from "@shopware-pwa/default-theme/components/checkout/steps/ShippingStep"
 import OrderReviewStep from "@shopware-pwa/default-theme/components/checkout/steps/OrderReviewStep"
-import { ref, computed, reactive } from "@vue/composition-api"
 import {
   CHECKOUT_STEPS,
-  getStepByNumber,
   useUICheckoutPage,
 } from "@shopware-pwa/default-theme/logic/checkout"
 
@@ -82,7 +80,7 @@ export default {
   watch: {
     $route: {
       immediate: true,
-      handler: function () {
+      handler() {
         const stepName = this.$route.query.step
         if (stepName) this.nextStep(CHECKOUT_STEPS[stepName])
       },
diff --git a/packages/default-theme/pages/_lang/order.vue b/packages/default-theme/pages/_lang/order.vue
index 72ca4365a..7d8e84b6b 100644
--- a/packages/default-theme/pages/_lang/order.vue
+++ b/packages/default-theme/pages/_lang/order.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="order-page" :key="$route.fullPath">
+  <div :key="$route.fullPath" class="order-page">
     <SfHeading
       title="Thank you"
       subtitle="for shopping with us!"
@@ -14,7 +14,7 @@
 </template>
 <script>
 import { SfHeading, SfIcon, SfDivider } from "@storefront-ui/vue"
-import { ref, onMounted, computed } from "@vue/composition-api"
+import { computed } from "@vue/composition-api"
 import SwButton from "@shopware-pwa/default-theme/components/atoms/SwButton"
 
 import SwOrderDetails from "@shopware-pwa/default-theme/components/SwOrderDetails"
diff --git a/packages/default-theme/pages/_lang/search.vue b/packages/default-theme/pages/_lang/search.vue
index 49b386f9c..317cedd38 100644
--- a/packages/default-theme/pages/_lang/search.vue
+++ b/packages/default-theme/pages/_lang/search.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="search-page" :key="$route.fullPath">
-    <h3 class="search-page__warning" v-if="!searchQuery && startedSearching">
+  <div :key="$route.fullPath" class="search-page">
+    <h3 v-if="!searchQuery && startedSearching" class="search-page__warning">
       You didn't provide any term to be found
     </h3>
-    <SfLoader :loading="loadingSearch || !startedSearching" v-else>
-      <div class="search-page__main" v-if="searchResult">
+    <SfLoader v-else :loading="loadingSearch || !startedSearching">
+      <div v-if="searchResult" class="search-page__main">
         <h3>
           search results for <strong>{{ searchQuery }}</strong> :
         </h3>
@@ -19,24 +19,16 @@
   </div>
 </template>
 <script>
-import { SfButton, SfHeading, SfIcon, SfLoader } from "@storefront-ui/vue"
+import { SfLoader } from "@storefront-ui/vue"
 import { useProductSearch, useUIState } from "@shopware-pwa/composables"
 
-import {
-  ref,
-  getCurrentInstance,
-  computed,
-  watchEffect,
-} from "@vue/composition-api"
+import { ref, watchEffect } from "@vue/composition-api"
 import SwProductListing from "@shopware-pwa/default-theme/components/SwProductListing"
 
 export default {
   name: "SearchResultsPage",
   watchQuery: true,
   components: {
-    SfHeading,
-    SfButton,
-    SfIcon,
     SfLoader,
     SwProductListing,
   },

From 398d939323cadc6c45d3b22c0551ac079eb67502 Mon Sep 17 00:00:00 2001
From: luklus <ll_code@outlook.com>
Date: Mon, 29 Jun 2020 10:46:56 +0200
Subject: [PATCH 3/6] fix: margin on addressesssection

---
 .../default-theme/components/SwAddress.vue    |  4 ++--
 .../components/SwAddressList.vue              | 24 ++++---------------
 .../components/SwBottomNavigation.vue         |  2 +-
 .../components/forms/SwAddress.vue            |  2 +-
 .../components/views/ProductView.vue          |  4 ++--
 .../default-theme/pages/_lang/account.vue     | 15 ++++++++----
 .../_lang/account/addresses/add/index.vue     | 10 +++++++-
 .../pages/_lang/account/addresses/index.vue   |  5 +++-
 8 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/packages/default-theme/components/SwAddress.vue b/packages/default-theme/components/SwAddress.vue
index eab5e6d60..567677147 100644
--- a/packages/default-theme/components/SwAddress.vue
+++ b/packages/default-theme/components/SwAddress.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sw-address" v-if="address">
+  <div v-if="address" class="sw-address">
     <div class="sw-address__content">
       <h4 class="sw-address__title">{{ addressTitle }}</h4>
       <slot name="before-content" />
@@ -7,7 +7,7 @@
         {{ street }} {{ apartment }}, {{ zipcode }}<br />
         {{ city }}
       </p>
-      <p class="content" v-if="phoneNumber">
+      <p v-if="phoneNumber" class="content">
         {{ phoneNumber }}
       </p>
     </div>
diff --git a/packages/default-theme/components/SwAddressList.vue b/packages/default-theme/components/SwAddressList.vue
index 517fc45c8..4fe19a2a1 100644
--- a/packages/default-theme/components/SwAddressList.vue
+++ b/packages/default-theme/components/SwAddressList.vue
@@ -2,38 +2,24 @@
   <div class="shipping-list">
     <Address
       v-for="address in addresses"
-      :address="address"
       :key="address.id"
-      :isDefaultShipping="address.id === selectedShipping"
-      :isDefaultBilling="address.id === selectedBilling"
+      :address="address"
+      :is-default-shipping="address.id === selectedShipping"
+      :is-default-billing="address.id === selectedBilling"
+      class="shipping-list__address"
       @selectDefaultAddress="selectDefaultAddress"
       @deleteAddress="deleteAddress"
       @editAddress="editAddress"
-      class="shipping-list__address"
     />
   </div>
 </template>
 <script>
-import {
-  SfProperty,
-  SfTabs,
-  SfList,
-  SfIcon,
-  SfBadge,
-  SfCheckbox,
-} from "@storefront-ui/vue"
 import { useUser } from "@shopware-pwa/composables"
 import Address from "@shopware-pwa/default-theme/components/account/MyAddresses/Address.vue"
 
 export default {
   name: "MyAddresses",
   components: {
-    SfProperty,
-    SfTabs,
-    SfList,
-    SfIcon,
-    SfBadge,
-    SfCheckbox,
     Address,
   },
   props: {},
@@ -63,10 +49,10 @@ export default {
       refreshUser,
     }
   },
+  computed: {},
   async mounted() {
     await this.loadAddresses()
   },
-  computed: {},
   methods: {
     async selectDefaultAddress(addressId, type) {
       await this.markAddressAsDefault({ addressId, type })
diff --git a/packages/default-theme/components/SwBottomNavigation.vue b/packages/default-theme/components/SwBottomNavigation.vue
index faf2f5fd6..62c7d4221 100644
--- a/packages/default-theme/components/SwBottomNavigation.vue
+++ b/packages/default-theme/components/SwBottomNavigation.vue
@@ -93,7 +93,7 @@ import {
 import SwCurrencySwitcher from "@shopware-pwa/default-theme/components/SwCurrencySwitcher"
 import { onMounted } from "@vue/composition-api"
 import SwButton from "@shopware-pwa/default-theme/components/atoms/SwButton"
-import { PAGE_ACCOUNT, PAGE_LOGIN } from "../helpers/pages"
+import { PAGE_ACCOUNT } from "../helpers/pages"
 
 export default {
   name: "SwBottomNavigation",
diff --git a/packages/default-theme/components/forms/SwAddress.vue b/packages/default-theme/components/forms/SwAddress.vue
index 619a29c9f..4e0d271ee 100644
--- a/packages/default-theme/components/forms/SwAddress.vue
+++ b/packages/default-theme/components/forms/SwAddress.vue
@@ -140,7 +140,7 @@
 <script>
 import { validationMixin } from "vuelidate"
 import { required } from "vuelidate/lib/validators"
-import { computed, reactive, ref } from "@vue/composition-api"
+import { computed, reactive } from "@vue/composition-api"
 import { SfAlert, SfSelect } from "@storefront-ui/vue"
 import {
   useCountries,
diff --git a/packages/default-theme/components/views/ProductView.vue b/packages/default-theme/components/views/ProductView.vue
index 3d760db29..7ab982d87 100644
--- a/packages/default-theme/components/views/ProductView.vue
+++ b/packages/default-theme/components/views/ProductView.vue
@@ -1,13 +1,13 @@
 <template>
   <div v-if="product" id="product">
-    <SwPluginSlot name="product-page-details-before" :slotContext="product" />
+    <SwPluginSlot name="product-page-details-before" :slot-context="product" />
     <div class="product">
       <SwProductGallery :product="product" class="product__gallery" />
       <div class="product__description">
         <SwProductDetails :product="product" :page="page" />
       </div>
     </div>
-    <SwPluginSlot name="product-page-details-after" :slotContext="product" />
+    <SwPluginSlot name="product-page-details-after" :slot-context="product" />
     <div class="products__recomendations">
       <div class="products-recomendations__section">
         <SwProductCarousel />
diff --git a/packages/default-theme/pages/_lang/account.vue b/packages/default-theme/pages/_lang/account.vue
index c41fbcded..feb38bb03 100644
--- a/packages/default-theme/pages/_lang/account.vue
+++ b/packages/default-theme/pages/_lang/account.vue
@@ -11,9 +11,7 @@
           <nuxt-child />
         </SfContentPage>
         <SfContentPage :title="$t('My addresses')">
-          <SfTabs :open-tab="1">
-            <nuxt-child />
-          </SfTabs>
+          <nuxt-child />
         </SfContentPage>
       </SfContentCategory>
       <SfContentCategory :title="$t('Order details')">
@@ -25,9 +23,10 @@
     </SfContentPages>
   </div>
 </template>
+
 <script>
 import { computed } from "@vue/composition-api"
-import { SfContentPages, SfTabs } from "@storefront-ui/vue"
+import { SfContentPages } from "@storefront-ui/vue"
 import { useUser } from "@shopware-pwa/composables"
 import { PAGE_LOGIN } from "@shopware-pwa/default-theme/helpers/pages"
 
@@ -37,7 +36,6 @@ export default {
   name: "AccountPage",
   components: {
     SfContentPages,
-    SfTabs,
   },
   middleware: authMiddleware,
   setup(props, { root }) {
@@ -91,6 +89,13 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.my-account .sf-content-pages__content {
+  height: auto;
+}
+</style>
+
 <style lang="scss" scoped>
 @import "@/assets/scss/variables";
 
diff --git a/packages/default-theme/pages/_lang/account/addresses/add/index.vue b/packages/default-theme/pages/_lang/account/addresses/add/index.vue
index c66ca3bab..5d2a1011c 100644
--- a/packages/default-theme/pages/_lang/account/addresses/add/index.vue
+++ b/packages/default-theme/pages/_lang/account/addresses/add/index.vue
@@ -15,4 +15,12 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@import "@/assets/scss/variables";
+
+.addresses-add {
+  @include for-mobile {
+    padding: var(--spacer-sm);
+  }
+}
+</style>
diff --git a/packages/default-theme/pages/_lang/account/addresses/index.vue b/packages/default-theme/pages/_lang/account/addresses/index.vue
index df1ee0d4f..63d1c9df9 100644
--- a/packages/default-theme/pages/_lang/account/addresses/index.vue
+++ b/packages/default-theme/pages/_lang/account/addresses/index.vue
@@ -13,6 +13,7 @@
         </SwButton>
       </SfTab>
     </SfTabs>
+
     <SfTabs v-else>
       <SfTab title="Add address">
         <nuxt-child />
@@ -20,13 +21,15 @@
     </SfTabs>
   </div>
 </template>
+
 <script>
 import SwAddressList from "@shopware-pwa/default-theme/components/SwAddressList.vue"
 import SwButton from "@shopware-pwa/default-theme/components/atoms/SwButton"
-
+import { SfTabs } from "@storefront-ui/vue"
 export default {
   name: "MyAddresses",
   components: {
+    SfTabs,
     SwButton,
     SwAddressList,
   },

From de0f9c3448e4e63bc3c9dc44fdf85f3143acbd10 Mon Sep 17 00:00:00 2001
From: luklus <ll_code@outlook.com>
Date: Mon, 29 Jun 2020 12:59:10 +0200
Subject: [PATCH 4/6] fix: update margin

---
 packages/default-theme/pages/_lang/account.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/default-theme/pages/_lang/account.vue b/packages/default-theme/pages/_lang/account.vue
index feb38bb03..e7f916be0 100644
--- a/packages/default-theme/pages/_lang/account.vue
+++ b/packages/default-theme/pages/_lang/account.vue
@@ -11,7 +11,9 @@
           <nuxt-child />
         </SfContentPage>
         <SfContentPage :title="$t('My addresses')">
-          <nuxt-child />
+          <SfTabs :open-tab="1">
+            <nuxt-child />
+          </SfTabs>
         </SfContentPage>
       </SfContentCategory>
       <SfContentCategory :title="$t('Order details')">
@@ -26,7 +28,7 @@
 
 <script>
 import { computed } from "@vue/composition-api"
-import { SfContentPages } from "@storefront-ui/vue"
+import { SfContentPages, SfTabs } from "@storefront-ui/vue"
 import { useUser } from "@shopware-pwa/composables"
 import { PAGE_LOGIN } from "@shopware-pwa/default-theme/helpers/pages"
 
@@ -36,6 +38,7 @@ export default {
   name: "AccountPage",
   components: {
     SfContentPages,
+    SfTabs,
   },
   middleware: authMiddleware,
   setup(props, { root }) {
@@ -91,6 +94,7 @@ export default {
 </script>
 
 <style lang="scss">
+.my-account .my-account__content,
 .my-account .sf-content-pages__content {
   height: auto;
 }

From df60bc312102a5229816ee1fc060998923fb5632 Mon Sep 17 00:00:00 2001
From: luklus <ll_code@outlook.com>
Date: Tue, 30 Jun 2020 08:40:45 +0200
Subject: [PATCH 5/6] fix: update for tablets

---
 packages/default-theme/assets/scss/variables.scss    | 12 ++++++++++--
 .../default-theme/components/forms/SwAddress.vue     | 10 +++++-----
 packages/default-theme/pages/_lang/account.vue       |  7 ++-----
 .../pages/_lang/account/addresses/add/index.vue      |  3 +++
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/default-theme/assets/scss/variables.scss b/packages/default-theme/assets/scss/variables.scss
index b39749f6c..e9457dd85 100644
--- a/packages/default-theme/assets/scss/variables.scss
+++ b/packages/default-theme/assets/scss/variables.scss
@@ -1,7 +1,15 @@
-@import '~@storefront-ui/shared/styles/variables';
+@import "~@storefront-ui/shared/styles/variables";
 
 // Global variables for theme
 
 // #__nuxt {
 //   --c-primary: #5ece7b;
-// }
\ No newline at end of file
+// }
+
+$tablet: 768px;
+
+@mixin for-tablet {
+  @media screen and (min-width: $tablet) {
+    @content;
+  }
+}
diff --git a/packages/default-theme/components/forms/SwAddress.vue b/packages/default-theme/components/forms/SwAddress.vue
index 4e0d271ee..c518eab28 100644
--- a/packages/default-theme/components/forms/SwAddress.vue
+++ b/packages/default-theme/components/forms/SwAddress.vue
@@ -283,22 +283,22 @@ export default {
 @import "@/assets/scss/variables";
 
 .form {
-  @include for-desktop {
+  @include for-tablet {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
   }
   &__element {
     margin-bottom: var(--spacer-xl);
-    @include for-desktop {
+    @include for-tablet {
       flex: 0 0 100%;
     }
     &--half {
-      @include for-desktop {
+      @include for-tablet {
         flex: 1 1 50%;
       }
       &-even {
-        @include for-desktop {
+        @include for-tablet {
           padding-left: var(--spacer-xl);
         }
       }
@@ -316,7 +316,7 @@ export default {
       margin: var(--spacer-base) 0 0 0;
     }
 
-    @include for-desktop {
+    @include for-tablet {
       width: auto;
 
       &--back {
diff --git a/packages/default-theme/pages/_lang/account.vue b/packages/default-theme/pages/_lang/account.vue
index e7f916be0..4c5194493 100644
--- a/packages/default-theme/pages/_lang/account.vue
+++ b/packages/default-theme/pages/_lang/account.vue
@@ -11,9 +11,7 @@
           <nuxt-child />
         </SfContentPage>
         <SfContentPage :title="$t('My addresses')">
-          <SfTabs :open-tab="1">
-            <nuxt-child />
-          </SfTabs>
+          <nuxt-child />
         </SfContentPage>
       </SfContentCategory>
       <SfContentCategory :title="$t('Order details')">
@@ -28,7 +26,7 @@
 
 <script>
 import { computed } from "@vue/composition-api"
-import { SfContentPages, SfTabs } from "@storefront-ui/vue"
+import { SfContentPages } from "@storefront-ui/vue"
 import { useUser } from "@shopware-pwa/composables"
 import { PAGE_LOGIN } from "@shopware-pwa/default-theme/helpers/pages"
 
@@ -38,7 +36,6 @@ export default {
   name: "AccountPage",
   components: {
     SfContentPages,
-    SfTabs,
   },
   middleware: authMiddleware,
   setup(props, { root }) {
diff --git a/packages/default-theme/pages/_lang/account/addresses/add/index.vue b/packages/default-theme/pages/_lang/account/addresses/add/index.vue
index 5d2a1011c..cfba655ff 100644
--- a/packages/default-theme/pages/_lang/account/addresses/add/index.vue
+++ b/packages/default-theme/pages/_lang/account/addresses/add/index.vue
@@ -19,6 +19,9 @@ export default {
 @import "@/assets/scss/variables";
 
 .addresses-add {
+  box-sizing: border-box;
+  width: 100%;
+
   @include for-mobile {
     padding: var(--spacer-sm);
   }

From d0bbada3bf318b62d5b6ea9cd9f4b22a2a4ad27e Mon Sep 17 00:00:00 2001
From: luklus <ll_code@outlook.com>
Date: Tue, 30 Jun 2020 11:03:58 +0200
Subject: [PATCH 6/6] fix: fix on edit page

---
 .../pages/_lang/account/addresses/add/_id.vue       | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/default-theme/pages/_lang/account/addresses/add/_id.vue b/packages/default-theme/pages/_lang/account/addresses/add/_id.vue
index 1e282f304..066a2f960 100644
--- a/packages/default-theme/pages/_lang/account/addresses/add/_id.vue
+++ b/packages/default-theme/pages/_lang/account/addresses/add/_id.vue
@@ -53,4 +53,15 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@import "@/assets/scss/variables";
+
+.addresses-add {
+  box-sizing: border-box;
+  width: 100%;
+
+  @include for-mobile {
+    padding: var(--spacer-sm);
+  }
+}
+</style>