Update the card format for the Wins page for Desktop/Mobile

[abuna1985]

Overview

We need to update the Sass(CSS) for the win page cards in order to match the Figma file (design with dark blue border) provided by the design team

Action Items

• Ensure the cards within desktop view of the Wins page match Option B within the The Wins Page Figma design (within the dark blue border)

  • Change the see more link at the bottom of the card to the carrot, as shown in screenshots below.

• Ensure the cards within mobile view of the Wins page match Option B within the The Wins Page Figma design (within the dark blue border)

  • Create an arrow that indicates whether the card is expanded or not (it will be similar to our accordion element)
    • Arrow pointing up means not expanded (default)
    • Arrow pointing down is expanded (functionality works, you just need to switch out see more with arrow)

• Add styling to ensure all items of the card are evenly spaced vertically (this can be accomplished with flexbox/CSS grid)

  Click here to see before/after for Wins Page (desktop view)

  Current look of Wins Page card - desktop view

  

alt="Figma Design for Hack for LA Wins Card - mobile view"/>

Desired look of Wins Page card - desktop view (Figma design)

Resources/Instructions

The completed Figma design for the Wins Page card (within the dark blue border)
https://www.hackforla.org/wins/
Design Issue for reference #2207
#2207 (comment)
Reach out to the @hackforla/website-merge if you have any questions or need clarifications.

[github-actions]

Hi @abuna1985.

Good job adding the required labels to this issue.

Additional Resources:
Wiki: How to add status labels to issues (WIP. Link will be updated when the wiki is done)
Wiki: How to create issues (WIP. Link will be updated when the wiki is done)

[github-actions]

@tamara-snyder

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 Monday, January 31, 2022 at 11:15 PM PST.}

[JessicaLucindaCheng]

@tamara-snyder Please work on and complete a small issue before working on a medium-size issue. Please un-assign yourself from this issue and place it back in the prioritized backlog. Then pick a small issue to work on.