HeaderAction

src/components/Layout/components/HeaderAction/HeaderAction.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import styles from './HeaderAction.scss';
+
+const HeaderAction = (props) => {
+  return (
+    <div
+      onClick={ props.onClick }
+      className={ styles.container }
+    >{ props.children }</div>
+  );
+};
+
+HeaderAction.propTypes = {
+  onClick: React.PropTypes.func,
+};
+
+export default HeaderAction;

src/components/Layout/components/HeaderAction/HeaderAction.scss

@@ -0,0 +1,9 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  min-height: 43px;
+  padding: 0 0.5rem;
+  color: #0C77F8;
+}

src/components/Layout/components/HeaderAction/index.js

@@ -0,0 +1,2 @@
+import HeaderAction from './HeaderAction';
+export default HeaderAction;

src/components/Layout/index.js

@@ -1,10 +1,10 @@
 import Layout from './Layout';
 import Title from './components/Title';
-import HeaderLink from './components/HeaderLink';
+import HeaderAction from './components/HeaderAction';
 
 export default Layout;
 
 export {
   Title,
-  HeaderLink,
+  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 }