search

HHS / simpler-grants-gov

https://simpler.grants.gov
Other
39 stars 9 forks source link

[Task] Misc content/layout updates #888

Closed andycochran closed 9 months ago

andycochran commented 9 months ago

This issue outlines miscellaneous changes required to 1) match the Figma mockup, and 2) improve responsive layout.

Home page

Use the domain for the Site title

✅ Fix: https://github.com/HHS/simpler-grants-gov/pull/896

Image

Tighten the spacing on the Hero

✅ Fix: https://github.com/HHS/simpler-grants-gov/pull/897

Image

Update "The Goal" text

✅ Fix: https://github.com/HHS/simpler-grants-gov/pull/898

We want Grants.gov to be an extremely simple, accessible, and easy-to-use tool for posting, finding, sharing, and applying for federal financial assistance. Our mission is to increase access to grants and improve the grants experience for everyone.

We’re improving the way you to search for and discover funding opportunities, making it easier to find and apply.

If you work for a federal grantmaking agency, we’re making it easier for your communities to find the funding they need.

Image

"The research" section missing dot in "Grants.gov"

✅ Fix: https://github.com/HHS/simpler-grants-gov/pull/899

This was a mistake in Figma, which has just been fixed.

Image

Prevent the icon in buttons breaking to its own line

✅ Fix: https://github.com/HHS/simpler-grants-gov/pull/900

Image

Simplify grid

✅ Fix: https://github.com/HHS/simpler-grants-gov/pull/902

Currently, the grid for "The goal" section goes from 6/6 on tablet, to 5/7 on desktop, to 6/6 on large desktop. There's no reason for that middle size to have a narrower lefthand column. The grid can just be 6/6 on tablet and above. Remove the desktop:grid-col-5 and desktop-lg:grid-col-6 classes.

Image

Process page

Emphasize with not for with italicized text

❌ Separate issue created: https://github.com/HHS/simpler-grants-gov/issues/909

Image

Add maxw-tablet-lg to headers to improve legibility

✅ Fix: https://github.com/HHS/simpler-grants-gov/pull/903

(Need to explore using usa-prose for this and other legibility improvements.)

Image

Update milestone 1 intro

✅ Fix: https://github.com/HHS/simpler-grants-gov/pull/904

To make it easier to discover funding opportunities, we’re starting with a new modern API to make grants data more accessible. Our API-first approach will prioritize data at the beginning, and make sure data remains a priority as we iterate. It’s crucial that the Grants.gov website, 3rd-party apps, and other services can more easily access 
grants data. Our new API will foster innovation and be a foundation for interacting with 
grants in new ways, like SMS, phone, email, chat, and notifications. 

(see above img)

Update milestone button links

❌ Separate issue created:https://github.com/HHS/simpler-grants-gov/issues/910

To confirm: We want to link directly to the specific 30Ks, not to the GitHub Projects board.

  1. https://github.com/HHS/simpler-grants-gov/issues/70 (Get Opportunities)
  2. https://github.com/HHS/simpler-grants-gov/issues/89 (Search MV)

Bold links

✅ Fix: https://github.com/HHS/simpler-grants-gov/pull/911

Make the hyperlinked text bold so that it stands out from the paragraphs a bit more. (Ignore the lack of an external link icon in the mockup, that should be there as-is.)

Image

Research page

"The research" intro missing dot in "Grants.gov"

✅ Fix: https://github.com/HHS/simpler-grants-gov/pull/899

This was a mistake in Figma, which has just been fixed.

Image

Bold links at bottom of page

✅ Fix: https://github.com/HHS/simpler-grants-gov/pull/907

Make the hyperlinked text bold so that it stands out from the paragraphs a bit more.

Image

Newsletter confirmation page

Bold links in "Learn more"

✅ Fix: https://github.com/HHS/simpler-grants-gov/pull/908

Image

andycochran commented 9 months ago

I ran into one here I can't figure out how to fix: "Emphasize with not for with italicized text"

Adding <em> tags to the content string requires that we use <Trans> instead of t(), or this happens:

Image

I'm not sure how to best refactor the ProcessIntro component to munge the {box.content}.

cc @SammySteiner