Redesign header area

[gordlin]

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

Related Item(s)

Issue #504

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).

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.

---

This change is 

[github-actions]

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