From bd9e250ac9057547b9cf6cfa718a44ff136197b7 Mon Sep 17 00:00:00 2001
From: Bianca Widstam <bianca.widstam@scandichotels.com>
Date: Thu, 28 Aug 2025 14:15:18 +0000
Subject: [PATCH] Merged in fix/SW-2363-mobile-align-add-calendar-button (pull
 request #2728)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix(SW-2363): align calendar and manage booking button in confirmation page

* fix(SW-2363): align calendar and manage booking button in confirmation page


Approved-by: Matilda Landström
---
 .../Header/Actions/AddToCalendarButton.tsx    | 14 +++++++---
 .../Header/Actions/ManageBooking.tsx          | 27 +++++++++----------
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx
index 1adf042ae..037de0363 100644
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx
@@ -1,8 +1,8 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
 export default function AddToCalendarButton({
   onPress,
@@ -12,8 +12,16 @@ export default function AddToCalendarButton({
   const intl = useIntl()
 
   return (
-    <Button intent="text" size="small" theme="base" wrapping onPress={onPress}>
-      <MaterialIcon icon="calendar_add_on" color="CurrentColor" />
+    <Button
+      variant="Text"
+      size="Small"
+      color="Primary"
+      wrapping
+      typography="Body/Supporting text (caption)/smBold"
+      onPress={onPress}
+    >
+      <MaterialIcon size={20} icon="calendar_add_on" color="CurrentColor" />
+
       {intl.formatMessage({
         defaultMessage: "Add to calendar",
       })}
diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx
index 0a7c1f0c5..cbbf00c80 100644
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx
@@ -4,9 +4,8 @@ import { useEffect } from "react"
 import { useIntl } from "react-intl"
 
 import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/Link"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
 import useLang from "@/hooks/useLang"
 
@@ -33,20 +32,18 @@ export default function ManageBooking({ booking }: ManageBookingProps) {
   const myStayURL = `${myStay[lang]}?RefId=${encodeURIComponent(refId)}`
 
   return (
-    <Button
-      asChild
-      intent="text"
-      size="small"
-      theme="base"
-      variant="icon"
+    <ButtonLink
+      href={myStayURL}
+      variant="Text"
+      size="Small"
+      color="Primary"
+      typography="Body/Supporting text (caption)/smBold"
       wrapping
     >
-      <Link color="none" href={myStayURL} weight="bold">
-        <MaterialIcon icon="edit_square" color="CurrentColor" />
-        {intl.formatMessage({
-          defaultMessage: "Manage booking",
-        })}
-      </Link>
-    </Button>
+      <MaterialIcon size={20} icon="edit_square" color="CurrentColor" />
+      {intl.formatMessage({
+        defaultMessage: "Manage booking",
+      })}
+    </ButtonLink>
   )
 }