Grayscale and excessive margin top affects color-coded images and documentation

[kris10cabrera]

Commit banner applies grayscale on documentation pages, as visible on Thinking in React, which makes the images unclear because the documentation references the image's colors.

Additionally the text is cut off on the bottom because of excessive margin top.

I was able to fix the problem locally by undoing the grayscale but I do not have write access to make a PR. (The edits in MarkdownHeader are not causing causing issues) thanks.

[rimildeyjsr]

Came across the same issue while browsing through the Context API documentation, but this somehow seems to be localized to Chrome - this issue is not taking place in Safari or Firefox.

Screenshot from Safari:

Screenshot from Firefox:

[gaearon]

Thanks for reporting.

I've fixed the blank text problem (seems to be caused by the filter affecting layout).

As for the color-coding, it is unfortunate but we're willing to temporarily leave this broken.

[hoblin]

Is there any way to switch this grayscale filter off to see code highlight? At least for the ppl outside of the US?

[hoblin]

There is a women who was raped by two cops in Ukraine last week. Let’s switch colors to yellow-blue. Or you think that her life does not matter?

[hoblin]

Is it possible to opt-out of this? I need my pretty colors darn-it!

You can open devtools in the browser then find the CSS rule which begins with * { then add filter: none !important; to it and that will do the trick.