Settings, Slack link and landing page

frontend/components/DropdownMenu/DropdownMenu.js

@@ -1,17 +1,30 @@
 import React from 'react';
+import { browserHistory } from 'react-router';
+
 import styles from './DropdownMenu.scss';
 
-const MenuItem = (props) => {
+class MenuItem extends React.Component {
+  onClick = () => {
+    if (this.props.to) {
+      browserHistory.push(this.props.to);
+    } else {
+      this.props.onClick();
+    }
+  }
+
+  render() {
     return (
       <div
         className={ styles.menuItem }
-      onClick={ props.onClick}
-    >{ props.children }</div>
+        onClick={ this.onClick }
+      >{ this.props.children }</div>
     );
-};
+  }
+}
 
 MenuItem.propTypes = {
   onClick: React.PropTypes.func,
+  to: React.PropTypes.string,
   children: React.PropTypes.node.isRequired,
 };
 

frontend/components/DropdownMenu/DropdownMenu.scss

@@ -43,6 +43,7 @@
   a {
     color: $textColor;
     text-decoration: none;
+    width: 100%;
   }
 
   &:hover {

frontend/components/Layout/Layout.js

@@ -96,6 +96,7 @@ class Layout extends React.Component {
                 src={ user.user.avatarUrl }
               /> }
             >
+              <MenuItem to="/settings">Settings</MenuItem>
               <MenuItem onClick={ user.logout }>Logout</MenuItem>
             </DropdownMenu>
           </Flex>

frontend/components/SlackAuthLink/SlackAuthLink.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 
-import styles from './SlackAuthLink.scss';
-
 @observer(['user'])
 class SlackAuthLink extends React.Component {
   static propTypes = {
+    children: React.PropTypes.node.isRequired,
     scopes: React.PropTypes.arrayOf(React.PropTypes.string),
     user: React.PropTypes.object.isRequired,
     redirectUri: React.PropTypes.string,
@@ -38,7 +37,7 @@ class SlackAuthLink extends React.Component {
 
   render() {
     return (
-      <a href={ this.slackUrl() } className={ styles.link }>Authorize /w Slack</a>
+      <a href={ this.slackUrl() }>{ this.props.children }</a>
     );
   }
 }

frontend/components/SlackAuthLink/SlackAuthLink.scss

@@ -1,6 +0,0 @@
-.link {
-  text-decoration: none;
-  background: no-repeat left/10% url(./assets/slack_icon.svg);
-  padding: 5px 0 4px 36px;
-  font-size: 1.4em;
-}

frontend/index.js

@@ -24,6 +24,7 @@ import Atlas from 'scenes/Atlas';
 import DocumentScene from 'scenes/DocumentScene';
 import DocumentEdit from 'scenes/DocumentEdit';
 import Search from 'scenes/Search';
+import Settings from 'scenes/Settings';
 import SlackAuth from 'scenes/SlackAuth';
 import Error404 from 'scenes/Error404';
 
@@ -69,9 +70,14 @@ render((
             />
 
             <Route path="/search" component={ Search } onEnter={ requireAuth } />
+            <Route path="/settings" component={ Settings } onEnter={ requireAuth } />
 
             <Route path="/auth/slack" component={ SlackAuth } />
-            <Route path="/auth/slack/commands" component={ SlackAuth } apiPath="/auth.slackCommands" />
+            <Route
+              path="/auth/slack/commands"
+              component={ SlackAuth }
+              apiPath="/auth.slackCommands"
+            />
 
             <Route path="/404" component={ Error404 } />
             <Redirect from="*" to="/404" />

frontend/scenes/Dashboard/Dashboard.js

@@ -8,7 +8,6 @@ import Layout from 'components/Layout';
 import AtlasPreview from 'components/AtlasPreview';
 import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
 import CenteredContent from 'components/CenteredContent';
-import SlackAuthLink from 'components/SlackAuthLink';
 
 @observer(['user'])
 class Dashboard extends React.Component {
@@ -32,7 +31,6 @@ class Dashboard extends React.Component {
                 return (<AtlasPreview key={ collection.id } data={ collection } />);
               }) }
             </Flex>
-            <SlackAuthLink scopes={ ["commands"] } redirectUri={ `${URL}/auth/slack/commands` } />
           </CenteredContent>
         </Layout>
       </Flex>

frontend/scenes/Home/Home.js

@@ -23,28 +23,20 @@ export default class Home extends React.Component {
       <div className={ styles.container }>
         <div className={ styles.content }>
           <div className={ styles.intro }>
-            <p>
-              Hi there,
-            </p>
-            <p>
-              We're building the best place for engineers, designers and teams to
-              share ideas, tell stories and build knowledge.
-            </p>
-            <p>
-              <strong>**Atlas**</strong> can start as a wiki, but it's really
-              up to you what you want to make of it:
-            </p>
-            <p>
-              - Write documentation in <i>_markdown_</i><br/>
-              - Build a blog around the API<br/>
-              - Hack the frontend for your needs (coming!)<br/>
-            </p>
-            <p>
-              We're just getting started.
-            </p>
+            <h1>Atlas</h1>
+            <p>Simple, fast, markdown.</p>
+            <p>We're building a modern wiki for engineering teams.</p>
           </div>
           <div className={ styles.action }>
-            <SlackAuthLink />
+            <SlackAuthLink>
+              <img
+                alt="Sign in with Slack"
+                height="40"
+                width="172"
+                src="https://platform.slack-edge.com/img/sign_in_with_slack.png"
+                srcSet="https://platform.slack-edge.com/img/sign_in_with_slack.png 1x, https://platform.slack-edge.com/img/sign_in_with_slack@2x.png 2x"
+              />
+            </SlackAuthLink>
           </div>
         </div>
       </div>

frontend/scenes/Settings/Settings.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+
+import { Flex } from 'reflexbox';
+import Layout, { Title } from 'components/Layout';
+import CenteredContent from 'components/CenteredContent';
+import SlackAuthLink from 'components/SlackAuthLink';
+
+import styles from './Settings.scss';
+
+import SettingsStore from './SettingsStore';
+
+@observer
+class Settings extends React.Component {
+  static store;
+
+  constructor(props) {
+    super(props);
+    this.store = new SettingsStore();
+  }
+
+  render() {
+    const title = (
+      <Title>
+        Settings
+      </Title>
+    );
+
+    return (
+      <Layout
+        title={ title }
+        titleText="Settings"
+        search={ false }
+        loading={ this.store.isFetching }
+      >
+        <CenteredContent>
+          <h2 className={ styles.sectionHeader }>Slack</h2>
+
+          <p>
+            Connect Atlas to your Slack to instantly search for your documents
+            using <code>/atlas</code> command.
+          </p>
+          
+          <SlackAuthLink
+            scopes={ ['commands'] }
+            redirectUri={ `${URL}/auth/slack/commands` }
+          >
+            <img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" srcSet="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x" />
+          </SlackAuthLink>
+        </CenteredContent>
+      </Layout>
+    );
+  }
+}
+
+export default Settings;

frontend/scenes/Settings/Settings.scss

@@ -0,0 +1,4 @@
+
+.sectionHeader {
+  border-bottom: 1px solid #eee;
+}

frontend/scenes/Settings/SettingsStore.js

@@ -0,0 +1,7 @@
+import { observable, action, runInAction } from 'mobx';
+// import { client } from 'utils/ApiClient';
+
+class SearchStore {
+};
+
+export default SearchStore;

frontend/scenes/Settings/index.js

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