Added notifications. Closes #101

- Using react-notifications to manage redux state
- Refactored Toast component to be stateless
- Toasts can be stacked
- Cleaned up CSS
- Updated stories

src/containers/App.css

@@ -1,20 +1,30 @@
+@import '../components/UI/theme.css';
+
 .layout .navDrawer .drawerContent {
   padding-top: 54px;
+  max-width: 240px;
 }
+
 .nav {
   display: block;
   padding: 1rem;
+
   & .heading {
     border: none;
   }
 }
+
 .main {
   padding-top: 54px;
 }
 
-.navDrawer {
-  max-width: 240px !important;
-  & .drawerContent {
-    max-width: 240px !important;
-  }
+.notifsContainer {
+  position: fixed;
+  top: 60px;
+  right: 0;
+  bottom: 60px;
+  z-index: var(--topmostZindex);
+  width: 360px;
+  pointer-events: none;
 }
+

src/containers/App.js

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { Layout, Panel, NavDrawer } from 'react-toolbox/lib/layout';
 import { Navigation } from 'react-toolbox/lib/navigation';
 import { Link } from 'react-toolbox/lib/link';
+import { Notifs } from 'redux-notifications';
 import { loadConfig } from '../actions/config';
 import { loginUser } from '../actions/auth';
 import { currentBackend } from '../backends/backend';
@@ -17,7 +18,7 @@ import {
   createNewEntryInCollection,
 } from '../actions/findbar';
 import AppHeader from '../components/AppHeader/AppHeader';
-import { Loader } from '../components/UI/index';
+import { Loader, Toast } from '../components/UI/index';
 import styles from './App.css';
 
 class App extends React.Component {
@@ -147,6 +148,10 @@ class App extends React.Component {
 
     return (
       <Layout theme={styles}>
+        <Notifs
+          className={styles.notifsContainer}
+          CustomComponent={Toast}
+        />
         <NavDrawer
           active={navDrawerIsVisible}
           scrollY