HeaderAction

src/scenes/Atlas/Atlas.js

@@ -8,7 +8,7 @@ import { fetchAtlasAsync } from 'actions/AtlasActions';
 // Temp
 import { client } from 'utils/ApiClient';
 
-import Layout, { Title } from 'components/Layout';
+import Layout, { Title, HeaderAction } from 'components/Layout';
 import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
 import CenteredContent from 'components/CenteredContent';
 import DocumentList from 'components/DocumentList';
@@ -35,7 +35,9 @@ class Atlas extends React.Component {
     let title;
 
     if (!this.props.isLoading) {
-      actions = <Link to={ `/atlas/${atlas.id}/new` }>New document</Link>;
+      actions = <HeaderAction>
+          <Link to={ `/atlas/${atlas.id}/new` }>New document</Link>
+        </HeaderAction>;
       title = <Title>{ atlas.name }</Title>;
     }
 

src/scenes/DocumentScene/DocumentScene.js

@@ -7,7 +7,7 @@ import {
   deleteDocument,
 } from 'actions/DocumentActions';
 
-import Layout, { HeaderLink } from 'components/Layout';
+import Layout, { HeaderAction } from 'components/Layout';
 import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
 import CenteredContent from 'components/CenteredContent';
 import Document from 'components/Document';
@@ -55,9 +55,9 @@ class DocumentScene extends React.Component {
     if (document) {
       actions = (
         <div className={ styles.actions }>
-          <HeaderLink>
+          <HeaderAction>
             <Link to={ `/documents/${document.id}/edit` }>Edit</Link>
-          </HeaderLink>
+          </HeaderAction>
           <DropdownMenu label="More">
             <MenuItem onClick={ this.onDelete }>Delete</MenuItem>
           </DropdownMenu>

src/scenes/Editor/Editor.js

@@ -11,7 +11,7 @@ import {
   saveDocumentAsync,
 } from 'actions/DocumentActions';
 
-import Layout, { Title } from 'components/Layout';
+import Layout, { Title, HeaderAction } from 'components/Layout';
 import Flex from 'components/Flex';
 import MarkdownEditor from 'components/MarkdownEditor';
 import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
@@ -63,9 +63,9 @@ class Editor extends Component {
     return (
       <Layout
         actions={(
-          <Flex direction="row" align="center">
+          <HeaderAction>
             <SaveAction onClick={ this.onSave } />
-          </Flex>
+          </HeaderAction>
         )}
         title={ title }
         fixed={ true }