Merged in fix/SW-3007-meeting-image-max-seatings (pull request #2528)

fix(SW-3007): Added fallback image and check if maxSeatings exists

* fix(SW-3007): Added fallback image and check if maxSeatings exists

* fix(SW-3007): use image fallback component

* fix(SW-3007):  change to new tokens

* fix(SW-3007): change to table structure


Approved-by: Hrishikesh Vaipurkar
Approved-by: Matilda Landström

apps/scandic-web/components/ImageGallery/imageGallery.module.css

@@ -45,15 +45,3 @@
   object-fit: cover;
   border-radius: inherit;
 }
-
-.imagePlaceholder {
-  height: 100%;
-  min-height: 190px;
-  width: 100%;
-  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

@@ -10,6 +10,8 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 import Image from "@/components/Image"
 import Lightbox from "@/components/Lightbox"
 
+import ImageFallback from "../ImageFallback"
+
 import styles from "./imageGallery.module.css"
 
 import type { ImageGalleryProps } from "@/types/components/imageGallery"
@@ -29,11 +31,7 @@ function ImageGallery({
   const imageProps = fill ? { fill, sizes } : { height, width: height * 1.5 }
 
   if (!images || images.length === 0 || imageError) {
-    return (
-      <div className={styles.imagePlaceholder}>
-        <MaterialIcon icon="imagesmode" size={32} color="CurrentColor" />
-      </div>
-    )
+    return <ImageFallback />
   }
 
   const firstImage = images[0]