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/ImageFallback/imageFallback.module.css

@@ -0,0 +1,8 @@
+.imageFallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  width: 100%;
+  background-color: var(--Surface-Feedback-Neutral);
+}

apps/scandic-web/components/ImageFallback/index.tsx

@@ -0,0 +1,23 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import styles from "./imageFallback.module.css"
+
+interface ImageFallbackProps {
+  width?: string
+  height?: string
+}
+
+export default function ImageFallback({
+  width = "100%",
+  height = "200px",
+}: ImageFallbackProps) {
+  return (
+    <div className={styles.imageFallback} style={{ width, height }}>
+      <MaterialIcon
+        icon="imagesmode"
+        size={32}
+        color="Icon/Interactive/Disabled"
+      />
+    </div>
+  )
+}