RedBox screen is a bit scary about discussions-and-proposals HOT 21 CLOSED

One quick and easy way to do it would be to keep the red limited to a header/footer and make the body of the error something more muted. Here's a 30-second idea that might spark something.

from discussions-and-proposals.

@axe-fb I am working on this. It's currently WIP and this is what it looks like so far:

Still need to get Android working, but if that looks good I can submit a PR for it this weekend.

from discussions-and-proposals.

Alright, I have it working on both iOS & Android and have submitted a PR for it! 🎉

Also, as promised, here are a few variations side-by-side to help us decide which one looks better:

Index:

[1, 1] - Original
[1, 2] - @Monte9's red
[2, 1] - Random red
[2, 2] - @morishin's red
[3, 1] - @katieisnell's red
[3, 2] - Pastel red

iOS

Android

Bonus (Dark Mode)

from discussions-and-proposals.

@jamonholmgren I don't mean to steal your thunder, but I can take a stab at implementing your idea if you don't mind.

I haven't contributed to RN core before and this seems like a fun one to tackle.

from discussions-and-proposals.

Of all the reds I prefer Monte's red!

from discussions-and-proposals.

A dark mode would be great 😄

from discussions-and-proposals.

Great improvements! I like [1,2] myself. One thing to keep in mind is consistency - introducing pastel colors for errors would mean we might need a pastel color for the warning which wouldn't look too nice.

from discussions-and-proposals.

Thank you for the screenshots!
@Monte9 's red [1,2] looks better color for readability 👀👍

from discussions-and-proposals.

Thanks everyone for the thorough discussion. I'm glad that we are updating the redbox style. I'll close this discussion in favor of the PR that implements this change. Let's have further conversations there if necessary: facebook/react-native#22242

from discussions-and-proposals.

I think a PR that implements something like #42 (comment) has a good chance of getting merged.

from discussions-and-proposals.

i like the current red IMO

from discussions-and-proposals.

@Monte9 go for it 🎉

And thanks for this conversation, I really think it could really help making the DX better :)

from discussions-and-proposals.

I like [2,1] myself, but they all look fine!

from discussions-and-proposals.

@hramos that's really interesting. Maybe we can use a different shade of red.. maybe more like a pastel red-color?

I did this really quickly to get the ball rolling:

The one in the middle is the current red screen color. Maybe something closer to #E32D31 (the second one) would look better?

ps. I am def not a designer so my color senses might be way off. Just a suggestion tho.

from discussions-and-proposals.

Maybe we can use a different shade of red.. maybe more like a pastel red-color?

+1 !

How about this? (new RedBox color is the right one)

from discussions-and-proposals.

@Monte9 nice job, looks better and less intimidating, can we just improve the color of the file location, it's a little hard to read, maybe use a color with a little more contrast.

I can read executeDispatchesInOrder but the line under it requires some leaning in, maybe just better contrast would improve.

from discussions-and-proposals.

@morishin @AndreiCalazans for sure. I'll end up posting a few screenshots here with different variations of colors and you guys can let me know which one you prefer. I'll keep you posted.

from discussions-and-proposals.

The RedScreen was inspired by Ruby on Rails's error screen:

The idea behind it is to provide high visibility to errors - no need to hunt through logs for the actual error. When the RedBox is contrasted with the RoR inspiration, I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need.

from discussions-and-proposals.

I like the RN color 'tomato', it is a softer red but still dark enough to imply that you have an error!

from discussions-and-proposals.

@morishin - what are the next steps here ? I think everyone loves the idea, so lets see how we can implement it.

from discussions-and-proposals.

@morishin - what are the next steps here ? I think everyone loves the idea, so lets see how we can implement it.

I think the next step is Pull Request by @Monte9 ! 😍

@Monte9 Cool!! How about making the background red color softer? (like #42 (comment) or #42 (comment))

from discussions-and-proposals.