RedBox screen is a bit scary #42

morishin · 2018-10-17T05:09:55Z

Introduction

isn't it?

The Core of It

How about making it softer color? ☺️
(like YellowBox)

These look like current implementations.

Discussion points

How about changing the red color?
What color value is better?

hramos · 2018-10-17T18:28:31Z

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.

aleclarson · 2018-10-17T18:31:34Z

A dark mode would be great 😄

Monte9 · 2018-10-17T19:18:41Z

@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.

jamonholmgren · 2018-10-18T02:35:32Z

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.

morishin · 2018-10-18T02:40:07Z

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)

hramos · 2018-10-29T22:29:56Z

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

Monte9 · 2018-10-29T23:58:27Z

@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.

kelset · 2018-10-30T09:32:51Z

@Monte9 go for it 🎉

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

katieisnell · 2018-11-02T12:08:28Z

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

axe-fb · 2018-11-09T06:08:07Z

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

Monte9 · 2018-11-09T06:34:05Z

@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.

AndreiCalazans · 2018-11-09T10:25:57Z

@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.

morishin · 2018-11-10T04:23:18Z

@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))

Monte9 · 2018-11-10T17:09:13Z

@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.

Monte9 · 2018-11-12T02:12:24Z

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)

iRoachie · 2018-11-12T05:09:22Z

Of all the reds I prefer Monte's red!

morishin · 2018-11-13T03:29:26Z

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

jamonholmgren · 2018-11-13T16:33:47Z

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

tetreault · 2018-11-15T19:48:52Z

i like the current red IMO

grabbou · 2018-11-19T11:44:30Z

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.

cpojer · 2019-01-04T01:25:17Z

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

Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](react-native-community/discussions-and-proposals#42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: #22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb

Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](react-native-community/discussions-and-proposals#42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: facebook#22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb

Summary: [Re: RedBox screen is a bit scary - Discussions and Proposals](react-native-community/discussions-and-proposals#42) Per hramos: > The RedScreen was inspired by Ruby on Rails's error screen > I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need. Hence jamonholmgren came up with the idea that only the header & footer of the RedBox screen could be red. This makes the content a bit more readable as well as makes the screen a little less intimidating. Also frantic made the suggestion that since the bottom buttons are not as important, they don't need to stand out. Hence only the header of the RedBox screen which displays the error is made red. Screenshots: ---------- <div style="flex-direction: row"> <img width="325" alt="orginal" src="https://user-images.githubusercontent.com/7840686/48322916-b4958b80-e5de-11e8-9276-33378d1b41c5.png"> <img width="320" alt="redbox_v2_ios" src="https://user-images.githubusercontent.com/7840686/48665300-cce32b80-ea60-11e8-8e8f-88f74bad30ca.png"> </div> <div style="flex-direction: row"> <img width="300" alt="original_android" src="https://user-images.githubusercontent.com/7840686/48322958-d5f67780-e5de-11e8-891c-1b20bd00e67b.png"> <img width="300" alt="redbox_v2_android" src="https://user-images.githubusercontent.com/7840686/48665312-f13f0800-ea60-11e8-9fb6-47e03c809789.png"> </div> Pull Request resolved: facebook/react-native#22242 Reviewed By: hramos Differential Revision: D13564287 Pulled By: cpojer fbshipit-source-id: fcb6ba5e20d863f4b957d20f3787f5b7a365bfdb

kelset added the 🗣 Discussion This label identifies an ongoing discussion on a subject label Oct 18, 2018

Monte9 mentioned this issue Nov 12, 2018

Updated RedBox screen facebook/react-native#22242

Closed

cpojer closed this as completed Jan 4, 2019

cpojer mentioned this issue Apr 24, 2019

Polish the "new app screen" #122

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RedBox screen is a bit scary #42

RedBox screen is a bit scary #42

morishin commented Oct 17, 2018

hramos commented Oct 17, 2018

aleclarson commented Oct 17, 2018

Monte9 commented Oct 17, 2018

jamonholmgren commented Oct 18, 2018

morishin commented Oct 18, 2018

hramos commented Oct 29, 2018

Monte9 commented Oct 29, 2018

kelset commented Oct 30, 2018

katieisnell commented Nov 2, 2018

axe-fb commented Nov 9, 2018 •

edited

Loading

Monte9 commented Nov 9, 2018

AndreiCalazans commented Nov 9, 2018

morishin commented Nov 10, 2018

Monte9 commented Nov 10, 2018

Monte9 commented Nov 12, 2018 •

edited

Loading

iRoachie commented Nov 12, 2018

morishin commented Nov 13, 2018

jamonholmgren commented Nov 13, 2018

tetreault commented Nov 15, 2018

grabbou commented Nov 19, 2018

cpojer commented Jan 4, 2019

RedBox screen is a bit scary #42

RedBox screen is a bit scary #42

Comments

morishin commented Oct 17, 2018

Introduction

The Core of It

Discussion points

hramos commented Oct 17, 2018

aleclarson commented Oct 17, 2018

Monte9 commented Oct 17, 2018

jamonholmgren commented Oct 18, 2018

morishin commented Oct 18, 2018

hramos commented Oct 29, 2018

Monte9 commented Oct 29, 2018

kelset commented Oct 30, 2018

katieisnell commented Nov 2, 2018

axe-fb commented Nov 9, 2018 • edited Loading

Monte9 commented Nov 9, 2018

AndreiCalazans commented Nov 9, 2018

morishin commented Nov 10, 2018

Monte9 commented Nov 10, 2018

Monte9 commented Nov 12, 2018 • edited Loading

Index:

iOS

Android

Bonus (Dark Mode)

iRoachie commented Nov 12, 2018

morishin commented Nov 13, 2018

jamonholmgren commented Nov 13, 2018

tetreault commented Nov 15, 2018

grabbou commented Nov 19, 2018

cpojer commented Jan 4, 2019

axe-fb commented Nov 9, 2018 •

edited

Loading

Monte9 commented Nov 12, 2018 •

edited

Loading