feat/SW-843-UI-hotel-card-select-hotel (pull request #887)

Approved-by: Pontus Dreij
Approved-by: Niclas Edenvin

components/HotelReservation/HotelCard/hotelCard.module.css

@@ -1,15 +1,15 @@
 .card {
-  display: grid;
-  grid-template-areas:
-    "image header"
-    "hotel hotel"
-    "prices prices";
-  gap: var(--Spacing-x2);
-  padding: var(--Spacing-x2);
+  display: flex;
+  flex-direction: column;
   background-color: var(--Base-Surface-Primary-light-Normal);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Medium);
   width: 100%;
+  overflow: hidden;
+}
+
+.card.active {
+  border: 1px solid var(--Base-Border-Hover);
 }
 
 .card.active {
@@ -17,14 +17,9 @@
 }
 
 .imageContainer {
-  grid-area: image;
   position: relative;
-  height: 100%;
-  width: 116px;
-}
-
-.tripAdvisor {
-  display: none;
+  height: 200px;
+  width: 100%;
 }
 
 .imageContainer img {
@@ -32,19 +27,41 @@
 }
 
 .hotelInformation {
-  grid-area: header;
+  margin-bottom: var(--Spacing-x-half);
 }
 
-.hotel {
+.hotelContent {
   display: flex;
   flex-direction: column;
-  grid-area: hotel;
+  padding: var(--Spacing-x2);
 }
 
+.hotelDescription {
+  display: none;
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+  margin-top: var(--Spacing-x-half);
+}
+
+.addressContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--Spacing-x1);
+}
+
+.address {
+  display: none;
+  font-style: normal;
+}
 .facilities {
   display: flex;
   flex-wrap: wrap;
   gap: var(--Spacing-x1);
+  margin-top: var(--Spacing-x-one-and-half);
 }
 
 .facilitiesItem {
@@ -56,78 +73,70 @@
 .prices {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
-  grid-area: prices;
+  gap: var(--Spacing-x-one-and-half);
+  width: 100%;
 }
 
-.public,
-.member {
-  max-width: fit-content;
-  margin-bottom: var(--Spacing-x-half);
+.detailsButton {
+  border-bottom: none;
 }
 
 .button {
-  justify-content: center;
-}
-
-.address {
-  display: none;
+  min-width: 160px;
 }
 
 @media screen and (min-width: 1367px) {
   .card.pageListing {
-    grid-template-areas:
-      "image header"
-      "image hotel"
-      "image prices";
+    flex-direction: row;
     overflow: hidden;
     padding: 0;
   }
 
-  .pageListing .imageContainer {
-    position: relative;
-    min-height: 200px;
-    width: 518px;
+  .pageListing .hotelDescription {
+    display: block;
   }
 
-  .pageListing .tripAdvisor {
-    position: absolute;
-    display: block;
-    left: 7px;
-    top: 7px;
+  .pageListing .imageContainer {
+    position: relative;
+    height: 100%;
+    width: 314px;
   }
 
   .pageListing .hotelInformation {
-    padding-top: var(--Spacing-x2);
+    width: min(422px, 100%);
     padding-right: var(--Spacing-x2);
+    margin: 0;
   }
 
-  .pageListing .hotel {
+  .pageListing .facilities {
+    margin: var(--Spacing-x1) 0;
+  }
+
+  .pageListing .hotelContent {
+    flex-direction: row;
+    align-items: center;
     gap: var(--Spacing-x2);
-    padding-right: var(--Spacing-x2);
+    padding-left: var(--Spacing-x3);
+  }
+
+  .pageListing .titleContainer {
+    margin-bottom: var(--Spacing-x-one-and-half);
   }
 
   .pageListing .prices {
-    flex-direction: row;
     align-items: center;
-    justify-content: space-between;
-    padding-right: var(--Spacing-x2);
-    padding-bottom: var(--Spacing-x2);
-  }
-
-  .pageListing .detailsButton {
-    border-bottom: none;
+    width: 260px;
   }
 
   .pageListing .button {
-    width: 160px;
+    width: 100%;
   }
 
-  .address {
-    display: block;
-  }
-
-  .addressMobile {
+  .pageListing .addressMobile {
     display: none;
   }
+
+  .pageListing .address {
+    display: inline;
+  }
 }