fix(SW-952): New HotelCard for Map in mobile

components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css

@@ -10,7 +10,7 @@
 .dialogContainer {
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Medium);
-  min-width: 334px;
+  min-width: 402px;
   background: var(--Base-Surface-Primary-light-Normal);
   box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
   flex-direction: row;
@@ -18,83 +18,125 @@
   position: relative;
 }
 
+.dialogContainer[data-type="listing"] {
+  min-width: 358px;
+}
+
+.dialogContainer[data-type="listing"] .header {
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x-one-and-half);
+}
+
 .name {
   height: 48px;
+  max-width: 180px;
+  margin-bottom: var(--Spacing-x-half);
   display: flex;
   align-items: center;
 }
 
 .closeIcon {
   position: absolute;
-  top: 7px;
-  right: 7px;
+  top: 8px;
+  right: 8px;
 }
-
-.imageContainer {
-  position: relative;
-  min-width: 177px;
-  border-radius: var(--Corner-radius-Medium) 0 0 var(--Corner-radius-Medium);
-  overflow: hidden;
-}
-
-.imageContainer img {
-  object-fit: cover;
-}
-
-.tripAdvisor {
-  position: absolute;
-  display: block;
-  left: 7px;
-  top: 7px;
-}
-
 .content {
   width: 100%;
   min-width: 220px;
   padding: var(--Spacing-x-one-and-half);
-  gap: var(--Spacing-x1);
   display: flex;
   flex-direction: column;
 }
 
+.dialogContainer[data-type="listing"] .content {
+  gap: var(--Spacing-x-one-and-half);
+}
+
 .facilities {
   display: flex;
   flex-wrap: wrap;
   gap: 0 var(--Spacing-x1);
 }
 
+.dialogContainer[data-type="listing"] .facilities {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  white-space: nowrap;
+  position: relative;
+  padding-right: 20px;
+  gap: 0 var(--Spacing-x1);
+  max-width: 242px;
+}
+.dialogContainer[data-type="listing"] .facilities::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 20px;
+  height: 100%;
+  background: linear-gradient(
+    to left,
+    rgba(255, 255, 255, 1),
+    rgba(255, 255, 255, 0)
+  );
+  pointer-events: none;
+}
+
 .facilitiesItem {
   display: flex;
   align-items: center;
   gap: var(--Spacing-x-half);
 }
 
+.dialogContainer[data-type="listing"] .facilitiesItem {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--Spacing-x-half);
+}
+
 .priceCard {
   border-radius: var(--Corner-radius-Medium);
   padding: var(--Spacing-x-half) var(--Spacing-x1);
   background: var(--Base-Surface-Secondary-light-Normal);
+  margin-top: var(--Spacing-x1);
 }
 
 .prices {
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x1);
+  justify-content: space-between;
 }
 
-.imagePlaceholder {
-  height: 100%;
-  width: 100%;
-  background-color: #fff;
-  background-image: linear-gradient(45deg, #000000 25%, transparent 25%),
-    linear-gradient(-45deg, #000000 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #000000 75%),
-    linear-gradient(-45deg, transparent 75%, #000000 75%);
-  background-size: 120px 120px;
-  background-position:
-    0 0,
-    0 60px,
-    60px -60px,
-    -60px 0;
+.bottomContainer {
+  display: flex;
+  flex-direction: row;
+  border-top: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+  padding-top: var(--Spacing-x2);
+  padding-bottom: var(--Spacing-x-half);
+}
+
+.pricesContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+  justify-content: space-between;
+}
+
+.dialogContainer[data-type="listing"] .pricesContainer {
+  flex: 1;
+  height: 44px;
+  gap: 0;
+  justify-content: flex-start;
+}
+
+.listingPrices {
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x1);
 }
 
 .perNight {
@@ -106,9 +148,6 @@
 }
 
 @media (min-width: 768px) {
-  .facilities {
-    display: none;
-  }
   .dialog {
     bottom: 32px;
   }