Refined-github: Change button colour background to the `Draft` PR label

[ntwb]

It's nice to have "labels" on our pull requests, though with a Draft pull request this isn't always practical, though when you view a list of PRs the Draft PR label/status is easily missed, adding a light grey background colour to the Draft text would help make these stand out a little clearer IMHO.

Example URL: https://github.com/WordPress/gutenberg/pulls

[fregante]

Like this?

/* demo */
span[aria-label="Open draft pull request"] {
    background: #e8e8e8;
    width: 1.6em;
    display: inline-flex;
    height: 1.6em;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: -1em;
    margin-left: -0.4em;
    margin-right: -0.2em;
}
span[aria-label="Open draft pull request"] svg {
    color: white !important;
}

[ntwb]

Yeah, something like that would be great:)

[sindresorhus]

I would make the actual icon slightly darker gray than white, as now, the icon it almost not visible.

[fregante]

Do you mean the regular icon but darker? Or my circle + dark gray icon instead of white?

[tdtm]

I'd do the circle darker gray. It seems from the screenshots that the circle is lighter than the original icon?

[fregante]

This should be an easy CSS-only solution. PR and design suggestion/mockups welcome

[hikerpig]

I've made the badge color a little darker.

[fregante]

I’m not sure I like it this dark. I preferred it to be less visible, not more

[tooomm]

I agree. WIP-PR's feel more visible and stressed than a normal, ready for review or waiting for merge PR now.

[hikerpig]

I name this feature emphasize-draft-pr-label , aimed at making that label stand out. Felt that level of gray - IMHO the color 'gray' itself says "Oh oh don't pay too much attention to me"- is fine to me.
But yes, reviews and PRs are welcome.

[fregante]

I name this feature emphasize-draft-pr-label , aimed at making that label stand out

I don't think draft PRs should stand out, but the opposite, like you said next:

the color 'gray' itself says "Oh oh don't pay too much attention to me"

The gray does that, but the size doesn't; the visual weight is higher.

I'd go as far as dimming the whole line instead.

Regular

Now

Suggested

Opacity 0.7

[fregante]

Check out this PR https://github.com/sindresorhus/refined-github/pull/2742

[tooomm]

@fregante thanks for taking care. It looks good :)

Now that I use it, I realize that - unlike your suggestion here - you only changed the PR icon and did not use grey text on the PR titel as well.
Was that on purpose? I liked that a lot, to emphasize the titel of draft pr's less too.