fix(default-theme): fixed some margins on shipping path (#1104)

packages/default-theme/components/SwAddress.vue

@@ -55,18 +55,22 @@ export default {
 
 <style lang="scss" scoped>
 .sw-address {
+ align-items: flex-start;
  display: flex;
  justify-content: space-between;
- align-items: flex-start;
+ margin: var(--spacer-sm);
+
  &__title {
  font-size: var(--font-sm);
  margin-bottom: var(--spacer-sm);
  color: var(--c-text);
  }
+
  &__content {
  font-size: var(--font-xs);
  }
 }
+
 .content {
  margin: 0;
  color: var(--c-text-muted);

packages/default-theme/components/SwCheckoutMethod.vue

@@ -26,15 +26,18 @@ export default {
 
 <style lang="scss" scoped>
 .sw-generic-method {
- margin-bottom: var(--spacer-sm);
+ align-items: flex-start;
  display: flex;
  justify-content: space-between;
- align-items: flex-start;
+ margin-bottom: var(--spacer-sm);
+ margin: var(--spacer-sm);
+
  &__title {
  font-size: var(--font-sm);
  margin-bottom: var(--spacer-xs);
  color: var(--c-text);
  }
+
  &__content {
  font-size: var(--font-xs);
  color: var(--c-text-muted);

packages/default-theme/components/SwFooter.vue

@@ -81,6 +81,7 @@ export default {
  }
 
  &__bottom-navigation {
+ margin-bottom: var(--spacer-sm);
  width: 100%;
  }
 }

packages/default-theme/components/SwPersonalDetails.vue

@@ -36,19 +36,22 @@ export default {
 
 <style lang="scss" scoped>
 .sw-personal-details {
+ align-items: flex-start;
  display: flex;
  justify-content: space-between;
- align-items: flex-start;
+ margin: var(--spacer-sm);
 
  &__title {
+ color: var(--c-text);
  font-size: var(--font-sm);
  margin-bottom: var(--spacer-sm);
- color: var(--c-text);
  }
+
  &__content {
  font-size: var(--font-xs);
  }
 }
+
 .content {
  margin: 0;
  color: var(--c-text-muted);

packages/default-theme/components/checkout/steps/guest/PersonalDetailsGuestForm.vue

@@ -48,9 +48,7 @@
  data-cy="proper-email"
  />
  <div class="info">
- <p class="info__heading">
- Enjoy these perks with your free account!
- </p>
+ <p class="info__heading">Enjoy these perks with your free account!</p>
  <SfCharacteristic
  v-for="(characteristic, key) in characteristics"
  :key="key"
@@ -104,13 +102,7 @@
  </div>
 </template>
 <script>
-import {
- SfCheckbox,
- SfHeading,
- SfCharacteristic,
- SfSelect,
- SfProductOption,
-} from "@storefront-ui/vue"
+import { SfCheckbox, SfHeading, SfCharacteristic } from "@storefront-ui/vue"
 import SwPluginSlot from "sw-plugins/SwPluginSlot"
 import SwButton from "@shopware-pwa/default-theme/components/atoms/SwButton"
 import SwInput from "@shopware-pwa/default-theme/components/atoms/SwInput"
@@ -315,34 +307,6 @@ export default {
  email,
  },
  },
- methods: {
- async toShipping() {
- // run the validators against the provided data
- // consider using $touch event on $blur event in each input
- this.validate()
- if (this.validations.$invalid) {
- return
- }
-
- if (this.createAccount) {
- const isRegistered = await this.registerUser(this.customer)
- if (!isRegistered) {
- return
- }
- // extra login step won't be necessary once the register has a autologin option
- await this.login({
- username: this.email,
- password: this.password,
- })
- if (!this.isLoggedIn) {
- return
- }
- this.$router.push(this.$i18n.path('/checkout?step="SHIPPING"'))
- } else {
- return this.$emit("proceed")
- }
- },
- },
 }
 </script>
 <style lang="scss" scoped>
@@ -416,4 +380,12 @@ export default {
  }
  }
 }
+
+.form__action {
+ margin: var(--spacer-sm) 0;
+
+ .sf-button + .sf-button {
+ margin-top: var(--spacer-sm);
+ }
+}
 </style>