feat: brand consolodation

[Alessandro100]

closes: #756

Summary:

Mobility database is a product of MobilityData and as such this PR introduces more styling elements to better align with the MobilityData brand as seen on mobilitydata.org

This PR also consolidates random colors and assures that elements on the web app use colors directly from the theme

Biggest changes

• Buttons now use the MobilityData secondary font
• Header elements have similar hover animations to the mobilitydata.org website (including styling for mobile)

Expected behavior:

The application should work the same, just different styling

Testing tips:

Go through the application and try to find visual defects

What's next

• Revisit way of implementing styling (instead of always having inline styling)
• Fix the favicon size (to match the mobilitydata.org) and possibly slightly different color
• Get a MobilityDatabase logo image done and implement it
• Remove old components (LegacyHome, Contribute)
• Make reusable styling components (Page Headers + content box)

Please make sure these boxes are checked before submitting your pull request - thanks!

• Run the unit tests with ./scripts/api-tests.sh to make sure you didn't break anything
• Add or update any needed documentation to the repo
• Format the title like "feat: [new feature short description]". Title must follow the Conventional Commit Specification(https://www.conventionalcommits.org/en/v1.0.0/).
• Linked all relevant issues
• Include screenshot(s) showing how this pull request works and fixes the issue(s)

Current

After

Active Tab

[github-actions]

Preview Firebase Hosting URL: https://mobility-feeds-dev--pr-778-vnqwad38.web.app

[cka-y]

LGTM! 🤩

[nit] Noticed a little inconsistency: when hovering over linked elements in https://gtfs-validator.mobilitydata.org/, the color changes, but it doesn’t in the Mobility Database. Maybe we could align the behavior for consistency?

[Alessandro100]

Good point, I checked on the mobilitydata.org website and they have those types of links in the primary colour but they don't change color on hover

https://mobilitydata.org/what-we-do/

This gives me the idea that the validator could use some minor UI touch ups

[qcdyx]

Nitpick - Line above Text: I noticed there's a line above the "Explore and Access Global Transit Data" text. It slightly crowds the content. Removing it may make the header feel more spacious.

I also feel this isn’t something exclusive to the dev team. Perhaps after the summit, we could organize an internal vote to gather wider organizational feedback on these visual and branding changes.

[emmambd]

@Alessandro100 I think the line is good! I agree with @qcdyx that more padding between the homepage heading and the nav line would be good though.

I don't think we should design by committee - any more comprehensive visual re-design we do would be with a designer, but I don't anticipate one in the next 3-6 months. This looks great and provides more visual interest on the site! Thanks for this great work.

[github-actions]

Preview Firebase Hosting URL: https://mobility-feeds-dev--pr-778-2me386cq.web.app