Settings, Slack link and landing page

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;