Merged in feat/benefit-cards (pull request #334)

feat: update benefit cards ui

Approved-by: Simon.Emanuelsson

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);

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" />