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

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

@@ -1,5 +1,6 @@
 import { dt } from "@/lib/dt"
 
+import AwardPoints from "@/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/AwardPoints"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import { getIntl } from "@/i18n"
 
@@ -41,9 +42,7 @@ export default async function MobileTable({ lang, transactions }: TableProps) {
                     {`${transaction.nights} ${formatMessage({ id: transaction.nights === 1 ? "night" : "nights" })}`}
                   </span>
                 </td>
-                <td className={styles.transactionPoints}>
-                  {`${transaction.awardPoints} P`}
-                </td>
+                <AwardPoints awardPoints={transaction.awardPoints} />
               </tr>
             ))
           ) : (

components/MyPages/Blocks/Points/EarnAndBurn/Mobile/mobile.module.css

@@ -29,10 +29,6 @@
   font-weight: 700;
 }
 
-.transactionPoints {
-  font-size: var(--typography-Body-Regular-fontSize);
-}
-
 .placeholder {
   text-align: center;
   padding: var(--Spacing-x4);