fix: add table styling

components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css

@@ -8,26 +8,6 @@
   grid-column: 1/3;
 }
 
-.benefitValueContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--Spacing-x-one-and-half);
-}
-
-.benefitValue {
-  background-color: var(--Main-Brand-Burgundy);
-  border-radius: var(--Corner-radius-Medium);
-  color: var(--Base-Surface-Primary-Hover-alt, #fff);
-  font-size: var(--typography-Footnote-Regular-fontSize);
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
-}
-
-.benefitValueDetails {
-  font-size: var(--typography-Footnote-Regular-fontSize);
-  text-align: center;
-}
-
 .benefitCardHeader {
   display: grid;
   grid-template-columns: 1fr auto;

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

@@ -1,33 +1,12 @@
-import { ChevronDown, Minus } from "react-feather"
+import { ChevronDown } from "react-feather"
 
-import CheckCircle from "@/components/Icons/CheckCircle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
+import BenefitValue from "../BenefitValue"
+
 import styles from "./benefitCard.module.css"
 
-import {
+import { BenefitCardProps } from "@/types/components/loyalty/blocks"
-  BenefitCardProps,
-  BenefitValueProps,
-} from "@/types/components/loyalty/blocks"
-
-function BenefitValue({ benefit }: BenefitValueProps) {
-  if (!benefit.unlocked) {
-    return <Minus />
-  }
-  if (!benefit.value) {
-    return <CheckCircle height={32} width={32} />
-  }
-  return (
-    <div className={styles.benefitValueContainer}>
-      <span className={styles.benefitValue}>{benefit.value}</span>
-      {benefit.valueDetails && (
-        <span className={styles.benefitValueDetails}>
-          {benefit.valueDetails}
-        </span>
-      )}
-    </div>
-  )
-}
 
 export default function BenefitCard({
   comparedValues,

components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css

@@ -0,0 +1,19 @@
+.benefitValueContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.benefitValue {
+  background-color: var(--Main-Brand-Burgundy);
+  border-radius: var(--Corner-radius-xLarge);
+  color: var(--Base-Surface-Primary-Hover-alt, #fff);
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+}
+
+.benefitValueDetails {
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  text-align: center;
+}

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

@@ -0,0 +1,26 @@
+import { Minus } from "react-feather"
+
+import CheckCircle from "@/components/Icons/CheckCircle"
+
+import styles from "./benefitValue.module.css"
+
+import { BenefitValueProps } from "@/types/components/loyalty/blocks"
+
+export default function BenefitValue({ benefit }: BenefitValueProps) {
+  if (!benefit.unlocked) {
+    return <Minus />
+  }
+  if (!benefit.value) {
+    return <CheckCircle height={32} width={32} />
+  }
+  return (
+    <div className={styles.benefitValueContainer}>
+      <span className={styles.benefitValue}>{benefit.value}</span>
+      {benefit.valueDetails && (
+        <span className={styles.benefitValueDetails}>
+          {benefit.valueDetails}
+        </span>
+      )}
+    </div>
+  )
+}

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

@@ -1,26 +1,46 @@
-import Image from "@/components/Image"
+import BenefitValue from "../BenefitValue"
+import LevelSummary from "../LevelSummary"
+
+import styles from "./largeTable.module.css"
 
 import { LargeTableProps } from "@/types/components/loyalty/blocks"
 
 export default function LargeTable({ levels }: LargeTableProps) {
   return (
-    <table>
+    <table className={styles.table}>
-      <thead>
+      <thead className={styles.thead}>
-        <th />
+        <tr>
-        {levels.map((level) => {
+          <th />
-          console.log({ level })
+          {levels.map((level) => {
+            return (
+              <th key={level.tier} className={styles.th}>
+                <LevelSummary level={level} />
+              </th>
+            )
+          })}
+        </tr>
+      </thead>
+      <tbody>
+        {levels[0].benefits.map((benefit, index) => {
           return (
-            <th key={level.tier}>
+            <tr key={benefit.name} className={styles.tr}>
-              <Image
+              <th scope={"row"} className={styles.th}>
-                src={level.icon}
+                <span className={styles.benefitName}>{benefit.name}</span>
-                alt={level.name}
+                <span className={styles.benefitDescription}>
-                width={140}
+                  {benefit.description}
-                height={54}
+                </span>
-              />
+              </th>
-            </th>
+              {levels.map((level) => {
+                return (
+                  <td key={level.tier} className={styles.td}>
+                    <BenefitValue benefit={level.benefits[index]} />
+                  </td>
+                )
+              })}
+            </tr>
           )
         })}
-      </thead>
+      </tbody>
     </table>
   )
 }

components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css

@@ -0,0 +1,31 @@
+.table {
+  border: 1px solid var(--Base-Border-Subtle);
+  border-collapse: collapse;
+  color: var(--BURGUNDY, #4d001b);
+}
+
+.thead {
+  background-color: var(--Base-Surface-Secondary-Normal);
+  position: sticky;
+  top: 0;
+}
+
+.th,
+.td {
+  border: 1px solid var(--Base-Border-Subtle);
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+}
+
+.th {
+  font-size: var(--typography-Caption-Regular-fontSize);
+  font-weight: 400;
+}
+
+.td {
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  text-align: center;
+}
+
+.tr:nth-child(odd) {
+  background-color: var(--Base-Background-Primary-Elevated, #faf6f2);
+}

components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css

@@ -7,7 +7,7 @@
 
 .levelRequirements {
   background-color: var(--Main-Brand-Burgundy);
-  border-radius: var(--Corner-radius-Medium);
+  border-radius: var(--Corner-radius-xLarge);
   color: #f7e1d5;
   padding: var(--Spacing-x-half) var(--Spacing-x1);
 }
@@ -18,3 +18,13 @@
   line-height: var(--typography-Body-Regular-lineHeight);
   margin: 0;
 }
+
+@media screen and (min-width: 1367px) {
+  .levelRequirements {
+    font-size: var(--typography-Footnote-Regular-fontSize);
+  }
+
+  .levelSummaryText {
+    font-size: var(--typography-Caption-Regular-fontSize);
+  }
+}