fix: adjust LargeTable styling

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

@@ -19,7 +19,12 @@ export default function BenefitCard({
         <details className={styles.details}>
           <summary className={styles.summary}>
             <hgroup className={styles.benefitCardHeader}>
-              <Title as="h5" level="h2" className={styles.benefitCardTitle}>
+              <Title
+                as="h5"
+                level="h2"
+                textTransform={"regular"}
+                className={styles.benefitCardTitle}
+              >
                 {title}
               </Title>
               <span className={styles.chevron}>

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

@@ -14,6 +14,6 @@
 }
 
 .benefitValueDetails {
-  font-size: var(--typography-Footnote-Regular-fontSize);
+  font-size: var(--typography-Caption-Regular-fontSize);
   text-align: center;
 }

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

@@ -1,19 +1,43 @@
+import { ChevronDown } from "react-feather"
+
+import Image from "@/components/Image"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
 import BenefitValue from "../BenefitValue"
 import LevelSummary from "../LevelSummary"
 
 import styles from "./largeTable.module.css"
 
-import { LargeTableProps } from "@/types/components/loyalty/blocks"
+import {
+  BenefitTableHeaderProps,
+  LargeTableProps,
+} from "@/types/components/loyalty/blocks"
 
 export default function LargeTable({ levels }: LargeTableProps) {
   return (
     <table className={styles.table}>
       <thead className={styles.thead}>
+        <tr className={styles.iconRow}>
+          <th className={styles.verticalTableHeader} />
+
+          {levels.map((level) => {
+            return (
+              <th key={level.tier} className={styles.iconTh}>
+                <Image
+                  height={50}
+                  width={100}
+                  alt={level.name}
+                  src={level.icon}
+                />
+              </th>
+            )
+          })}
+        </tr>
         <tr>
           <th />
           {levels.map((level) => {
             return (
-              <th key={level.tier} className={styles.th}>
+              <th key={level.tier} className={styles.summaryTh}>
                 <LevelSummary level={level} />
               </th>
             )
@@ -24,11 +48,11 @@ export default function LargeTable({ levels }: LargeTableProps) {
         {levels[0].benefits.map((benefit, index) => {
           return (
             <tr key={benefit.name} className={styles.tr}>
-              <th scope={"row"} className={styles.th}>
+              <th scope={"row"} className={styles.benefitTh}>
-                <span className={styles.benefitName}>{benefit.name}</span>
+                <BenefitTableHeader
-                <span className={styles.benefitDescription}>
+                  name={benefit.name}
-                  {benefit.description}
+                  description={benefit.description}
-                </span>
+                />
               </th>
               {levels.map((level) => {
                 return (
@@ -44,3 +68,26 @@ export default function LargeTable({ levels }: LargeTableProps) {
     </table>
   )
 }
+
+function BenefitTableHeader({ name, description }: BenefitTableHeaderProps) {
+  return (
+    <details className={styles.details}>
+      <summary className={styles.summary}>
+        <hgroup className={styles.benefitHeader}>
+          <Title
+            as="h5"
+            level="h2"
+            textTransform={"regular"}
+            className={styles.benefitTitle}
+          >
+            {name}
+          </Title>
+          <span className={styles.chevron}>
+            <ChevronDown />
+          </span>
+        </hgroup>
+      </summary>
+      <p className={styles.benefitDescription}>{description}</p>
+    </details>
+  )
+}

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

@@ -6,26 +6,79 @@
 
 .thead {
   background-color: var(--Base-Surface-Secondary-Normal);
+}
+
+.iconRow {
+  background-color: var(--Base-Surface-Secondary-Normal);
+  border-bottom: none;
   position: sticky;
   top: 0;
+  z-index: 1;
 }
 
-.th,
+.verticalTableHeader {
-.td {
+  width: 242px;
+}
+
+.iconTh {
   border: 1px solid var(--Base-Border-Subtle);
-  padding: var(--Spacing-x3) var(--Spacing-x2);
+  border-bottom: none;
+  padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x-one-and-half);
 }
 
-.th {
+.summaryTh {
+  border: 1px solid var(--Base-Border-Subtle);
+  border-top: none;
   font-size: var(--typography-Caption-Regular-fontSize);
   font-weight: 400;
+  padding: 0 var(--Spacing-x3) var(--Spacing-x2);
 }
 
 .td {
+  border: 1px solid var(--Base-Border-Subtle);
   font-size: var(--typography-Footnote-Regular-fontSize);
+  /* padding: var(--Spacing-x3) var(--Spacing-x2); */
   text-align: center;
 }
 
 .tr:nth-child(odd) {
   background-color: var(--Base-Background-Primary-Elevated, #faf6f2);
 }
+
+.benefitTh {
+  border: 1px solid var(--Base-Border-Subtle);
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+  font-size: var(--typography-Caption-Regular-fontSize);
+  font-weight: 400;
+}
+
+.details[open] .chevron {
+  transform: rotate(180deg);
+}
+
+.benefitHeader {
+  display: grid;
+  gap: var(--Spacing-x1);
+  grid-template-columns: 1fr auto;
+  text-align: start;
+}
+
+.benefitDescription {
+  margin: 0;
+  padding-top: var(--Spacing-x1);
+  text-align: start;
+  padding-right: calc(24px + var(--Spacing-x1));
+}
+
+.chevron {
+  display: flex;
+  align-self: start;
+}
+
+.summary::-webkit-details-marker {
+  display: none;
+}
+
+.summary {
+  list-style: none;
+}

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

@@ -7,7 +7,6 @@ import { LevelSummaryProps } from "@/types/components/loyalty/blocks"
 export default function LevelSummary({ level }: LevelSummaryProps) {
   return (
     <div className={styles.levelSummary}>
-      <Image src={level.icon} alt={level.name} height={50} width={100} />
       <span className={styles.levelRequirements}>{level.requirement}</span>
       <p className={styles.levelSummaryText}>{level.description}</p>
     </div>

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

@@ -6,6 +6,7 @@ import { useIntl } from "react-intl"
 
 import { Lang } from "@/constants/languages"
 
+import Image from "@/components/Image"
 import Select from "@/components/TempDesignSystem/Form/Select"
 
 import levelsData from "./data/EN.json"
@@ -59,6 +60,16 @@ export default function OverviewTable() {
   const [selectedLevelB, setSelectedLevelB] = useState(getLevelByTier(2))
   const [selectedLevelC, setSelectedLevelC] = useState(getLevelByTier(3))
 
+  const defaultLevelA = levelsData.levels.find(
+    (level) => level.tier === selectedLevelA.tier
+  ) as ComparisonLevel
+  const defaultLevelB = levelsData.levels.find(
+    (level) => level.tier === selectedLevelB.tier
+  ) as ComparisonLevel
+  const defaultLevelC = levelsData.levels.find(
+    (level) => level.tier === selectedLevelC.tier
+  ) as ComparisonLevel
+
   function handleSelectChange(
     callback: Dispatch<SetStateAction<ComparisonLevel>>
   ) {
@@ -97,6 +108,14 @@ export default function OverviewTable() {
               defaultSelectedKey={selectedLevelA.tier}
               onSelect={handleSelectChange(setSelectedLevelA)}
             />
+            <Image
+              className={styles.icon}
+              src={defaultLevelA.icon}
+              alt={defaultLevelA.name}
+              height={50}
+              width={100}
+            />
+
             <LevelSummary
               level={
                 levelsData.levels.find(
@@ -113,6 +132,14 @@ export default function OverviewTable() {
               defaultSelectedKey={selectedLevelB.tier}
               onSelect={handleSelectChange(setSelectedLevelB)}
             />
+            <Image
+              className={styles.icon}
+              src={defaultLevelB.icon}
+              alt={defaultLevelB.name}
+              height={50}
+              width={100}
+            />
+
             <LevelSummary
               level={
                 levelsData.levels.find(
@@ -134,6 +161,14 @@ export default function OverviewTable() {
               defaultSelectedKey={selectedLevelA.tier}
               onSelect={handleSelectChange(setSelectedLevelA)}
             />
+            <Image
+              className={styles.icon}
+              src={defaultLevelA.icon}
+              alt={defaultLevelA.name}
+              height={50}
+              width={100}
+            />
+
             <LevelSummary
               level={
                 levelsData.levels.find(
@@ -150,6 +185,14 @@ export default function OverviewTable() {
               defaultSelectedKey={selectedLevelB.tier}
               onSelect={handleSelectChange(setSelectedLevelB)}
             />
+            <Image
+              className={styles.icon}
+              src={defaultLevelB.icon}
+              alt={defaultLevelB.name}
+              height={50}
+              width={100}
+            />
+
             <LevelSummary
               level={
                 levelsData.levels.find(
@@ -166,6 +209,14 @@ export default function OverviewTable() {
               defaultSelectedKey={selectedLevelC.tier}
               onSelect={handleSelectChange(setSelectedLevelC)}
             />
+            <Image
+              className={styles.icon}
+              src={defaultLevelC.icon}
+              alt={defaultLevelC.name}
+              height={50}
+              width={100}
+            />
+
             <LevelSummary
               level={
                 levelsData.levels.find(

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

@@ -56,6 +56,10 @@
   padding: var(--Spacing-x2);
 }
 
+.icon {
+  align-self: center;
+}
+
 .columnHeader:nth-child(1) {
   padding-right: var(--Spacing-x1);
 }

types/components/loyalty/blocks.ts

@@ -92,3 +92,8 @@ export type BenefitListProps = {
 export type LargeTableProps = {
   levels: ComparisonLevel[]
 }
+
+export type BenefitTableHeaderProps = {
+  name: string
+  description: string
+}