Merge branch 'master' into markitup-react

src/components/AppHeader/AppHeader.css

@@ -9,9 +9,3 @@
 .appBar {
   background-color: var(--backgroundColor);
 }
-
-.createBtn {
-  position: fixed;
-  right: 2rem;
-  top: 3.5rem;
-}

src/components/AppHeader/AppHeader.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import pluralize from 'pluralize';
 import { IndexLink } from 'react-router';
-import { Menu, MenuItem, Button, IconButton } from 'react-toolbox';
+import { Menu, MenuItem } from 'react-toolbox';
 import AppBar from 'react-toolbox/lib/app_bar';
 import FindBar from '../FindBar/FindBar';
 import styles from './AppHeader.css';
@@ -45,45 +45,36 @@ export default class AppHeader extends React.Component {
       <AppBar
         fixed
         theme={styles}
+        leftIcon="menu"
+        rightIcon="create"
+        onLeftIconClick={toggleNavDrawer}
+        onRightIconClick={this.handleCreateButtonClick}
       >
-        <IconButton
-          icon="menu"
-          inverse
-          onClick={toggleNavDrawer}
-        />
         <IndexLink to="/">
           Dashboard
         </IndexLink>
+
         <FindBar
           commands={commands}
           defaultCommands={defaultCommands}
           runCommand={runCommand}
         />
-        <Button
-          className={styles.createBtn}
-          icon='add'
-          floating
-          accent
-          onClick={this.handleCreateButtonClick}
+        <Menu
+          active={createMenuActive}
+          position="topRight"
+          onHide={this.handleCreateMenuHide}
         >
-          <Menu
-            active={createMenuActive}
-            position="topRight"
-            onHide={this.handleCreateMenuHide}
-          >
-            {
-              collections.valueSeq().map(collection =>
-                <MenuItem
-                  key={collection.get('name')}
-                  value={collection.get('name')}
-                  onClick={this.handleCreatePostClick.bind(this, collection.get('name'))}
-                  caption={pluralize(collection.get('label'), 1)}
-                />
-              )
-            }
-          </Menu>
-        </Button>
-
+          {
+            collections.valueSeq().map(collection =>
+              <MenuItem
+                key={collection.get('name')}
+                value={collection.get('name')}
+                onClick={this.handleCreatePostClick.bind(this, collection.get('name'))}
+                caption={pluralize(collection.get('label'), 1)}
+              />
+            )
+          }
+        </Menu>
       </AppBar>
     );
   }

src/index.js

@@ -1,12 +1,16 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
-import Root from './root';
-import registry from './lib/registry';
 import 'file?name=index.html!../example/index.html';
 import 'react-toolbox/lib/commons.scss';
+import Root from './root';
+import registry from './lib/registry';
 import './index.css';
 
+if (process.env.NODE_ENV !== 'production') {
+  require('./utils.css'); // eslint-disable-line
+}
+
 // Create mount element dynamically
 const el = document.createElement('div');
 el.id = 'root';

src/utils.css

@@ -0,0 +1,25 @@
+/* stylelint-disable */
+/* This is an utility file that should not be included in production build */
+:global {
+  & .undefined {
+    position: fixed !important;
+    top: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    background: red !important;
+    color: white !important;
+    font-weight: bold !important;
+    font-size: 30px !important;
+  }
+
+  & .undefined::after {
+    display: block !important;
+    padding: 15px 30px !important;
+    content: 'ERROR! You are missing a class definition in your css module! Inspect me to find out where.' !important;
+  }
+}
+/* stylelint-enable */