From a406e672b4dc81cfad65cc307644cc232ee98783 Mon Sep 17 00:00:00 2001
From: Filip Drozd <fpdrozd@gmail.com>
Date: Thu, 23 Mar 2023 10:36:18 +0100
Subject: [PATCH] refactor: add width and height properties to SfImage

---
 packages/theme/components/AppHeader.vue       |  2 +-
 packages/theme/components/RelatedProducts.vue |  8 ++++++++
 packages/theme/components/SearchResults.vue   | 16 +++++++++++++---
 packages/theme/pages/Category.vue             |  8 ++++++++
 packages/theme/pages/Checkout/Payment.vue     |  9 ++++++---
 packages/theme/pages/Product.vue              |  7 ++++++-
 6 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
index d9f23073..a9cd47e2 100644
--- a/packages/theme/components/AppHeader.vue
+++ b/packages/theme/components/AppHeader.vue
@@ -9,7 +9,7 @@
       <!-- TODO: add mobile view buttons after SFUI team PR -->
       <template #logo>
         <a :href="localePath('/')" class="sf-header__logo">
-          <SfImage src="/icons/logo.svg" :alt="$t('components.app_header.alt_header_logo')" class="sf-header__logo-image"/>
+          <SfImage src="/icons/logo.svg" :alt="$t('components.app_header.alt_header_logo')" class="sf-header__logo-image" width="35" height="35"/>
         </a>
       </template>
       <template #navigation>
diff --git a/packages/theme/components/RelatedProducts.vue b/packages/theme/components/RelatedProducts.vue
index f3a84de1..23c28292 100644
--- a/packages/theme/components/RelatedProducts.vue
+++ b/packages/theme/components/RelatedProducts.vue
@@ -9,6 +9,8 @@
           <SfProductCard
             :title="productGetters.getName(product)"
             :image="productGetters.getCoverImage(product)"
+            :imageWidth="216"
+            :imageHeight="240"
             :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
             :special-price="productGetters.getPrice(product).special && $n(productGetters.getPrice(product).special, 'currency')"
             :max-rating="5"
@@ -95,6 +97,12 @@ export default {
   &__item {
     margin: 1.9375rem 0 2.4375rem 0;
   }
+  .product-card {
+    ::v-deep img {
+      width: 100%;
+      height: auto;
+    }
+  }
 }
 
 </style>
diff --git a/packages/theme/components/SearchResults.vue b/packages/theme/components/SearchResults.vue
index fa60caf6..b352a294 100644
--- a/packages/theme/components/SearchResults.vue
+++ b/packages/theme/components/SearchResults.vue
@@ -43,6 +43,8 @@
                   :score-rating="productGetters.getAverageRating(product)"
                   :reviews-count="7"
                   :image="productGetters.getCoverImage(product)"
+                  :imageWidth="216"
+                  :imageHeight="240"
                   :alt="productGetters.getName(product)"
                   :title="productGetters.getName(product)"
                   :link="localePath(`/p/${productGetters.getId(product)}/${productGetters.getSlug(product)}`)"
@@ -60,6 +62,8 @@
                 :score-rating="productGetters.getAverageRating(product)"
                 :reviews-count="7"
                 :image="productGetters.getCoverImage(product)"
+                :imageWidth="216"
+                :imageHeight="240"
                 :alt="productGetters.getName(product)"
                 :title="productGetters.getName(product)"
                 :link="localePath(`/p/${productGetters.getId(product)}/${productGetters.getSlug(product)}`)"
@@ -73,7 +77,7 @@
           </div>
         </div>
         <div v-else key="no-results" class="before-results">
-          <SfImage src="/error/error.svg" class="before-results__picture" :alt="$t('components.search_results.alt_error')" loading="lazy"/>
+          <SfImage src="/error/error.svg" class="before-results__picture" :alt="$t('components.search_results.alt_error')" loading="lazy" width="300" height="300" />
           <template v-if="term">
             <p class="before-results__paragraph">{{ $t('components.search_results.we_havent_found_any_results_for_given_phrase') }}</p>
           </template>
@@ -233,6 +237,10 @@ export default {
   @include for-desktop {
     margin: var(--spacer-2xs) 0;
   }
+  ::deep img {
+    width: 100%;
+    height: auto;
+  }
 }
 
 .before-results {
@@ -244,10 +252,12 @@ export default {
     padding: 0;
   }
   &__picture {
-    --image-width: 230px;
     margin-top: var(--spacer-2xl);
     @include for-desktop {
-      --image-width: 18.75rem;
+      ::v-deep img {
+        width: 18.75rem;
+        height: auto;
+      }
       margin-top: var(--spacer-base);
     }
   }
diff --git a/packages/theme/pages/Category.vue b/packages/theme/pages/Category.vue
index dcde5fcc..4a3e5ccc 100644
--- a/packages/theme/pages/Category.vue
+++ b/packages/theme/pages/Category.vue
@@ -91,6 +91,8 @@
               :style="{ '--index': i }"
               :title="productGetters.getName(product)"
               :image="productGetters.getCoverImage(product)"
+              :imageWidth="216"
+              :imageHeight="240"
               :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
               :special-price="productGetters.getPrice(product).special && $n(productGetters.getPrice(product).special, 'currency')"
               :show-add-to-cart-button="true"
@@ -120,6 +122,8 @@
               :title="productGetters.getName(product)"
               :description="productGetters.getDescription(product)"
               :image="productGetters.getCoverImage(product)"
+              :imageWidth="216"
+              :imageHeight="240"
               :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
               :special-price="productGetters.getPrice(product).special && $n(productGetters.getPrice(product).special, 'currency')"
               :is-in-wishlist="isInWishlist({ product })"
@@ -395,6 +399,10 @@ export default {
       --product-card-add-button-bottom: var(--spacer-base);
       --product-card-title-margin: var(--spacer-sm) 0 0 0;
     }
+    ::v-deep img {
+      width: 100%;
+      height: auto;
+    }
   }
   &__product-card-horizontal {
     flex: 0 0 100%;
diff --git a/packages/theme/pages/Checkout/Payment.vue b/packages/theme/pages/Checkout/Payment.vue
index b418f593..3a4ee8a3 100644
--- a/packages/theme/pages/Checkout/Payment.vue
+++ b/packages/theme/pages/Checkout/Payment.vue
@@ -22,7 +22,7 @@
         class="table__row"
       >
         <SfTableData class="table__image">
-          <SfImage :src="cartGetters.getItemImage(product)" :alt="cartGetters.getItemName(product)" />
+          <SfImage :src="cartGetters.getItemImage(product)" :alt="cartGetters.getItemName(product)" :width="82" :height="100"/>
         </SfTableData>
         <SfTableData class="table__data table__description table__data">
           <div class="product-title">{{ cartGetters.getItemName(product) }}</div>
@@ -67,7 +67,7 @@
         <SfCheckbox v-e2e="'terms'" v-model="terms" name="terms" class="summary__terms">
           <template #label>
             <div class="sf-checkbox__label">
-              {{ $t('pages.checkout.payment.i_agree_to') }} <SfLink href="#"> {{ $t('pages.checkout.payment.terms_and_conditions') }}</SfLink>
+              {{ $t('pages.checkout.payment.i_agree_to') }} <SfLink link="/"> {{ $t('pages.checkout.payment.terms_and_conditions') }}</SfLink>
             </div>
           </template>
         </SfCheckbox>
@@ -201,7 +201,10 @@ export default {
       flex: 0 0 12rem;
     }
     &__image {
-      --image-width: 5.125rem;
+      ::v-deep img {
+        width: 5.125rem;
+        height: auto;
+      }
       text-align: left;
       margin: 0 var(--spacer-xl) 0 0;
     }
diff --git a/packages/theme/pages/Product.vue b/packages/theme/pages/Product.vue
index c7797a48..cba674be 100644
--- a/packages/theme/pages/Product.vue
+++ b/packages/theme/pages/Product.vue
@@ -6,7 +6,7 @@
     />
     <div class="product">
       <LazyHydrate when-idle>
-        <SfGallery :images="productGallery" class="product__gallery" />
+        <SfGallery :images="productGallery" :imageWidth="422" :imageHeight="664" class="product__gallery" />
       </LazyHydrate>
 
       <div class="product__info">
@@ -373,6 +373,11 @@ export default {
   }
   &__gallery {
     flex: 1;
+
+    ::v-deep img {
+      width: 100%;
+      height: auto;
+    }
   }
 }
 .breadcrumbs {