Restyle the status bar #3672
Restyle the status bar #3672
Conversation
frjo
force-pushed
the
enhancement/restyle_status_bar
branch
from
2f10333
to
b90d5f1
Compare
|
More work needed, this code is used for submissions, projects, on dashboard etc. Only tested on submissions so far. |
frjo
force-pushed
the
enhancement/restyle_status_bar
branch
4 times, most recently
from
4290823
to
bf8760d
Compare
frjo
added
Type: Enhancement
|
@frjo doing user testing it looks like a huge improvement! I did noticell a few weird things come up, like the checks were now a little odd looking and the red progress indicator wouldn't always make it to the needed stage: I cleared my cache & tested in an incognito window to confirm and the results were the same, but let me know if there's another step I might've missed. |
frjo
force-pushed
the
enhancement/restyle_status_bar
branch
from
bf8760d
to
758ec56
Compare
|
@wes-otf Thanks for testing. Fixed the bug where the bar did not get filled on accept/dismissed status. That the checkmarks are not aligned in the dot is most likely font related. With the system-ui font stack you get different fonts on different plattforms. Needs to be adjusted so it looks nice everywhere. In your screenshot the checkmark is not white like it is for me, another browser/plattform issue I guess. |
|
@frjo ahh that totally makes sense. My testing was with Firefox & MacOS if that's helpful. Would it be better to potentially use the heroicons |
|
I'm definitely not well versed history of this feature so apologies if that's something that's already been tried ^ |
|
The checkmark should be white for all now. If we can not easily make it center for all browsers/plattforms, replacing it with a SVG or maybe force it to another font is a good options I think. |
|
@wes-otf Now I think I finally found the issue. The first fix did nothing in Chrome. Chrome does not set colour on unicode checkmark 2714, it works on 2713. Apparently 2714 is considered an emoji and Chrome does not change colour on these, Webkit does. |
|
@wes-otf Do you feel this is good to go now? Planing to make a new release this week. |
| font-weight: bold; | ||
| background: $color--primary; | ||
| border-color: $color--primary; | ||
| content: "✓"; |
There was a problem hiding this comment.
All looks good! The only super small thing I saw on test was that the applicant dashboard's status bar still had a black color for the check. Might be a good idea to keep the additions of 49ffdbd
| content: "✓"; | |
| content: "✓"; | |
| color: $color--white; |
There was a problem hiding this comment.
applicant dashboard in question ^
There was a problem hiding this comment.
Missed that one, thanks for testing!
frjo
force-pushed
the
enhancement/restyle_status_bar
branch
from
43f02eb
to
a0b0481
Compare
frjo
added
Status: Tested - approved for live ✅
and removed
Status: Needs testing
Fixes #3669 Make the status bar work with different fonts, viewports etc. and always align.
Fixes #3669 Make the status bar work with different fonts, viewports etc. and always align.
Fixes #3669 Make the status bar work with different fonts, viewports etc. and always align.
Fixes #3669
Make the status bar work with different fonts, viewports etc. and always align.