Maor UI polish for editing with live preview

src/containers/App.css

@@ -1,43 +1,3 @@
-.alignable {
-  margin: 0px auto;
-}
-
-@media (max-width: 749px) and (min-width: 495px) {
-  .alignable {
-    width: 495px;
-  }
-}
-
-@media (max-width: 1004px) and (min-width: 750px) {
-  .alignable {
-    width: 750px;
-  }
-}
-
-@media (max-width: 1259px) and (min-width: 1005px) {
-  .alignable {
-    width: 1005px;
-  }
-}
-
-@media (max-width: 1514px) and (min-width: 1260px) {
-  .alignable {
-    width: 1260px;
-  }
-}
-
-@media (max-width: 1769px) and (min-width: 1515px) {
-  .alignable {
-    width: 1515px;
-  }
-}
-
-@media (min-width: 1770px) {
-  .alignable {
-    width: 1770px;
-  }
-}
-
 .main {
-  padding-top: 60px;
+  padding-top: 54px;
 }

src/containers/CollectionPage.css

@@ -0,0 +1,39 @@
+.alignable {
+  margin: 0px auto;
+}
+
+@media (max-width: 749px) and (min-width: 495px) {
+  .alignable {
+    width: 495px;
+  }
+}
+
+@media (max-width: 1004px) and (min-width: 750px) {
+  .alignable {
+    width: 750px;
+  }
+}
+
+@media (max-width: 1259px) and (min-width: 1005px) {
+  .alignable {
+    width: 1005px;
+  }
+}
+
+@media (max-width: 1514px) and (min-width: 1260px) {
+  .alignable {
+    width: 1260px;
+  }
+}
+
+@media (max-width: 1769px) and (min-width: 1515px) {
+  .alignable {
+    width: 1515px;
+  }
+}
+
+@media (min-width: 1770px) {
+  .alignable {
+    width: 1770px;
+  }
+}

src/containers/CollectionPage.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { loadEntries } from '../actions/entries';
 import { selectEntries } from '../reducers';
 import EntryListing from '../components/EntryListing';
+import styles from './CollectionPage.css';
 
 class DashboardPage extends React.Component {
   componentDidMount() {
@@ -27,7 +28,7 @@ class DashboardPage extends React.Component {
       return <h1>No collections defined in your config.yml</h1>;
     }
 
-    return <div>
+    return <div className={styles.alignable}>
       {entries ? <EntryListing collection={collection} entries={entries}/> : 'Loading entries...'}
     </div>;
   }