Get sign up component to look right

[Pomax]

(This is a squash rebase of #2956)

Test page: https://foundation-mofostaging-pr-2998.herokuapp.com/en/campaigns/test-bannered-campaign-page/

---

The UI/UX portion of PR #2937. Branched off of signup-bcpage. I ended up including new footer and donate banner work in this PR so I don't have to deal with the to-be-removed existing sign up banner on production homepage.

This PR also closes #2833 #2834 (updated footer & added evergreen donate banner to site)

---

Follow-up tickets

• update footer on PNI & maintenance.html (Update footer on PNI and maintenance.html #3006)
• fine tune footer styling (Fine tune footer styling  #3007)
• code cleanup for 'dark theme' version of sign up (as part of Change how we turn button and text into dark theme version #2959)
• align "in-page" sign up form design with petition form (Align implmentation of petition form and sign up form #3005)

[kristinashu]

Footer

For the footer, I'm fine with those follow up things happening later (but would prioritize "fine tune footer styling" over things you listed above).

The only styling blocker I see this the Sign up button at medium width (screen cap of PR). Is there a way to make the button big enough to have "Sign up" text within it?

Sign up on the right side

Styling isn't quite what was expected (thought it would look more like the petition form) but I'm ok with it looking like this for now while we audit and finalize form styles.

Can you just adjust the spacing a little tho?

• Desktop: add space above and below the checkbox (to match the spacing petition form has around the checkbox).
• Mobile: also add space above and below the checkbox AND also had space between the body content and the top of the form.

[mmmavis]

@kristinashu this is ready for design review again!

[kristinashu]

Thank you @mmmavis! Sorry but the numbers in screen cap above were doubled for retina. Looks like you've fixed the 96px but by halving it but the 40px is too much. Can you make it the same as on the petition form please (guessing more like 20px)? Sorry!

Also just noticed this Donate button isn't linking to anywhere. It should like to the Donate page with a unique utm.

Could be done as a follow up when you do the footer hovers but it would be better if we consistently opened all those links in a new tab, like we do for the footer on prod.

[kristinashu]

Nice! Design is approved!

[mmmavis]

Awesome! I'll create follow-up tickets and add them to the PR description.