[WEB-4] [EDITOR] move sync and publish buttons to the top of the editor page

[josh-ramos-22]

Why the changes are required?

Currently in the editor, the sync and publish buttons are positioned next to the insert heading/content block buttons. As these buttons don't directly relate to the editing of the document, it is best to position them separately in the top right corner.

Changes

In frontend/src/packages/editor/index.tsx:

• Changed the EditorHeader component to have both a opening and closing tag, in order to nest the sync and publish buttons within it.
• Nested SyncDocument and PublishDocument components within EditorHeader.

In frontend/src/deprecated/components/Editor/EditorHeader.tsx:

• Increased header size from 50px to 65px, in order to fully contain the sync and publish buttons without overflow.
• In HeaderFlex component, set justify-content to flex-end in order to align the buttons to the right of the header.
• Modified EditorHeader to have props in order to pass in sync and publish buttons as children.

Screenshots

Comments

• I noticed that the header component currently used is in a deprecated folder. Will we be creating a new header component and file later on?

[lauraw0]

lgtm! just as you said we will likely be creating a new header file within our current code however we are still contemplating whether we can simply reuse the deprecated code or create a completely new header file. Hope that makes sense :D