From 349c95fbc40bd12b20b23302bf967329985d1b38 Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Mon, 3 Jun 2024 14:51:25 +0200
Subject: [PATCH] fix: add table styling

---
 .../BenefitCard/benefitCard.module.css        | 20 --------
 .../OverviewTable/BenefitCard/index.tsx       | 29 ++---------
 .../BenefitValue/benefitValue.module.css      | 19 +++++++
 .../OverviewTable/BenefitValue/index.tsx      | 26 ++++++++++
 .../OverviewTable/LargeTable/index.tsx        | 50 +++++++++++++------
 .../LargeTable/largeTable.module.css          | 31 ++++++++++++
 .../LevelSummary/levelSummary.module.css      | 12 ++++-
 7 files changed, 126 insertions(+), 61 deletions(-)
 create mode 100644 components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css
 create mode 100644 components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/index.tsx
 create mode 100644 components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css

diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css
index cd6e21f5a..0e105cbdb 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css
+++ b/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;
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx
index d408d723a..75f8d748c 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx
+++ b/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 {
-  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>
-  )
-}
+import { BenefitCardProps } from "@/types/components/loyalty/blocks"
 
 export default function BenefitCard({
   comparedValues,
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/benefitValue.module.css
new file mode 100644
index 000000000..2f3bb7240
--- /dev/null
+++ b/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;
+}
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitValue/index.tsx
new file mode 100644
index 000000000..0ce0e26f7
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
index 8db525088..1b0b0248b 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
+++ b/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>
-      <thead>
-        <th />
-        {levels.map((level) => {
-          console.log({ level })
+    <table className={styles.table}>
+      <thead className={styles.thead}>
+        <tr>
+          <th />
+          {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}>
-              <Image
-                src={level.icon}
-                alt={level.name}
-                width={140}
-                height={54}
-              />
-            </th>
+            <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>
+              {levels.map((level) => {
+                return (
+                  <td key={level.tier} className={styles.td}>
+                    <BenefitValue benefit={level.benefits[index]} />
+                  </td>
+                )
+              })}
+            </tr>
           )
         })}
-      </thead>
+      </tbody>
     </table>
   )
 }
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
new file mode 100644
index 000000000..e1a76f39b
--- /dev/null
+++ b/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);
+}
diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
index ea7a4938f..2a2f0ad4e 100644
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
+++ b/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);
+  }
+}