diff --git a/components/Icons/icon.module.css b/components/Icons/icon.module.css index 58c5db266..336a409a1 100644 --- a/components/Icons/icon.module.css +++ b/components/Icons/icon.module.css @@ -17,6 +17,11 @@ fill: var(--UI-Grey-80); } +.green, +.green * { + fill: var(--Scandic-Green-50); +} + .pale, .pale * { fill: var(--Scandic-Brand-Pale-Peach); diff --git a/components/Icons/variants.ts b/components/Icons/variants.ts index a8534eb20..e39422ece 100644 --- a/components/Icons/variants.ts +++ b/components/Icons/variants.ts @@ -12,6 +12,7 @@ const config = { peach80: styles.peach80, primaryLightOnSurfaceAccent: styles.plosa, red: styles.red, + green: styles.green, }, }, defaultVariants: { diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css index 5a29f84b6..2079571a5 100644 --- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css +++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css @@ -1,5 +1,5 @@ .benefitCard { - background-color: var(--Main-Grey-White); + background-color: var(--Scandic-Opacity-White-100); border: 1px solid var(--Base-Border-Subtle); border-radius: var(--Corner-radius-Small); color: var(--Main-Brand-Burgundy); @@ -56,4 +56,4 @@ .benefitComparison { grid-template-columns: 1fr 1fr 1fr; } -} \ No newline at end of file +} diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css index e8f910fe8..1b008ba50 100644 --- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css +++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css @@ -7,43 +7,8 @@ padding-top: 0; } -.firstColumn { - background-color: var(--Main-Brand-PalePeach); - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 50%; - z-index: 1; -} - -.secondColumn { - background-color: var(--Base-Background-Normal); - position: absolute; - position: absolute; - top: 0; - bottom: 0; - margin-bottom: calc(var(--Spacing-x2) * -1); - left: 50%; - right: 0; - z-index: 1; - border-top-left-radius: var(--Corner-radius-Medium); -} - @media screen and (min-width: 950px) { .benefitCardWrapper { grid-column: 1/4; } - - .firstColumn { - width: calc((100%) / 3); - right: calc(100% / 3 * 2); - margin-left: 0; - } - - .secondColumn { - width: calc(100% / 3); - left: calc(100% / 3); - right: calc(100% / 3); - } } diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx index 6e3fb3c86..d60dfcf9b 100644 --- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx +++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx @@ -24,8 +24,6 @@ export default function BenefitList({ levels }: BenefitListProps) { const levelBenefits = levels.map((level) => level.benefits[idx]) return (
-
-
+ return } if (!benefit.value) { - return + return } return (
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx index f85d6c2d2..24380ac66 100644 --- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx +++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx @@ -16,7 +16,7 @@ import { export default function LargeTable({ levels }: LargeTableProps) { return ( - +
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css index 5805766ba..3b163d989 100644 --- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css +++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css @@ -1,15 +1,11 @@ .table { - border: 1px solid var(--Base-Border-Subtle); + border: none; border-collapse: collapse; - color: var(--Theme-Primary-Dark-Surface-Normal); -} - -.thead { - background-color: var(--Base-Surface-Secondary-Normal); + background-color: var(--Scandic-Opacity-White-100); + border-radius: var(--Corner-radius-Medium); } .iconRow { - background-color: var(--Base-Surface-Secondary-Normal); border-bottom: none; position: sticky; top: 0; @@ -21,14 +17,10 @@ } .iconTh { - border: 1px solid var(--Base-Border-Subtle); - border-bottom: none; - padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x-one-and-half); + padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x2); } .summaryTh { - border: 1px solid var(--Base-Border-Subtle); - border-top: none; font-size: var(--typography-Caption-Regular-fontSize); font-weight: 400; padding: 0 var(--Spacing-x3) var(--Spacing-x2); @@ -36,17 +28,15 @@ } .td { - border: 1px solid var(--Base-Border-Subtle); + border-top: 1px solid var(--Scandic-Beige-20); + border-bottom: 1px solid var(--Scandic-Beige-20); font-size: var(--typography-Footnote-Regular-fontSize); text-align: center; } -.tr:nth-child(odd) { - background-color: var(--Base-Background-Primary-Elevated, #faf6f2); -} - .benefitTh { - border: 1px solid var(--Base-Border-Subtle); + border-top: 1px solid var(--Scandic-Beige-20); + border-bottom: 1px solid var(--Scandic-Beige-20); padding: var(--Spacing-x3) var(--Spacing-x2); font-size: var(--typography-Caption-Regular-fontSize); font-weight: 400; diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css index 7f23901ab..21aa5972d 100644 --- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css +++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css @@ -2,13 +2,13 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--Spacing-x2); + gap: var(--Spacing-x3); } .levelRequirements { - background-color: var(--Main-Brand-Burgundy); border-radius: var(--Corner-radius-Medium); - color: var(--Scandic-Brand-Pale-Peach); + background-color: var(--Scandic-Brand-Pale-Peach); + color: var(--Scandic-Peach-80); padding: var(--Spacing-x-half) var(--Spacing-x1); } @@ -27,4 +27,4 @@ .levelSummaryText { font-size: var(--typography-Caption-Regular-fontSize); } -} \ No newline at end of file +} diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/data/EN.json b/components/Loyalty/Blocks/DynamicContent/OverviewTable/data/EN.json index 395b48f68..e5a09ce6f 100644 --- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/data/EN.json +++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/data/EN.json @@ -264,7 +264,7 @@ "name": "Friendship boost", "description": "Now here’s something pretty sweet: every time you get a boost of friendship points, you get 25% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop here.", "unlocked": true, - "value": "25%" + "value": "+25%" }, { "name": "Early check-in when available", @@ -341,7 +341,7 @@ "name": "Friendship boost", "description": "Now here’s something pretty sweet: every time you get a boost of friendship points, you get 25% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop here.", "unlocked": true, - "value": "25%" + "value": "+25%" }, { "name": "Early check-in when available", @@ -418,7 +418,7 @@ "name": "Friendship boost", "description": "Oh, you’re in for a treat. Every time you get a boost of friendship points, you get 50% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop here.", "unlocked": true, - "value": "50%" + "value": "+50%" }, { "name": "Early check-in when available", @@ -495,7 +495,7 @@ "name": "Friendship boost", "description": "Oh, you’re in for a treat. Every time you get a boost of friendship points, you get 50% extra – a boost on the boost! So you know, start racking up those points on stays, meals and more and you’ll get a free night in no time. Get the full scoop here.", "unlocked": true, - "value": "50%" + "value": "+50%" }, { "name": "Early check-in when available", diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css index a334d9221..951e3cdb8 100644 --- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css +++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css @@ -1,5 +1,4 @@ .container { - background-color: var(--Main-Brand-PalePeach); margin-top: calc(var(--Spacing-x2) * -1); margin-left: calc(var(--Spacing-x2) * -1); margin-right: calc(var(--Spacing-x2) * -1); @@ -32,6 +31,7 @@ .columns { display: none; position: relative; + background-color: var(--Scandic-Opacity-White-100); } .mobileColumns { @@ -40,6 +40,7 @@ margin: 0 calc(var(--Spacing-x2) * -1); padding-top: var(--Spacing-x2); position: relative; + background-color: var(--Scandic-Opacity-White-100); } .columnHeaderContainer { @@ -65,7 +66,6 @@ } .columnHeader:nth-child(2) { - background-color: var(--Base-Background-Normal); padding-left: var(--Spacing-x1); border-top-left-radius: var(--Corner-radius-Medium); } diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css index 0c178c192..564bd7eee 100644 --- a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css +++ b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css @@ -4,7 +4,7 @@ .card { align-items: center; - background-color: var(--Base-Background-Normal); + background-color: var(--Scandic-Opacity-White-100); border: 1px solid var(--Base-Border-Subtle); border-radius: var(--Corner-radius-Medium); display: flex; diff --git a/components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx b/components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx index 13a5de384..056ecf5f3 100644 --- a/components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx +++ b/components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx @@ -33,12 +33,12 @@ export default async function NextLevel({ } return (
- + {formatMessage({ id: "Next level" })}: diff --git a/components/MyPages/Blocks/Overview/Stats/Points/index.tsx b/components/MyPages/Blocks/Overview/Stats/Points/index.tsx index 6a9260865..5f55bca7b 100644 --- a/components/MyPages/Blocks/Overview/Stats/Points/index.tsx +++ b/components/MyPages/Blocks/Overview/Stats/Points/index.tsx @@ -13,19 +13,19 @@ export default async function Points({ user }: UserProps) { return ( <section className={styles.points}> <article> - <Body color="pale" textAlign="center"> + <Body color="white" textAlign="center"> {formatMessage({ id: "Total Points" })} </Body> - <Title color="pale" level="h2" textAlign="center"> + <Title color="white" level="h2" textAlign="center"> {membership ? membership.currentPoints : "N/A"}
- + {formatMessage({ id: "Points until next level" })} {/* TODO */} - + <Title color="white" level="h2" textAlign="center"> {membership ? membership.currentPoints : "N/A"}
diff --git a/components/MyPages/Blocks/Overview/Stats/index.tsx b/components/MyPages/Blocks/Overview/Stats/index.tsx index 6d6ed585e..9be45ac3a 100644 --- a/components/MyPages/Blocks/Overview/Stats/index.tsx +++ b/components/MyPages/Blocks/Overview/Stats/index.tsx @@ -12,7 +12,7 @@ export default function Stats({ user, lang }: UserProps & LangParams) { return (
- +
) diff --git a/components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css b/components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css index d79aea9a8..45d8eaab7 100644 --- a/components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css +++ b/components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css @@ -1,5 +1,5 @@ .card { - background-color: var(--Main-Grey-10); + background-color: var(--Scandic-Brand-Pale-Peach); border-radius: var(--Corner-radius-xLarge); color: var(--Main-Brand-Burgundy); display: flex; diff --git a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/desktop.module.css b/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/desktop.module.css index 987c60642..5eeae3c50 100644 --- a/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/desktop.module.css +++ b/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/desktop.module.css @@ -9,9 +9,10 @@ } .thead { - background-color: var(--Main-Grey-10); - border-left: 1px solid var(--Main-Grey-10); - border-right: 1px solid var(--Main-Grey-10); + background-color: var(--Scandic-Brand-Pale-Peach); + border-left: 1px solid var(--Scandic-Brand-Pale-Peach); + border-right: 1px solid var(--Scandic-Brand-Pale-Peach); + color: var(--Main-Brand-Burgundy); } .th { @@ -23,7 +24,7 @@ width: 100%; padding: 24px; text-align: center; - border: 1px solid var(--Main-Grey-10); + border: 1px solid var(--Scandic-Brand-Pale-Peach); } @media screen and (min-width: 768px) { diff --git a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css index 321611746..a82b672fb 100644 --- a/components/MyPages/Blocks/Shortcuts/shortcuts.module.css +++ b/components/MyPages/Blocks/Shortcuts/shortcuts.module.css @@ -1,6 +1,6 @@ .links { display: grid; - background-color: var(--Scandic-Brand-Warm-White); + background-color: var(--Scandic-Brand-Pale-Peach); border-radius: var(--Corner-radius-Medium); border: 1px solid var(--Base-Border-Subtle); } diff --git a/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css b/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css index 1f3405c94..941f3be5e 100644 --- a/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css +++ b/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css @@ -1,17 +1,18 @@ .container { align-items: center; - background-color: var(--Scandic-Brand-Warm-White); + background-color: var(--Scandic-Brand-Pale-Peach); border-radius: var(--Corner-radius-Medium); display: flex; - flex-direction: column; gap: var(--Spacing-x3); + flex-direction: column; justify-content: center; - margin-bottom: var(--Spacing-x1); + margin-bottom: var(--Spacing-x-half); min-height: 250px; padding: var(--Spacing-x0) var(--Spacing-x3); } -.grayTitle { - color: var(--UI-Grey-60); +.burgundyTitle { + color: var(--Scandic-Brand-Burgundy); display: block; + text-align: center; } diff --git a/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx b/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx index a56316559..e5403a1a1 100644 --- a/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx +++ b/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx @@ -9,9 +9,9 @@ export default async function EmptyUpcomingStaysBlock() { const { formatMessage } = await getIntl() return (
- + <Title as="h5" level="h3" color="red"> {formatMessage({ id: "You have no upcoming stays." })} - <span className={styles.grayTitle}> + <span className={styles.burgundyTitle}> {" "} {formatMessage({ id: "Where should you go next?" })} </span> diff --git a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css index 4e5b39326..941f3be5e 100644 --- a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css +++ b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css @@ -1,6 +1,6 @@ .container { align-items: center; - background-color: var(--some-grey-color, #f2f2f2); + background-color: var(--Scandic-Brand-Pale-Peach); border-radius: var(--Corner-radius-Medium); display: flex; gap: var(--Spacing-x3); @@ -11,7 +11,8 @@ padding: var(--Spacing-x0) var(--Spacing-x3); } -.grayTitle { - color: var(--UI-Grey-60); +.burgundyTitle { + color: var(--Scandic-Brand-Burgundy); display: block; + text-align: center; } diff --git a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx index 27ed484b0..a6799c7b9 100644 --- a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx +++ b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx @@ -14,11 +14,11 @@ export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) { const { formatMessage } = await getIntl() return ( <section className={styles.container}> - <Title as="h5" level="h3"> + <Title as="h5" level="h3" color="red"> {formatMessage({ id: "You have no upcoming stays." })} - <span className={styles.grayTitle}> + <span className={styles.burgundyTitle}> {" "} - {formatMessage({ id: "Where should you go next?" })} + {formatMessage({ id: "Where will you go next?" })} </span>