CHMA site: Update design on Recurring Donation page

[sea-witch]

Update the "Recurring Donation" page with this design:

The site is in WordPress. The code is not under version control. You just need to open the admin panel and fiddle with it, old-school.

Markup

We have a draft of the new Donation page here. It includes the illustration and some examples of the buttons.

The "buttons" are not buttons at all, but links. Each button should point to the associated PayPal page according to the donation amount. Something like this should work:

<a class="donation-button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=3ZHWPFJSD63V6">$10</a>

Gotchas: The html produced by WP is pretty messy. The layout engine seems to produce lots of extra divs and spans. I think the hardest part will be figuring out how to get things lined up nicely without running afoul of the WP editor.

Styles

To get to the site styles...

Open the admin sidebar and select "Customize":

Select "Additional CSS":

Have at it!

Code style notes

We should probably be careful of scoping our styles to the donation page, or at least to the elements related to the donation page. This could be as simple as choosing unique class names. This code snippet gets us much of the way there on the buttons:

.donation-button {
	background: #F7CF56;
	color: #47133D;
	text-decoration: none !important;
	padding: 10px 20px;
	border-radius: 20px;
}

[caroqliu]

I'm not sure how to get access of the WP but I'd be interested in taking this on!

[sea-witch]

@caroqliu That'd be great! I'll follow up on Slack :)

[caroqliu]

Took a stab at editing the page following the mock, PTAL and review @saoirse-zee :)

A few decisions I made:

• Not sure the exact dimensions of the buttons desired, but I used a CSS flex box to space 5 buttons evenly in each row - this manifests as each one taking up 16% of width and 4% of margin between them up to a container of 580px. Any wider and the buttons themselves get kind of wide and funny looking, but this was somewhat an arbitrary threshold and can be modified if something else is preferred.
• Same thing with font sizes, kind of just guessed based on looking at the mock, LMK if these should change. The large size is 28 and the smaller is 14.
• Recommended a couple edits to the bottom copy, mainly to remove 'but's and 'also's, as well as to link to the ioby page where mentioned. Copied here for reference, but feel free to change it back to the original:

  For now, we can only use PayPal for recurring donations. We are working on a fix to accept credit/debit cards directly. Please note that these recurring donations may not be tax deductible like ones made directly through our ioby page; if you have questions about this please consult a tax accountant.

• Added alt text to the icon, LMK if there's a better way to describe:

  Graphic showing laptop with multiracial fists raised on the screen

• Finally, I couldn't find a better way to change the background color on the page other than to do it by class on the Additional CSS page. Because the CSS isn't applied to the page during editing, the text is invisible (white on white background) in edit mode, but in preview mode it should look as expected (white on purple background). Just something to be aware of when editing that the page is in fact not broken. But open to other strategies for styling background that don't have this funny side effect. :)

Question: Between the mock and the current page, it looks like we lose the option to recurring donate $80. Is that intended?