Implement Redesigned Donate Page (mobile and desktop)

[roslynwythe]

Overview

As developers, we need to implement the new Figma design for the Donate Page, in both mobile and desktop views.

Existing Design

New Design (with update: see first Action Item)

Action Items

• Implement Figma design for mobile view, with the following update: The blue color in the donate form should instead match the dark blue color in https://www.hackforla.org/assets/images/about/hfla-donate.gif
• Consider the existing mobile and desktop pages, and from the new mobile design, extrapolate a corresponding desktop design and implementation.
• This issue will require changes to _includes/donate-card.html, which is included in both pages/donate.html and pages/join-us.html. To prevent changes to the Join Us page, make a copy of the unmodified _includes/donate-card.html, rename it _includes/join-donate-card.html, and update pages/join-us.html to include _includes/join-donate-card.html
• Check to ensure that the appearance of the Join Us page is unchanged, except for the updated donation circle graphic.
• Submit a pull request with the proposed changes

Resources/Instructions

Donate page
pages/donate.html
_includes/donate-card.html
Join Us page
pages/join-us.html
Figma design - marked with red star
_sass/components/_donate.scss

[github-actions]

Hi @roslynwythe, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[roslynwythe]

Hi @sijiapitts @ExperimentsInHonesty - This issue was created in connection with the design from #3661.
There are several designs outlined in Figma; for the screenshot in Overview, I selected the one with the label "Final version for development" for the screenshot in that issue. Please confirm I provided the correct design.

[sijiapitts]

Hi @roslynwythe sorry for the confusion, but the frame marked as "final version for development" is not the correct one. It used to be the final design until we noticed some issues and did a redesign.

The correct mobile version is this one. This link should direct you directly to the frame. I also added a star and an arrow next to the design in case it's not clear. Please let me know if you have any other questions!