Uniquely and uniformly style status badges
This issue flowed out of https://gitlab.com/gitlab-org/gitlab-ce/issues/25518
How can we uniformly and uniquely style status badges used across gitlab in both the title bars for both issues/mr's as well as ~CI
@pedroms proposed:
Sidenote: I'd remove the border-radius from the status badges (“open”, “closed”, “merged”) because they look like buttons. And maybe even use a less contrasting color (white against color is usually associated to buttons):
however @tauriedavis suggested as a reaction:
We have rounded corners throughout everything in GitLab so the unrounded corners for status badges don't look finished to me. Maybe we could keep the rounded corners but change the contrast to match the labels suggested here.
Screen_Shot_2016-12-12_at_9.24.01_AM
However if we were to do the same for ~CI badges it would look like this in the pipeline list:
i used a 15% opacity background-color and set border to none
It is a little off for some reason...
It's strange as currently some of these badges are used as buttons... and not only as badges.
Proposal
I do not yet have a perfect proposal for this. Do we even want to unify those 2 kinds? (Imo we should, to create a more unified focused look). The idea here is to come up with proposals @pedroms @tauriedavis @cperessini @hazelyang @awhildy
Design
Smallest icons are used in pipeline graph, meta info widgets or any other places statuses are needed or can be used in the advanced system notes https://gitlab.com/gitlab-org/gitlab-ce/issues/25899
The bigger statuses are the actual status badges with their icon-only counter parts for times when space is not available so much
milestones have status badges as well
SVG's: link