Redesign header area

[gordlin]

RECREATION OF PR #514, AS THAT BRANCH WAS HAVING ISSUES

DEPENDS ON #510 (this branch is based on that branch). Pull that first!

Related Item(s)

Issues:
#504
#518

Changes

• [FEATURE] Implements the UI/UX team's Figma suggestions for the header, with a few extra changes.
  • Header now has two layers: The "upper header", containing the Leave editor button and all the save-related UI elements (unsaved changes warning, reset changes button, save button); and the "lower header", containing the product title/UUID and all other buttons (preview, download, etc.)
  • Share feedback button moved to lower header.
  • Redesigned unsaved changes warning and reset changes button.
  • Add icons to save and preview buttons.
  • Save and reset changes buttons will now be disabled until there are unsaved changes.
  • Added an editor language toggle in the upper header, which will only show up when not on the Canada.ca template.
  • Set title and UUID to truncate at one line, to prevent wrapping.
  • Add tooltips to all header elements. These can also be accessed on mobile by holding the element for 500ms.
  • On mobile display sizes, header is now sticky and most buttons have their text hidden (only icons).
  • Added a dark border between the upper/lower headers.
• [FIX] Repairs various layout issues and bugs related to the Canada.ca template.
  • Added left/right-padding equal to that of the Canada.ca elements.
  • Fixed ToC not showing up.
  • Fixed new/load product pages being partially hidden by the footer.
• [FIX] Makes the Preview dropdown buttons wider, equal to the width of the Preview parent button.

Notes

Header, desktop, no unsaved changes:

Header, desktop, with unsaved changes:

Header, mobile, with unsaved changes and long truncated title:

Testing

Steps:

1. Open any product.
2. Try out each of the above-listed changes in the header. Try testing in different environments and screen sizes, with long and short titles/UUIDs, etc.
3. Go to the Canada.ca version of the editor, and test it out, keeping an eye out for the above listed fixes. Things should work the same as the standalone app.

---

This change is 

[github-actions]

Your demo site is ready! 🚀 Visit it here: https://ramp4-pcar4.github.io/storylines-editor/new-header-bar-recreated

[gordlin]

Reviewable status: 0 of 4 files reviewed, 1 unresolved discussion (waiting on @IshavSohal, @RyanCoulsonCA, and @yileifeng)

---

a discussion (no related file):
All comments on the prior PR (#514) should be fixed here. Let me know if anything's been undone that I didn't notice.

[RyanCoulsonCA]

Reviewed 2 of 4 files at r1, 2 of 2 files at r2, 1 of 1 files at r3, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @IshavSohal and @yileifeng)

[IshavSohal]

Noticed that the product's title remains the same when changing languages.

Also, the editor language toggle still appears for the Canada.ca template, but it also appears for all other pages (dashboard, edit existing product, create new product), so not sure if the issue pertains to this PR.

Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @yileifeng)

[gordlin]

Noticed that the product's title remains the same when changing languages.

This is expected behaviour. The product title language, and other metadata, is controlled by the config language (i.e. the thing you change with the "View English/French Config" button) and not the page language.

Also, the editor language toggle still appears for the Canada.ca template, but it also appears for all other pages (dashboard, edit existing product, create new product), so not sure if the issue pertains to this PR.

Yeah, odd. It seems to be an issue with the URLs used for the "Is this a Canada.ca template?" check. I've fixed it for the editor, new/load product pages, and the dashboard; the language toggle should now hide properly.

Donethanks!

Reviewable status: 2 of 5 files reviewed, 1 unresolved discussion (waiting on @RyanCoulsonCA and @yileifeng)

[IshavSohal]

Reviewable status: 2 of 5 files reviewed, 1 unresolved discussion (waiting on @RyanCoulsonCA and @yileifeng)