From f1839d7b45b6bbee87c9f07dfab58f5514098873 Mon Sep 17 00:00:00 2001
From: Hrishikesh Vaipurkar <hrishikesh.vaipurkar@scandichotels.com>
Date: Mon, 7 Jul 2025 09:24:50 +0000
Subject: [PATCH] Merged in feat/SW-2500-sync-hotel-images- (pull request
 #2504)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat: SW-2500 Updated the default image as placeholder when missing

* feat: SW-2500 Updated the default image as placeholder when missing

* feat: SW-2500 Updated to new tokens


Approved-by: Matilda Landström
---
 .../ImageGallery/imageGallery.module.css       | 18 ++++++------------
 .../components/ImageGallery/index.tsx          |  6 +++++-
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/apps/scandic-web/components/ImageGallery/imageGallery.module.css b/apps/scandic-web/components/ImageGallery/imageGallery.module.css
index ee8fa6013..20e53cb6f 100644
--- a/apps/scandic-web/components/ImageGallery/imageGallery.module.css
+++ b/apps/scandic-web/components/ImageGallery/imageGallery.module.css
@@ -50,16 +50,10 @@
   height: 100%;
   min-height: 190px;
   width: 100%;
-  background-color: #fff;
-  background-image:
-    linear-gradient(45deg, #000000 25%, transparent 25%),
-    linear-gradient(-45deg, #000000 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #000000 75%),
-    linear-gradient(-45deg, transparent 75%, #000000 75%);
-  background-size: 180px 180px;
-  background-position:
-    0 0,
-    0 90px,
-    90px -90px,
-    -90px 0;
+  background-color: var(--Surface-Feedback-Neutral);
+  border-radius: inherit;
+  color: var(--Icon-Interactive-Disabled);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
diff --git a/apps/scandic-web/components/ImageGallery/index.tsx b/apps/scandic-web/components/ImageGallery/index.tsx
index 94eb74ad9..68af78a6f 100644
--- a/apps/scandic-web/components/ImageGallery/index.tsx
+++ b/apps/scandic-web/components/ImageGallery/index.tsx
@@ -29,7 +29,11 @@ function ImageGallery({
   const imageProps = fill ? { fill, sizes } : { height, width: height * 1.5 }
 
   if (!images || images.length === 0 || imageError) {
-    return <div className={styles.imagePlaceholder} />
+    return (
+      <div className={styles.imagePlaceholder}>
+        <MaterialIcon icon="imagesmode" size={32} color="CurrentColor" />
+      </div>
+    )
   }
 
   const firstImage = images[0]