Fix PR screen in github

[jgkamat]

Like before, please regenerate the CSS for me, I don't think I have node set up correctly.

Before:

After:

[jgkamat]

I'm overloading this to fix some PR link colors as well:

Before:

After:

[The-Compiler]

Hey @jgkamat! 😆

This fixes at least some of the issues I mentioned in #5 🎉

[jgkamat]

Might as well keep going then! :D
Before:

After:

Before:

After:

[alphapapa]

Since you added the plain class selector, can we remove the a.link-gray-dark selector?

[alphapapa]

Do you need to add i at the end to make it !important?

[alphapapa]

Why did you remove the indentation here? IIUC it will now make all .branch-action-icon icons yellow.

[jgkamat]

Ah, this is a mistake, I didn't know what the difference was, correcting!

[alphapapa]

No prob. Indentation with selectors is equivalent to putting them on the same line separated by a space in regular CSS, so this selector only applies to .branch-action-icon classed items that are children of the -state-* selectors above it.

[alphapapa]

The color mixin applies color-text i automatically, so you can change this to just color.

[alphapapa]

The color mixin applies i automatically, so it can be left off here, and in the other places that call color.

[alphapapa]

Without having investigated it myself, is this the best way to do this? I'm guessing that I set .octicon-check to white for when it appears on a green background, IIRC. Do we need to use a more specific selector for when it should be green?

OTOH maybe the CSS has changed and this is now the right way to do it. :)

[jgkamat]

This is a bit finiky. Github uses the .text-green selector to make the checks green. I tried overriding it, but it seemed the .octicon general selector was still overriding it. .octicon-check was the most specific selector I could find which worked.

I don't think that the check is ever on a green background, I've only seen it on the background, like in branches.

If there was a way of 'turning off' the .octicon custom style just for a class, then we could do it this way (but I don't know if that's possible).

[alphapapa]

Ok, sounds good, thanks!

[alphapapa]

Hi Jay,

Thank you very much, this looks great! I made a few comments about minor changes to make it a bit more idiomatic. If you don't mind making those, I'll be glad to merge this right away!

One visual note: I like that you made the "Open"/"Closed" text more visible on the colored backgrounds in the issue labels. Did you try using white instead of black? I wonder if that might look more consistent with the overall theme. Let me know what you think.

Also, on the yellow icon next to "Changes approved", could you make the icon white against the yellow background? The contrast is kind of weak by default. :)

[jgkamat]

Sorry about all the problems, this is my first time working with css, so I guess that's to be expected :P

Let me know if you spot anything else wrong

Did you try using white instead of black? I wonder if that might look more consistent with the overall theme. Let me know what you think.

I agree, white does look better, I'll switch it

Also, on the yellow icon next to "Changes approved", could you make the icon white against the yellow background?

Done! :)

[alphapapa]

Sorry about all the problems, this is my first time working with css, so I guess that's to be expected :P

Not at all! You did a great job. I'm very impressed for this being your first time working with CSS, I'd never have guessed, especially with your learning Stylus at the same time! Stylus is powerful but so concise that it can be confusing and require some trial-and-error to figure out.

Thank you very much, and please feel free to submit more PRs in the future!