Redesign Citizen's Engagement's SDG sizes and related padding

[phuonguvan]

Overview

We need to make sure that all text on the site is minimum 16pt, including text on the SDG icons, which will also require padding changes to accommodate.

Details

We need to make sure that the Website and the Figma design match for the Citizen Engagement page, so that the current website has the most up-to-date design decisions and that the Figma file is ready for future iterations.

Action Items

• Review the screenshots in the Resources section
• Make a copy of the 16pt version in Figma (has a red line), add a blue line around it, and start working on the new copy
• Figure out what size the SDG needs to be in order for the text, that is part of the image, to be a minimum of 16pt. See note in resources about how to determine this.
• Make the SDG icon the new proper size in your Figma draft (in blue)
• Redesign the padding
• Review the draft with the design lead

Resources/Instructions

• HfLA - Citizen Engagement Page
• Gold's Figma
• Figma - Citizen Engagement
• Figma, Design Systems
• The image has text embeded in it. We did not create the image so you can't decompose it into its parts to see what size the text is. What you can do, is try Roboto (bold and black) or Oswald (medium and semibold) in all caps to try to match the existing size and then once you have determined the size and weight of the font used, you can figure out how big you need to make the SDG Icon Image in order for the font to equal 16pt. Here is a link to the styleguide for the SDGs https://www.un.org/sustainabledevelopment/wp-content/uploads/2019/01/SDG_Guidelines_AUG_2019_Final.pdf

Details

Website

SDG text box width: 280
SDG image is 120x120

Website Screenshot

Figma

SDG text box width: 318
SDG image is 88x88

Figma

[github-actions]

Hi @phuonguvan.

Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing:
Size, Role, Feature

NOTE: Please ignore the adding proper labels comment if you do not have 'write' access to this directory.

To add a label, take a look at Github's documentation here.

Also, don't forget to remove the "missing labels" afterwards.
To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.

After the proper labels are added, the merge team will review the issue and add a "Ready for Milestone" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels