Integrate Donation GIF component into Join Us donation include

[adrianang]

Fixes #4507

What changes did you make?

• Make <h3> heading as a sibling of the component, within <div class="join-us-donation">.
  • This matches the implementation of the <h3> in the integration of the component in related issue Create donation gif component 4439 #4650 (implementing the component into the Donate page donation include).
• Replace individual elements of the section in pages/join-donate-card.html with the new donation GIF component that encompasses the same content (body, image/GIF, footer)
• Minor styling changes
  • .join-us-donation div now uses flex-direction: column to accommodate structure using the new component, also matching the previously merged implementation on /donate
  • increased top margin on .donation-footer (48px) as the previous amount (20px) would cause the first line of the footer text to overlap with the last line of ordered list item 2, especially at viewport widths from 767-790px (likely due to additional padding within the subsection the component is situated in)
• Refactor SCSS files
  • _sass/components/_join-us.scss was refactored to delete styles that are no longer used, and to separate component styles from target page styles (mostly deleting styles using/related to .join-us-donation-body)
  • _sass/components/_donate-components.scss was refactored to remove margins/paddings that caused component body text to be misaligned/extending past parent container boundaries, as well as adding some missing spaces within styles (new line 106, 113)
    • NOTE: If this PR gets merged first, the developer who gets assigned to Integrate Donation gif component into About Us donate include #4504 should also take extra care to ensure that the donation GIF component on both the Join Us and Donate pages are not affected by changes to this stylesheet (and likewise, if this gets closed while issue 4504 is being worked on, then 4504 may have to resolve merge conflicts).

Why did you make the changes (we will use this info to test)?

• Integration of the donation GIF component allows for a consistent appearance for the animated donation GIF and associated text used throughout the website, as well as modularization
• Refactoring SCSS styles to account for previous integrations (on Donate page), as well as future integrations (on Join Us, About page)

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Visuals after changes are applied

Notes:
-Header is intentionally different from before change to (1) separate the header from the component internal code, and (2) ensure consistency with the implementation of the header in the integrated component on /donate.
-'100% of donation proceeds...' line is below the GIF per action item 4 in the linked issue.

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b adrianang-integrate-donation-gif-component-into-join-us-include-4507 gh-pages
git pull https://github.com/adrianang/website.git integrate-donation-gif-component-into-join-us-include-4507

[blulady]

@roslynwythe & @rdhmdhl when you guys get a chance please put down your eta?

[rdhmdhl]

I will have this reviewed by tomorrow night.

[ronaldpaek]

From my end, checking the code and looking at the Figma design and the local host version, it does look different from the current hack4la website, but you said you made these visual changes to accommodate the drop-down menu, so if that is true, I think everything looks good and the other code rendered correctly. You did a great job making these design decisions yourself.

[rdhmdhl]

Nice job here.

I've reviewed these changes in my browser for mobile and desktop. It looks like the gif component is linked properly in the join-donate-card.html file, and the previous elements inside the join-us-donation div are removed. Your minor styling changes look good. All of the un-used classes in _join-us.css are removed.

My only callout for the merge team is that the the new component, donate-gif-text.html, re-ordered the gif to be at the bottom of the ordered list, instead of at the top like the website currently is. Not sure if this was intensional, but it does look better this way.

[mademarc]

Review ETA: 7/13/2023
Availability: 7:05PM

[mademarc]

Hey @adrianang the changes from mg tags to h3 was done well and thr same for the css and the scss properties changes as well

[drakenguyen4000]

Nicely done @adrianang!