Merged in fix/bookingwidget-fixes (pull request #2135)

Fix: (#SW-2663) bookingwidget mobile - Space around, border-radius and correct color on date field

* fix: booking widget mobile - padding around booking widget and date color

* Fixed rounded corners

* Reduced minimum size of column


Approved-by: Joakim Jäderberg

apps/scandic-web/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidget.module.css

@@ -26,3 +26,9 @@
     }
   }
 }
+
+@media screen and (max-width: 767px) {
+  .floatingBookingWidget {
+    padding: 0 0.5rem;
+  }
+}

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

@@ -15,6 +15,7 @@
   /* 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;
+  border-radius: 10px;
 }
 
 .complete {
@@ -23,7 +24,7 @@
 
 .partial {
   grid-template-columns:
-    minmax(auto, 150px) min-content minmax(auto, 150px)
+    minmax(auto, 120px) min-content minmax(auto, 120px)
     auto;
 }
 

apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx

@@ -119,7 +119,7 @@ export default function MobileToggleButton({
               <span className={styles.blockLabel}>{totalNightsMsg}</span>
             </Typography>
             <Typography variant={"Body/Paragraph/mdRegular"}>
-              <span>
+              <span className={styles.placeholder}>
                 {intl.formatMessage(
                   {
                     defaultMessage: "{selectedFromDate} - {selectedToDate}",
@@ -183,7 +183,7 @@ export function MobileToggleButtonSkeleton() {
             })}
           </span>
         </Typography>
-        <SkeletonShimmer display={"block"} height="24px" />
+        <SkeletonShimmer display={"block"} height="20px" width="11ch" />
       </span>
       <Divider color="baseSurfaceSubtleNormal" variant="vertical" />
       <span className={styles.block}>
@@ -198,7 +198,7 @@ export function MobileToggleButtonSkeleton() {
             )}
           </span>
         </Typography>
-        <SkeletonShimmer display={"block"} height="24px" />
+        <SkeletonShimmer display={"block"} height="20px" width="13ch" />
       </span>
       <span className={styles.icon}>
         <MaterialIcon icon="search" color="Icon/Inverted" />