Epic: Fix size of SDG icons to match Figma design

JessicaLucindaCheng commented 1 year ago

Dependency

[x] #4254
[x] #4255
[x] #4256
[x] #4225
[x] #4257
[x] #4253
[x] #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 #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 #4153

ExperimentsInHonesty commented 1 year ago

@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 commented 1 year ago

@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.

Issue #4187 fixes the background color problem for the 311 Data and Lucky Parking problem.
This issue (#4229) is only to address the size of the icons on the pages listed: About page, Citizen Engagement, 311 Data and Lucky Parking.

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.

This issue is meant for a dev lead to write Issue Making: Level 2 issues from it, not a developer to implement it. Thus, I didn't provide too much info. However, I should have put a link to the SDG epic so that the dev lead could have more information, which I have gone ahead and done. I can also add a link to the wiki content once it is written.

Has you made any wiki content for this?

No, but I wrote issue #4676. Once you prioritize the issue, I can self-assign and write the wiki page.

JessicaLucindaCheng commented 7 months ago

@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 commented 7 months ago

@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

![image](https://github.com/hackforla/website/assets/37763229/c4c4c758-bd9c-46d6-917d-99e0296f8edd)

JessicaLucindaCheng commented 3 months ago

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

ExperimentsInHonesty commented 3 months ago

@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.