feat: add initial mobile layout for earn and burn

components/MyPages/AccountPage/Content.tsx

@@ -35,13 +35,13 @@ function DynamicComponent({ component, props }: AccountPageContentProps) {
     case DynamicContentComponents.next_benefits:
       return <NextLevelBenefitsBlock {...props} />
     case DynamicContentComponents.my_points:
-      return <CurrentPointsBalance />
+      return <CurrentPointsBalance {...props} />
     case DynamicContentComponents.expiring_points:
       // TODO: Add once available
       // return <ExpiringPoints />
       return null
     case DynamicContentComponents.earn_and_burn:
-      return <EarnAndBurn lang={props.lang} />
+      return <EarnAndBurn {...props} />
     default:
       return null
   }

components/MyPages/Blocks/Points/CurrentPointsBalance/currentPointsBalance.module.css

@@ -1,14 +1,14 @@
 .card {
-  background-color: var(--Base-Fill-Normal);
-  border-radius: 16px;
-  color: var(--Theme-Primary-Light-On-Surface-Text);
+  background-color: var(--Main-Grey-10);
+  border-radius: var(--Corner-radius-xLarge);
+  color: var(--Main-Brand-Burgundy);
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 16px;
+  gap: var(--Spacing-x2);
 }
 
 .points {
-  font-size: var(--typography-Title2-Desktop-fontSize);
+  font-size: var(--typography-Title-2-Desktop-fontSize);
   margin: 0;
 }

components/MyPages/Blocks/Points/CurrentPointsBalance/index.tsx

@@ -1,19 +1,32 @@
 import { _ } from "@/lib/translation"
 import { serverClient } from "@/lib/trpc/server"
 
+import Header from "@/components/MyPages/Blocks/Header"
+
 import styles from "./currentPointsBalance.module.css"
 
-async function CurrentPointsBalance() {
+import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+
+async function CurrentPointsBalance({
+  title,
+  subtitle,
+  link,
+  lang,
+}: AccountPageComponentProps) {
   const user = await serverClient().user.get()
   return (
-    <div className={styles.card}>
-      <h2>{`${_("Total points")}*`}</h2>
-      <p
-        className={styles.points}
-      >{`${_("Points")}: ${user.membership?.currentPoints || "N/A"}`}</p>
-      <p className={styles.disclaimer}>
-        {`*${_("Points may take up to 10 days to be displayed.")}`}
-      </p>
+    <div>
+      <Header title={title} link={link} subtitle={subtitle} />
+
+      <div className={styles.card}>
+        <h2>{`${_("Total points")}*`}</h2>
+        <p
+          className={styles.points}
+        >{`${_("Points")}: ${user.membership?.currentPoints || "N/A"}`}</p>
+        <p className={styles.disclaimer}>
+          {`*${_("Points may take up to 10 days to be displayed.")}`}
+        </p>
+      </div>
     </div>
   )
 }

components/MyPages/Blocks/Points/EarnAndBurn/earnAndBurn.module.css

@@ -1,8 +1,29 @@
 .container {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  overflow-x: auto;
+  display: grid;
+  gap: var(--Spacing-x3);
+}
+
+.mobileTable {
+  border-spacing: 0;
+  width: 100%;
+}
+
+.mobileThead {
+  background-color: var(--Main-Grey-10);
+}
+
+.mobileTh {
+  padding: var(--Spacing-x2);
+}
+
+.mobilePlaceholder {
+  text-align: center;
+  padding: var(--Spacing-x4);
+  border: 1px solid var(--Main-Grey-10);
+}
+
+.tableContainer {
+  display: none;
 }
 
 .table {
@@ -12,9 +33,9 @@
 }
 
 .thead {
-  background-color: var(--Base-Fill-Normal);
-  border-left: 1px solid var(--Base-Fill-Normal);
-  border-right: 1px solid var(--Base-Fill-Normal);
+  background-color: var(--Main-Grey-10);
+  border-left: 1px solid var(--Main-Grey-10);
+  border-right: 1px solid var(--Main-Grey-10);
 }
 
 .tr {
@@ -35,5 +56,18 @@
   width: 100%;
   padding: 24px;
   text-align: center;
-  border: 1px solid var(--Base-Fill-Normal);
+  border: 1px solid var(--Main-Grey-10);
+}
+
+@media screen and (min-width: 950px) {
+  .mobileTableContainer {
+    display: none;
+  }
+
+  .tableContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    overflow-x: auto;
+  }
 }

components/MyPages/Blocks/Points/EarnAndBurn/index.tsx

@@ -4,15 +4,13 @@ import { dt } from "@/lib/dt"
 import { _ } from "@/lib/translation"
 import { trpc } from "@/lib/trpc/client"
 
+import Header from "@/components/MyPages/Blocks/Header"
 import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./earnAndBurn.module.css"
 
-import {
-  EarnAndBurnProps,
-  Page,
-  RowProps,
-} from "@/types/components/myPages/myPage/earnAndBurn"
+import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+import { Page, RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
 
 const tableHeadings = [
   _("Arrival date"),
@@ -22,7 +20,12 @@ const tableHeadings = [
   _("Points"),
 ]
 
-function EarnAndBurn({ lang }: EarnAndBurnProps) {
+function EarnAndBurn({
+  lang,
+  title,
+  subtitle,
+  link,
+}: AccountPageComponentProps) {
   const { data, hasNextPage, isFetching, fetchNextPage } =
     trpc.user.transaction.friendTransactions.useInfiniteQuery(
       { limit: 5 },
@@ -38,59 +41,85 @@ function EarnAndBurn({ lang }: EarnAndBurnProps) {
   }
 
   const transactions = data?.pages.flatMap((page) => page.data) ?? []
-  return transactions.length ? (
-    <div className={styles.container}>
-      <table className={styles.table}>
-        <thead className={styles.thead}>
-          <tr>
-            {tableHeadings.map((heading) => (
-              <th key={heading} className={styles.th}>
-                {heading}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {transactions.map((transaction) => (
-            <Row
-              lang={lang}
-              key={transaction.confirmationNumber}
-              transaction={transaction}
-            />
-          ))}
-        </tbody>
-      </table>
-      {/* TODO: add once pagination is available through API */}
-      {/* <Button
-        disabled={isFetching}
-        intent="primary"
-        bgcolor="white"
-        type="button"
-        onClick={loadMoreData}
-      >
-        {_("See more transactions")}
-      </Button> */}
-    </div>
-  ) : (
-    <div className={styles.container}>
-      <table className={styles.table}>
-        <thead className={styles.thead}>
-          <tr>
-            {tableHeadings.map((heading) => (
-              <th key={heading} className={styles.th}>
-                {heading}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td colSpan={tableHeadings.length} className={styles.placeholder}>
-              {_("No transactions available")}
-            </td>
-          </tr>
-        </tbody>
-      </table>
+  return (
+    <div>
+      <Header title={title} link={link} subtitle={subtitle} />
+
+      <div className={styles.mobileTableContainer}>
+        <table className={styles.mobileTable}>
+          <thead className={styles.mobileThead}>
+            <th className={styles.mobileTh}>{_("Transactions")}</th>
+            <th className={styles.mobileTh}>{_("Points")}</th>
+          </thead>
+          <tbody>
+            {transactions.length ? (
+              transactions.map((transaction) => (
+                <tr key={transaction.confirmationNumber}>
+                  <td>{transaction.hotelName}</td>
+                  <td>{transaction.awardPoints}</td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td className={styles.mobilePlaceholder} colSpan={2}>
+                  Empty
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      <div className={styles.tableContainer}>
+        {transactions.length ? (
+          <table className={styles.table}>
+            <thead className={styles.thead}>
+              <tr>
+                {tableHeadings.map((heading) => (
+                  <th key={heading} className={styles.th}>
+                    {heading}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {transactions.map((transaction) => (
+                <Row
+                  lang={lang}
+                  key={transaction.confirmationNumber}
+                  transaction={transaction}
+                />
+              ))}
+            </tbody>
+          </table>
+        ) : (
+          // TODO: add once pagination is available through API
+          // <Button
+          // disabled={isFetching}
+          // intent="primary"
+          // bgcolor="white"
+          // type="button"
+          // onClick={loadMoreData}
+          // >
+          // {_("See more transactions")}
+          // </Button>
+          <table className={styles.table}>
+            <thead className={styles.thead}>
+              <tr>
+                {tableHeadings.map((heading) => (
+                  <th key={heading} className={styles.th}>
+                    {heading}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tr>
+              <td colSpan={tableHeadings.length} className={styles.placeholder}>
+                {_("No transactions available")}
+              </td>
+            </tr>
+          </table>
+        )}
+      </div>
     </div>
   )
 }