Feat: gbfs validator, validation report UI styling + gbfs java validator types

[Alessandro100]

Summary:

closes https://github.com/MobilityData/product-tasks/issues/163

Added the type from the gbfs-validator openapi file + styled the validation report page. Updated the dark mode theme contrast text to be more accessible with the contrast

Expected behavior:

When you go to the validation report page, that all the elements look cohesive, look good on light mode, dark mode, and all screen resolutions

Testing tips:

Go to the validation report page gbfs-validator?AutoDiscoveryUrl=https%3A%2F%2Fbackend.citiz.fr%2Fpublic%2Fprovider%2F19%2Fgbfs%2Fv3.0%2Fgbfs.json and play around with the UI (screen sizes, light / dark mode). Report things that could be improved or are not clear

Note
All values are hard coded and going to be changed

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)

[github-actions]

*Lighthouse ran on https://mobility-feeds-dev--pr-1422-l8gkn31v.web.app/ * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟠 63	🟢 100	🟢 100	🟢 100

*Lighthouse ran on https://mobility-feeds-dev--pr-1422-l8gkn31v.web.app/feeds * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟠 83	🟢 91	🟢 100	🟢 100

*Lighthouse ran on https://mobility-feeds-dev--pr-1422-l8gkn31v.web.app/feeds/gtfs/mdb-2126 * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟠 56	🟢 95	🟢 100	🟢 100

*Lighthouse ran on https://mobility-feeds-dev--pr-1422-l8gkn31v.web.app/feeds/gtfs_rt/mdb-2585 * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟢 93	🟠 88	🟢 100	🟢 100

*Lighthouse ran on https://mobility-feeds-dev--pr-1422-l8gkn31v.web.app/gbfs/gbfs-flamingo_porirua * (Desktop)
⚡️ HTML Report Lighthouse report for the changes in this PR:

Performance	Accessibility	Best Practices	SEO
🟢 100	🟢 100	🟢 100	🟢 100

[github-actions]

Preview Firebase Hosting URL: https://mobility-feeds-dev--pr-1422-l8gkn31v.web.app

[emmambd]

Awesome work! Can you share a bit more re: what you intend to do with the OSM map? The tags like "valid" vs. "invalid" don't seem to be dynamic so I assume that'll come in a future PR.

Only point of feedback - I wonder if there's a way we can sort/group repetitive messages I wonder if it would be easier to understand repetitive errors if each time "KEY" is invalid were shown together

[Alessandro100]

Awesome work! Can you share a bit more re: what you intend to do with the OSM map? The tags like "valid" vs. "invalid" don't seem to be dynamic so I assume that'll come in a future PR.

Only point of feedback - I wonder if there's a way we can sort/group repetitive messages I wonder if it would be easier to understand repetitive errors if each time "KEY" is invalid were shown together

The map will have a similar idea to the GTFS Visualizations map. On this page it will be a quick preview of the stations and/or dockless vehicles. Then there will be an advanced map (separate page) where the user would be able to filter by vehicle type, select stations (like routes), hide / show options etc

The tags "valid" / "invalid" are going to be either or, I showed them both in this PR to see what it would look like.

Grouping by error could be interesting, if we want to go down that road we should open up another ticket