maiertech commented 1 month ago

Description of change

This PR changes the color of inactive bottom navigation items. Refer to #219.
I cleaned up SVG files and use fill="currentColor" for styling.
I removed conditional styles, since the color is now the same for active and inactive bottom navigation items.

Links to any relevant issues

Fixes #219.

How the change has been tested

Manual visual test on the credentials page on the /me route.

Definition of Done checklist

Add an x to the boxes that are relevant to your changes.

[x] I have followed the contribution guidelines for this project
[x] I have performed a self-review of my own code
[x] I have commented my code, particularly in hard-to-understand areas
[ ] I have made corresponding changes to the documentation
[ ] I have added tests that prove my fix is effective or that my feature works
[x] New and existing unit tests pass locally with my changes

SoulaAndrikopoulos commented 1 month ago

I agree with the points that Oran brought up. 👍 It looks nice, but we have to consider consistency with the tabs (so we follow either of the patterns; greyed out or white). If we give the tabs a white colour it would look as follows:

Screenshot 2024-05-02 at 12 27 43

At the moment, I don't have a clear preference between this and the older design, but I'd be curious to hear other's opinions. :)

maiertech commented 1 month ago

The question is whether a user perceives the bottom navigation as tabs. We should run this by Andrew.

daniel-mader commented 1 month ago

I took a look at how other popular apps style their nav bars and this is what I got for GitHub, Mastodon & Slack (all iOS). I would sum this up with: active icon is in primary color, others are slightly greyed out, no indicator bar. GitHub Slack