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);
+  background-color: var(--Main-Grey-10);
-  border-radius: 16px;
+  border-radius: var(--Corner-radius-xLarge);
-  color: var(--Theme-Primary-Light-On-Surface-Text);
+  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,11 +1,23 @@
 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>
+      <Header title={title} link={link} subtitle={subtitle} />
+
       <div className={styles.card}>
         <h2>{`${_("Total points")}*`}</h2>
         <p
@@ -15,6 +27,7 @@ async function CurrentPointsBalance() {
           {`*${_("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;
+  display: grid;
-  flex-direction: column;
+  gap: var(--Spacing-x3);
-  gap: 16px;
+}
-  overflow-x: auto;
+
+.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);
+  background-color: var(--Main-Grey-10);
-  border-left: 1px solid var(--Base-Fill-Normal);
+  border-left: 1px solid var(--Main-Grey-10);
-  border-right: 1px solid var(--Base-Fill-Normal);
+  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 {
+import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
-  EarnAndBurnProps,
+import { Page, RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
-  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,8 +41,36 @@ function EarnAndBurn({ lang }: EarnAndBurnProps) {
   }
 
   const transactions = data?.pages.flatMap((page) => page.data) ?? []
-  return transactions.length ? (
+  return (
-    <div className={styles.container}>
+    <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>
@@ -60,19 +91,17 @@ function EarnAndBurn({ lang }: EarnAndBurnProps) {
               ))}
             </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}>
+          // 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>
@@ -83,14 +112,14 @@ function EarnAndBurn({ lang }: EarnAndBurnProps) {
                 ))}
               </tr>
             </thead>
-        <tbody>
             <tr>
               <td colSpan={tableHeadings.length} className={styles.placeholder}>
                 {_("No transactions available")}
               </td>
             </tr>
-        </tbody>
           </table>
+        )}
+      </div>
     </div>
   )
 }