feat(WEB-304): remaning UI from design system primitives

2024-06-07 10:36:23 +02:00
parent 6737970f54
commit 7c4b8401e9
228 changed files with 3516 additions and 3237 deletions
--- a/components/Loyalty/Blocks/CardsGrid/cardsGrid.module.css
+++ b/components/Loyalty/Blocks/CardsGrid/cardsGrid.module.css
@@ -1,4 +1,4 @@
 .section {
  display: grid;
-  gap: 2.4rem;
+  gap: var(--Spacing-x2);
 }
--- a/components/Loyalty/Blocks/CardsGrid/index.tsx
+++ b/components/Loyalty/Blocks/CardsGrid/index.tsx
@@ -1,6 +1,6 @@
 import Header from "@/components/MyPages/Blocks/Header"
 import Card from "@/components/TempDesignSystem/Card"
-import CardGrid from "@/components/TempDesignSystem/CardGrid"
+import Grids from "@/components/TempDesignSystem/Grids"

 import styles from "./cardsGrid.module.css"

@@ -10,7 +10,7 @@ export default function CardsGrid({ cards_grid }: CardsGridProps) {
  return (
    <section className={styles.section}>
      <Header title={cards_grid.title} subtitle={cards_grid.preamble} />
-      <CardGrid variant={cards_grid.layout}>
+      <Grids.Stackable>
        {cards_grid.cards.map((card) => (
          <Card
            theme={cards_grid.theme || "one"}
@@ -22,7 +22,7 @@ export default function CardsGrid({ cards_grid }: CardsGridProps) {
            primaryButton={card.primaryButton}
          />
        ))}
-      </CardGrid>
+      </Grids.Stackable>
    </section>
  )
 }
--- a/components/Loyalty/Blocks/DynamicContent/HowItWorks/howItWorks.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/HowItWorks/howItWorks.module.css
@@ -1,11 +1,9 @@
 .container {
-  display: flex;
-  justify-content: center;
  align-items: center;
-  width: 100%;
-  height: 37rem;
-  border-radius: 1.6rem;
  background-color: var(--UI-Grey-10);
-  text-align: center;
-  margin-right: 1.6rem;
+  border-radius: var(--Corner-radius-xLarge);
+  display: flex;
+  height: 370px;
+  justify-content: center;
+  width: 100%;
 }
--- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
@@ -1,14 +1,23 @@
 "use client"

 import { useParams } from "next/navigation"
-import { Check } from "react-feather"
 import { useIntl } from "react-intl"

 import { Lang } from "@/constants/languages"

-import Image from "@/components/Image"
+import { CheckIcon } from "@/components/Icons"
+import {
+  BestFriend,
+  CloseFriend,
+  DearFriend,
+  GoodFriend,
+  LoyalFriend,
+  NewFriend,
+  TrueFriend,
+} from "@/components/Levels"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"

 import levelsData from "./data"
@@ -35,13 +44,11 @@ export default function LoyaltyLevels() {
          />
        ))}
      </div>
-      <div className={styles.buttonContainer}>
-        <Button intent="primary" asChild>
-          <Link href={`/${lang}/compare-all-levels`}>
-            {formatMessage({ id: "Compare all levels" })}
-          </Link>
-        </Button>
-      </div>
+      <Button asChild intent="primary">
+        <Link className={styles.link} href={`/${lang}/compare-all-levels`}>
+          {formatMessage({ id: "Compare all levels" })}
+        </Link>
+      </Button>
    </section>
  )
 }
@@ -51,19 +58,46 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
  const qualifications = level.requiredNights
    ? `${pointsString} ${formatMessage({ id: "or" })} ${level.requiredNights} ${formatMessage({ id: "nights" })}`
    : pointsString
+
+  let Level = null
+  switch (level.tier) {
+    case 1:
+      Level = NewFriend
+      break
+    case 2:
+      Level = GoodFriend
+      break
+    case 3:
+      Level = CloseFriend
+      break
+    case 4:
+      Level = DearFriend
+      break
+    case 5:
+      Level = LoyalFriend
+      break
+    case 6:
+      Level = TrueFriend
+      break
+    case 7:
+      Level = BestFriend
+      break
+  }
  return (
    <article className={styles.card}>
      <Title className={styles.tierHeading} level="h4">
        {level.tier}
      </Title>
-      <Image src={level.icon} alt={level.name} width={140} height={54} />
-      <p className={styles.qualifications}>{qualifications}</p>
-      {level.benefits.map((benefit) => (
-        <p key={benefit.title} className={styles.benefits}>
-          <Check className={styles.icon} />
-          {benefit.title}
-        </p>
-      ))}
+      {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} />
+            {benefit.title}
+          </Body>
+        ))}
+      </div>
    </article>
  )
 }
--- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
@@ -1,86 +1,69 @@
 .container {
  display: grid;
-  gap: 2.4rem;
-}
-
-.buttonContainer {
-  display: flex;
-  justify-content: center;
+  gap: var(--Spacing-x3);
 }

 .cardContainer {
-  display: flex;
-  gap: 0.8rem;
+  display: grid;
+  gap: var(--Spacing-x2);
+  margin-right: calc(0px - var(--Spacing-x2));
  overflow-x: auto;
-  padding-right: 1.6rem;
-  margin-right: -1.6rem;
+  padding-right: var(--Spacing-x2);
  /* Hide scrollbar IE and Edge */
  -ms-overflow-style: none;
  /* Hide Scrollbar Firefox */
  scrollbar-width: none;
 }

+.link {
+  justify-self: center;
+}
+
 .card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 37rem;
-  min-width: 32rem;
-  padding: 4rem 1rem;
+  align-content: flex-start;
  background-color: var(--UI-Grey-10);
-  border-radius: 1.6rem;
-  gap: 1.8rem;
+  border-radius: var(--Corner-radius-xLarge);
+  display: grid;
+  gap: var(--Spacing-x2);
+  justify-content: center;
+  justify-items: center;
+  padding: var(--Spacing-x5) var(--Spacing-x1);
 }

 .tierHeading {
-  color: #b05b65;
+  color: var(--Scandic-Peach-70);
 }

-.qualifications {
-  margin: 0;
-  font-size: var(--typography-Body-Bold-fontSize);
-  line-height: var(--typography-Body-Bold-lineHeight);
-  /* font-weight: var(--typography-Body-Bold-fontWeight);  -- Tokens not parsable*/
-  font-weight: 600;
+.textContainer {
+  align-content: flex-start;
+  display: grid;
+  gap: var(--Spacing-x-one-and-half);
+  justify-content: center;
+  justify-items: center;
 }

-.benefits {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: var(--typography-Body-Regular-fontSize);
-  line-height: var(--typography-Body-Regular-lineHeight);
-  margin: 0;
-  text-align: center;
-}
-
-.icon {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  position: relative;
-  top: 0.3rem;
-  height: 1.4rem;
+.checkIcon {
+  vertical-align: text-bottom;
 }

@media screen and (min-width: 1367px) {
  .container {
-    gap: 3.2rem;
+    gap: var(--Spacing-x4);
  }

  .cardContainer {
    display: grid;
-    grid-template-columns: repeat(12, auto);
+    grid-template-columns: repeat(12, 1fr);
+    margin-right: 0;
    /* Three columns in the first row */
    padding-right: 0;
-    margin-right: 0rem;
  }

-  .card {
-    min-width: auto;
-  }
-
-  .card:nth-child(-n + 3) {
+  .card:nth-of-type(-n + 3) {
    grid-column: span 4;
  }

-  .card:nth-last-child(-n + 4) {
+  .card:nth-of-type(n + 4) {
    grid-column: span 3;
  }
 }
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css
@@ -56,4 +56,4 @@
  .benefitComparison {
    grid-template-columns: 1fr 1fr 1fr;
  }
-}
+}
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
@@ -7,8 +7,8 @@

 .levelRequirements {
  background-color: var(--Main-Brand-Burgundy);
-  border-radius: var(--Corner-radius-xLarge);
-  color: #f7e1d5;
+  border-radius: var(--Corner-radius-Medium);
+  color: var(--Scandic-Brand-Pale-Peach);
  padding: var(--Spacing-x-half) var(--Spacing-x1);
 }

@@ -27,4 +27,4 @@
  .levelSummaryText {
    font-size: var(--typography-Caption-Regular-fontSize);
  }
-}
+}
--- a/components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css
@@ -1,36 +1,36 @@
 .container {
  display: grid;
-  gap: 2.4rem;
+  gap: var(--Spacing-x4);
  /* These negative margins are needed for horizontally scrollable lists of cards */
-  margin-right: -1.6rem;
-  padding-right: 1.6rem;
+  margin-right: calc(0px - var(--Spacing-x2));
+  overflow-x: hidden;
+  padding-right: var(--Spacing-x2);
 }

-.titleContainer {
+.header {
  display: grid;
-  grid-template-areas: "title link" "subtitle subtitle";
-  grid-template-columns: 1fr max-content;
-  padding-bottom: 0.8rem;
+  gap: var(--Spacing-x1);
+  grid-template-columns: 1fr auto;
 }

 .title {
-  grid-area: title;
+  grid-column: 1/2;
+  grid-row: 1/2;
 }

 .link {
-  grid-area: link;
-  font-size: var(--typography-Body-Underlined-fontSize);
-  color: var(--some-black-color, #000);
+  grid-column: 2/-1;
+  grid-row: 1/2;
 }

 .subtitle {
-  margin: 0;
-  grid-area: subtitle;
+  grid-column: 1/-1;
+  grid-row: 2;
 }

@media screen and (min-width: 950px) {
  .container {
-    margin-right: 0;
-    margin-left: 0;
+    margin-right: var(--Spacing-x0);
+    margin-left: var(--Spacing-x0);
  }
 }
--- a/components/Loyalty/Blocks/DynamicContent/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/index.tsx
@@ -1,9 +1,7 @@
 import { serverClient } from "@/lib/trpc/server"

 import { auth } from "@/auth"
-import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import Title from "@/components/TempDesignSystem/Text/Title"
+import Header from "@/components/MyPages/Blocks/Header"

 import HowItWorks from "./HowItWorks"
 import LoyaltyLevels from "./LoyaltyLevels"
@@ -36,9 +34,10 @@ async function DynamicComponentBlock({ component }: DynamicComponentProps) {

 export default function DynamicContent({
  dynamicContent,
+  firstItem,
 }: DynamicContentProps) {
  const displayHeader = !!(
-    dynamicContent.title ||
+    dynamicContent.link ||
    dynamicContent.subtitle ||
    dynamicContent.title
  )
@@ -46,19 +45,12 @@ export default function DynamicContent({
  return (
    <section className={styles.container}>
      {displayHeader ? (
-        <header className={styles.titleContainer}>
-          <Title as="h3" className={styles.title} level="h2">
-            {dynamicContent.title}
-          </Title>
-          {dynamicContent.link ? (
-            <Link className={styles.link} href={dynamicContent.link.href}>
-              {dynamicContent.link.text}
-            </Link>
-          ) : null}
-          <Subtitle className={styles.subtitle}>
-            {dynamicContent.subtitle}
-          </Subtitle>
-        </header>
+        <Header
+          link={dynamicContent.link}
+          subtitle={dynamicContent.subtitle}
+          title={dynamicContent.title}
+          topTitle={firstItem}
+        />
      ) : null}
      <DynamicComponentBlock component={dynamicContent.component} />
    </section>
--- a/components/Loyalty/Blocks/WebView/index.tsx
+++ b/components/Loyalty/Blocks/WebView/index.tsx
@@ -10,7 +10,8 @@ import { LoyaltyBlocksTypenameEnum } from "@/types/components/loyalty/enums"
 import { LangParams } from "@/types/params"

 export function Blocks({ lang, blocks }: BlocksProps & LangParams) {
-  return blocks.map((block) => {
+  return blocks.map((block, idx) => {
+    const firstItem = idx === 0
    switch (block.__typename) {
      case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardsGrid:
        return <CardsGrid cards_grid={block.cards_grid} />
@@ -34,7 +35,12 @@ export function Blocks({ lang, blocks }: BlocksProps & LangParams) {
            : undefined,
        }

-        return <DynamicContentBlock dynamicContent={dynamicContent} />
+        return (
+          <DynamicContentBlock
+            dynamicContent={dynamicContent}
+            firstItem={firstItem}
+          />
+        )
      case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts:
        const shortcuts = block.shortcuts.shortcuts.map((shortcut) => ({
          ...shortcut,
@@ -42,6 +48,7 @@ export function Blocks({ lang, blocks }: BlocksProps & LangParams) {
        }))
        return (
          <Shortcuts
+            firstItem={firstItem}
            shortcuts={shortcuts}
            title={block.shortcuts.title}
            subtitle={block.shortcuts.preamble}
--- a/components/Loyalty/Blocks/index.tsx
+++ b/components/Loyalty/Blocks/index.tsx
@@ -8,7 +8,8 @@ import type { BlocksProps } from "@/types/components/loyalty/blocks"
 import { LoyaltyBlocksTypenameEnum } from "@/types/components/loyalty/enums"

 export function Blocks({ blocks }: BlocksProps) {
-  return blocks.map((block) => {
+  return blocks.map((block, idx) => {
+    const firstItem = idx === 0
    switch (block.__typename) {
      case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent:
        return (
@@ -20,10 +21,16 @@ export function Blocks({ blocks }: BlocksProps) {
          </section>
        )
      case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent:
-        return <DynamicContentBlock dynamicContent={block.dynamic_content} />
+        return (
+          <DynamicContentBlock
+            dynamicContent={block.dynamic_content}
+            firstItem={firstItem}
+          />
+        )
      case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts:
        return (
          <Shortcuts
+            firstItem={firstItem}
            shortcuts={block.shortcuts.shortcuts}
            subtitle={block.shortcuts.preamble}
            title={block.shortcuts.title}
--- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
+++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
@@ -1,21 +1,5 @@
-.container {
-  display: grid;
-  text-align: center;
-  gap: 0.4rem;
-  padding: 1rem;
-}
-
-.title {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: 1.6rem;
-  font-weight: 700;
-
-  margin: 0;
-}
-
-.value {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: 1.6rem;
-  font-weight: 400;
-  margin: 0;
+.icon,
+.icon * {
+  fill: var(--Scandic-Brand-Burgundy);
+  margin-bottom: var(--Spacing-x-half);
 }
--- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
+++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
@@ -1,5 +1,7 @@
 import { serverClient } from "@/lib/trpc/server"

+import { EmailIcon, PhoneIcon } from "@/components/Icons"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import { getValueFromContactConfig } from "@/utils/contactConfig"

 import styles from "./contactRow.module.css"
@@ -7,7 +9,7 @@ import styles from "./contactRow.module.css"
 import type { ContactRowProps } from "@/types/components/loyalty/sidebar"

 export default async function ContactRow({ contact }: ContactRowProps) {
-  const data = await serverClient().contentstack.config.contact()
+  const data = await serverClient().contentstack.base.contact()

  const val = getValueFromContactConfig(contact.contact_field, data)

@@ -15,10 +17,22 @@ export default async function ContactRow({ contact }: ContactRowProps) {
    return null
  }

+  let Icon = null
+  if (contact.contact_field.includes("email")) {
+    Icon = EmailIcon
+  } else if (contact.contact_field.includes("phone")) {
+    Icon = PhoneIcon
+  }
+
  return (
-    <div className={styles.container}>
-      <h4 className={styles.title}>{contact.display_text}</h4>
-      <p className={styles.value}>{val}</p>
+    <div>
+      {Icon ? <Icon className={styles.icon} /> : null}
+      <Body color="burgundy" textAlign="center" textTransform="bold">
+        {contact.display_text}
+      </Body>
+      <Body color="burgundy" textAlign="center">
+        {val}
+      </Body>
    </div>
  )
 }
--- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css
+++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css
@@ -4,13 +4,18 @@

@media screen and (min-width: 1367px) {
  .contactContainer {
+    align-items: center;
+    border-top: 1px solid var(--UI-Grey-30);
    display: flex;
    flex-direction: column;
-    align-items: center;
+    gap: var(--Spacing-x5);
    justify-content: center;
-    border-top: 0.5px solid var(--UI-Grey-30);
-    padding: 3.4rem;
+    padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x5);
    text-align: center;
-    gap: 6.2rem;
+  }
+
+  .contact {
+    display: grid;
+    gap: var(--Spacing-x-one-and-half);
  }
 }
--- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx
+++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx
@@ -1,4 +1,4 @@
-import Title from "@/components/TempDesignSystem/Text/Title"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"

 import ContactRow from "./ContactRow"
@@ -11,9 +11,11 @@ import type { ContactProps } from "@/types/components/loyalty/sidebar"
 export default async function Contact({ contactBlock }: ContactProps) {
  const { formatMessage } = await getIntl()
  return (
-    <div className={styles.contactContainer}>
-      <Title level="h5">{formatMessage({ id: "Contact us" })}</Title>
-      <section>
+    <article className={styles.contactContainer}>
+      <Subtitle textAlign="center">
+        {formatMessage({ id: "Contact us" })}
+      </Subtitle>
+      <section className={styles.contact}>
        {contactBlock.map(({ contact, __typename }, i) => {
          switch (__typename) {
            case JoinLoyaltyContactTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact:
@@ -28,6 +30,6 @@ export default async function Contact({ contactBlock }: ContactProps) {
          }
        })}
      </section>
-    </div>
+    </article>
  )
 }
--- a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
+++ b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
@@ -1,6 +1,8 @@
-import Image from "@/components/Image"
+import { ScandicFriends } from "@/components/Levels"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"

@@ -12,31 +14,32 @@ import type { JoinLoyaltyContactProps } from "@/types/components/loyalty/sidebar

 export default async function JoinLoyaltyContact({
  block,
+  lang,
 }: JoinLoyaltyContactProps) {
  const { formatMessage } = await getIntl()
  return (
-    <div className={styles.container}>
-      <div className={styles.wrapper}>
-        <Title level="h3">{block.title}</Title>
-        <Image
-          alt="Scandic Friends"
-          className={styles.image}
-          height={65}
-          src="/_static/icons/scandic-friends.png"
-          width={203}
-        />
-        {block.preamble && <p className={styles.preamble}>{block.preamble}</p>}
-        <Button intent="primary">
-          <span>{formatMessage({ id: "Join Scandic Friends" })}</span>
+    <section className={styles.container}>
+      <article className={styles.wrapper}>
+        <Title as="h4" level="h3">
+          {block.title}
+        </Title>
+        <ScandicFriends color="primaryLightOnSurfaceAccent" />
+        {block.preamble ? (
+          <Body textAlign="center">{block.preamble}</Body>
+        ) : null}
+        <Button asChild className={styles.link} intent="primary">
+          <Link href="#">
+            {formatMessage({ id: "Join Scandic Friends" })}
+          </Link>
        </Button>
-        <div className={styles.linkContainer}>
-          <Link href="/login" className={styles.loginLink}>
+        <Link href={`/${lang}/login`}>
+          <Footnote textAlign="center" textTransform="bold">
            {formatMessage({ id: "Already a friend?" })} <br />
            {formatMessage({ id: "Click here to log in" })}
-          </Link>
-        </div>
-      </div>
-      {block.contact && <Contact contactBlock={block.contact} />}
-    </div>
+          </Footnote>
+        </Link>
+      </article>
+      {block.contact ? <Contact contactBlock={block.contact} /> : null}
+    </section>
  )
 }
--- a/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css
+++ b/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css
@@ -1,54 +1,21 @@
 .container {
+  background-color: var(--Main-Grey-White);
  display: grid;
-  font-weight: 600;
-  background-color: var(--Base-Background-Elevated);
 }

 .wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
-  gap: 2rem;
-  padding: 6rem 2rem;
+  gap: var(--Spacing-x5);
+  padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x5);
 }

-.preamble {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: 1.6rem;
-  font-weight: 400;
-  line-height: 2.4rem;
-  text-align: center;
-  margin: 0;
-}
-
-.loginLink {
-  text-decoration: none;
-  color: var(--some-black-color, #2e2e2e);
-  font-size: 1.2rem;
-}
-
-.linkContainer {
-  text-align: center;
-}
-
-.contactContainer {
-  display: none;
-}
-
-@media screen and (min-width: 1367px) {
-  .container {
-    border-radius: 32px 4px 4px 32px;
-  }
-
-  .wrapper {
-    gap: 3rem;
-  }
-
-  .contactContainer {
-    display: block;
-    border-top: 0.5px solid var(--UI-Grey-30);
-    display: flex;
-    justify-content: center;
-    padding: 3.4rem;
-  }
+/* TODO: Remove when we get proper button variables */
+.link {
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: var(--typography-Body-Bold-fontWeight);
+  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  line-height: var(--typography-Body-Bold-lineHeight);
 }
--- a/components/Loyalty/Sidebar/index.tsx
+++ b/components/Loyalty/Sidebar/index.tsx
@@ -7,9 +7,9 @@ import styles from "./sidebar.module.css"
 import { SidebarTypenameEnum } from "@/types/components/loyalty/enums"
 import { SidebarProps } from "@/types/components/loyalty/sidebar"

-export default function SidebarLoyalty({ blocks }: SidebarProps) {
+export default function SidebarLoyalty({ blocks, lang }: SidebarProps) {
  return (
-    <aside>
+    <aside className={styles.aside}>
      {blocks.map((block) => {
        switch (block.__typename) {
          case SidebarTypenameEnum.LoyaltyPageSidebarContent:
@@ -22,7 +22,12 @@ export default function SidebarLoyalty({ blocks }: SidebarProps) {
              </section>
            )
          case SidebarTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContact:
-            return <JoinLoyaltyContact block={block.join_loyalty_contact} />
+            return (
+              <JoinLoyaltyContact
+                block={block.join_loyalty_contact}
+                lang={lang}
+              />
+            )
          default:
            return null
        }
--- a/components/Loyalty/Sidebar/sidebar.module.css
+++ b/components/Loyalty/Sidebar/sidebar.module.css
@@ -1,5 +1,11 @@
+.aside {
+  align-content: flex-start;
+  display: grid;
+  gap: var(--Spacing-x4);
+}
+
@media screen and (max-width: 1366px) {
  .content {
-    padding: 0 1.6rem;
+    padding: var(--Spacing-x0) var(--Spacing-x2);
  }
 }