From bbecb4cbbbdf4e88ecd05811d550f4c593b3d46d Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Mon, 30 May 2016 11:56:19 -0700
Subject: [PATCH] HeaderAction

---
 .../components/HeaderAction/HeaderAction.js    | 18 ++++++++++++++++++
 .../components/HeaderAction/HeaderAction.scss  |  9 +++++++++
 .../Layout/components/HeaderAction/index.js    |  2 ++
 src/components/Layout/index.js                 |  4 ++--
 src/scenes/Atlas/Atlas.js                      |  6 ++++--
 src/scenes/DocumentScene/DocumentScene.js      |  6 +++---
 src/scenes/Editor/Editor.js                    |  6 +++---
 7 files changed, 41 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Layout/components/HeaderAction/HeaderAction.js
 create mode 100644 src/components/Layout/components/HeaderAction/HeaderAction.scss
 create mode 100644 src/components/Layout/components/HeaderAction/index.js

diff --git a/src/components/Layout/components/HeaderAction/HeaderAction.js b/src/components/Layout/components/HeaderAction/HeaderAction.js
new file mode 100644
index 000000000..2a5cf806a
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/components/Layout/components/HeaderAction/HeaderAction.scss b/src/components/Layout/components/HeaderAction/HeaderAction.scss
new file mode 100644
index 000000000..1238128bb
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/Layout/components/HeaderAction/index.js b/src/components/Layout/components/HeaderAction/index.js
new file mode 100644
index 000000000..bbaae86fc
--- /dev/null
+++ b/src/components/Layout/components/HeaderAction/index.js
@@ -0,0 +1,2 @@
+import HeaderAction from './HeaderAction';
+export default HeaderAction;
\ No newline at end of file
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
index 203673809..45d884bf5 100644
--- a/src/components/Layout/index.js
+++ b/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,
 };
diff --git a/src/scenes/Atlas/Atlas.js b/src/scenes/Atlas/Atlas.js
index 307228317..30592eeb5 100644
--- a/src/scenes/Atlas/Atlas.js
+++ b/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>;
     }
 
diff --git a/src/scenes/DocumentScene/DocumentScene.js b/src/scenes/DocumentScene/DocumentScene.js
index 48360f665..569d24adb 100644
--- a/src/scenes/DocumentScene/DocumentScene.js
+++ b/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>
diff --git a/src/scenes/Editor/Editor.js b/src/scenes/Editor/Editor.js
index a343363ac..7c5fcc5f0 100644
--- a/src/scenes/Editor/Editor.js
+++ b/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 }