make colors on budget page more legibile (#6764)

* use old budget page colours

* running balance

* schedule indicator

* mobile to budget

* note

* template indicator due should match underfunded

* coderabbit

* mobile to budget neutral zero

* matiss feedback

* mobile account balance

* Update VRT screenshots

Auto-generated by VRT workflow

PR: #6764

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx

@@ -427,9 +427,9 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
                 style={{
                   color:
                     scheduleStatus === 'missed'
-                      ? theme.errorText
+                      ? theme.budgetNumberNegative
                       : scheduleStatus === 'due'
-                        ? theme.warningText
+                        ? theme.templateNumberUnderFunded
                         : theme.upcomingText,
                 }}
                 onPress={() =>

packages/desktop-client/src/components/mobile/budget/BudgetTable.tsx

@@ -116,10 +116,10 @@ function ToBudget({ toBudget, onPress, show3Columns }: ToBudgetProps) {
                       fontWeight: '700',
                       color:
                         amount < 0
-                          ? theme.errorText
+                          ? theme.toBudgetNegative
                           : amount > 0
-                            ? theme.noticeText
-                            : theme.formInputText,
+                            ? theme.toBudgetPositive
+                            : theme.budgetNumberNeutral,
                     }}
                   >
                     {format(value, type)}
@@ -434,7 +434,7 @@ function BudgetTableHeader({
 
   const amountStyle: CSSProperties = {
     ...styles.tnum,
-    color: theme.formInputText,
+    color: theme.budgetNumberNeutral,
     textAlign: 'right',
     fontSize: 12,
     fontWeight: '500',

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

@@ -282,7 +282,11 @@ function Balance({ balance }: BalanceProps) {
               textAlign: 'center',
               fontWeight: '500',
               color:
-                props.value < 0 ? theme.errorText : theme.pillTextHighlighted,
+                props.value < 0
+                  ? theme.numberNegative
+                  : props.value > 0
+                    ? theme.numberPositive
+                    : theme.numberNeutral,
             }}
             data-testid="transactions-balance"
           />

packages/desktop-client/src/components/transactions/TransactionsTable.tsx

@@ -1670,7 +1670,8 @@ const Transaction = memo(function Transaction({
               : integerToCurrency(runningBalance)
           }
           valueStyle={{
-            color: runningBalance < 0 ? theme.errorText : theme.noticeTextLight,
+            color:
+              runningBalance < 0 ? theme.numberNegative : theme.numberPositive,
           }}
           style={{ ...styles.tnum, ...amountStyle }}
           width={103}

packages/desktop-client/src/style/themes/dark.ts

@@ -39,8 +39,8 @@ export const tableRowBackgroundHighlightText = colorPalette.navy150;
 export const tableRowHeaderBackground = colorPalette.navy700;
 export const tableRowHeaderText = colorPalette.navy150;
 
-export const numberPositive = colorPalette.green400;
-export const numberNegative = colorPalette.red300;
+export const numberPositive = colorPalette.green300;
+export const numberNegative = colorPalette.red200;
 export const numberNeutral = colorPalette.navy500;
 export const budgetNumberNegative = numberNegative;
 export const budgetNumberZero = tableTextSubdued;

packages/desktop-client/src/style/themes/development.ts

@@ -39,15 +39,15 @@ export const tableRowBackgroundHighlightText = colorPalette.navy700;
 export const tableRowHeaderBackground = colorPalette.navy50;
 export const tableRowHeaderText = colorPalette.navy800;
 
-export const numberPositive = colorPalette.green400;
-export const numberNegative = colorPalette.red300;
+export const numberPositive = colorPalette.green700;
+export const numberNegative = colorPalette.red500;
 export const numberNeutral = colorPalette.navy100;
 export const budgetNumberNegative = numberNegative;
 export const budgetNumberZero = tableTextSubdued;
 export const budgetNumberNeutral = tableText;
 export const budgetNumberPositive = budgetNumberNeutral;
 export const templateNumberFunded = numberPositive;
-export const templateNumberUnderFunded = colorPalette.orange300;
+export const templateNumberUnderFunded = colorPalette.orange700;
 export const toBudgetPositive = numberPositive;
 export const toBudgetZero = numberPositive;
 export const toBudgetNegative = budgetNumberNegative;

packages/desktop-client/src/style/themes/light.ts

@@ -42,8 +42,8 @@ export const tableRowHeaderText = colorPalette.navy800;
 export const numberPositive = colorPalette.green700;
 export const numberNegative = colorPalette.red500;
 export const numberNeutral = colorPalette.navy100;
-export const budgetNumberZero = tableTextSubdued;
 export const budgetNumberNegative = numberNegative;
+export const budgetNumberZero = tableTextSubdued;
 export const budgetNumberNeutral = tableText;
 export const budgetNumberPositive = budgetNumberNeutral;
 export const templateNumberFunded = numberPositive;

packages/desktop-client/src/style/themes/midnight.ts

@@ -39,15 +39,15 @@ export const tableRowBackgroundHighlightText = colorPalette.gray800;
 export const tableRowHeaderBackground = colorPalette.gray700;
 export const tableRowHeaderText = colorPalette.gray150;
 
-export const numberPositive = colorPalette.green400;
-export const numberNegative = colorPalette.red300;
+export const numberPositive = colorPalette.green300;
+export const numberNegative = colorPalette.red200;
 export const numberNeutral = colorPalette.gray500;
 export const budgetNumberNegative = numberNegative;
 export const budgetNumberZero = tableTextSubdued;
 export const budgetNumberNeutral = tableText;
 export const budgetNumberPositive = budgetNumberNeutral;
 export const templateNumberFunded = numberPositive;
-export const templateNumberUnderFunded = colorPalette.orange300;
+export const templateNumberUnderFunded = colorPalette.orange200;
 export const toBudgetPositive = numberPositive;
 export const toBudgetZero = numberPositive;
 export const toBudgetNegative = budgetNumberNegative;

upcoming-release-notes/6764.md

@@ -0,0 +1,6 @@
+---
+category: Bugfixes
+authors: [matt-fidd]
+---
+
+Make colors on budget page more legible and increase number coloring consistency