Epic: Fix size of SDG icons to match Figma design

[JessicaLucindaCheng]

Dependency

• SDG 2: Rename and replace image with correct color one #4254
• SDG 5: Rename and replace image with correct color one #4255
• SDG 8: Rename and replace image with correct color one #4256
• SDG 11: Rename and replace image with correct color one #4225
• SDG 13: Rename and replace image with correct color one #4257
• SDG 16: Rename and replace image with correct color one #4253
• SDG 17: Rename and replace image with correct color one #4258

Overview

We want to check the sections that use the Sustainable Development Goal (SDG) icons on the website look good in mobile, tablet, and desktop views so that we maintain a professional website.

Details

• SDG is an acronym for the United Nations Development Programme Sustainable Development Goals.
• Following the UN guidelines for SDG usage, we had to replace the SDG svgs in our repo because the colors in our svgs were not correct.
• However, with replacing those svgs, the new svgs are a different size. Thus, there could be some size issues with the new svgs on the pages that use them.

Action Items

• Using the Figma design: All pages overview as a reference, check the following pages in mobile, tablet, and desktop views to see if the SDG icons look good and the size of the icons matches the Figma design in those views
  • About page Sustainability section
  • Citizen Engagement page
  • Project detailed pages: 311 Data and Lucky Parking
• If needed, make issues to fix the problems on each page. To understand about the SDG files in our repo, you can read epic Rollout Plan: Move, refactor, and add SDG info and images #4153

Resources/Instructions

• United Nations Development Programme Sustainable Development Goals
• UN guidelines for SDG usage
• Figma design: All pages overview
• About page Sustainability section
• Citizen Engagement page
• Project detailed pages: 311 Data and Lucky Parking
• This issue is tracked in epic Rollout Plan: Move, refactor, and add SDG info and images #4153

[ExperimentsInHonesty]

@JessicaLucindaCheng The dependencies have all been addressed.

I gave a quick review and the icons and their backgrounds on the 311-data and lucky parking don't look right. So I reviewed the instructions and I don't think we have written up enough info about how to fix.

Meaning I know there are specific files (css with the colors, SDG images, etc). But there is no information in this issue about where those files are.

I am concerned the person working on this issue will start making new files, if they don't know where the existing files are.

Has you made any wiki content for this?

[JessicaLucindaCheng]

@JessicaLucindaCheng

Action Items

• Write SDG wiki page, specifically for file locations, including css with the colors, SDG images, etc.
• Add link to this issue
• Make ready for prioritization

[ExperimentsInHonesty]

@JessicaLucindaCheng it looks like there is a resizing issue for mobile too, here is a screenshot. I took this from my desktop, but it looks pretty much the same on my mobile phone
https://www.hackforla.org/citizen-engagement

Details

[JessicaLucindaCheng]

I will review this epic by Wednesday, June 12, 2024.

[ExperimentsInHonesty]

@JessicaLucindaCheng I had a chance to look at this issue and the pages It's related to. It seems like It's supposed to be covering the fact that the icons are smaller on the Figma and larger on the website page (see below), but the problem with changing it on the citizen engagement page, is that it would also have to be smaller on the project page which is not going to look good (and also might affect accessibility). So we propose closing this issue as unplanned.

Figma

figma: citizen engagement

Figma screenshot

Citizen Engagement Page

https://www.hackforla.org/citizen-engagement

live citizen engagement page

[ExperimentsInHonesty]

no need to change the sizes