Apply design system heading classes to Donate page

[kristine-eudey]

Overview

We need to apply the new standardized heading classes to the Donate page headings (for accessibility/to remove the styling reliance on h tags), so that that the page can now follow the design system plan and be more accessible.

Action Items

• Apply the heading classes noted in the Donate page Figma file (in pink rectangle) to the Donate page
• Make sure the headings still look good and correct (same as the Figma) both in mobile and desktop, and that nothing gets messed up due to these changes
• Make sure to adjust the heading h tags if needed so that they reflect the correct hierarchy of the page for screen readers (since the styling no longer relies on the h tags)

Resources/Instructions

Donate page Figma file (in pink rectangle)
Donate page
From Figma:

[pattshreds]

Availability: 1.23.2022, I will be available for 2-4 hours. Will be busy from ~9:30am - ~5:00pm.
ETA: 1.23.2022 ~8pm latest.

[pattshreds]

Progress: Classes assigned, just need to define in SASS.
Blockers: Wasn't sure if I had to define the classes in the SASS file, talked to Saumil and learned I do so I'm doing that this morning.
Update: Having trouble repositioning the first h1 element to left align with the paragraph beneath it. Changing it to
text-align: left; doesn't move it so I need to find why it won't move left.

Availability: 1.25.2022 2 hours in the evening.
ETA: 1.26.2022, ~8am.

Edit 1.24.2022 9:38pm:
Changed ETA and added new blocker.

[pattshreds]

Progress: Moved the first h1 element with a negative margin.
Blockers: Moving the h1 element without using a negative margin. I couldn't get anything else to work, including flex properties.
Availability: Today through Friday 1.28.2022 I have a few hours each night.
ETA: I don't want to keep changing this everyday so I'll just say by Friday 1.28.2022 although it will likely be finished before then.