Updated mozilla logo, added Thimble to header, changed colors.

[flukeout]

This PR updates the look of the Sign Up & Sign In pages:

• Main color is green now (moving away from Webmaker blue)
• Added new Mozilla Logo to the header
• Added "& Thimble" to the header

Rationale:

• 96% of sign-ins to this page arrive from Thimble
• 76% of new accounts arrive from Thimble
• We'll be making a social media push to promote the new Thimble and the existing sign up experience could be jarring (different colors, no reference to Thimble, etc)

Screenshots:

cc @hannahkane @xmatthewx

[flukeout]

After chatting with @xmatthewx - will update to just have the mozilla logo in the header for now.

[flukeout]

Hi @cadecairos - can you please review? The changes have been approved.

The screenshots above are representative of the changes except that the logo no longer includes "Webmaker & Thimble"

Cheers!

[cadecairos]

did we consider users coming to this page from learning.mozilla.org?

[flukeout]

@cadecairos Yeah, it's also a tiny percent of the traffic. And the sign in pages never really addressed learning.mozilla.org specifically, so in a way, it kind of gets "better" by being more generic in terms of just having the mozilla branding.

[cadecairos]

well it does call out webmaker and thimble - I'm okay with that though. I just wanted to make sure it was considered.

[flukeout]

Sorry about that @cadecairos - I should have updated the screenshots to reflect the latest changes. I left a note about removing those two products from the logo, but it wasn't very prominent.

This is the latest header...

[cadecairos]

aha! that makes more sense!

[flukeout]

@cadecairos Updated the alt text on the logo, good catch.

[Pomax]

Would it be possible to show "anything" when you've clicked login, so you can tell whether it's trying to log you in or whether the click didn't register or something?

(spinner, "trying to log you in", fading the buttons out and only fading the back in on login error, etc)

[flukeout]

@Pomax not sure what you mean, can you post a screenshot with what you're seeing as a new issue and we can address it separately? There are a ton of improvements we can make, but not sure if we should worry about it in the PR (unless it's caused by the PR?)

[Pomax]

When you click "Log in", nothing happens. That is to say: it looks like nothing happens, as a user you have no signal that what is actually happening is that a login is being attempted. The login button doesn't change color, there is no spinner that starts spinning, there is no text that says "logging you in ..." while login is being processed, etc.

That feels like a UI improvement that fits in this PR.

[flukeout]

@Pomax The issue you described is outlined here: https://github.com/mozilla/id.webmaker.org/issues/355 - if you want to open a PR that adds a submit-progress class to the form, I'm happy making some style changes. And I totally agree it sucks, just juggling priorities and would rather land these changes and tackle UX improvements in smaller chunks.

[flukeout]

Thanks @cadecairos - what is the process for getting this into production? We are planning on a May 17th launch for Thimble, and it would be great to have these changes live by then. Thanks!

[cadecairos]

This should auto deploy to staging. You can test by logging in at https://learning.mofostaging.net Once we're satisfied that it's all good, we can deploy it to production.

[flukeout]

Thanks @cadecairos I've already found a bug with the mozilla logo .svg image in Firefox. I'll file another PR and we can go from there.