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
+        <Menu
-          className={styles.createBtn}
+          active={createMenuActive}
-          icon='add'
+          position="topRight"
-          floating
+          onHide={this.handleCreateMenuHide}
-          accent
-          onClick={this.handleCreateButtonClick}
         >
-          <Menu
+          {
-            active={createMenuActive}
+            collections.valueSeq().map(collection =>
-            position="topRight"
+              <MenuItem
-            onHide={this.handleCreateMenuHide}
+                key={collection.get('name')}
-          >
+                value={collection.get('name')}
-            {
+                onClick={this.handleCreatePostClick.bind(this, collection.get('name'))}
-              collections.valueSeq().map(collection =>
+                caption={pluralize(collection.get('label'), 1)}
-                <MenuItem
+              />
-                  key={collection.get('name')}
+            )
-                  value={collection.get('name')}
+          }
-                  onClick={this.handleCreatePostClick.bind(this, collection.get('name'))}
+        </Menu>
-                  caption={pluralize(collection.get('label'), 1)}
-                />
-              )
-            }
-          </Menu>
-        </Button>
-
       </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 */

webpack.base.js

@@ -1,3 +1,5 @@
+/* eslint global-require: 0 */
+
 const webpack = require('webpack');
 
 module.exports = {
@@ -5,11 +7,11 @@ module.exports = {
     loaders: [
       {
         test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'url-loader?limit=100000'
+        loader: 'url-loader?limit=100000',
       },
       {
         test: /\.json$/,
-        loader: 'json-loader'
+        loader: 'json-loader',
       },
       {
         test: /\.scss$/,
@@ -31,15 +33,21 @@ module.exports = {
             'transform-object-assign',
             'transform-object-rest-spread',
             'lodash',
-            'react-hot-loader/babel'
+            'react-hot-loader/babel',
-          ]
+          ],
-        }
+        },
-      }
+      },
-    ]
+    ],
   },
-
   postcss: [
     require('postcss-import')({ addDependencyTo: webpack }),
-    require('postcss-cssnext')
+    require('postcss-cssnext'),
+  ],
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+      },
+    }),
   ],
 };