[Mobile] Add amount colors to mobile accounts and transaction list (#2665)

* Add amount colors to mobile transaction list

* Release notes

* Fix lint error

* Add amount colors to mobile accounts page

* VRT updates

packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx

@@ -8,7 +8,7 @@ import { View } from '../common/View';
 import { CellValue } from '../spreadsheet/CellValue';
 import { useSheetValue } from '../spreadsheet/useSheetValue';
 
-import { makeAmountStyle } from './util';
+import { makeBalanceAmountStyle } from './util';
 
 type BalanceWithCarryoverProps = {
   carryover: ComponentProps<typeof CellValue>['binding'];
@@ -41,7 +41,7 @@ export function BalanceWithCarryover({
         binding={balance}
         type="financial"
         getStyle={value =>
-          makeAmountStyle(
+          makeBalanceAmountStyle(
             value,
             isGoalTemplatesEnabled ? goalValue : null,
             budgetedValue,
@@ -72,7 +72,11 @@ export function BalanceWithCarryover({
           <SvgArrowThinRight
             width={carryoverStyle?.width || 7}
             height={carryoverStyle?.height || 7}
-            style={makeAmountStyle(balanceValue, goalValue, budgetedValue)}
+            style={makeBalanceAmountStyle(
+              balanceValue,
+              goalValue,
+              budgetedValue,
+            )}
           />
         </View>
       )}

packages/desktop-client/src/components/budget/util.ts

@@ -45,7 +45,7 @@ export function makeAmountGrey(value: number | string): CSSProperties {
     : null;
 }
 
-export function makeAmountStyle(
+export function makeBalanceAmountStyle(
   value: number,
   goalValue?: number,
   budgetedValue?: number,

packages/desktop-client/src/components/mobile/accounts/Accounts.jsx

@@ -11,6 +11,7 @@ import { useNavigate } from '../../../hooks/useNavigate';
 import { useSetThemeColor } from '../../../hooks/useSetThemeColor';
 import { SvgAdd } from '../../../icons/v1';
 import { theme, styles } from '../../../style';
+import { makeAmountFullStyle } from '../../budget/util';
 import { Button } from '../../common/Button';
 import { Text } from '../../common/Text';
 import { TextOneLine } from '../../common/TextOneLine';
@@ -135,7 +136,7 @@ function AccountCard({
           binding={getBalanceQuery(account)}
           type="financial"
           style={{ fontSize: 16, color: 'inherit' }}
-          getStyle={value => value < 0 && { color: 'inherit' }}
+          getStyle={makeAmountFullStyle}
           data-testid="account-balance"
         />
       </Button>

packages/desktop-client/src/components/mobile/transactions/Transaction.jsx

@@ -14,6 +14,7 @@ import {
   SvgLockClosed,
 } from '../../../icons/v2';
 import { styles, theme } from '../../../style';
+import { makeAmountFullStyle } from '../../budget/util';
 import { Button } from '../../common/Button';
 import { Text } from '../../common/Text';
 import { TextOneLine } from '../../common/TextOneLine';
@@ -208,6 +209,7 @@ export const Transaction = memo(function Transaction({
             marginLeft: 25,
             marginRight: 5,
             fontSize: 14,
+            ...makeAmountFullStyle(amount),
           }}
         >
           {integerToCurrency(amount)}

upcoming-release-notes/2665.md

+---
+category: Enhancements
+authors: [joel-jeremy]
+---
+
+Add amount colors to mobile accounts and transaction list.