UI small adjustments & refinments

src/containers/App.css

@@ -4,7 +4,17 @@
 .nav {
   display: block;
   padding: 1rem;
+  & .heading {
+    border: none;
+  }
 }
 .main {
   padding-top: 54px;
 }
+
+.navDrawer {
+  max-width: 240px !important;
+  & .drawerContent {
+    max-width: 240px !important;
+  }
+}

src/containers/App.js

@@ -20,11 +20,20 @@ import styles from './App.css';
 class App extends React.Component {
 
   state = {
-    navDrawerIsVisible: false
+    navDrawerIsVisible: true
   }
 
   componentDidMount() {
     this.props.dispatch(loadConfig());
+    window.addEventListener('resize', this.closeDrawer);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.closeDrawer);
+  }
+
+  closeDrawer = () => {
+    this.setState({ navDrawerIsVisible: false });
   }
 
   configError(config) {
@@ -137,10 +146,11 @@ class App extends React.Component {
         <NavDrawer
             active={navDrawerIsVisible}
             scrollY
-            permanentAt="md"
+            permanentAt={navDrawerIsVisible && 'lg'}
+            theme={styles}
         >
           <nav className={styles.nav}>
-            <h1>Collections</h1>
+            <h1 className={styles.heading}>Collections</h1>
             <Navigation type='vertical'>
               {
                 collections.valueSeq().map(collection =>
@@ -164,7 +174,7 @@ class App extends React.Component {
               onCreateEntryClick={createNewEntryInCollection}
               toggleNavDrawer={this.toggleNavDrawer}
           />
-          <div className={`${styles.alignable} ${styles.main}`}>
+          <div className={styles.main}>
             {children}
           </div>
         </Panel>

src/containers/CollectionPage.css

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

src/containers/CollectionPage.js

@@ -30,7 +30,7 @@ class DashboardPage extends React.Component {
     }
 
 
-    return <div className={styles.alignable}>
+    return <div className={styles.root}>
       {entries ?
         <EntryListing collection={collection} entries={entries}/>
         :

src/containers/editorialWorkflow/CollectionPageHOC.js

@@ -24,12 +24,14 @@ export default function CollectionPageHOC(CollectionPage) {
       if (!isEditorialWorkflow) return super.render();
 
       return (
-        <div className={styles.alignable}>
-          <UnpublishedListing
-              entries={unpublishedEntries}
-              handleChangeStatus={updateUnpublishedEntryStatus}
-              handlePublish={publishUnpublishedEntry}
-          />
+        <div>
+          <div className={styles.root}>
+            <UnpublishedListing
+                entries={unpublishedEntries}
+                handleChangeStatus={updateUnpublishedEntryStatus}
+                handlePublish={publishUnpublishedEntry}
+            />
+          </div>
           {super.render()}
         </div>
       );