diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-1-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-1-chromium-linux.png index a673a71a94..ec230ee08b 100644 Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-1-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-2-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-2-chromium-linux.png index 1554d99c7b..32c0771fe6 100644 Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-2-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-2-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-3-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-3-chromium-linux.png index 4efe730d03..e25e1fef81 100644 Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-3-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-3-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-4-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-4-chromium-linux.png index 1d4ab50b1b..00b9315263 100644 Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-4-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-4-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-5-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-5-chromium-linux.png index bce3d3d5ed..b731372559 100644 Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-5-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-5-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-6-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-6-chromium-linux.png index d3b759c34e..bcbe639487 100644 Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-6-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-6-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-7-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-7-chromium-linux.png index 6d22dd6ffa..0c5b54923f 100644 Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-7-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-7-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-8-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-8-chromium-linux.png index bc3de56297..69117e3256 100644 Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-8-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-8-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-9-chromium-linux.png b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-9-chromium-linux.png index e839b1a472..a6e54dd119 100644 Binary files a/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-9-chromium-linux.png and b/packages/desktop-client/e2e/accounts.mobile.test.ts-snapshots/Mobile-Accounts-opens-individual-account-page-and-checks-that-filtering-is-working-9-chromium-linux.png differ diff --git a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx index 9a31001ab5..7c904e4113 100644 --- a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx +++ b/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={() => diff --git a/packages/desktop-client/src/components/mobile/budget/BudgetTable.tsx b/packages/desktop-client/src/components/mobile/budget/BudgetTable.tsx index c9f389c40e..2654f75d1e 100644 --- a/packages/desktop-client/src/components/mobile/budget/BudgetTable.tsx +++ b/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', diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx b/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx index 8a68c958cf..ac45bd7999 100644 --- a/packages/desktop-client/src/components/mobile/transactions/TransactionListWithBalances.tsx +++ b/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" /> diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.tsx b/packages/desktop-client/src/components/transactions/TransactionsTable.tsx index 3fae2e3d17..e1f5caf019 100644 --- a/packages/desktop-client/src/components/transactions/TransactionsTable.tsx +++ b/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} diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts index 820b5798de..a45ab5e21b 100644 --- a/packages/desktop-client/src/style/themes/dark.ts +++ b/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; diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts index 7c2288cf52..48fd175005 100644 --- a/packages/desktop-client/src/style/themes/development.ts +++ b/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; diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts index d2ce76236d..a51af3ccfa 100644 --- a/packages/desktop-client/src/style/themes/light.ts +++ b/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; diff --git a/packages/desktop-client/src/style/themes/midnight.ts b/packages/desktop-client/src/style/themes/midnight.ts index e3854db6ae..f7ff90e8f6 100644 --- a/packages/desktop-client/src/style/themes/midnight.ts +++ b/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; diff --git a/upcoming-release-notes/6764.md b/upcoming-release-notes/6764.md new file mode 100644 index 0000000000..187366d53d --- /dev/null +++ b/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