feat: add mobile design to accordions

components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import { CheckIcon, ChevronDownIcon } from "@/components/Icons"
-import Button from "@/components/TempDesignSystem/Button"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
@@ -72,9 +71,10 @@ export default function SectionAccordion({
         </div>
       </div>
       <div className={styles.main}>
-        <header className={styles.headerContainer}>
-          <div>
+        <header>
+          <button onClick={onModify} className={styles.modifyButton}>
             <Footnote
+              className={styles.title}
               asChild
               textTransform="uppercase"
               type="label"
@@ -83,26 +83,17 @@ export default function SectionAccordion({
               <h2>{header}</h2>
             </Footnote>
             <Subtitle
-              type="two"
               className={styles.selection}
+              type="two"
               color="uiTextHighContrast"
             >
               {title}
             </Subtitle>
-          </div>
-          {isComplete && !isOpen && (
-            <Button
-              onClick={onModify}
-              theme="base"
-              size="small"
-              variant="icon"
-              intent="text"
-              wrapping
-            >
-              {intl.formatMessage({ id: "Modify" })}{" "}
-              <ChevronDownIcon color="burgundy" width={20} height={20} />
-            </Button>
-          )}
+
+            {isComplete && !isOpen && (
+              <ChevronDownIcon className={styles.button} color="burgundy" />
+            )}
+          </button>
         </header>
         <div className={styles.content}>{children}</div>
       </div>

components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css

@@ -2,25 +2,33 @@
   position: relative;
   display: flex;
   flex-direction: row;
-  gap: var(--Spacing-x3);
-
+  gap: var(--Spacing-x-one-and-half);
   padding-top: var(--Spacing-x3);
 }
 
-.wrapper:not(:last-child)::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);
-}
-
 .wrapper:last-child .main {
   border-bottom: none;
 }
 
+.modifyButton {
+  display: grid;
+  grid-template-areas: "title button" "selection button";
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  width: 100%;
+}
+
+.title {
+  grid-area: title;
+  text-align: start;
+}
+
+.button {
+  grid-area: button;
+  justify-self: flex-end;
+}
+
 .main {
   display: grid;
   gap: var(--Spacing-x3);
@@ -31,21 +39,14 @@
   grid-template-rows: 2em 0fr;
 }
 
-.headerContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
 .selection {
   font-weight: 450;
   font-size: var(--typography-Title-4-fontSize);
+  grid-area: selection;
 }
 
 .iconWrapper {
   position: relative;
-  top: var(--Spacing-x1);
-  z-index: 1;
 }
 
 .circle {
@@ -78,3 +79,23 @@
 .content {
   overflow: hidden;
 }
+
+@media screen and (min-width: 1367px) {
+  .wrapper {
+    gap: var(--Spacing-x3);
+  }
+
+  .iconWrapper {
+    top: var(--Spacing-x1);
+  }
+
+  .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);
+  }
+}