From 5488707624983201499ef77fbd5723228202e045 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Silke=20Gr=C3=BCber?=
 <57660644+SGrueber@users.noreply.github.com>
Date: Thu, 29 Oct 2020 12:52:51 +0100
Subject: [PATCH] fix: improve the ui of out-of-stock products on the cart page
 after a failing cart validation (#443)

---
 .../shopping-basket-empty.component.html         | 16 +++++++---------
 .../basket-validation-items.component.html       |  4 +---
 .../basket-validation-products.component.html    |  4 +---
 src/styles/pages/checkout/shopping-cart.scss     |  2 +-
 4 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/app/pages/basket/shopping-basket-empty/shopping-basket-empty.component.html b/src/app/pages/basket/shopping-basket-empty/shopping-basket-empty.component.html
index d5ffd78a0a..e75be827c0 100644
--- a/src/app/pages/basket/shopping-basket-empty/shopping-basket-empty.component.html
+++ b/src/app/pages/basket/shopping-basket-empty/shopping-basket-empty.component.html
@@ -1,15 +1,13 @@
-<div class="empty-cart">
-  <div>
-    <!-- Error message -->
-    <ish-error-message [error]="error"></ish-error-message>
+<!-- Error message -->
+<ish-error-message [error]="error"></ish-error-message>
 
-    <!-- Info messages -->
-    <ish-basket-info></ish-basket-info>
+<!-- Info messages -->
+<ish-basket-info></ish-basket-info>
 
-    <!-- Validation messages-->
-    <ish-basket-validation-results></ish-basket-validation-results>
-  </div>
+<!-- Validation messages-->
+<ish-basket-validation-results></ish-basket-validation-results>
 
+<div class="empty-cart">
   <img class="empty-cart-icon" src="assets/img/empty-cart.png" alt="{{ 'shopping_cart.empty.alt.text' | translate }}" />
 
   <h2>{{ 'shopping_cart.empty.text' | translate }}</h2>
diff --git a/src/app/shared/components/basket/basket-validation-items/basket-validation-items.component.html b/src/app/shared/components/basket/basket-validation-items/basket-validation-items.component.html
index 3a6fd34ccd..29251c8380 100644
--- a/src/app/shared/components/basket/basket-validation-items/basket-validation-items.component.html
+++ b/src/app/shared/components/basket/basket-validation-items/basket-validation-items.component.html
@@ -16,9 +16,7 @@
         </div>
         <!---Product Description --->
         <div class="col-5 col-md-4 list-item">
-          <div class="product-title">
-            <a [routerLink]="product | ishProductRoute">{{ product.name }}</a>
-          </div>
+          <a [routerLink]="product | ishProductRoute">{{ product.name }}</a>
           <p class="product-id">{{ 'product.itemNumber.label' | translate }}&nbsp;{{ pli.productSKU }}</p>
 
           <!---Out of Stock --->
diff --git a/src/app/shared/components/basket/basket-validation-products/basket-validation-products.component.html b/src/app/shared/components/basket/basket-validation-products/basket-validation-products.component.html
index 235b589554..8a01bd82b3 100644
--- a/src/app/shared/components/basket/basket-validation-products/basket-validation-products.component.html
+++ b/src/app/shared/components/basket/basket-validation-products/basket-validation-products.component.html
@@ -19,9 +19,7 @@
             </div>
             <!---Product Description --->
             <div class="col-7 col-md-6 list-item">
-              <div class="product-title">
-                <a [routerLink]="product | ishProductRoute">{{ product.name }}</a>
-              </div>
+              <a [routerLink]="product | ishProductRoute" class="product-title">{{ product.name }}</a>
               <p class="product-id">{{ 'product.itemNumber.label' | translate }}&nbsp;{{ product.sku }}</p>
             </div>
 
diff --git a/src/styles/pages/checkout/shopping-cart.scss b/src/styles/pages/checkout/shopping-cart.scss
index a029072a2b..86efcc7b4c 100644
--- a/src/styles/pages/checkout/shopping-cart.scss
+++ b/src/styles/pages/checkout/shopping-cart.scss
@@ -244,7 +244,7 @@
   border-bottom: $border-width-default solid $border-color-light;
 
   .empty-cart-icon {
-    padding: ($space-default * 7) 0 ($space-default * 2);
+    padding: ($space-default * 4) 0 ($space-default * 2);
   }
 
   h2 {