SDG 8: Rename and replace image with correct color one

[aaronweixiangli]

Fixes #4256

What changes did you make and why did you make them ?

• In the assets/images/sdg directory, delete decent-work.svg
• From the HackforLA.org website drive's HackforLA.org website/SDG/SDG images folder, download the following svg: E-WEB-Goal-08.svg
• Add the svg you just downloaded into the assets/images/sdg directory
• Rename that svg so that it becomes sdg8.svg
• In _includes/about-page/about-card-sustainability.html, update the path to the SVG you just added by changing

<img src="/assets/images/sdg/decent-work.svg" alt="8 Decent Work and Economic Growth" />

to

<img src="/assets/images/sdg/sdg8.svg" alt="8 Decent Work and Economic Growth" />

• Reason: We need to replace the Sustainable Development Goals (SDG) images in our repository so that the SDG svgs are the correct color and follow the United Nations' SDG guidelines. SDG is an acronym for the United Nations Development Programme Sustainable Development Goals.

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

After replacing 'decent-work.svg' with 'sdg8.svg', I'm not seeing any visible changes. Please let me know if this is the expected outcome.

[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 aaronweixiangli-replace-img-color-4256 gh-pages
git pull https://github.com/aaronweixiangli/website.git replace-img-color-4256

[chrismenke45]

Review ETA:
4/23 EOD

[mjshelton12]

Availability: M-F 9am-1pm
ETA: EOD 4/21/23

[mjshelton12]

Excellent work! Your issue is set up perfectly with the link to the issue, correct branches, clear explanation of what you did/why, and effective photos. By the way, there is a change in the image it's just very subtle. The color is slightly different, the font is smaller, and the arrow chart thing is a slightly different size. I only noticed when I brought it up in docker and compared to the live site by clicking back and forth.

Anyway, excellent work! Very clean and effective code!

[chrismenke45]

My apologies, I will need to update my review ETA to tomorrow: 4/24 EOD

[KazushiR]

@aaronweixiangli Hello, I don't remember assignee myself this particular PR so I apologize for the delay. I have looked over the PR and everything seems to be good!

[chrismenke45]

Nice work @aaronweixiangli! All the required changes have been made and it looks great. Thank you for making the changes from your previous PR.

[Adastros]

Hi @aaronweixiangli, good job on completing the issue! As @mjshelton12 mentioned, the visual changes are subtle and may not be apparent.

The following are things I noticed when reviewing the issue prior to merging, do not affect the status of this merge, and may need an emergent request:

• It seems that sdg-la.svg and the sdg link below it are not positioned closely together. Per the Figma wire frame, they should be. Looking at the project board, it doesn't seem like we have an issue to address this.

Current State

Figma Design

• On Firefox, the images are out of order. See the image below. Microsoft Edge and Chrome do not exhibit the issue. This may be a result of the SDG icon sizes which is addressed in issue Epic: Fix size of SDG icons to match Figma design #4229. If completing Epic: Fix size of SDG icons to match Figma design #4229 doesn't fix the issue, a separate issue will be needed to fix it.

Current State - Firefox