[Mobile] Add negative/positive colors to mobile transaction amount input (#2628)

* Add colors to mobile transaction amount input

* VRT updates

* Release notes

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

@@ -75,9 +75,9 @@ export function makeAmountFullStyle(
     zeroColor?: string;
   },
 ) {
-  const positiveColorToUse = colors.positiveColor || theme.noticeText;
-  const negativeColorToUse = colors.negativeColor || theme.errorText;
-  const zeroColorToUse = colors.zeroColor || theme.tableTextSubdued;
+  const positiveColorToUse = colors?.positiveColor || theme.noticeText;
+  const negativeColorToUse = colors?.negativeColor || theme.errorText;
+  const zeroColorToUse = colors?.zeroColor || theme.tableTextSubdued;
   return {
     color:
       value < 0

packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx

@@ -17,6 +17,7 @@ import {
 import { useLocalPref } from '../../../hooks/useLocalPref';
 import { useMergedRefs } from '../../../hooks/useMergedRefs';
 import { type CSSProperties, theme } from '../../../style';
+import { makeAmountFullStyle } from '../../budget/util';
 import { Button } from '../../common/Button';
 import { Text } from '../../common/Text';
 import { View } from '../../common/View';
@@ -230,6 +231,9 @@ export const FocusableAmountInput = memo(function FocusableAmountInput({
         onUpdateAmount={amount => onUpdateAmount(amount, isNegative)}
         focused={focused && !disabled}
         style={{
+          ...makeAmountFullStyle(value, {
+            zeroColor: isNegative ? theme.errorText : theme.noticeText,
+          }),
           width: 80,
           justifyContent: 'center',
           ...style,
@@ -276,7 +280,14 @@ export const FocusableAmountInput = memo(function FocusableAmountInput({
               ...style,
             }}
           >
-            <Text style={{ fontSize: 15, userSelect: 'none', ...textStyle }}>
+            <Text
+              style={{
+                ...makeAmountFullStyle(value),
+                fontSize: 15,
+                userSelect: 'none',
+                ...textStyle,
+              }}
+            >
               {amountToCurrency(Math.abs(value))}
             </Text>
           </View>

upcoming-release-notes/2628.md

+---
+category: Enhancements
+authors: [joel-jeremy]
+---
+
+Add negative/positive colors to mobile transaction amount input