fix: update loyalty cards and join loyalty sidebar design

2024-06-27 16:44:40 +02:00
parent 33771a0608
commit 5be118d9e5
20 changed files with 166 additions and 81 deletions
@@ -1,6 +1,6 @@
 "use client"

-import { useParams } from "next/navigation"
+import { notFound, useParams } from "next/navigation"
 import { useIntl } from "react-intl"

 import { Lang } from "@/constants/languages"
@@ -15,7 +15,8 @@ import {
  NewFriend,
  TrueFriend,
 } from "@/components/Levels"
-import Body from "@/components/TempDesignSystem/Text/Body"
+import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Title from "@/components/TempDesignSystem/Text/Title"

 import levelsData from "./data"
@@ -45,7 +46,7 @@ export default function LoyaltyLevels() {
 }

 function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
-  const pointsString = `${level.requiredPoints.toLocaleString(lang)}p`
+  const pointsString = `${level.requiredPoints.toLocaleString(lang)} ${formatMessage({ id: "Points" })} `
  const qualifications = level.requiredNights
    ? `${pointsString} ${formatMessage({ id: "or" })} ${level.requiredNights} ${formatMessage({ id: "nights" })}`
    : pointsString
@@ -73,20 +74,40 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
    case 7:
      Level = BestFriend
      break
+    default: {
+      const loyaltyLevel = level.level as never
+      console.error(`Unsupported loyalty level given: ${loyaltyLevel}`)
+      notFound()
+    }
  }
  return (
    <article className={styles.card}>
-      <Title className={styles.levelHeading} level="h4">
-        {level.level}
+      <section>
+        <BiroScript
+          type="two"
+          color="primaryLightOnSurfaceAccent"
+          tilted="large"
+        >
+          {formatMessage({ id: "Level" })} {level.level}
+        </BiroScript>
+        <Level color="red" />
+      </section>
+      <Title textAlign="center" level="h5">
+        {qualifications}
      </Title>
-      {Level ? <Level color="primaryLightOnSurfaceAccent" /> : null}
      <div className={styles.textContainer}>
-        <Body textTransform="bold">{qualifications}</Body>
        {level.benefits.map((benefit) => (
-          <Body key={benefit.title} textAlign="center">
-            <CheckIcon className={styles.checkIcon} />
+          <Footnote
+            key={benefit.title}
+            textAlign="center"
+            color="textMediumContrast"
+          >
+            <CheckIcon
+              className={styles.checkIcon}
+              color="primaryLightOnSurfaceAccent"
+            />
            {benefit.title}
-          </Body>
+          </Footnote>
        ))}
      </div>
    </article>
@@ -1,8 +1,3 @@
-.container {
-  display: grid;
-  gap: var(--Spacing-x3);
-}
-
 .cardContainer {
  display: grid;
  gap: var(--Spacing-x2);
@@ -20,37 +15,30 @@
 }

 .card {
-  align-content: flex-start;
-  background-color: var(--UI-Grey-10);
+  background-color: var(--Scandic-Brand-Pale-Peach);
  border-radius: var(--Corner-radius-xLarge);
  display: grid;
  gap: var(--Spacing-x2);
+  min-height: 280px;
  justify-content: center;
  justify-items: center;
  padding: var(--Spacing-x5) var(--Spacing-x1);
 }

-.levelHeading {
-  color: var(--Scandic-Peach-70);
-}
-
 .textContainer {
-  align-content: flex-start;
-  display: grid;
+  align-content: flex-end;
+  display: flex;
  gap: var(--Spacing-x-one-and-half);
+  width: 100%;
+  flex-wrap: wrap;
  justify-content: center;
-  justify-items: center;
 }

 .checkIcon {
-  vertical-align: text-bottom;
+  vertical-align: middle;
 }

@media screen and (min-width: 1367px) {
-  .container {
-    gap: var(--Spacing-x4);
-  }
-
  .cardContainer {
    display: grid;
    grid-template-columns: repeat(12, 1fr);