fix: add heading and subtitle to overview table

components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx

@@ -21,7 +21,6 @@ import SV from "./data/SV.json"
 import BenefitList from "./BenefitList"
 import LargeTable from "./LargeTable"
 import LevelSummary from "./LevelSummary"
-import OverviewTableTitle from "./Title"
 
 import styles from "./overviewTable.module.css"
 
@@ -34,6 +33,7 @@ import {
 import { LangParams } from "@/types/params"
 import { User } from "@/types/user"
 
+  
 const levelsTranslations = {
   [Lang.en]: EN,
   [Lang.sv]: SV,
@@ -42,36 +42,7 @@ const levelsTranslations = {
   [Lang.fi]: FI,
   [Lang.de]: DE,
 }
-
-// These should ultimately be fetched from Contentstack
-const titleTranslations = {
-  [Lang.en]: [
-    { text: "7 delightful levels", highlight: true },
-    { text: "of friendship", highlight: false },
-  ],
-  // TODO: Add translations for the following languages
-  [Lang.da]: [
-    { text: "7 delightful levels", highlight: true },
-    { text: "of friendship", highlight: false },
-  ],
-  [Lang.no]: [
-    { text: "7 delightful levels", highlight: true },
-    { text: "of friendship", highlight: false },
-  ],
-  [Lang.sv]: [
-    { text: "7 delightful levels", highlight: true },
-    { text: "of friendship", highlight: false },
-  ],
-  [Lang.fi]: [
-    { text: "7 delightful levels", highlight: true },
-    { text: "of friendship", highlight: false },
-  ],
-  [Lang.de]: [
-    { text: "7 delightful levels", highlight: true },
-    { text: "of friendship", highlight: false },
-  ],
-}
-
+  
 function getTranslatedLevelByTier(tier: membershipLevels, lang: Lang) {
   return levelsTranslations[lang].levels.find(
     (level) => level.tier === tier
@@ -179,17 +150,7 @@ export default function OverviewTable({ user }: OverviewTableProps) {
   }))
 
   return (
-    <div className={styles.container}>
-      <div className={styles.intro}>
-        <OverviewTableTitle texts={titleTranslations[Lang.en]} />
-        <p className={styles.preamble}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu risus
-          quis varius quam quisque id diam vel. Rhoncus urna neque viverra
-          justo. Mattis aliquam faucibus purus in massa. Id cursus metus aliquam
-          eleifend mi in nulla posuere.
-        </p>
-      </div>
+    <div>
       <div className={styles.mobileColumns}>
         <div className={styles.columnHeaderContainer}>
           <div className={styles.columnHeader}>

components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css

@@ -1,29 +1,8 @@
-.container {
-  margin-top: calc(var(--Spacing-x2) * -1);
-  margin-left: calc(var(--Spacing-x2) * -1);
-  margin-right: calc(var(--Spacing-x2) * -1);
-  margin-bottom: calc(
-    (var(--Spacing-x2) + 7.7rem) * -1
-  ); /* Based on the MaxWidth's 1.6rem + the LoyaltyPage's 7.7rem bottom margins */
-  position: relative;
-  width: 100dvw;
-  padding: var(--Spacing-x2);
-  display: grid;
-  gap: var(--Spacing-x6);
-}
-
 .intro {
   display: grid;
   gap: var(--Spacing-x3);
 }
 
-.preamble {
-  color: var(--Base-Text-Primary-High-contrast);
-  font-size: var(--typography-Body-Regular-fontSize);
-  line-height: var(--typography-Body-Regular-lineHeight);
-  margin: 0;
-}
-
 .largeTableContainer {
   display: none;
 }
@@ -80,12 +59,6 @@
 }
 
 @media screen and (min-width: 950px) {
-  .container {
-    margin-top: calc((var(--Spacing-x2) + 5.8rem) * -1);
-    margin-left: calc(var(--Spacing-x3) * -1);
-    margin-right: calc(var(--Spacing-x3) * -1);
-    margin-bottom: calc((17.5rem + var(--Spacing-x2)) * -1);
-  }
   .mobileColumns {
     display: none;
   }
@@ -111,12 +84,10 @@
 
   .intro {
     margin: auto;
-    max-width: 1512px;
   }
 
   .largeTableContainer {
     display: block;
     margin: auto;
-    max-width: 1512px;
   }
 }