[Bug] Fix coloring of NavLinks inside NavBar

[huong-li-nguyen]

Description

With the latest Bootstrap theme, the NavLinks inside our NavBars were incorrectly colored. However, this is actually not an issue of the Bootstrap theme, as the CSS itself is correct.

The issue appears as with the usage of dbc.NavBar, the className ="navbar-light" is automatically attached to that component in both dark and light theme. We could probably fix this via callbacks, but I think the CSS fix is fine.

Screenshot

Notice

• I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
  • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
  • I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
  • I have not referenced individuals, products or companies in any commits, directly or indirectly.
  • I have not added data or restricted code in any commits, directly or indirectly.

[github-actions]

View the example dashboards of the current commit live on PyCafe ☕ 🚀

Updated on: 2025-01-24 09:40:54 UTC
Commit: bea9116

Link: vizro-core/examples/dev/

Link: vizro-core/examples/scratch_dev

Link: vizro-core/examples/visual-vocabulary/

Link: vizro-ai/examples/dashboard_ui/

[petar-qb]

Great spot! Thanks for fixing it.

However, I found that this change broke the "Made with Vizro" banner look.

Dark theme	Light theme

I'm also wondering how our screenshot tests didn't catch the incorrect NavLinks colour (introduced in one of our previous PRs) or the appearance of the "Made with Vizro" banner (that's introduced with this PR). @l0uden do we have screenshot tests that check NavLinks or "Made with Vizro" banner? Maybe it doesn't make sense to make a check for the banner as it's a custom component added in some of our examples. 🤔

[huong-li-nguyen]

I'm also wondering how our screenshot tests didn't catch the incorrect NavLinks colour (introduced in one of our previous PRs) or the appearance of the "Made with Vizro" banner (that's introduced with this PR). @l0uden do we have screenshot tests that check NavLinks or "Made with Vizro" banner? Maybe it doesn't make sense to make a check for the banner as it's a custom component added in some of our examples. 🤔

Ah, great catch! 🚀 Fixed now. I don't think we have any screenshot tests for the banners, as these only appear in our demos and our demos are fixed to a specific vizro version on HF (so that bug wouldn't have affected the banners unless we upgraded the vizro version).

[petar-qb]

FYI: I just had a quick chat with @l0uden and he'll add a banner and navlink into an existing screenshot test that checks both themes.

[petar-qb]

This looks good!

[maxschulz-COL]

Checking the demos this looks good, thanks!