Datahub: Make geo data badge more readable

[tkohr]

Description

PR removes the background color from geo data badge to make it more readable in a generic way.

Quality Assurance Checklist

• Commit history is devoid of any merge commits and readable to facilitate reviews
• If new logic ⚙️ is introduced: unit tests were added
• If new user stories 🤏 are introduced: E2E tests were added
• If new UI components 🕹️ are introduced: corresponding stories in Storybook were created
• If breaking changes 🪚 are introduced: add the breaking change label
• If bugs 🐞 are fixed: add the backport <release branch> label
• The documentation website 📚 has received the love it deserves

This work is sponsored by geo2france.

[github-actions]

Affected libs: ``,
Affected apps: datahub,

• 🚀 Build and deploy storybook and demo on GitHub Pages
• 📦 Build and push affected docker images

[github-actions]

📷 Screenshots are here!

[jahow]

This PR removes the background, right? Can't we simply use a normal badge, and not simply use the foreground color in that case?

[tkohr]

This PR removes the background, right? Can't we simply use a normal badge, and not simply use the foreground color in that case?

Indeed, it would be an alternative to use the same badge style as under the search input (with badge-btn bg-primary-opacity-50 and some more modifications). Personally, I had a slight preference to the outcome with a style consistent to the update date (same foreground color and no badge layout anymore), but if we really want to keep a badge layout this is an option.

[tkohr]

A second look using light text and opacity 1 for the background via the gn-ui-badge convinced me of its outcome :

I made the opacity configurable along the way. Hope this is what you had in mind @jahow.

[jahow]

Looking good, thanks!! The margins look a bit off compared to the mockup:

I'll let you judge, merge when you want!

[tkohr]

Hum, the figma mockup is a little different I have the impression