e85248124f
fix(LOY-500): fixed correct css for use points button * fix(LOY-500): fixed styling for use points button * fix(LOY-500): fix Approved-by: Matilda Landström
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
"use client"
|
|
import { cx } from "class-variance-authority"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { useIsMobile } from "@scandic-hotels/booking-flow/hooks/useBreakpoint"
|
|
import { Button, type ButtonProps } from "@scandic-hotels/design-system/Button"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
|
|
import styles from "./UsePoints.module.css"
|
|
|
|
export function UsePointsButton({ variant, onPress }: ButtonProps) {
|
|
const intl = useIntl()
|
|
const isSmallScreen = useIsMobile()
|
|
|
|
const buttonVariant =
|
|
variant === "Text" && isSmallScreen ? "Secondary" : variant
|
|
|
|
const buttonClassName = cx(
|
|
variant === "Text" ? styles.textButton : styles.primaryButton
|
|
)
|
|
|
|
return (
|
|
<Button
|
|
size="Medium"
|
|
className={buttonClassName}
|
|
variant={buttonVariant}
|
|
typography="Body/Paragraph/mdBold"
|
|
onPress={onPress}
|
|
>
|
|
{intl.formatMessage({
|
|
id: "myPages.membershipPointsOverview.usePointsButton",
|
|
defaultMessage: "Use points",
|
|
})}
|
|
<MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
|
|
</Button>
|
|
)
|
|
}
|