From edb45b4ac7ee3bb3a0b1d98584ad22f35d901fd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?= Date: Wed, 19 Jun 2024 13:50:37 +0200 Subject: [PATCH] chore: update colors to new design --- .../MyPages/Blocks/Overview/Stats/NextLevel/index.tsx | 4 ++-- .../MyPages/Blocks/Overview/Stats/Points/index.tsx | 8 ++++---- components/MyPages/Blocks/Overview/Stats/index.tsx | 2 +- .../currentPointsBalance.module.css | 2 +- .../Points/EarnAndBurn/Desktop/desktop.module.css | 9 +++++---- .../EmptyUpcomingStays/emptyUpcomingStays.module.css | 11 ++++++----- .../Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx | 4 ++-- .../EmptyUpcomingStays/emptyUpcomingStays.module.css | 7 ++++--- .../Stays/Upcoming/EmptyUpcomingStays/index.tsx | 6 +++--- components/MyPages/Sidebar/index.tsx | 2 +- .../TempDesignSystem/Divider/divider.module.css | 8 ++++++++ components/TempDesignSystem/Divider/variants.ts | 2 ++ components/TempDesignSystem/Link/link.module.css | 2 +- components/TempDesignSystem/Text/Body/body.module.css | 6 +++++- components/TempDesignSystem/Text/Body/variants.ts | 1 + .../TempDesignSystem/Text/Title/title.module.css | 4 ++++ components/TempDesignSystem/Text/Title/variants.ts | 1 + 17 files changed, 51 insertions(+), 28 deletions(-) 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/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>