Merged in feature/SW-3595-sas-info-boxes (pull request #3177)

Feature/SW-3595 Add info boxes to SAS start page & Eurobonus alert to select-hotel page on SAS

* wip

* feat(SW-3595): Add info boxes to SAS start page

* Add InfoBox to design-system
* Add background gradient to SAS start page

* update variable naming and conditionalize the eurobonus message on select-hotel

* SAS startpage update default message

* make select-hotel a bit more generic with slot={} instead of alert={}


Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/SelectHotel/selectHotel.module.css

@@ -1,14 +1,38 @@
 .main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x5);
+  justify-items: center;
+  padding-top: var(--Space-x4);
+}
+
+.topSlotContainer {
+  width: var(--max-width-page);
+  margin: 0 auto;
+}
+
+.availabilityContainer {
   display: flex;
   background-color: var(--Scandic-Brand-Warm-White);
   min-height: min(100dvh, 750px);
   flex-direction: column;
-  max-width: var(--max-width-page);
+  width: var(--max-width-page);
   margin: 0 auto;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    gap: var(--Space-x5);
+    flex-wrap: wrap;
+  }
 }
 
 .header {
   padding: var(--Space-x3) 0 var(--Space-x2);
+
+  @media (min-width: 768px) {
+    background-color: var(--Base-Surface-Subtle-Normal);
+    padding: var(--Space-x4) 0 var(--Space-x3);
+  }
 }
 
 .headerContent {
@@ -17,6 +41,9 @@
   display: flex;
   flex-direction: column;
   gap: var(--Space-x2);
+  @media (min-width: 768px) {
+    display: block;
+  }
 }
 
 .cityInformation {
@@ -28,19 +55,37 @@
 
 .sorter {
   display: none;
+
+  @media (min-width: 768px) {
+    display: block;
+    width: 339px;
+  }
 }
 
 .sideBar {
   display: flex;
   flex-direction: column;
+
+  @media (min-width: 768px) {
+    max-width: 340px;
+  }
 }
 
 .sideBarItem {
   display: none;
+
+  @media (min-width: 768px) {
+    display: block;
+  }
 }
 
 .link {
   display: none;
+
+  @media (min-width: 768px) {
+    display: flex;
+    margin-bottom: var(--Space-x6);
+  }
 }
 
 .hotelList {
@@ -56,59 +101,26 @@
 
 .skeletonContainer .title {
   margin-bottom: var(--Space-x3);
+
+  @media (min-width: 768px) {
+    margin-bottom: 0;
+  }
 }
-
-@media (min-width: 768px) {
-  .main {
-    padding: var(--Space-x5) 0;
-    flex-direction: row;
-    gap: var(--Space-x5);
-    flex-wrap: wrap;
-  }
-
-  .headerContent {
-    display: block;
-  }
-
-  .header {
-    background-color: var(--Base-Surface-Subtle-Normal);
-    padding: var(--Space-x4) 0 var(--Space-x3);
-  }
-
-  .sorter {
-    display: block;
-    width: 339px;
-  }
-
-  .title {
+.title {
+  @media (min-width: 768px) {
     margin: 0 auto;
     display: flex;
     max-width: var(--max-width-navigation);
     align-items: center;
     justify-content: space-between;
   }
+}
 
-  .sideBar {
-    max-width: 340px;
-  }
-
-  .sideBarItem {
-    display: block;
-  }
-
+@media (min-width: 768px) {
   .filter {
     display: block;
   }
 
-  .link {
-    display: flex;
-    margin-bottom: var(--Space-x6);
-  }
-
-  .skeletonContainer .title {
-    margin-bottom: 0;
-  }
-
   .skeletonContainer .sideBar {
     gap: var(--Space-x3);
   }