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
components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx
+2 -2
View File
@@ -33,12 +33,12 @@ export default async function NextLevel({
}
return (
<section>
<Body color="pale" textAlign="center">
<Body color="white" textAlign="center">
{formatMessage({ id: "Next level" })}:
</Body>
<Title
className={styles.nextLevel}
color="pale"
color="white"
level="h3"
textAlign="center"
>
components/MyPages/Blocks/Overview/Stats/Points/index.tsx
+4 -4
View File
@@ -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"}
</Title>
</article>
<article>
<Body color="pale" textAlign="center">
<Body color="white" textAlign="center">
{formatMessage({ id: "Points until next level" })}
{/* TODO */}
</Body>
<Title color="pale" level="h2" textAlign="center">
<Title color="white" level="h2" textAlign="center">
{membership ? membership.currentPoints : "N/A"}
</Title>
</article>
components/MyPages/Blocks/Overview/Stats/index.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export default function Stats({ user, lang }: UserProps & LangParams) {
return (
<section className={styles.stats}>
<Points user={user} />
<Divider variant="default" color="peach" />
<Divider variant="default" color="white" />
<NextLevel user={user} lang={lang} />
</section>
)
components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css
+1 -1
View File
@@ -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;
components/MyPages/Blocks/Points/EarnAndBurn/Desktop/desktop.module.css
+5 -4
View File
@@ -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) {
components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css
+6 -5
View File
@@ -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;
}
components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx
+2 -2
View File
@@ -9,9 +9,9 @@ export default async function EmptyUpcomingStaysBlock() {
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?" })}
</span>
components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
+4 -3
View File
@@ -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;
}
components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
+3 -3
View File
@@ -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>
</Title>
<Button asChild intent="primary" type="button">