feat(SW-243): css refactoring

components/HotelReservation/BookingConfirmation/SummarySection/index.tsx

@@ -1,3 +1,4 @@
+import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
@@ -7,27 +8,28 @@ import { SummarySectionProps } from "@/types/components/hotelReservation/booking
 
 export default async function SummarySection({ summary }: SummarySectionProps) {
   const intl = await getIntl()
+
   return (
     <section className={styles.section}>
       <Title as="h4" textAlign="center">
         {intl.formatMessage({ id: "Summary" })}
       </Title>
-      <div className={styles.summary}>
+      <Caption className={styles.summary}>
         <span>{`Type of room: ${summary.roomType}`}</span>
         <span>1648 SEK</span>
-      </div>
-      <div className={styles.summary}>
+      </Caption>
+      <Caption className={styles.summary}>
         <span>{`Type of bed: ${summary.bedType}`}</span>
         <span>0 SEK</span>
-      </div>
-      <div className={styles.summary}>
+      </Caption>
+      <Caption className={styles.summary}>
         <span>{`Breakfast: ${summary.breakfast}`}</span>
         <span>198 SEK</span>
-      </div>
-      <div className={styles.summary}>
+      </Caption>
+      <Caption className={styles.summary}>
         <span>{`Flexibility: ${summary.flexibility}`}</span>
         <span>200 SEK</span>
-      </div>
+      </Caption>
     </section>
   )
 }