Update Wins About page,1835

[anonymousanemone]

Fixes #1835

What changes did you make and why did you make them ?

• Remove 'coming soon' in the Wins section and replace it with a link to the Wins page (see image below)
• Change the Wins title to black (use the variable for black # 333, and keep the icon pink) because user testing in the past showed hfLA users confuse pink titles for links
• Evenly align the Wins title and the icon- see image below for reference and/or

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Visuals after changes are applied

[Zak234]

Everything looks good!

[akibrhast]

@hackforla/website-merge What is the next step here ?

[Aveline-art]

@hackforla/website-merge What is the next step here ?

This needs a second reviewer, ideally not me, since I do need to leave space for other members to also practice reviewing PRs. If the issue is not particularly urgent, could this be left for another day? Is there a soft or hard time frame for a second review after the approval of a first reviewer?

[akibrhast]

If the issue is not particularly urgent, could this be left for another day?

It definitely can be, but it would decrease overall velocity.If i recall last nights backend meeting conversation with Bonnie, reducing velocity is not favoured.

Is there a soft or hard time frame for a second review after the approval of a first reviewer?

Not that I am aware of. 24 hours ?

imho,

• I think this sort of situation is very subjective and needs to be dealt on a case by case basis. Particularly, in regards to the group of people here doing the internship. @Zak234 @anonymousanemone and a few others. I believe bonnie wants them to be on the fast track and get a lot of experience. I have also noticed them making pull requests very often , as such I am of the opinion that holding them up is not doing them any favors since they are here for a limited time.

[abuna1985]

You did a really good job matching the Figma design for the desktop view. I just have one suggestion.

This is the figma design in mobile view (iPhone X)

About Page (mobile view) figma design

This is the same section in mobile view (iPhone X) on your branch

About Page (mobile view) your branch

@anonymousanemone notice the card on your branch is currently shorter on the left/right side and not the same length as the text above it? Can you make sure the card matches the Figma design in mobile (iPhone 8-11)? It looks you may need to decrease the card margin (left/right) in mobile view.

Thank you.

[abuna1985]

@anonymousanemone. After doing a bit of research, I may have found the reason why it looks shrunk. The <svg> for mobile card view comes in like this:

Screenshot of img/svg element

As you can see, the width of this element is 307px. But the intrinsic size for this is 338px. so it seems like we have a 31px border of extra space. We basically need to remove it. From my research within this CSS tricks article on svg, it seems like we don't have very much control of the styling of an SVG when it is nested in a <img>. But we do have control of the <img> element.

We can discuss a solution with @akibrhast @Aveline-art @averdin2 and @jbubar tonight to see if we can come up with a solution at the meeting tonight.

[abuna1985]

@Aveline-art It seems like the SVG space is a medium separate issue. I created #1908 and moved all the relevant information over there. All your current changes look good @anonymousanemone. Thank you for your patience and understanding.