[Tidy] Remove redundant CSS and add updated bootstrap file

[huong-li-nguyen]

Description

• Remove collapse.css (redundant since we load in the bootstrap theme now)
• Simplify CSS for table.css (noticed a lot of complex selectors, I just simplified it)
• Move some CSS for Card from bootstrap-theme to static folder
• Load in updated bootstrap file based on merged PR: https://github.com/McK-Private/vizro-bootstrap/pull/44
• Updated screenshots in https://github.com/mckinsey/vizro-qa/pull/141 due to:
  • Token for text-secondary has changed
  • Removed bottom padding for Dash DataTable
  • Apply text-primaryHover color for nav links

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.

[huong-li-nguyen]

I think we've added this back then, because there was no bootstrap theme loaded by default, right? @nadijagraca All of this shouldn't be required anymore given that there is a bootstrap CSS file loaded now. I checked the example apps and it seems to work fine 👍 But could you double-check any apps for which you initially added this CSS in? Was it just for the collapse button? 🤔

[petar-qb]

Just to let you know that there is no longer a smooth collapsing transition when the control panel is collapsed/expanded.

[huong-li-nguyen]

Yeah, I noticed, but I didn't think it was that bad for it to need custom static CSS. I rather live with the default collapse behaviour from Bootstrap and have no static CSS 😬

[petar-qb]

@maxschulz-COL @nadijagraca Do you have any thoughts on this? I think we should keep the collapse transition as done in the main branch, bug I'm okay to remove it if you agree.

[github-actions]

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

Updated on: 2024-12-17 09:38:06 UTC
Commit: 47e88d0

Link: vizro-core/examples/dev/

Link: vizro-core/examples/scratch_dev

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

Link: vizro-ai/examples/dashboard_ui/

[maxschulz-COL]

⭐ 🧹

[nadijagraca]

Really great work! I love seeing all those selectors removed. 🧹 ✨ 🚀

[nadijagraca]

I'm assuming you are repeating #dashboard-container for higher specificity? I'm just curious would we achieve the same result without the repetition?

[huong-li-nguyen]

It would be fine without it. However, if you take a look at the console in the current scratch dev example, you'll see that one dash selector actually has a higher specificity. So if we remove the dashboard-container id, the only reason this works is because the current dash selector does not have these properties defined. In this case, it's just safer to add it, so our selector always has higher specificity.