Nicer dashboard

src/components/AtlasPreview/AtlasPreview.js

@@ -16,7 +16,7 @@ class AtlasPreview extends React.Component {
     return (
       <div className={ styles.container }>
         <h2><Link to={ `/atlas/${data.id}` } className={ styles.atlasLink }>{ data.name }</Link></h2>
-        <div>No documents. Why not <Link to={ `/atlas/${data.id}/new` }>create one</Link>?</div>
+        <div className={ styles.description }>No documents. Why not <Link to={ `/atlas/${data.id}/new` }>create one</Link>?</div>
       </div>
     );
   }

src/components/AtlasPreview/AtlasPreview.scss

@@ -1,6 +1,19 @@
 @import '../../utils/constants.scss';
 
+.container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  padding-bottom: 40px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #eee;
+}
+
 .atlasLink {
   text-decoration: none;
   color: $textColor;
+}
+
+.description {
+  color: #aaa;
 }

src/scenes/Dashboard/Dashboard.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { fetchAtlasesAsync } from 'actions/AtlasActions';
 
+import Flex from 'components/Flex';
 import Layout from 'components/Layout';
 import AtlasPreview from 'components/AtlasPreview';
 import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
@@ -22,11 +23,13 @@ class Dashboard extends React.Component {
     return (
       <Layout>
         <CenteredContent>
-          { this.props.isLoading ? (
-            <AtlasPreviewLoading />
-          ) : this.props.items.map((item) => {
-           return  (<AtlasPreview data={ item } />);
-          }) }
+          <Flex direction="column" flex={ true }>
+            { this.props.isLoading ? (
+              <AtlasPreviewLoading />
+            ) : this.props.items.map((item) => {
+             return  (<AtlasPreview data={ item } />);
+            }) }
+          </Flex>
         </CenteredContent>
       </Layout>
     );