More styles and components

src/components/AtlasPreview/AtlasPreview.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Link from 'react-router/lib/Link';
 
-import DocumentPreview from 'components/DocumentPreview';
+import DocumentLink from './components/DocumentLink';
 
 import styles from './AtlasPreview.scss';
 import classNames from 'classnames/bind';
@@ -21,7 +21,7 @@ class AtlasPreview extends React.Component {
         { data.recentDocuments.length > 0 ?
           data.recentDocuments.map(document => {
             return (
-              <DocumentPreview document={ document } />)
+              <DocumentLink document={ document } key={ document.id } />)
           })
         : (
           <div className={ styles.description }>No documents. Why not <Link to={ `/atlas/${data.id}/new` }>create one</Link>?</div>

src/components/AtlasPreview/components/DocumentLink/DocumentLink.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import moment from 'moment';
+import Link from 'react-router/lib/Link';
+
+import styles from './DocumentLink.scss';
+
+const DocumentLink = (props) => {
+  return (
+    <Link to={ `/documents/${props.document.id}` } className={ styles.link }>
+      <h3 className={ styles.title }>{ props.document.title }</h3>
+      <span className={ styles.timestamp }>{ moment(props.document.updatedAt).fromNow() }</span>
+    </Link>
+  );
+};
+
+export default DocumentLink;

src/components/AtlasPreview/components/DocumentLink/DocumentLink.scss

@@ -0,0 +1,23 @@
+@import '../../../../utils/constants.scss';
+
+.link {
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+
+  margin-bottom: 20px;
+  text-decoration: none;
+}
+
+.title {
+  font-weight: normal;
+  font-size: 15px;
+  color: $textColor;
+
+  margin: 0;
+}
+
+.timestamp {
+  font-size: 13px;
+  color: #ccc;
+}

src/components/AtlasPreview/components/DocumentLink/index.js

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