Thematic Coloring of Content Pages

[melissahermes99]

Overview

We need to change the background colors of content pages (Reports, FAQ, About, Blog Privacy, Contact) to white to create a default white mode for the website.

Action Items

• Finalize theme.js to support light theme (this includes changing the background colors of content pages to #FFFFFF White among other palette specifications). This tool may help. (proposed changes: light theme v1)
• Across all pages, identify all custom styles (i.e. - makeStyles) that may have an impact on the application of light theme and address each individually
• Eventually, will need to finalize typography.js and apply thematic typography across all pages to inherit font family/style/weight from theme.js (proposed changes: light theme v1 - typography) (may need to separate this into a separate issue)
• Eventually, will need to ensure consistent spacing is applied among page items on every page such as spacing between the page heading and content so navigating from page to page does not cause any unwanted movement (example). (may need to separate this into a separate issue)

Screenshots

(Progress made as of 9/30/22)

Map

Will be updating this in #1370

FAQ

FAQ Open Items:

• Need to add the search feature to header of FAQs page (refer to v2 figma design - FAQs) #1384
• Need to create expandable/collapsible section headings for FAQs page per v2 figma design #1385

About

About Open Items:

• About - All Completed

Privacy Policy

Privacy Policy Open Items:

• Need to update contentful.com to mirror the content in figma (e.g. - remove the Privacy Policy heading from the content area) #1383

Contact

Contact Open Items:

• Contact - All Completed

Related Pull-Requests

#1 v2 dependencies #1386 (merged on 10/3/22)
#2 v2 new components #1388 (merged on 10/4/22)
#3 v2 header & footer updates #1389 (merged on 10/5/22)
#4 v2 About page (merged on 10/6/22)
#5 v2 FAQs (merged on 10/5/22)
#6 v2 Privacy (merged on 10/5/22)
#7 v2 Contact (merged on 10/6/22)
#8 v2 map initial (merged on 10/6/22)

Useful Tools

• Web Font Helper: To explore how different Google Web fonts appear on the web
• Material-UI Theme Creator: To visualize how different Material-UI theme settings look in real-time

[nichhk]

@melissahermes99 , do you have a suggestion for the color of text against a white background? We have some colors here, but not sure if we want to use any of these.

[melissahermes99]

Let's try #29404F for the text and if that appears too light against the background we can switch it to #0F181F. I do have some frames on Figma that are using #29404F for the text already so it should be a good option!

[edwinjue]

@melissahermes99 hope all's well. Just wanted to get your feedback on the latest progress made to the V2 site. Please see the updated screenshots in the first post. @nichhk and I would like to know whether they resemble the V2 figma designs enough to merge these changes into the dev branch. If there are any changes you'd like us to make, please let us know. Looking forward to your feedback! Thanks!

[melissahermes99]

@edwinjue The progress is looking great! I'm not sure if it's just how the colors are presented on my screen but the primary color on the header space should be #29404F. We also did away with the secondary titles on each page aside from the FAQ page where the header space is filled with a search bar; So on the Privacy Policy page we can remove the secondary "Privacy Policy title". Other than that, I think everything is looking perfect! Elizabeth and I have adjusted the margins, fonts, colors, and text sizes to hopefully make things easier for you!

[edwinjue]

@melissahermes99 thanks for the feedback!

I've updated the screenshots to reflect the new header space color #29404F (check first post).

Regarding your other concerns, I went ahead and logged each as a new issue so we can address them as soon as the pull requests successfully merge with dev:

• Need to update contentful.com to mirror the content in figma (e.g. - remove the Privacy Policy heading from the content area) #1383
• Need to add the search feature to header of FAQs page (refer to v2 figma design - FAQs) #1384
• Need to create expandable/collapsible section headings for FAQs page per v2 figma design #1385

I should warn you these changes will present some color related issues to the desktop menu on the Map page. However, a plan is already in place to address this as soon as this version goes live on dev #1370

Please let me know if what I presented satisfies your concerns sufficiently and whether we have the go ahead from you to make the changes live on our dev site

Thanks!

[melissahermes99]

@edwinjue Everything checks out with me, it's looking great! Thanks for going ahead and creating the new issues, I really appreciate it!

[edwinjue]

hi @melissahermes99

Thanks to the help of @nichhk, @jekijo and @funbunch the folks at engineering were able to update the content pages to the v2 design in a timely fashion. When you have time, feel free to take a look and let us know what you think.

@melissahermes99 I may have mentioned that pull request #1394 would have addressed your comment on #1342 but this will happen during one of the first commits when we work on #1370. Just thought I'd let you know. Hope you've been well

[melissahermes99]

@edwinjue I've looked at all the changes and everything looks great! Would it be possible to change "Los Angelenos" to "Angelenos" on the About page? It's the third word in the beginning of the paragraph. Thanks, everyone so so much for all the help with these issues!

[mc759]

Hey @edwinjue and @melissahermes99, Do you have an update for us on this issue?

Please update:

• Progress:
• Blockers:
• Availability:
• ETA:

Thanks!