Merged in feat/SW-2500-sync-hotel-images- (pull request #2504)

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

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;
 }

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]