Q1: Selection Expansion

When selecting a category, we add an X icon to the right. If the category we select is one of the longer ones, the pill and the whole filter draw must resize wider to accommodate the new X element. Just confirming that's ok visually:

Q2: No hover feedback for deselection

When a category is selected and displays an X to the right, if the user hovers over it there is no visual feedback to indicate that clicking will deselect. Is that ok? Do we want to add some sort of feedback (color the X red or something like that)?

On the homepage, the styling seems to be off for the following:

1. Description copy within each cell (i.e.: Zhongja Sun is a set designer) --> Type should be much larger, maybe by about 50%. The category 'set designer' should be underlined (to indicate that it is a link).

2. Can we decrease size of 'Source' and 'Save' buttons within each cell? By about 150%-20%.

3. Top Nav buttons:

• Seem larger than what we've created in figma.
• Stroke isn't thick enough. (A general note: strokes throughout site should be the same width)
• Nav buttons feel too close together. Can we increase spacing between them to follow figma example.

Screenshot of issue

Screenshot of correct example for the above

What

The image maker cells on the /saved page don't show the 'source' link button.

Screenshots

Device

All

Adjust large filter button padding to match Figma:

Use Title1 for text inside pills

We need one

What

Navigation pills initially render with the wrong font, then switch over to the proper font.

Screenshots

Change empty state copy on saved page to Title 1 (Druk 24px, 133% line height)

What

Should match the About page, but can't copy the CSS exactly because the privacy page is generated from markdown instead of explicitly programmed.

Screenshots

Mobile:

Desktop:

On the filter panel, change Category title text styling to Title2:
Druk Wide Medium
Size: 16
Line Height: 115%

What

Lighthouse score shows we aren't loading optimized image sizes like I thought we were. Will be especially impactful for mobile.

What

On the image grid page's category filters modal: The categories listed don't match the categories listed in the copy doc.

Screenshots

Device

All

Change p styling to the following:

• 22px
• 127% line height

this one!

Some options here.

Should really make this decision soon because as we add more code it'll be more and more painful to switch.

The paypal donate link generation tool allows us to specify where users should be redirected after completing payment. For now, I've set that redirect destination to be this github site. We need to remember to update this to the public facing public service site after we have a domain.

Apply change to About, Contact, Privacy & Terms

Change container padding to:
padding: 50px 60px

Currently the site auto-rebuilds (handled via netlify) anytime the code base changes.

But we also need it to rebuild for these reasons:

• Data changes in Contentful. e.g. a new creator entry is added in contentful, the site should be rebuilt immediately to make that creator's page visible. See contentful webhook docs.
• Time passes. We can rebuild the site periodically (every hour or so?) to regenerate a static home with a different set of randomly chosen creators. Doing it in the build like this rather than on the client side when someone loads the webpage will mean faster load times for them.

The original 9 imagemaker uploads all had dummy data (images, categories) associated with real names - none of them. They'll need to revisited to confirm if they should be there and either updated with real data or deleted.

The 9 imagemakers:

• Ronan Mckenzie
• Christine Hahn
• Durimel
• Ibra Ake
• Myles Loftin
• Mecca Williams
• junebugkim
• Lulu Hyers
• Sara Khalid

Margin underneath Title1 should be 18px (same as spacing between p paragraphs)

https://www.contentful.com/developers/docs/tutorials/general/automate-site-builds-with-webhooks/

Or if we decide we want to limit bio's to plaintext, update the Creator content type to forbid markdown.

What

In the main page image grid cell, the categories listed in the sentence have 2 issues:

1. Spacing bug
2. Capitalization inconsistency

Screenshot

Device + Browser

All

https://react-bootstrap.netlify.com/ could be a good solution for making this site modern + responsive. Use it or decide what alternative we'll go with.