[Bug]: Goal template balance colouring not correct on mobile

[matt-fidd]

Verified issue does not already exist?

• [X] I have searched and found no existing issue
• [X] I will be providing steps how to reproduce the bug (in most cases this will also mean uploading a demo budget file)

What happened?

The balance colouring to reflect goal template status (yellow under goal, green on track) works correctly on desktop but does not change to yellow on mobile and shows green regardless of if they are part of a template or not.

2024-06-25-My Finances 1.zip

Example budget attached but you can reproduce easily:

• Enable goal templates
• Template 20 to a category
• Apply templates
• Transfer 10 to another category
• On desktop balance goes yellow, on mobile both appear green

Desktop:

Mobile:

Where are you hosting Actual?

Locally via Yarn

What browsers are you seeing the problem on?

Chrome

Operating System

Windows 11

[matt-fidd]

This looks to be a regression caused by #2642

Before:

After:

[youngcw]

Im viewing the updated budget table and its working for me

[matt-fidd]

Odd, I can reproduce it in on https://edge.actualbudget.org too.

https://github.com/actualbudget/actual/assets/81489167/3443f714-1756-49d4-a5c6-ce3be6cfee3c

[matt-fidd]

if you create a blank file do my steps reproduce it for you? I've been trying to dig into the code a bit but I'm not particularly up on React

[youngcw]

JK, im seeing the issue. Red is still working which is weird

[matt-fidd]

I think (untested) the mobile view at current reverts back to positive number = green, negative number = red and ignores the goal template altogether

[youngcw]

@joel-jeremy Do you have an idea on why this would not be working? Ive been digging through the mobile code and I cant tell why the colors are getting ignored in the mobile view.

[youngcw]

Ok, the colors are definitely being overridden. The green and red show always. I can see that the colors are getting set by the base balanceWithCarryover commponent, but are likely getting re-set somewhere else along the line

[youngcw]

I believe the issue is with https://github.com/actualbudget/actual/blob/master/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx line 556-588. The base component returns colors, but the extra formatting and styling is using makeAmountFullStyle which is overwritting the goal colors