New logos

[bvaughn]

Relates to #534

Here's a set of higher-resolution icons for devtools, including a few new icon states that we can add support for in future PRs.

Proposed icons

Disabled	Development	Production	Outdated

[rickbeerendonk]

I love the shape of the new dev-icon.

You can make things standout with color, shape, movement and contrast.
dev-icon uses 3 of those: Most contrast, different shape and color. That's more than enough not to need the red background, just the red bug is fine.

Colouring background leaves us no further options for the future.
When I train companies, they always ask about React upgrade strategies. They will be behind. Future updates might be colouring the rings/log, for example:

• Red (#fb6161) rings 3 major versions behind
• Orange (#fbc361) rings 2 major versions behind
• Green (#7afb61) rings = 1 major versions behind
• Blue (#61dafb) rings = current version
• White rings = next version

For now, just leave the background color black (grey) to keep future extensions open.

[rickbeerendonk]

Red (#d94a38) doesn't have the same saturation and lightness as the React blue (#61dafb). Red with the same saturation and lightness is #fb6161, so should look better (see colorize).

[bvaughn]

Thanks for the feedback!

When I train companies, they always ask about React upgrade strategies.

Is this because the release notes aren't clear enough on an upgrade path (eg breaking changes, codemods, etc)? I don't think a colored icon in devtools would be sufficient to overcome something like that. It could raise awareness of the newer release though I suppose.

Personally, I'm not convinced the devtools icon is the best way to encourage version upgrades. I don't believe colors have enough significance. (Why is blue better than green? Why is red worse than orange?)

Red (#d94a38) doesn't have the same saturation and lightness as the React blue (#61dafb). Red with the same saturation and lightness is #fb6161, so should look better (see colorize).

Not a big fan of #fb6161 . It's subjective I guess, but I think the white rings don't pop enough with that light of a color. (I also don't think the blue and red need to have the same saturation/lightness; one contrasts with white and the other with a very dark gray.) Brightening the red a little (eg #e95a48 ) would be okay though. I'm not firmly set on #d94a38 .

[bvaughn]

There seemed to be some interest within the team on prompting for older React versions to upgrade via the icon (as you suggested) so I've added a new variation for "outdated" versions:

Disabled	Development	Production	Outdated

[rickbeerendonk]

I mainly objected in favour of the the red bug and against the red background as it leaves no options for other (future) changes. As shown here, it is either debug or outdated, but not both.

I do agree that a mix of colours is probably not going to work for outdated version, too confusing. A warning signs has different associations for me though. Suggestion: Put a yellow label with black text at the bottom with just "OLD" inside. The word is short enough to be visible in small resolutions.

[gaearon]

It seems like using SVG directly won't work well. It isn't supported in manifest, and while it is supported when calling from code, Chrome doesn't take DPI into account so it looks blurry on Retina:

There is a hacky workaround involving drawing SVG into a canvas, but it seems like the easier way to solve this is just to create a 32 PNG icon that looks crisp on Retina:

The docs don’t make it clear, but apparently providing 32 version of each icon is the way to go (for Retina at least).

[gaearon]

Interestingly, downsizing 128 icon with Preview app gave me a sharper image than generating 32 from SVG directly.

[bvaughn]

The docs don’t make it clear, but apparently providing 32 version of each icon is the way to go (for Retina at least).

Ah! I didn't realize that. I'll add 32x versions momentarily.

[gaearon]

Cool! Could you make sure they're crisp? I'm using this one for now:

[bvaughn]

Well, I mean, yeah- they'll be as crisp as Photoshop can make them. 😁

[bvaughn]

Okay! Just squashed all of the churn-commits and re-pushed:

• Higher-resolution versions of all icons added (16, 32, 48, and 128)
• Development-mode and outdated React version icons added but not yet plugged into anything.
• SVG sources also added, even though they aren't used, because they're small and I wanted them to be handy in case someone (other than me) needed to edit them in the future.

The team voted for the black bug on red background variant of the development-mode icon but I did lighten the shade of red slightly to address contrast concerns mentioned previously.

Anything else needed for this PR? 😄

[gaearon]

Would be nice to make popup versions that explain each of the icon.

[bvaughn]

Definitely! I was hoping to address that with follow-up PRs that actually plug the new icons in.

Edit for clarity: As of this PR, only the new higher-res "disabled" and "enabled" (production mode) icons are actually used. Same behavior as before, just better icons. I'm happy to submit follow-up PRs that plug the outdated and dev-mode icons in, and I'll add the new popup versions along with those PRs.

[gaearon]

Do you think we should add slightly rounded borders? Rect looks a bit ugly to me.

[bvaughn]

Sure, I could do that. Would increase the file size of the PNGs slightly b'c of transparency but probably wouldn't be be substantial.

[gaearon]

(Chrome does rounding on default extension icons and on favicons)

[bvaughn]

Yeah, that's something to be a bit wary of. I'll need to round in such a way that Chrome's rounding doesn't leave a gap. (I'd prefer to avoid using different rounded-vs-not-rounded backgrounds for different sizes. It gets difficult to manage.)

[bvaughn]

PS Why can't Chrome just round in both places and make my life easier

[gaearon]

I think Chrome only rounds the default icon. It doesn't appear to round ours, so we're free to round it ourselves.

[bvaughn]

Note: If you upload an image that has no alpha, it will be placed in a frame with rounded corners (12-pixel corner radius).

Looks like if we round our own corners (even for the main image) Chrome won't auto-round. I guess that's to avoid things like I was worried about with mismatching corner radiuses.

[bvaughn]

Okay, I used the same 12px radius (at 128x) that Chrome uses.

It's pretty subtle on the smaller sizes though.

[gaearon]

lgtm

[bvaughn]

Oh snap one sec

[gaearon]

Can you also verify the contrast is as high as our favicon on React website?
I noticed earlier icons weren't as intense, making the logo less legible.

[bvaughn]

Forgot to push updated SVGs (with rounded corners) earlier. They're in now as well.

Can you also verify the contrast is as high as our favicon on React website?

I'm using the official colors, #59c9f1 and #202020 .

The reason it might look less "intense" is that the other icons were probably exported via Photoshop which, for some reason, gives extra emphases to the gray background when doing sub-pixel aliasing. I used Illustrator instead because I thought the overall quality of the exported PNGs was higher. (I did a side-by-side comparison before uploading them.)

[gaearon]

Okay, let's go with this for now! Thanks.

[bvaughn]

Cool. Thanks for the feedback, Dan!

[gaearon]

Anything holding off from merge?

[bvaughn]

Nope! gogogo 😁

[gaearon]

I just implemented the detection btw. Will send a PR shortly.