Added more views and atlas APIs

src/components/AtlasPreview/AtlasPreview.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Link from 'react-router/lib/Link';
+
+import styles from './AtlasPreview.scss';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
+
+class AtlasPreview extends React.Component {
+  static propTypes = {
+    data: React.PropTypes.object.isRequired,
+  }
+
+  render() {
+    return (
+      <div className={ styles.container }>
+        <h2><Link to={ `/atlas/${this.props.data.id}` } className={ styles.atlasLink }>{ this.props.data.name }</Link></h2>
+        <div>No documents. Why not <Link to='/new-document'>create one</Link>?</div>
+      </div>
+    );
+  }
+};
+
+export default AtlasPreview;

src/components/AtlasPreview/AtlasPreview.scss

@@ -0,0 +1,6 @@
+@import '../../utils/constants.scss';
+
+.atlasLink {
+  text-decoration: none;
+  color: $textColor;
+}

src/components/AtlasPreview/index.js

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

src/components/CenteredContent/CenteredContent.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import styles from './CenteredContent.scss';
+
+const CenteredContent = (props) => {
+  const style = {
+    maxWidth: props.maxWidth,
+    ...props.style,
+  };
+
+  return (
+    <div className={ styles.content } style={ style }>
+      { props.children }
+    </div>
+  );
+};
+
+CenteredContent.defaultProps = {
+  maxWidth: '600px',
+};
+
+CenteredContent.propTypes = {
+  children: React.PropTypes.node.isRequired,
+  style: React.PropTypes.object,
+};
+
+export default CenteredContent;

src/components/CenteredContent/CenteredContent.scss

@@ -0,0 +1,5 @@
+.content {
+  display: flex;
+  flex: 1;
+  margin: 40px 20px;
+}

src/components/CenteredContent/index.js

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

src/components/Layout/Layout.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import Link from 'react-router/lib/Link';
 
 import HeaderMenu from './components/HeaderMenu';
 
@@ -14,7 +15,9 @@ class Layout extends React.Component {
     return (
       <div className={ styles.container }>
         <div className={ styles.header }>
-          <div className={ styles.teamName }>Coinbase</div>
+          <div className={ styles.teamName }>
+            <Link to="/">{ this.props.teamName }</Link>
+          </div>
           <HeaderMenu>
             <img src={ this.props.avatarUrl } />
           </HeaderMenu>
@@ -29,6 +32,7 @@ class Layout extends React.Component {
 
 const mapStateToProps = (state) => {
   return {
+    teamName: state.team ? state.team.name : null,
     avatarUrl: state.user ? state.user.avatarUrl : null,
   }
 };

src/components/Layout/Layout.scss

@@ -1,3 +1,5 @@
+@import '../../utils/constants.scss';
+
 .container {
   display: flex;
   flex: 1;
@@ -16,9 +18,11 @@
   border-bottom: 1px solid #eee;
 }
 
-.teamName {
+.teamName a {
   font-family: 'Atlas Grotesk';
   font-weight: bold;
+  color: $textColor;
+  text-decoration: none;
 }
 
 .content {