feat(SW-2178): Changed to new buttons for summary inside enter details

Approved-by: Michael Zetterberg
Approved-by: Matilda Landström

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx

@@ -3,6 +3,7 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -12,7 +13,6 @@ import { dt } from "@/lib/dt"
 import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import Modal from "@/components/Modal"
-import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import IconChip from "@/components/TempDesignSystem/IconChip"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -109,10 +109,9 @@ export default function SummaryUI({
           {dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
         </Body>
         <Button
-          intent="text"
-          size="small"
+          onPress={handleToggleSummary}
           className={styles.chevronButton}
-          onClick={handleToggleSummary}
+          variant="Icon"
         >
           <MaterialIcon
             icon="keyboard_arrow_down"
@@ -219,10 +218,17 @@ export default function SummaryUI({
                 </Caption>
                 <Modal
                   trigger={
-                    <Button intent="text">
-                      <Caption color="burgundy" type="underline">
-                        {intl.formatMessage({ id: "Rate details" })}
-                      </Caption>
+                    <Button
+                      variant="Text"
+                      typography="Body/Supporting text (caption)/smBold"
+                      wrapping={false}
+                    >
+                      {intl.formatMessage({ id: "Rate details" })}
+                      <MaterialIcon
+                        icon="chevron_right"
+                        size={20}
+                        color="CurrentColor"
+                      />
                     </Button>
                   }
                   title={