feat: refactor NewDates, clean up legacy code

This reverts commit 0c7836fa59.

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/multiRoom.module.css

@@ -1,101 +1,63 @@
-.multiRoom {
+.wrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Spacing-x3);
+}
+
+.title {
+  color: var(--Scandic-Brand-Burgundy);
   padding: 0 var(--Spacing-x2);
 }
 
-.cancelled {
-  opacity: 0.5;
-}
-
-.cancellationNumber {
-  text-decoration: line-through;
-}
-
-.multiRoomCard {
+.container {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
-  background-color: var(--Base-Background-Primary-Normal);
-  border-radius: var(--Corner-radius-Large);
-  border: 1px solid var(--Base-Border-Subtle);
-  overflow: hidden;
-  padding-bottom: var(--Spacing-x3);
-  position: relative;
+  gap: var(--Spacing-x5);
 }
 
-.imageContainer {
+.roomsContainer {
+  display: grid;
+  gap: var(--Spacing-x3);
+  grid-template-columns: 1fr;
   width: 100%;
-  height: 342px;
-  position: relative;
 }
 
-.iconContainer {
+.roomWrapper {
+  min-width: 0;
+  width: 100%;
+}
+
+.roomWrapper > * {
+  width: 100%;
+}
+
+.totalContainer {
   display: flex;
-  border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-Small);
-  padding: var(--Spacing-x-half);
-}
-
-.roomName {
-  color: var(--Scandic-Brand-Burgundy);
-}
-
-.roomHeader {
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x-one-and-half);
-}
-
-.chip {
-  background-color: var(--Scandic-Peach-30);
-  color: var(--Scandic-Red-100);
-  border-radius: var(--Corner-radius-Small);
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
-  height: fit-content;
-}
-
-.toggleSidePeek {
-  margin-left: auto;
-}
-
-.reference {
-  display: flex;
-  gap: var(--Spacing-x-half);
-}
-
-.details {
-  display: flex;
-  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) 0;
-  gap: var(--Spacing-x2);
   flex-direction: column;
-}
-
-.row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.packages {
-  position: absolute;
-  top: 304px;
-  left: 10px;
-  display: flex;
-  flex-direction: row;
   gap: var(--Spacing-x1);
-  z-index: 100;
+  padding: 0 var(--Spacing-x2);
 }
 
-.package {
-  background-color: var(--Main-Grey-White);
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
-  border-radius: var(--Corner-radius-Small);
+.total {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--Spacing-x1);
 }
 
 @media (min-width: 768px) {
-  .multiRoom {
+  .roomsContainer {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .roomsContainer:has(> *:nth-child(3):last-child) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .title {
+    padding: 0;
+  }
+
+  .totalContainer {
     padding: 0;
   }
 }