diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePoints.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePoints.module.css index 5f186d25a..4ba716762 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePoints.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePoints.module.css @@ -26,14 +26,21 @@ .pointsNumber { color: var(--Text-Brand-OnPrimary-1-Accent); } - +@media screen and (max-width: 767px) { + .textButton { + margin-top: var(--Space-x2); + } +} @media screen and (min-width: 768px) { .modalContent { padding: var(--Space-x1) var(--Space-x3) var(--Space-x3); width: 560px; /* From figma design */ } - .button { + .primaryButton { padding: var(--Space-x15) var(--Space-x2) var(--Space-x15) var(--Space-x3); } + .textButton { + padding: 0; + } } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePointsButton.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePointsButton.tsx index e94dc3ff4..5c79a0d43 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePointsButton.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Overview/MembershipOverviewCard/UsePoints/UsePointsButton.tsx @@ -8,17 +8,21 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import styles from "./UsePoints.module.css" -export function UsePointsButton({ variant, className, onPress }: ButtonProps) { +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 (