fix: adjust earn and burn mobile view

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

@@ -4,6 +4,7 @@
 }
 
 .mobileTable {
+  border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
 }
@@ -13,7 +14,31 @@
 }
 
 .mobileTh {
+  font-size: var(--typography-Body-Regular-fontSize);
+  font-weight: 500;
   padding: var(--Spacing-x2);
+  text-align: left;
+}
+
+.mobileTr {
+  border-top: 1px solid var(--Main-Grey-10);
+}
+
+.mobileTd {
+  padding: var(--Spacing-x2);
+}
+
+.mobileTransactionDetails {
+  display: grid;
+  font-size: var(--typography-Footnote-Regular-fontSize);
+}
+
+.mobileTransactionDate {
+  font-weight: 700;
+}
+
+.mobileTransactionPoints {
+  font-size: var(--typography-Body-Regular-fontSize);
 }
 
 .mobilePlaceholder {
@@ -27,8 +52,8 @@
 }
 
 .table {
-  border-spacing: 0;
   border-collapse: collapse;
+  border-spacing: 0;
   width: 100%;
 }
 

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

@@ -39,10 +39,18 @@ function EarnAndBurn({
       fetchNextPage()
     }
   }
-
+  const transaction = {
+    city: "stockholm",
+    hotelName: "Hotel",
+    nights: 2,
+    awardPoints: 1000,
+    checkinDate: "2022-01-01",
+    checkoutDate: "2022-01-03",
+    confirmationNumber: "123456",
+  }
   const transactions = data?.pages.flatMap((page) => page.data) ?? []
   return (
-    <div>
+    <div className={styles.container}>
       <Header title={title} link={link} subtitle={subtitle} />
 
       <div className={styles.mobileTableContainer}>
@@ -52,11 +60,32 @@ function EarnAndBurn({
             <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>
+            {transactions.length || true ? (
+              [transaction, transaction, transaction].map((xtransaction) => (
+                <tr
+                  className={styles.mobileTr}
+                  key={transaction.confirmationNumber}
+                >
+                  <td
+                    className={`${styles.mobileTd} ${styles.mobileTransactionDetails}`}
+                  >
+                    <span className={styles.mobileTransactionDate}>
+                      {dt(transaction.checkinDate)
+                        .locale(lang)
+                        .format("DD MMM YYYY")}
+                    </span>
+                    {transaction.hotelName && transaction.city ? (
+                      <span>{`${transaction.hotelName}, ${transaction.city}`}</span>
+                    ) : null}
+                    <span>
+                      {`${transaction.nights} ${_(transaction.nights === 1 ? "night" : "nights")}`}
+                    </span>
+                  </td>
+                  <td
+                    className={`${styles.mobileTd} ${styles.mobileTransactionPoints}`}
+                  >
+                    {`${transaction.awardPoints} P`}
+                  </td>
                 </tr>
               ))
             ) : (