scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/SW-2363-mobile-align-add-calendar-button (pull request #2728)

Browse Source 
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
This commit is contained in:
Bianca Widstam
2025-08-28 14:15:18 +00:00
parent 2e655619d1
commit bd9e250ac9
2 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/AddToCalendarButton.tsx
View File

@@ -1,8 +1,8 @@
"use client" "use client"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
export default function AddToCalendarButton({ export default function AddToCalendarButton({
onPress, onPress,
@@ -12,8 +12,16 @@ export default function AddToCalendarButton({
const intl = useIntl() const intl = useIntl()
return ( return (
<Button intent="text" size="small" theme="base" wrapping onPress={onPress}> <Button
<MaterialIcon icon="calendar_add_on" color="CurrentColor" /> 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({ {intl.formatMessage({
defaultMessage: "Add to calendar", defaultMessage: "Add to calendar",
})} })}

27
apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/Actions/ManageBooking.tsx
View File

@@ -4,9 +4,8 @@ import { useEffect } from "react"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { myStay } from "@scandic-hotels/common/constants/routes/myStay" 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 { 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" import useLang from "@/hooks/useLang"
@@ -33,20 +32,18 @@ export default function ManageBooking({ booking }: ManageBookingProps) {
const myStayURL = `${myStay[lang]}?RefId=${encodeURIComponent(refId)}` const myStayURL = `${myStay[lang]}?RefId=${encodeURIComponent(refId)}`
return ( return (
<Button <ButtonLink
asChild href={myStayURL}
intent="text" variant="Text"
size="small" size="Small"
theme="base" color="Primary"
variant="icon" typography="Body/Supporting text (caption)/smBold"
wrapping wrapping
> >
<Link color="none" href={myStayURL} weight="bold"> <MaterialIcon size={20} icon="edit_square" color="CurrentColor" />
<MaterialIcon icon="edit_square" color="CurrentColor" /> {intl.formatMessage({
{intl.formatMessage({ defaultMessage: "Manage booking",
defaultMessage: "Manage booking", })}
})} </ButtonLink>
</Link>
</Button>
) )
} }