From ada65b8612437a00c5797f340de57b1c95027bd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Tue, 9 Jul 2024 11:14:30 +0000
Subject: [PATCH] Merged in feat/benefit-cards (pull request #334)

feat: update benefit cards ui

Approved-by: Simon.Emanuelsson
---
 .../Benefits/CurrentLevel/current.module.css  |  4 ----
 .../Blocks/Benefits/CurrentLevel/index.tsx    | 20 +++++++------------
 .../Blocks/Benefits/NextLevel/index.tsx       | 16 +++++++--------
 .../Blocks/Benefits/NextLevel/next.module.css |  4 ----
 .../Text/Body/body.module.css                 |  4 ++++
 .../TempDesignSystem/Text/Body/variants.ts    |  1 +
 6 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
index 564bd7eee..bc26baf04 100644
--- a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
+++ b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
@@ -1,7 +1,3 @@
-.script {
-  transform: rotate(-2deg);
-}
-
 .card {
   align-items: center;
   background-color: var(--Scandic-Opacity-White-100);
diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
index 390f61834..0851a5a95 100644
--- a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
+++ b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
@@ -5,10 +5,7 @@ import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 import Grids from "@/components/TempDesignSystem/Grids"
-import Link from "@/components/TempDesignSystem/Link"
-import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
 import { getMembershipLevelObject } from "@/utils/membershipLevel"
 import { getMembership } from "@/utils/user"
 
@@ -24,7 +21,6 @@ export default async function CurrentBenefitsBlock({
   lang,
 }: AccountPageComponentProps & LangParams) {
   const user = await serverClient().user.get()
-  const { formatMessage } = await getIntl()
   // TAKE NOTE: we need clarification on how benefits stack from different levels
   // in order to determine if a benefit is specific to a level or if it is a cumulative benefit
   // we might have to add a new boolean property "exclusive" or similar
@@ -51,18 +47,16 @@ export default async function CurrentBenefitsBlock({
       <SectionHeader title={title} link={link} subtitle={subtitle} />
       <Grids.Scrollable>
         {currentLevel.benefits.map((benefit, idx) => (
-          <Link className={styles.card} href="#" key={`${currentLevel}-${idx}`}>
-            <BiroScript
-              className={styles.script}
-              color="primaryLightOnSurfaceAccent"
-              type="two"
+          <article className={styles.card} key={`${currentLevel}-${idx}`}>
+            <Title
+              as="h5"
+              level="h3"
+              textAlign="center"
+              textTransform="uppercase"
             >
-              {formatMessage({ id: "As our" })} {currentLevel.name}
-            </BiroScript>
-            <Title as="h5" level="h3" textAlign="center">
               {benefit.title}
             </Title>
-          </Link>
+          </article>
         ))}
       </Grids.Scrollable>
       <SectionLink link={link} variant="mobile" />
diff --git a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx b/components/MyPages/Blocks/Benefits/NextLevel/index.tsx
index b92b1818e..825f4ed3b 100644
--- a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx
+++ b/components/MyPages/Blocks/Benefits/NextLevel/index.tsx
@@ -9,6 +9,7 @@ import SectionLink from "@/components/Section/Link"
 import Chip from "@/components/TempDesignSystem/Chip"
 import Grids from "@/components/TempDesignSystem/Grids"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
 import { getMembershipLevelObject } from "@/utils/membershipLevel"
@@ -49,15 +50,14 @@ export default async function NextLevelBenefitsBlock({
               {formatMessage({ id: "Level up to unlock" })}
             </Chip>
             <div>
-              <BiroScript
-                className={styles.level}
-                color="primaryLightOnSurfaceAccent"
-                textAlign="center"
-                type="two"
-              >
+              <Body color="peach50" textAlign="center">
                 {formatMessage({ id: "As our" })} {nextLevel.name}
-              </BiroScript>{" "}
-              <Subtitle color="pale" textAlign="center">
+              </Body>{" "}
+              <Subtitle
+                color="pale"
+                textAlign="center"
+                textTransform="uppercase"
+              >
                 {benefit.title}
               </Subtitle>
             </div>
diff --git a/components/MyPages/Blocks/Benefits/NextLevel/next.module.css b/components/MyPages/Blocks/Benefits/NextLevel/next.module.css
index c62af3a6f..2e155bc9f 100644
--- a/components/MyPages/Blocks/Benefits/NextLevel/next.module.css
+++ b/components/MyPages/Blocks/Benefits/NextLevel/next.module.css
@@ -8,7 +8,3 @@
   justify-content: center;
   padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x7);
 }
-
-.level {
-  transform: rotate(-2deg);
-}
diff --git a/components/TempDesignSystem/Text/Body/body.module.css b/components/TempDesignSystem/Text/Body/body.module.css
index 8a575b124..58898c85e 100644
--- a/components/TempDesignSystem/Text/Body/body.module.css
+++ b/components/TempDesignSystem/Text/Body/body.module.css
@@ -65,3 +65,7 @@
 .white {
   color: var(--Scandic-Opacity-White-100);
 }
+
+.peach50 {
+  color: var(--Scandic-Peach-50);
+}
diff --git a/components/TempDesignSystem/Text/Body/variants.ts b/components/TempDesignSystem/Text/Body/variants.ts
index 034cdf77e..96d36937e 100644
--- a/components/TempDesignSystem/Text/Body/variants.ts
+++ b/components/TempDesignSystem/Text/Body/variants.ts
@@ -11,6 +11,7 @@ const config = {
       red: styles.red,
       textMediumContrast: styles.textMediumContrast,
       white: styles.white,
+      peach50: styles.peach50,
     },
     textAlign: {
       center: styles.textAlignCenter,