sindresorhus/refined-github

Change button colour background to the `Draft` PR label #2450

ntwb posted onGitHub

<!-- Thanks for contributing! šŸ“ -->

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 Screen Shot 2019-09-20 at 12 47 58 pm

<!-- Please specify a URL where the feature should appear -->


<img width="136" alt="Screenshot 2019-09-20 at 10 31 05" src="https://user-images.githubusercontent.com/1402241/65297380-c9916280-db91-11e9-8d03-5125cf9f4437.png">

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;
}
posted by fregante over 5 years ago

Yeah, something like that would be great:)

posted by ntwb over 5 years ago

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

posted by sindresorhus over 5 years ago

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

posted by fregante over 5 years ago

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

posted by tdtm over 5 years ago

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

posted by fregante over 5 years ago

I've made the badge color a little darker. emphasize-draft-pr-label

posted by hikerpig over 5 years ago

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

posted by fregante over 5 years ago

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

posted by tooomm over 5 years ago

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.

posted by hikerpig over 5 years ago

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

<img width="658" alt="gray icon" src="https://user-images.githubusercontent.com/1402241/69934475-93168300-1504-11ea-900c-a20b193a514d.png">

Now

<img width="660" alt="gray background" src="https://user-images.githubusercontent.com/1402241/69934480-9742a080-1504-11ea-979d-dcfe91d60308.png">

Suggested

Opacity 0.7

<img width="665" alt="dimmed line" src="https://user-images.githubusercontent.com/1402241/69934487-9c075480-1504-11ea-8f7e-5fd38c4f6593.png">

posted by fregante over 5 years ago
posted by fregante about 5 years ago

Fund this Issue

$0.00
Funded

Pull requests