moved sync and publish buttons to header of editor (#336)

Co-authored-by: Josh Ramos <josh.ramos@student.unsw.edu.au>

Author: josh-ramos-22

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import Button from '@mui/material/Button';
 
 const Container = styled.div`
-  height: 50px;
+  height: 65px;
   background: #A09FE3;
   width: 100%;
 `
@@ -16,7 +16,7 @@ const HeaderFlex = styled.div`
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
-justify-content: space-between;
+justify-content: flex-end;
 align-items: center;
 padding: 0.3rem 0.5rem;
 `
@@ -39,10 +39,11 @@ const ButtonStyle = styled(Button)`
 `
 /* Preview and text to be changed into a dropdown menu */
 
-const EditorHeader: React.FC = () => {
+const EditorHeader: React.FC = (props) => {
   return (
     <Container>
       <HeaderFlex>
+        {props.children}
         {/* <ButtonGroup>
           <ButtonStyle>
           ←

frontend/src/packages/editor/index.tsx

@@ -82,14 +82,15 @@ const EditorPage: FC = () => {
 
   return (
     <div style={{ height: "100%" }}>
-      <EditorHeader />
+      <EditorHeader>
+          <SyncDocument onClick={() => syncDocument()} />
+          <PublishDocument onClick={() => publishDocument(id ?? "")} />
+      </EditorHeader>
       <Container>
         {blocks.map((block, idx) => createBlock(block, idx, focusedId === idx))}
         <InsertContentWrapper>
           <CreateHeadingBlock onClick={buildButtonClickHandler("heading")} />
           <CreateContentBlock onClick={buildButtonClickHandler("paragraph")} />
-          <SyncDocument onClick={() => syncDocument()} />
-          <PublishDocument onClick={() => publishDocument(id ?? "")} />
         </InsertContentWrapper>
       </Container>
     </div>