feat: add mobile design to accordions

components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 
 import useSidePeekStore from "@/stores/sidepeek"
 
+import ChevronRight from "@/components/Icons/ChevronRight"
 import Button from "@/components/TempDesignSystem/Button"
 
 import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
@@ -28,6 +29,7 @@ export default function ToggleSidePeek({
       wrapping
     >
       {intl.formatMessage({ id: "See room details" })}{" "}
+      <ChevronRight height="14" />
     </Button>
   )
 }

components/HotelReservation/EnterDetails/SelectedRoom/index.tsx

@@ -33,26 +33,25 @@ export default function SelectedRoom({
       </div>
       <div className={styles.main}>
         <div className={styles.headerContainer}>
-          <div>
-            <Footnote
-              asChild
-              textTransform="uppercase"
-              type="label"
-              color="uiTextHighContrast"
-            >
-              <h2>{intl.formatMessage({ id: "Your room" })}</h2>
-            </Footnote>
-            <Subtitle
-              type="two"
-              className={styles.selection}
-              color="uiTextHighContrast"
-            >
-              {room.roomType}{" "}
-              <span className={styles.rate}>{`(${rateDescription})`}</span>
-            </Subtitle>
-          </div>
-
+          <Footnote
+            className={styles.title}
+            asChild
+            textTransform="uppercase"
+            type="label"
+            color="uiTextHighContrast"
+          >
+            <h2>{intl.formatMessage({ id: "Your room" })}</h2>
+          </Footnote>
+          <Subtitle
+            type="two"
+            className={styles.description}
+            color="uiTextHighContrast"
+          >
+            {room.roomType}{" "}
+            <span className={styles.rate}>{rateDescription}</span>
+          </Subtitle>
           <Link
+            className={styles.button}
             color="burgundy"
             href={selectRateUrl}
             size="small"

components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css

@@ -2,43 +2,42 @@
   position: relative;
   display: flex;
   flex-direction: row;
-  gap: var(--Spacing-x3);
+  gap: var(--Spacing-x-one-and-half);
   padding-top: var(--Spacing-x3);
 }
 
-.wrapper::after {
-  position: absolute;
-  left: 12px;
-  bottom: 0;
-  top: var(--Spacing-x5);
-  height: 100%;
-  content: "";
-  border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
-}
-
 .main {
-  display: grid;
   width: 100%;
   border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
   padding-bottom: var(--Spacing-x3);
-  grid-template-rows: 2em 0fr;
 }
 
 .headerContainer {
-  display: flex;
+  display: grid;
   justify-content: space-between;
   align-items: center;
+  grid-template-areas:
+    "title button"
+    "description button";
 }
 
-.selection {
+.title {
+  grid-area: title;
+}
+
+.description {
   font-weight: 450;
   font-size: var(--typography-Title-4-fontSize);
+  grid-area: description;
+}
+
+.button {
+  grid-area: button;
+  justify-self: flex-end;
 }
 
 .iconWrapper {
   position: relative;
-  top: var(--Spacing-x1);
-  z-index: 1;
 }
 
 .circle {
@@ -57,9 +56,41 @@
 
 .rate {
   color: var(--UI-Text-Placeholder);
+  display: block;
 }
 
 .details {
   display: flex;
   justify-content: flex-start;
 }
+
+@media screen and (min-width: 1367px) {
+  .wrapper {
+    gap: var(--Spacing-x3);
+  }
+
+  .iconWrapper {
+    top: var(--Spacing-x1);
+  }
+
+  .rate {
+    display: inline;
+  }
+
+  .rate::before {
+    content: "(";
+  }
+  .rate::after {
+    content: ")";
+  }
+
+  .wrapper:not(:last-child)::after {
+    position: absolute;
+    left: 12px;
+    bottom: 0;
+    top: var(--Spacing-x7);
+    height: 100%;
+    content: "";
+    border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+  }
+}