Merged in fix/SW-2121 (pull request #1747)

SW-2121: Fix issue where closing SidePeeks would trigger other click events

* fix: replace div with Button in BookingWidget to align press events

* fix: replace div with Button in ImageGallery to align press events


Approved-by: Michael Zetterberg

apps/scandic-web/components/BookingWidget/MobileToggleButton/button.module.css

@@ -1,5 +1,6 @@
 .complete,
 .partial {
+  border: none;
   align-items: center;
   box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
   cursor: pointer;
@@ -8,6 +9,12 @@
   padding: var(--Spacing-x2);
   z-index: 1;
   background-color: var(--Base-Surface-Primary-light-Normal);
+  width: 100%;
+  /* In some cases the lingering pressend event will trigger the */
+  /* webkit tap styling (but not triggering the buttons press event) */
+  /* To avoid this "flash" the styling is set to transparent) */
+  /* It is a non-standard css proprty, so shouldn't have too much of an effect on accessibility. */
+  -webkit-tap-highlight-color: transparent;
 }
 
 .complete {
@@ -15,12 +22,31 @@
 }
 
 .partial {
-  grid-template-columns: minmax(auto, 150px) min-content minmax(
-      auto,
-      150px
-    ) auto;
+  grid-template-columns:
+    minmax(auto, 150px) min-content minmax(auto, 150px)
+    auto;
 }
 
+.block {
+  display: block;
+}
+
+.block > * {
+  display: block;
+  text-align: start;
+}
+
+.blockLabel {
+  color: var(--Scandic-Red-Default);
+}
+
+.locationAndDate {
+  color: var(--Scandic-Grey-100);
+}
+
+.placeholder {
+  color: var(--Text-Interactive-Placeholder);
+}
 .icon {
   align-items: center;
   background-color: var(--Base-Button-Primary-Fill-Normal);