FeaturePanel: Highlight colours

[Dlurak]

Example: https://osmapp.org/relation/14995860

Description

Highlight colors by providing a background color for the colour tag.

Design choices

• I'm really unsure about showing the hex code after a word.
• Is it better to use a background color like in this pr or just a small colored space like osm.org?
• I think it is preferred to show the values as they are in osm. But if you want it would be easy to convert the hex codes to human readable color names as I have developed a library for that.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
osmapp	✅ Ready (Inspect)	Visit Preview	Sep 24, 2024 2:38pm

[sentry-io]

🔍 Existing Issues For Review

Your pull request is modifying functions with the following pre-existing issues:

📄 File: src/components/FeaturePanel/Properties/renderValue.tsx

Function	Unhandled Issue
getHumanValue	TypeError: Cannot read properties of undefined (reading 'replace') ... Event Count: 10 Affected Users: 1
getHumanValue	TypeError: undefined is not an object (evaluating 't.replace') ... Event Count: 3 Affected Users: 1

📄 File: src/components/SearchBox/options/openstreetmap.tsx (Click to Expand)

Function	Unhandled Issue
getOsmOptions	TypeError: a is undefined /[[...all]] Event Count: 7 Affected Users: 2
getOsmOptions	TypeError: undefined is not an object (evaluating 'a.match') ... Event Count: 2 Affected Users: 1

---

_{Did you find this useful? React with a 👍 or 👎}

[zbycz]

I'm really unsure about showing the hex code after a word.

I would suggest leaving only the human readable color label and not adding hex.

Is it better to use a background color like in this pr or just a small colored space like osm.org?

Both is fine, the box like on osm.org is maybe better, because you don't have to change text color to make it readable + it doesnt' burn too much people's eyes eg in dark mode 🙂

I think it is preferred to show the values as they are in osm. But if you want it would be easy to convert the hex codes to human readable color names as I have developed a library for that.

I think it is most useful to show the value stored in OSM. I don't think it is worth it to transform hex to human readable label (+all the translations). The color is visible near and everyone with right sight would see it and know the name of the color 🙂

And last but not least, the color tag is not one of the most important in OSM. I prefer having as little code as possible to make it usable, but not too smart. (As always I am open to discussion)

[sentry-io]

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

• ‼️ TypeError: t is undefined /[[...all]] View Issue
• ‼️ TypeError: t.match is not a function /[[...all]] View Issue

_{Did you find this useful? React with a 👍 or 👎}