chore: update the misaligned margin of components

packages/theme/components/AppHeader.vue

@@ -98,7 +98,7 @@ import {
   SfBadge,
   SfSearchBar,
   SfIcon,
-  SfOverlay,
+  SfOverlay
 } from '@storefront-ui/vue';
 import SearchResults from './SearchResults.vue';
 import debounce from 'lodash/debounce';
@@ -108,11 +108,7 @@ import { computed, ref, useRouter } from '@nuxtjs/composition-api';
 import useUiHelpers from '~/composables/useUiHelpers';
 import LocaleSelector from './LocaleSelector';
 
-import {
-  searchGetters,
-  useCategory,
-  useSearch,
-} from '@vue-storefront/shopify';
+import { searchGetters, useCategory, useSearch } from '@vue-storefront/shopify';
 
 export default {
   components: {
@@ -124,14 +120,14 @@ export default {
     SfButton,
     SfOverlay,
     SfBadge,
-    SfSearchBar,
+    SfSearchBar
   },
   props: {
     cartTotalItems: {
       type: Number,
       default: 0
     },
-    isUserAuthenticated: Boolean,
+    isUserAuthenticated: Boolean
   },
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   setup(props) {
@@ -140,13 +136,14 @@ export default {
     const { changeSearchTerm, getFacetsFromURL } = useUiHelpers();
     const { search: headerSearch, result } = useSearch('header-search');
     const { search, categories } = useCategory('menuCategories');
-    const router = useRouter()
+    const router = useRouter();
 
     const curCatSlug = ref(getFacetsFromURL().categorySlug);
-    const accountIcon = computed(() => props.isUserAuthenticated ? 'profile_fill' : 'profile');
-
+    const accountIcon = computed(() =>
+      props.isUserAuthenticated ? 'profile_fill' : 'profile'
+    );
 
-     // TODO: https://github.com/DivanteLtd/vue-storefront/issues/4927
+    // TODO: https://github.com/DivanteLtd/vue-storefront/issues/4927
     const handleAccountClick = () => {
       if (isAuthenticated.value) {
         return router.push('/my-account');
@@ -166,7 +163,7 @@ export default {
       }
 
       await headerSearch({
-        term: term.value,
+        term: term.value
       });
     }, 1000);
     const closeSearch = () => {
@@ -176,7 +173,7 @@ export default {
     };
 
     searchResults.value = {
-      products: computed(() => searchGetters.getItems(result.value)),
+      products: computed(() => searchGetters.getItems(result.value))
     };
     // #endregion Search Section
     onSSR(async () => {
@@ -203,9 +200,9 @@ export default {
       curCatSlug,
       searchResults,
       categories,
-      isSearchOpen,
+      isSearchOpen
     };
-  },
+  }
 };
 </script>
 
@@ -224,7 +221,13 @@ export default {
 }
 .navigation-wrapper {
   display: flex;
-  white-space: nowrap;
+  width: min-content;
+}
+.sf-search-bar {
+  @include for-desktop {
+    max-width: 20rem;
+    width: 100%;
+  }
 }
 .nav-item {
   .sf-header-navigation-item__item--mobile {
@@ -240,6 +243,7 @@ export default {
   left: 40%;
 }
 .sf-header-navigation-item {
+  flex: 0;
   ::v-deep &__item--mobile {
     display: block;
   }

packages/theme/pages/Home.vue

@@ -232,25 +232,7 @@ export default {
 };
 </script>
 
-<style lang="postcss" scoped>
-.article-meta h4 a {
-  color: #111111;
-  font-weight: 600;
-  font-size: 20px;
-}
-.article-meta {
-  margin-top: 10px;
-}
-.article-item__meta-item:not(:last-child)::after {
-  display: inline-block;
-  content: "";
-  width: 5px;
-  height: 5px;
-  margin: -1px 10px 0 10px;
-  border-radius: 100%;
-  background: rgba(0, 0, 0, 0.4);
-  vertical-align: middle;
-}
+<style lang="scss" scoped>
 #home {
   box-sizing: border-box;
   padding: 0 var(--spacer-sm);
@@ -260,13 +242,9 @@ export default {
     margin: 0 auto;
   }
 }
-
 .hero {
   margin: var(--spacer-xl) auto var(--spacer-lg);
   --hero-item-background-position: center;
-  ::v-deep .sf-link:hover {
-    color: var(--c-white);
-  }
   @include for-desktop {
     margin: var(--spacer-xl) auto var(--spacer-2xl);
   }
@@ -275,20 +253,22 @@ export default {
       --hero-item-background-position: left;
       @include for-mobile {
         --hero-item-background-position: 30%;
-        --hero-item-wrapper-text-align: right;
-        --hero-item-subtitle-width: 100%;
-        --hero-item-title-width: 100%;
-        --hero-item-wrapper-padding: var(--spacer-sm) var(--spacer-sm)
-          var(--spacer-sm) var(--spacer-2xl);
+        ::v-deep .sf-hero-item__subtitle,
+        ::v-deep .sf-hero-item__title {
+          text-align: right;
+          width: 100%;
+          padding-left: var(--spacer-sm);
+        }
       }
     }
   }
+  ::v-deep .sf-hero__control {
+    &--right,
+    &--left {
+      display: none;
+    }
+  }
 }
-
-::v-deep .sf-hero__controls {
-  --hero-controls-display: none;
-}
-
 .banner-grid {
   --banner-container-width: 50%;
   margin: var(--spacer-xl) 0;
@@ -299,10 +279,10 @@ export default {
     margin: var(--spacer-2xl) 0;
     ::v-deep .sf-link {
       --button-width: auto;
+      text-decoration: none;
     }
   }
 }
-
 .banner {
   &__tshirt {
     background-position: left;
@@ -313,7 +293,6 @@ export default {
     }
   }
 }
-
 .similar-products {
   display: flex;
   justify-content: space-between;
@@ -327,17 +306,15 @@ export default {
     padding-bottom: 0;
   }
 }
-
 .call-to-action {
   background-position: right;
   margin: var(--spacer-xs) 0;
   @include for-desktop {
     margin: var(--spacer-xl) 0 var(--spacer-2xl) 0;
   }
 }
-
 .carousel {
-  margin: 0 calc(var(--spacer-sm) * -1) 0 0;
+  margin: 0 calc(0 - var(--spacer-sm)) 0 0;
   @include for-desktop {
     margin: 0;
   }
@@ -350,5 +327,10 @@ export default {
       --product-card-add-button-transform: translate3d(0, 30%, 0);
     }
   }
+  ::v-deep .sf-arrow--long .sf-arrow--right {
+    --arrow-icon-transform: rotate(180deg);
+    -webkit-transform-origin: center;
+    transform-origin: center;
+  }
 }
 </style>