From 7e17e9cf4cd1adb6e330becd2d34288a6c12a295 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Mon, 26 May 2025 12:32:53 +0000 Subject: [PATCH] fix(SW-2681): Fixed position of scripted text and using design system components MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Approved-by: Matilda Landström --- .../Blocks/JoinScandicFriends/index.tsx | 66 ++++++++----------- .../joinScandicFriends.module.css | 47 ++++++++----- 2 files changed, 56 insertions(+), 57 deletions(-) diff --git a/apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx b/apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx index 922e007bf..e19510ec0 100644 --- a/apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx +++ b/apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx @@ -1,11 +1,8 @@ import SurpriseIcon from "@scandic-hotels/design-system/Icons/SurpriseIcon" +import { Typography } from "@scandic-hotels/design-system/Typography" +import ButtonLink from "@/components/ButtonLink" import Image from "@/components/Image" -import Button from "@/components/TempDesignSystem/Button" -import Link from "@/components/TempDesignSystem/Link" -import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" -import Body from "@/components/TempDesignSystem/Text/Body" -import Title from "@/components/TempDesignSystem/Text/Title" import { isLoggedInUser } from "@/utils/isLoggedInUser" import styles from "./joinScandicFriends.module.css" @@ -44,53 +41,44 @@ export default async function JoinScandicFriends({
{show_header ? (
-
- - {content.scripted_top_title} - -
- - {content.title} - + {content.scripted_top_title ? ( + + + {content.scripted_top_title} + + + ) : null} + +

{content.title}

+
) : null} - {content.preamble} + +

{content.preamble}

+ {show_usp && usp.length ? ( ) : null}
{content.has_primary_button ? ( -
- -
+ + {primary_button.title} + ) : null} diff --git a/apps/scandic-web/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css b/apps/scandic-web/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css index d2cf6e507..4df44213e 100644 --- a/apps/scandic-web/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css +++ b/apps/scandic-web/components/Blocks/JoinScandicFriends/joinScandicFriends.module.css @@ -1,14 +1,14 @@ .container { border-radius: var(--Corner-radius-lg); - background-color: var(--Main-Brand-WarmWhite); - padding: 0 var(--Spacing-x2); + background-color: var(--Surface-Primary-OnSurface-Default); + padding: 0 var(--Space-x2); display: flex; - gap: var(--Spacing-x5); + gap: var(--Space-x5); } @media screen and (min-width: 900px) { .container { - padding: 0 var(--Spacing-x4) 0 0; + padding: 0 var(--Space-x4) 0 0; } } @@ -18,38 +18,51 @@ @media screen and (min-width: 900px) { .iconContainer { - flex: 0 1 384; + flex: 0 1 337px; display: flex; /* gets rid of whitespace */ } } +@media screen and (min-width: 1367px) { + .iconContainer { + flex-basis: 367px; + } +} .content { display: flex; flex-direction: column; - gap: var(--Spacing-x3); - padding: var(--Spacing-x3) 0; + gap: var(--Space-x3); + padding: var(--Space-x3) 0; flex: 1; } .textContent { display: flex; flex-direction: column; - gap: var(--Spacing-x2); + gap: var(--Space-x2); + color: var(--Text-Default); } .header { display: grid; - gap: var(--Spacing-x-quarter); + gap: var(--Space-x025); } .scriptedText { - display: inline-block; + transform: rotate(-3deg); + color: var(--Text-Accent-Primary); + transform-origin: bottom left; + margin-top: var(--Space-x3); +} + +.heading { + color: var(--Text-Heading); } .usp { list-style: none; display: grid; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } @media screen and (min-width: 768px) { @@ -57,7 +70,7 @@ grid-template-rows: repeat(3, auto); grid-template-columns: repeat(3, 1fr); grid-auto-flow: column; - padding: var(--Spacing-x-one-and-half) 0; + padding: var(--Space-x15) 0; } } @@ -77,7 +90,7 @@ .usp li { display: flex; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } .usp li:before { @@ -86,9 +99,7 @@ top: 3px; } -@media screen and (min-width: 768px) { - .buttonContainer { - display: flex; - width: 180px; - } +.primaryButton { + min-width: 180px; + width: fit-content; }