Add overlays on city names

[k8reindeer]

Links

• Issue link
• Documentation links

GIF/Screenshots:

Changes:

• add background behind text over the picture so that you can read it better

How To Test:

• This will appear for any list component.

Feedback I'm looking for:

... I don't really think this looks that good? Especially because it varies in size with the content? can I get some design feedback on this?

Things left to do before deploying:

• ...

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/neighborexpress/neighbor-express/eue9iotbx
✅ Preview: https://neighbor-express-git-overlays-on-list.neighborexpress.now.sh

[erinfrey]

Hey!

Feedback:

• Agree, doesn't look great with the varied sizes. If we keep the overlay, could we have it extend to the edges?
• We can also consider alternatives to an overlay. For instance, do we prefer that the city name lies above or below the image or is "embedded" in the image similar to if it was an image card. That would also mean the image looks better, since it's not cut-off midway.

[k8reindeer]

I don't know what you mean by

"embedded" in the image similar to if it was an image card.
Can you show a visual example?

One source of inspiration that would be especially easy to pull from would be anything that's on the official USWDS layout: https://designsystem.digital.gov/page-templates/

[keithk]

The way that I've done this in the past is having an element with 100% height on top of the div, that has a gradient-ed background from transparent->black top->bottom, and then move the text there.

Made a super quick figma mockup: https://www.figma.com/file/B7QmTZk8gvbbmXZAHmj5KP/NEX-homepage?node-id=0%3A1

[k8reindeer]

Okay, that looks a bit better to me

Does it accomplish what was intended from the marketing team?

[keithk]

I'd personally prefer extracting these inline styles into a List.module.css and importing it, instead of having them inline.

I'd also maybe reduce the black to .8 or .7 opacity, (I had it at .75 in the mockup I think) so that the photo is a little more clear

[keithk]

(I know this is also going on super long for a relatively small thing so also feel free to not play around with the opacity haha)

[k8reindeer]

@keithk yeah I like .75 better! I... didn't actually know how to read that value out of Figma, whoops!

[keithk]

Yessss that looks great 🙏🏼