[Bug]: side-nav visual hierarchy

[MatissJanis]

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 addition of the underline for account categories (introduced here https://github.com/actualbudget/actual/pull/2847) has created an issue: the visual hierarchy between accounts and top-level items has been broken.

Some potential solutions:

• slightly increase the font size for "off budget/on budget/all accounts" links and remove the underline
• uppercase the "off budget/on budget/all accounts" links and remove the underline
• underline "all accounts" too (this might look ugly)
• ???

Where are you hosting Actual?

None

What browsers are you seeing the problem on?

No response

Operating System

None

[ParthJohri]

Hi @MatissJanis , Thank you for the bug clarification, I have made the following changes (screenshot attached), pleasre let me know if any further changes need to be done. If everything looks good, then I will create the PR for it.

Modifications

1. Went on with your first suggestion of slightly Increaseing the font size for "off budget/on budget/all accounts" links and removed the underline. All Accounts has slightly more font size than off budget/on budget.
2. Capitalised each word's first letter to put emphasis on the title.

Screenshots

Thank you!

[youngcw]

I like the font size increase and the added capitalization. I do still like the underline though if there is a way to keep it and not make the All Accounts header get lost

[MatissJanis]

Agreed with @youngcw on all things except the underline. IMO it stands out too much in the side-nav and thus creates unnecessary clutter.

We'll need a tie-breaker here on this topic :)

[ParthJohri]

@MatissJanis @youngcw How about this one?

1. Using a solid border to show a parent hierarchy of all accounts.
2. Using a dotted border to show for budget/ off budget.

[newtonfav]

The dotted border doesn't look nice. Why not use a solid border with a very thin border-width? Additionally, remove the solid border for the All Accounts header and increase its font size.

[ParthJohri]

The dotted border doesn't look nice. Why not use a solid border with a very thin border-width? Additionally, remove the solid border for the All Accounts header and increase its font size.

@newtonfav Kind of like this?

[youngcw]

thats pretty nice.

[ParthJohri]

thats pretty nice.

If the above looks good, I can create a PR for it, please let me know if there is any other change to be made.

[MatissJanis]

"All accounts" is too large. None of these nav items should exceed in size the "Setting/Reports/etc" nav items.

How would it look in lightmode? I'm still on the fence for the underlines.

[ParthJohri]

"All accounts" is too large. None of these nav items should exceed in size the "Setting/Reports/etc" nav items.

How would it look in lightmode? I'm still on the fence for the underlines.

@MatissJanis

• If the font size can't be increased, how about using bullet points? For example:-

All Accounts

• For Account

• Off Account

Screenshots for all the themes:-

Light Mode

Dark Mode

Midnight Mode

[Teprifer]

Not sure about bullet points, the account names would also have to be indented a fair bit.

One idea put forward in discord was to only slightly indent the account names by 5px.

[MatissJanis]

Of all the revisions: I liked best the 1st one and second-best was the last one.

Happy to go with either of those options if people still feel like the underline is a good idea for the UX.

[ParthJohri]

Of all the revisions: I liked best the 1st one and second-best was the last one.

Happy to go with either of those options if people still feel like the underline is a good idea for the UX.

@MatissJanis @youngcw @Teprifer @newtonfav How does this look?

1. Indentation of 5 pixels for accounts, sub-accounts.
2. Same font size but capitalisation of each account word.
3. Horizontal line for the accounts, excluding the All Accounts.

[MatissJanis]

Comparatively I prefered the 1st version best. The horizontal indentation looks out of place.

[ParthJohri]

Comparatively I prefered the 1st version best. The horizontal indentation looks out of place.

Thank you @MatissJanis for your suggestions, if others agree then I can create the PR for it.

[youngcw]

@ParthJohri Go ahead and make a PR we can keep discussing there if needed