From af859a9b9672c21742a047c87db14e6be28f8c42 Mon Sep 17 00:00:00 2001
From: azkyakhan <azkya.khan@hotwax.co>
Date: Wed, 19 May 2021 15:13:48 +0530
Subject: [PATCH 1/2] Refactored styling of product page (#621)

---
 CHANGELOG.md                                  |  7 +++
 components/atoms/a-product-rating.vue         |  5 +-
 .../molecules/m-product-add-to-cart.vue       |  2 +
 .../molecules/m-product-additional-info.vue   |  9 ++-
 components/molecules/m-product-gallery.vue    |  3 -
 .../m-product-options-configurable.vue        | 36 ++++--------
 components/molecules/m-product-short-info.vue | 40 ++++++++-----
 components/organisms/o-product-details.vue    | 56 +++++++++----------
 pages/Product.vue                             | 26 +++------
 9 files changed, 85 insertions(+), 99 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bff55673f..14bb0186c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Added `VueObserveVisibility` and `VueLazyload` dependency
 
+### Changed / Improved
+- Replaced flex with css grid in product galley and info(#621)
+- Removed margin from product rating(#621)
+- Renamed class of guide, compare and save actions(#621)
+- Updated margin of product additional info tabs(#621)
+- Formatted HTML markup and reordered CSS styles(#621)
+
 ## [1.0.4] - 04.01.2020
 
 ### Added
diff --git a/components/atoms/a-product-rating.vue b/components/atoms/a-product-rating.vue
index d4b3cd203..1a055f99d 100644
--- a/components/atoms/a-product-rating.vue
+++ b/components/atoms/a-product-rating.vue
@@ -47,12 +47,11 @@ export default {
   &__rating {
     display: flex;
     align-items: center;
-    margin: var(--spacer-xs) 0 0 0;
   }
+
   &__count {
     color: var(--c-text);
-    text-decoration: none;
-    margin: 0 0 0 var(--spacer-xs);
+    margin-left: var(--spacer-xs);
   }
 }
 </style>
diff --git a/components/molecules/m-product-add-to-cart.vue b/components/molecules/m-product-add-to-cart.vue
index 7140b98c0..518188314 100644
--- a/components/molecules/m-product-add-to-cart.vue
+++ b/components/molecules/m-product-add-to-cart.vue
@@ -6,6 +6,7 @@
       :message="alert.message"
       :type="alert.type"
     />
+
     <SfAddToCart v-model="qty">
       <template #add-to-cart-btn>
         <AAddToCart
@@ -15,6 +16,7 @@
           :disabled="isAddToCartDisabled"
         />
       </template>
+
       <template #quantity-select-input>
         <AProductQuantity
           class="sf-add-to-cart__select-quantity"
diff --git a/components/molecules/m-product-additional-info.vue b/components/molecules/m-product-additional-info.vue
index a823ff055..3bf08e0a0 100644
--- a/components/molecules/m-product-additional-info.vue
+++ b/components/molecules/m-product-additional-info.vue
@@ -8,6 +8,7 @@
     <SfTab :title="$t('Description')">
       <div itemprop="description" v-html="product.description" />
     </SfTab>
+
     <SfTab :title="$t('Read reviews')" ref="reviewTab">
       <div class="review-header">
         <SfHeading
@@ -25,6 +26,7 @@
       <SfDivider v-show="reviewsCount" />
       <MReviewList v-show="reviewsCount" :reviews="reviews" />
     </SfTab>
+
     <SfTab v-if="attributes.length" :title="$t('Additional Information')">
       <AProductAttribute
         v-for="(attribute, i) in attributes"
@@ -102,13 +104,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 @import "~@storefront-ui/shared/styles/helpers/breakpoints";
 
 .product {
   &__tabs {
     margin: var(--spacer-lg) auto var(--spacer-2xl);
     @include for-desktop {
-      margin-top: var(--spacer-2xl);
+      margin-top: var(--spacer-xl);
       --tabs-content-tab-padding: var(--spacer-xl) 0 0 0;
     }
   }
@@ -117,10 +120,6 @@ export default {
   }
 }
 
-[itemprop="description"] > *:first-child {
-  margin-top: 0;
-}
-
 .review-header {
   display: flex;
   justify-content: space-between;
diff --git a/components/molecules/m-product-gallery.vue b/components/molecules/m-product-gallery.vue
index 312f49756..dc23a5bfd 100644
--- a/components/molecules/m-product-gallery.vue
+++ b/components/molecules/m-product-gallery.vue
@@ -73,7 +73,4 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.m-product-gallery {
-  flex: 1;
-}
 </style>
diff --git a/components/molecules/m-product-options-configurable.vue b/components/molecules/m-product-options-configurable.vue
index 9109ae5fd..7d4627d45 100644
--- a/components/molecules/m-product-options-configurable.vue
+++ b/components/molecules/m-product-options-configurable.vue
@@ -6,6 +6,7 @@
       :message="product.errors | formatProductMessages"
       type="danger"
     />
+
     <template v-for="attribute in productAttributes">
       <SfSelect
         :key="attribute.id"
@@ -23,6 +24,7 @@
           <SfProductOption :label="attributeOption.label" />
         </SfSelectOption>
       </SfSelect>
+
       <div v-else :key="attribute.id" class="product__colors">
         <p class="product__color-label">
           {{ attribute.label }}:
@@ -114,43 +116,27 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "~@storefront-ui/shared/styles/helpers/breakpoints";
 
-.m-product-options-configurable {
-  border-bottom: 1px solid #f1f2f3;
-  padding-bottom: 10px;
-  display: flex;
-  flex-wrap: wrap;
-  @include for-desktop {
-    border: 0;
-    padding-bottom: 0;
-  }
-}
-.attribute {
-  margin-bottom: var(--spacer-xl);
-}
+@import "~@storefront-ui/shared/styles/helpers/breakpoints";
 
 .product {
   &__select-size {
-    flex: 100%;
-    @include for-desktop {
-      margin: 0;
-    }
+    width: 100%;
+    margin-top: var(--spacer-base);
   }
+
   &__colors {
     display: flex;
-    flex: 100%;
-    order: 1;
+    width: 100%;
     align-items: center;
-    margin: var(--spacer-xl) 0 0;
-    @include for-desktop {
-      margin: var(--spacer-xl) 0 0;
-    }
   }
+
   &__color-label {
-    margin: 0 var(--spacer-base) 0 0;
+    margin-right: var(--spacer-base);
   }
+
   &__color {
+    border: 1px solid var(--c-light);
     margin: 0 var(--spacer-2xs);
   }
 }
diff --git a/components/molecules/m-product-short-info.vue b/components/molecules/m-product-short-info.vue
index 613711087..f2c5fc219 100644
--- a/components/molecules/m-product-short-info.vue
+++ b/components/molecules/m-product-short-info.vue
@@ -6,6 +6,7 @@
         :level="3"
         class="sf-heading--no-underline sf-heading--left"
       />
+
       <SfIcon
         icon="drag"
         size="xl"
@@ -26,6 +27,7 @@
         {{ $t("Read all {count} review", { count: reviewsCount }) }}
       </AProductRating>
     </div>
+
     <div
       class="product__description desktop-only"
       v-html="product.short_description || product.description"
@@ -78,32 +80,47 @@ export default {
   }
 };
 </script>
+
 <style lang="scss" scoped>
+
 @import "~@storefront-ui/shared/styles/helpers/breakpoints";
+
 @import "~@storefront-ui/shared/styles/helpers/typography";
 
 .product {
   &__header {
     display: flex;
     justify-content: space-between;
-    @include for-desktop {
-      margin: 0 auto;
-    }
   }
+
   &__drag-icon {
     animation: moveicon 1s ease-in-out infinite;
   }
+
+  @keyframes moveicon {
+  0% {
+    transform: translate3d(0, 0, 0);
+   }
+  50% {
+    transform: translate3d(0, 30%, 0);
+   }
+  100% {
+    transform: translate3d(0, 0, 0);
+   }
+ }
+
   &__price-and-rating {
     margin: var(--spacer-xs) 0 var(--spacer-base);
     align-items: center;
     @include for-desktop {
       display: flex;
       justify-content: space-between;
-      margin: var(--spacer-sm) 0 var(--spacer-lg) 0;
+      margin: var(--spacer-sm) 0 var(--spacer-lg);
     }
   }
+
   &__description {
-    color: var(--c-link);
+    color: var(--c-text);
     @include font(
       --product-description-font,
       var(--font-light),
@@ -113,16 +130,9 @@ export default {
     );
   }
 }
-
-@keyframes moveicon {
-  0% {
-    transform: translate3d(0, 0, 0);
-  }
-  50% {
-    transform: translate3d(0, 30%, 0);
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
+.a-product-rating {
+  @include for-mobile {
+    margin-top: var(--spacer-xs);
   }
 }
 </style>
diff --git a/components/organisms/o-product-details.vue b/components/organisms/o-product-details.vue
index 95f6f4507..0387858be 100644
--- a/components/organisms/o-product-details.vue
+++ b/components/organisms/o-product-details.vue
@@ -4,10 +4,12 @@
     <meta itemprop="price" :content="parseFloat(product.price_incl_tax).toFixed(2)">
     <meta itemprop="availability" :content="availability">
     <meta itemprop="url" :content="product.url_path">
+
     <MProductGallery
       :gallery="gallery"
       :configuration="productConfiguration"
     />
+
     <div class="product__info">
       <MProductShortInfo
         :product="product"
@@ -17,10 +19,11 @@
       <SfButton
         v-show="sizeOption"
         @click.native="openSizeGuide"
-        class="sf-button--text desktop-only product__guide"
+        class="sf-button--text desktop-only secondary-action"
       >
         {{ $t('Size guide') }}
       </SfButton>
+
       <div>
         <MProductOptionsConfigurable
           v-if="product.type_id =='configurable'"
@@ -45,6 +48,7 @@
           :stock="productStock"
         />
       </div>
+
       <MProductAdditionalInfo
         :product="product"
         :reviews="reviews"
@@ -53,6 +57,7 @@
     </div>
   </div>
 </template>
+
 <script>
 import get from 'lodash-es/get'
 import config from 'config';
@@ -146,42 +151,35 @@ export default {
   }
 };
 </script>
+
 <style lang="scss" scoped>
+
 @import "~@storefront-ui/shared/styles/helpers/breakpoints";
 
-.product {
-  @include for-desktop {
-    display: flex;
+.o-product-details {
+  @include for-desktop{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: var(--spacer-2xl);
   }
-  &__info {
-    margin: var(--spacer-sm) auto var(--spacer-xs);
-    padding: 0 var(--spacer-sm);
-    @include for-desktop {
-      max-width: 32.625rem;
-      margin: 0 0 0 7.5rem;
-      padding: 0;
-    }
-  }
-  &__add-to-cart {
-    margin: var(--spacer-base) 0 0;
-    @include for-desktop {
-      margin-top: var(--spacer-sm);
-    }
+}
+
+.product__info {
+  margin: var(--spacer-sm) auto var(--spacer-xs);
+  padding: 0 var(--spacer-sm);
+  @include for-desktop {
+    margin: 0;
   }
-  &__guide,
-  &__compare,
-  &__save {
+}
+
+.secondary-action {
     display: block;
     margin: var(--spacer-xl) 0 var(--spacer-base) auto;
-  }
+
 }
 
-.section {
-  border-bottom: 1px solid #f1f2f3;
-  padding-bottom: 10px;
-  @include for-desktop {
-    border: 0;
-    padding-bottom: 0;
-  }
+.m-product-add-to-cart {
+   margin: var(--spacer-base) 0;
 }
+
 </style>
diff --git a/pages/Product.vue b/pages/Product.vue
index ff5f60a85..010b4d801 100644
--- a/pages/Product.vue
+++ b/pages/Product.vue
@@ -7,6 +7,7 @@
         </router-link>
       </template>
     </SfBreadcrumbs>
+
     <OProductDetails
       :product="getCurrentProduct"
       :product-gallery="getProductGallery"
@@ -15,12 +16,14 @@
       :product-attributes="getCustomAttributes"
       :product-stock="stock"
     />
+
     <div class="product__bottom">
       <lazy-hydrate when-idle>
         <SfSection :title-heading="$t('We found other products you might like')">
           <MRelatedProducts type="upsell" />
         </SfSection>
       </lazy-hydrate>
+
       <lazy-hydrate when-idle>
         <SfSection v-show="banners.length">
           <router-link :key="i" :to="banner.link" v-for="(banner, i) in banners">
@@ -28,16 +31,18 @@
               :subtitle="banner.subtitle"
               :title="banner.title"
               :image="banner.image"
-              class="banner sf-banner--slim"
+              class="banner"
             />
           </router-link>
         </SfSection>
       </lazy-hydrate>
+
       <lazy-hydrate when-idle>
         <SfSection :title-heading="$t('Similar Products')">
           <MRelatedProducts type="related" />
         </SfSection>
       </lazy-hydrate>
+
       <SfSection
         v-if="isOnline"
         title-heading="Share Your Look"
@@ -232,6 +237,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 @import "~@storefront-ui/shared/styles/helpers/breakpoints";
 
 #product {
@@ -242,29 +248,11 @@ export default {
   }
 }
 
-.product__bottom {
-  box-sizing: border-box;
-  padding: 0 var(--spacer-sm);
-  @include for-desktop {
-    padding: 0;
-    max-width: 1272px;
-  }
-}
-
 .breadcrumbs {
   padding: var(--spacer-base) var(--spacer-base) var(--spacer-base) var(--spacer-sm);
 }
 
-::v-deep {
-  .product__colors button {
-      border: 1px solid var(--c-light);
-  }
-}
-
 .banner {
   margin: var(--spacer-xl) 0;
-  @include for-desktop {
-    margin: var(--spacer-2xl) 0;
-  }
 }
 </style>

From 6fafd63c87b8dd7f41e5429789d5f4f9c4047073 Mon Sep 17 00:00:00 2001
From: azkyakhan <azkya.khan@hotwax.co>
Date: Wed, 19 May 2021 17:48:54 +0530
Subject: [PATCH 2/2] Removed extra space in o-product-details (#621)

---
 components/organisms/o-product-details.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/organisms/o-product-details.vue b/components/organisms/o-product-details.vue
index 0387858be..d7ddf5270 100644
--- a/components/organisms/o-product-details.vue
+++ b/components/organisms/o-product-details.vue
@@ -175,7 +175,6 @@ export default {
 .secondary-action {
     display: block;
     margin: var(--spacer-xl) 0 var(--spacer-base) auto;
-
 }
 
 .m-product-add-to-cart {