fix the wins expanded icon styling in tablet view

[jbubar]

Overview

We need to refactor the expanded wins cards in tablet view so we can have a consistent view of the wins icons within the wins card.

This is a CSS problem that is a little harder than the average medium issue.

Click here to see the current wins page card

Here is the figma (for mobile. does not have tablet view)

click for screenshot

Action Items

• Figure how the icons are styled.
  • which classes are associated with which styles and etc
• rewrite a lot of the css for the icons so that it looks like the figma

Resources

https://github.com/hackforla/website/blob/c6358c0698a5356b63a0d8e76f186f11e902f400/pages/wins/wins-card-template.html
https://github.com/hackforla/website/blob/c6358c0698a5356b63a0d8e76f186f11e902f400/_sass/components/_wins-page.scss
https://github.com/hackforla/website/blob/c6358c0698a5356b63a0d8e76f186f11e902f400/pages/wins/wins.html

• Wins page Figma file
• Wins page remaining issues #2135

[github-actions]

@adrian-zaragoza

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 21, 2021 at 12:02 AM PST.}

[github-actions]

@adrian-zaragoza

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 28, 2021 at 12:02 AM PST.}

[adrian-zaragoza]

Progress: Researched the tablet classes, icons, and breakpoint variables. Reviewed figma file.
Blockers: None.
Availability: I won't be available much this week to work on it. I will have more time on Monday.
ETA: Friday, Oct 8

[github-actions]

@adrian-zaragoza

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, October 12, 2021 at 12:02 AM PST.}

[adrian-zaragoza]

Progress: Created a pull request with changes.