fix: adjust LargeTable styling

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}>
-                <span className={styles.benefitName}>{benefit.name}</span>
-                <span className={styles.benefitDescription}>
-                  {benefit.description}
-                </span>
+              <th scope={"row"} className={styles.benefitTh}>
+                <BenefitTableHeader
+                  name={benefit.name}
+                  description={benefit.description}
+                />
               </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>
+  )
+}