Closed linusha closed 2 months ago
tillprochaska
commented
2 months ago Also, I am unsure with the gaps - first question is if those even are the gaps that were meant?
Yes, I think so.
If those are the correct gaps - the result looks weird to me, but I think that will always be the case once we need to add space between them. Might just be a question of familiarization on my end.
It looks better if you remove the light gray background!
tillprochaska
commented
2 months ago I’d probably try to add a solid green or red background behind the icon and percentage label -- otherwise the text can become a little difficult to read with the stronger background pattern.
linusha
commented
2 months ago It looks better if you remove the light gray background!
It does. I also removed the shadow, as that made weird lines through the empty space. However, I do not have a hard opinion on this. What do you think? I updated the picture above accordingly.
linusha
commented
2 months ago I’d probably try to add a solid green or red background behind the icon and percentage label -- otherwise the text can become a little difficult to read with the stronger background pattern.
Done.
linusha
commented
2 months ago After looking at it for some time, I tend to think we should either make the small bars just a bit less tall or the large bar even taller? The difference in height is not as drastic now...
tillprochaska
commented
2 months ago I also removed the shadow, as that made weird lines through the empty space. However, I do not have a hard opinion on this. What do you think?
I think it looks good the way you implemented it!
tillprochaska
commented
2 months ago After looking at it for some time, I tend to think we should either make the small bars just a bit less tall or the large bar even taller? The difference in height is not as drastic now...
Agreed. Haven’t pulled the branch, but based on the screenshot I’m pretty sure the bar is larger than 10px. Maybe
10-12px should look something like this:
Maybe this is due to the empty text element?
Fixes #1023, #1021, #1022.
Before:
After:
@tillprochaska contrast comes down to around 1.5:1-1.6:1 now. I opted for the same "level of whiteness" for both green and red, and then just made it high enough so that the contrast works for both colors. Having different "whiteness" levels looked weird to me, but I imagine you might have thoughts :upside_down_face:.
Also, I am unsure with the gaps - first question is if those even are the gaps that were meant? Or have I completely misunderstood the problem? If those are the correct gaps - the result looks weird to me, but I think that will always be the case once we need to add space between them. Might just be a question of familiarization on my end.