Make the Editor appear more like GSA websites.

[danid123]

Styling changes:

• Change fonts
  font-family: Public Sans Web, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

• Change font sizes to match GSA styles

• Change nav bar styling to show a blue bar under the current page
  Note: for this one I'm not sure if we should keep the dark blue/light blue colors we have for our website that matches GSA websites or switch to the white with green bar colors that Section508 uses. I think the GSA colors have greater contrast. @mgifford what do you think?

[danid123]

mock to compare and contrast

[mgifford]

I think that's way cleaner.. Looks great to me.

I think we can go with what Section508.gov uses. Just needs to have sufficient contrast.

[dmundra]

Hi @danid123 I have two tickets in the backlog to replace W3C WAI stylesheet (#225) and add USWDS stylesheet (#226). I think we can close those tickets and bring requirements to this ticket.

That being said this will also need priority because I estimate it will be a good amount of work to replace the stylesheets and we might not able to do it in this option.

What do you think? We could do smaller incremental changes but it is probably best to do one big change.

[danid123]

@dmundra that sounds like a good plan. One big change is probably also easier for testing.

[dmundra]

Links to review:

• https://github.com/metonym/svelte-uswds
• https://github.com/GSA/openacr-editor/blob/main/src/index.html#L13