fix: tweak custom colors

[kabaros]

fixes https://dhis2.atlassian.net/browse/DHIS2-21100

[kabaros]

how it looks now

1. Text shadows for title: white behind black text; black behind white text, with 0.5 opacity
2. Online Badge: background is black with light-opacity (0.25) - and border that is text-color with opacity 0.15
3. Notification Badges: it is now text-color as background

Other opinions:

1. We're better without the text shadows when using custom colors - they work sometimes better, but sometimes not [Mozafar]
2. On light backgrounds, should we have black logo rather than the blue one [Kai]
3. Should we have the notification badge as green with white text always [Kai]
   ..

---

notification with fixed green badge

This is how it would look like with green badge

---

text without shadow

This is how it would look like without the text shadow for the title (sliiiight difference)

[kabaros]

@KaiVandivier @cooper-joe I added some screenshots here for how the custom colors look like with the latest tweaks - there are some pending questions, let me know about them (and if I missed anything)

[cooper-joe]

Thanks for the examples @kabaros. My suggestions:

Text shadows

I think the shadow only benefits white text. So if we can, conditionally apply the text-shadow in the dark-background-white-text scenario. If that isn't possible, remove the text-shadow for custom colours.

Online badge

I don't think the border is needed, the opacity background does the job of containing the element. The border looks too much like a button on some colour combinations. I'd also suggest reducing background opacity to 0.2.

Logo blue vs. black

Difficult to say what is best here. Blue is nice on desaturated lights, but can look bad and give a "shimmering" effect on some light colours. So, I'd vote black, as it has the least risk of contributing to a poor UX.

Notification badge colour

Agreed, keep as green-background-with-white-text always. (Probably a good time for us to consider improving these badges too, related ticket)

[kabaros]

here are updated screenshots after the tweaks:

[cooper-joe]

Nice, those changes look good for design. Approved with the below fix.

Last issue I can see is the black DHIS2 logo version is larger than the standard white one, seems like the `svg { height: 20px; width: 22px; } isn't being applied.

[KaiVandivier]

Something happened to the online badge's circle icon... looking into it

[KaiVandivier]

A couple comments added -- I think the SonarQube items are reasonable too

Still mainly waiting on the black logo size

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[KaiVandivier]

1. Fixed black icon size
2. Handled "no color selected" case
3. Handled SonarQube warnings

[dhis2-bot]

🎉 This PR is included in version 1.12.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀