feat: SW-276 SW-565 Updated UI

components/GuestsRoomsPicker/guests-rooms-picker.module.css

@@ -1,14 +1,13 @@
 .container {
   overflow: hidden;
   position: relative;
-  z-index: 10;
   &[data-isopen="true"] {
     overflow: visible;
   }
 }
 .roomContainer {
   display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Spacing-x2);
 }
 .roomDetailsContainer {
   display: grid;
@@ -17,14 +16,9 @@
 }
 .hideWrapper {
   background-color: var(--Main-Grey-White);
-  border-radius: var(--Corner-radius-Medium);
-  box-shadow: 0px 16px 24px 0px rgba(0, 0, 0, 0.08);
-  padding: var(--Spacing-x-one-and-half);
-  position: absolute;
-  /** BookingWidget padding + border-width */
-  top: calc(100% + var(--Spacing-x2) + 1px);
-  width: 360px;
-  max-width: 100vw; /* for small screens having view port width of 320px */
+}
+.roomHeading {
+  margin-bottom: var(--Spacing-x1);
 }
 .btn {
   background: none;
@@ -41,5 +35,83 @@
   display: grid;
   gap: var(--Spacing-x1);
   grid-template-columns: auto;
-  margin-top: 10px;
+  margin-top: var(--Spacing-x2);
+}
+
+@media screen and (max-width: 1366px) {
+  .hideWrapper {
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    position: fixed;
+    right: 0;
+    top: 100%;
+    transition: top 300ms ease;
+    z-index: 10002;
+  }
+
+  .container[data-isopen="true"] .hideWrapper {
+    top: 0;
+  }
+
+  .header {
+    background-color: var(--Main-Grey-White);
+    display: grid;
+    padding: var(--Spacing-x3) var(--Spacing-x2);
+  }
+
+  .close {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    justify-self: flex-end;
+    padding: 0;
+  }
+
+  .roomContainer {
+    padding: 0 var(--Spacing-x2);
+  }
+
+  .footer {
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0) 7.5%,
+      #ffffff 82.5%
+    );
+    padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x7);
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 10;
+  }
+
+  .footer button {
+    width: 100%;
+  }
+
+  .footer .hideOnMobile {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .hideWrapper {
+    border-radius: var(--Corner-radius-Large);
+    box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
+    left: calc((var(--Spacing-x1) + var(--Spacing-x2)) * -1);
+    max-width: calc(100vw - 20px);
+    padding: var(--Spacing-x2) var(--Spacing-x3);
+    position: absolute;
+    top: calc(100% + var(--Spacing-x2) + 1px + var(--Spacing-x4));
+    width: 360px;
+  }
+
+  .header {
+    display: none;
+  }
+
+  .footer .hideOnDesktop {
+    display: none;
+  }
 }