scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update colors to new design

Browse Source
This commit is contained in:
Matilda Landström
2024-06-19 13:50:37 +02:00
committed by Michael Zetterberg
parent 401b019f41
commit edb45b4ac7
17 changed files with 51 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx
View File

@@ -33,12 +33,12 @@ export default async function NextLevel({
} }
return ( return (
<section> <section>
<Body color="pale" textAlign="center"> <Body color="white" textAlign="center">
{formatMessage({ id: "Next level" })}: {formatMessage({ id: "Next level" })}:
</Body> </Body>
<Title <Title
className={styles.nextLevel} className={styles.nextLevel}
color="pale" color="white"
level="h3" level="h3"
textAlign="center" textAlign="center"
> >

8
components/MyPages/Blocks/Overview/Stats/Points/index.tsx
View File

@@ -13,19 +13,19 @@ export default async function Points({ user }: UserProps) {
return ( return (
<section className={styles.points}> <section className={styles.points}>
<article> <article>
<Body color="pale" textAlign="center"> <Body color="white" textAlign="center">
{formatMessage({ id: "Total Points" })} {formatMessage({ id: "Total Points" })}
</Body> </Body>
<Title color="pale" level="h2" textAlign="center"> <Title color="white" level="h2" textAlign="center">
{membership ? membership.currentPoints : "N/A"} {membership ? membership.currentPoints : "N/A"}
</Title> </Title>
</article> </article>
<article> <article>
<Body color="pale" textAlign="center"> <Body color="white" textAlign="center">
{formatMessage({ id: "Points until next level" })} {formatMessage({ id: "Points until next level" })}
{/* TODO */} {/* TODO */}
</Body> </Body>
<Title color="pale" level="h2" textAlign="center"> <Title color="white" level="h2" textAlign="center">
{membership ? membership.currentPoints : "N/A"} {membership ? membership.currentPoints : "N/A"}
</Title> </Title>
</article> </article>

2
components/MyPages/Blocks/Overview/Stats/index.tsx
View File

@@ -12,7 +12,7 @@ export default function Stats({ user, lang }: UserProps & LangParams) {
return ( return (
<section className={styles.stats}> <section className={styles.stats}>
<Points user={user} /> <Points user={user} />
<Divider variant="default" color="peach" /> <Divider variant="default" color="white" />
<NextLevel user={user} lang={lang} /> <NextLevel user={user} lang={lang} />
</section> </section>
) )

2
components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css
View File

@@ -1,5 +1,5 @@
.card { .card {
background-color: var(--Main-Grey-10); background-color: var(--Scandic-Brand-Pale-Peach);
border-radius: var(--Corner-radius-xLarge); border-radius: var(--Corner-radius-xLarge);
color: var(--Main-Brand-Burgundy); color: var(--Main-Brand-Burgundy);
display: flex; display: flex;

9
components/MyPages/Blocks/Points/EarnAndBurn/Desktop/desktop.module.css
View File

@@ -9,9 +9,10 @@
} }
.thead { .thead {
background-color: var(--Main-Grey-10); background-color: var(--Scandic-Brand-Pale-Peach);
border-left: 1px solid var(--Main-Grey-10); border-left: 1px solid var(--Scandic-Brand-Pale-Peach);
border-right: 1px solid var(--Main-Grey-10); border-right: 1px solid var(--Scandic-Brand-Pale-Peach);
color: var(--Main-Brand-Burgundy);
} }
.th { .th {
@@ -23,7 +24,7 @@
width: 100%; width: 100%;
padding: 24px; padding: 24px;
text-align: center; text-align: center;
border: 1px solid var(--Main-Grey-10); border: 1px solid var(--Scandic-Brand-Pale-Peach);
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {

11
components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css
View File

@@ -1,17 +1,18 @@
.container { .container {
align-items: center; align-items: center;
background-color: var(--Scandic-Brand-Warm-White); background-color: var(--Scandic-Brand-Pale-Peach);
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
display: flex; display: flex;
flex-direction: column;
gap: var(--Spacing-x3); gap: var(--Spacing-x3);
flex-direction: column;
justify-content: center; justify-content: center;
margin-bottom: var(--Spacing-x1); margin-bottom: var(--Spacing-x-half);
min-height: 250px; min-height: 250px;
padding: var(--Spacing-x0) var(--Spacing-x3); padding: var(--Spacing-x0) var(--Spacing-x3);
} }
.grayTitle { .burgundyTitle {
color: var(--UI-Grey-60); color: var(--Scandic-Brand-Burgundy);
display: block; display: block;
text-align: center;
} }

4
components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx
View File

@@ -9,9 +9,9 @@ export default async function EmptyUpcomingStaysBlock() {
const { formatMessage } = await getIntl() const { formatMessage } = await getIntl()
return ( return (
<section className={styles.container}> <section className={styles.container}>
<Title as="h5" level="h3"> <Title as="h5" level="h3" color="red">
{formatMessage({ id: "You have no upcoming stays." })} {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 should you go next?" })}
</span> </span>

7
components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
View File

@@ -1,6 +1,6 @@
.container { .container {
align-items: center; align-items: center;
background-color: var(--some-grey-color, #f2f2f2); background-color: var(--Scandic-Brand-Pale-Peach);
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
display: flex; display: flex;
gap: var(--Spacing-x3); gap: var(--Spacing-x3);
@@ -11,7 +11,8 @@
padding: var(--Spacing-x0) var(--Spacing-x3); padding: var(--Spacing-x0) var(--Spacing-x3);
} }
.grayTitle { .burgundyTitle {
color: var(--UI-Grey-60); color: var(--Scandic-Brand-Burgundy);
display: block; display: block;
text-align: center;
} }

6
components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
View File

@@ -14,11 +14,11 @@ export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
const { formatMessage } = await getIntl() const { formatMessage } = await getIntl()
return ( return (
<section className={styles.container}> <section className={styles.container}>
<Title as="h5" level="h3"> <Title as="h5" level="h3" color="red">
{formatMessage({ id: "You have no upcoming stays." })} {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> </span>
</Title> </Title>
<Button asChild intent="primary" type="button"> <Button asChild intent="primary" type="button">

2
components/MyPages/Sidebar/index.tsx
View File

@@ -26,7 +26,7 @@ export default async function Sidebar({ lang }: LangParams) {
</Title> </Title>
{navigation.menuItems.map((menuItem, idx) => ( {navigation.menuItems.map((menuItem, idx) => (
<Fragment key={`${menuItem.display_sign_out_link}-${idx}`}> <Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
<Divider color="peach" /> <Divider color="beige" />
<ul className={styles.list}> <ul className={styles.list}>
{menuItem.links.map((link) => ( {menuItem.links.map((link) => (
<li key={link.uid}> <li key={link.uid}>

8
components/TempDesignSystem/Divider/divider.module.css
View File

@@ -17,6 +17,14 @@
border-bottom-color: var(--Theme-Primary-Light-On-Surface-Divider); border-bottom-color: var(--Theme-Primary-Light-On-Surface-Divider);
} }
.beige {
border-bottom-color: var(--Scandic-Beige-20);
}
.white {
border-bottom-color: var(--Scandic-Opacity-White-100);
}
.subtle { .subtle {
border-bottom-color: var(--Base-Border-Subtle); border-bottom-color: var(--Base-Border-Subtle);
} }

2
components/TempDesignSystem/Divider/variants.ts
View File

@@ -7,6 +7,8 @@ export const dividerVariants = cva(styles.divider, {
color: { color: {
burgundy: styles.burgundy, burgundy: styles.burgundy,
peach: styles.peach, peach: styles.peach,
beige: styles.beige,
white: styles.white,
subtle: styles.subtle, subtle: styles.subtle,
}, },
opacity: { opacity: {

2
components/TempDesignSystem/Link/link.module.css
View File

@@ -83,7 +83,7 @@
} }
.activeSidebar { .activeSidebar {
background-color: var(--Scandic-Brand-Pale-Peach); background-color: var(--Scandic-Peach-20);
} }
.black { .black {

6
components/TempDesignSystem/Text/Body/body.module.css
View File

@@ -56,4 +56,8 @@
.red { .red {
color: var(--Scandic-Brand-Scandic-Red); color: var(--Scandic-Brand-Scandic-Red);
} }
.white {
color: var(--Scandic-Opacity-White-100);
}

1
components/TempDesignSystem/Text/Body/variants.ts
View File

@@ -9,6 +9,7 @@ const config = {
burgundy: styles.burgundy, burgundy: styles.burgundy,
pale: styles.pale, pale: styles.pale,
red: styles.red, red: styles.red,
white: styles.white,
}, },
textAlign: { textAlign: {
center: styles.textAlignCenter, center: styles.textAlignCenter,

4
components/TempDesignSystem/Text/Title/title.module.css
View File

@@ -107,3 +107,7 @@
.red { .red {
color: var(--Scandic-Brand-Scandic-Red); color: var(--Scandic-Brand-Scandic-Red);
} }
.white {
color: var(--Scandic-Opacity-White-100);
}

1
components/TempDesignSystem/Text/Title/variants.ts
View File

@@ -10,6 +10,7 @@ const config = {
pale: styles.pale, pale: styles.pale,
peach80: styles.peach80, peach80: styles.peach80,
red: styles.red, red: styles.red,
white: styles.white,
}, },
textAlign: { textAlign: {
center: styles.center, center: styles.center,