fix(SW-113): add colors to negative and positive point transactions

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

@@ -2,6 +2,8 @@ import { dt } from "@/lib/dt"
 
 import { getIntl } from "@/i18n"
 
+import AwardPoints from "./AwardPoints"
+
 import styles from "./row.module.css"
 
 import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
@@ -16,20 +18,13 @@ export default async function Row({ transaction, lang }: RowProps) {
   const departure = dt(transaction.checkoutDate)
     .locale(lang)
     .format("DD MMM YYYY")
-  const values = [
-    arrival,
-    description,
-    transaction.confirmationNumber,
-    departure,
-    transaction.awardPoints,
-  ]
   return (
     <tr className={styles.tr}>
-      {values.map((value, idx) => (
-        <td key={`value-${idx}`} className={styles.td}>
-          {value}
-        </td>
-      ))}
+      <td className={styles.td}>{arrival}</td>
+      <td className={styles.td}>{description}</td>
+      <td className={styles.td}>{transaction.confirmationNumber}</td>
+      <td className={styles.td}>{departure}</td>
+      <AwardPoints awardPoints={transaction.awardPoints} />
     </tr>
   )
 }