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>