chore: update colors to new design

2024-06-19 13:50:37 +02:00
parent 401b019f41
commit edb45b4ac7
17 changed files with 51 additions and 28 deletions
--- 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 (
    <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"
      >
--- 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"}
        </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>
--- 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 (
    <section className={styles.stats}>
      <Points user={user} />
-      <Divider variant="default" color="peach" />
+      <Divider variant="default" color="white" />
      <NextLevel user={user} lang={lang} />
    </section>
  )
--- 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;
--- 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) {
--- 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;
 }
--- 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 (
    <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>
--- 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;
 }
--- 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>
      </Title>
      <Button asChild intent="primary" type="button">
--- a/components/MyPages/Sidebar/index.tsx
+++ b/components/MyPages/Sidebar/index.tsx
@@ -26,7 +26,7 @@ export default async function Sidebar({ lang }: LangParams) {
        </Title>
        {navigation.menuItems.map((menuItem, idx) => (
          <Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
-            <Divider color="peach" />
+            <Divider color="beige" />
            <ul className={styles.list}>
              {menuItem.links.map((link) => (
                <li key={link.uid}>
--- a/components/TempDesignSystem/Divider/divider.module.css
+++ b/components/TempDesignSystem/Divider/divider.module.css
@@ -17,6 +17,14 @@
  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 {
  border-bottom-color: var(--Base-Border-Subtle);
 }
--- a/components/TempDesignSystem/Divider/variants.ts
+++ b/components/TempDesignSystem/Divider/variants.ts
@@ -7,6 +7,8 @@ export const dividerVariants = cva(styles.divider, {
    color: {
      burgundy: styles.burgundy,
      peach: styles.peach,
+      beige: styles.beige,
+      white: styles.white,
      subtle: styles.subtle,
    },
    opacity: {
--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -83,7 +83,7 @@
 }

 .activeSidebar {
-  background-color: var(--Scandic-Brand-Pale-Peach);
+  background-color: var(--Scandic-Peach-20);
 }

 .black {
--- a/components/TempDesignSystem/Text/Body/body.module.css
+++ b/components/TempDesignSystem/Text/Body/body.module.css
@@ -56,4 +56,8 @@

 .red {
  color: var(--Scandic-Brand-Scandic-Red);
-}
+}
+
+.white {
+  color: var(--Scandic-Opacity-White-100);
+}
--- a/components/TempDesignSystem/Text/Body/variants.ts
+++ b/components/TempDesignSystem/Text/Body/variants.ts
@@ -9,6 +9,7 @@ const config = {
      burgundy: styles.burgundy,
      pale: styles.pale,
      red: styles.red,
+      white: styles.white,
    },
    textAlign: {
      center: styles.textAlignCenter,
--- a/components/TempDesignSystem/Text/Title/title.module.css
+++ b/components/TempDesignSystem/Text/Title/title.module.css
@@ -107,3 +107,7 @@
 .red {
  color: var(--Scandic-Brand-Scandic-Red);
 }
+
+.white {
+  color: var(--Scandic-Opacity-White-100);
+}
--- a/components/TempDesignSystem/Text/Title/variants.ts
+++ b/components/TempDesignSystem/Text/Title/variants.ts
@@ -10,6 +10,7 @@ const config = {
      pale: styles.pale,
      peach80: styles.peach80,
      red: styles.red,
+      white: styles.white,
    },
    textAlign: {
      center: styles.center,