[Part 2 of 3] Newsletter sign up button/form added newsletter button

[youriwims]

Related PRs/issues #2994

https://foundation-mofostaging-pr-3048.herokuapp.com/

Checklist

• Add Newsletter button
• Mobile: Donate stays put while Newsletter button moves down below nav items
• Clicking on Newsletter button animates sign up form to open and page content slides down
• Clicking anywhere outside of the black form box animates the form to close
• Form error/success/hover states should follow footer styles

[mmmavis]

@kristinashu this is ready for design review. Note that the desktop version form is still in one-column layout. I'm working on modifying the Newsletter/Sign Up React component so we can have the option to show it as 2-column. I'm separating the work from this PR as that React component is used in other places (e.g., footer) and it's best that we do it as 2 stages in case I accidentally break something.

Another note is that I can't perfectly vertically centered the form section. We have to reserve some extra space for error messages to go. (Technical context: in order to achieve the slide down effect, we have to give the fully expanded section a fixed height before the animation starts so the slide down animation knows when to 'stop growing/expanding'. If we really want it to look centered of course we can go with some JavaScript help, but hopefully we can do this as a follow-up ticket.)

PR updated!

[mmmavis]

@kristinashu this is up for design review again!

[kristinashu]

Beautiful!!!

[Pomax]

It looks like the button stays highlighted if you click it once to open the dialog, and then click it again to dismiss the dialog. Should it reset to outline styling?

[mmmavis]

It looks like the button stays highlighted if you click it once to open the dialog, and then click it again to dismiss the dialog. Should it reset to outline styling?

@Pomax I can't reproduce the issue. Maybe your had your cursor over the button that's why it stayed highlighted?

[Pomax]

Both in FF and Chrome the button stays black for me.

STR:

• load https://foundation-mofostaging-pr-3048.herokuapp.com/en/
• move mouse to over "newsletter button" => button turns black
• click button => newsletter dialog comes up
• click button again => newsletter dialog disappears, button stays focused (focus-outline shows)
• move mouse away from button => button remains focused (focus-outline shows) and filled black until you focus on a different part of the page, or remove focus by clicking an inactive part.

[Pomax]

R+ after fixing the prettier errors - the button coloring probably shouldn't block this from landing so fix if you feel that's easy to do, otherwise landing it works for me!

[mmmavis]

OMG FINALLY! THANKS TEAM!