Feature(toast): fix toast positioning

common/app/toasts/Toasts.jsx

@@ -8,11 +8,19 @@ import { submitChallenge } from '../routes/challenges/redux/actions';
 
 const registeredActions = { submitChallenge };
 const mapStateToProps = state => ({ toasts: state.toasts });
+// we use styles here to overwrite those built into the library
+// but there are some styles applied using
+// regular css in /client/less/toastr.less
 const barStyle = {
   fontSize: '2rem',
   // null values let our css set the style prop
   padding: null
 };
+const rightBarStyle = {
+  ...barStyle,
+  left: null,
+  right: '-100%'
+};
 const actionStyle = {
   fontSize: '2rem'
 };
@@ -21,16 +29,18 @@ const addDispatchableActionsToToast = createSelector(
   state => state.dispatch,
   (toasts, dispatch) => toasts.map(({ position, actionCreator, ...toast }) => {
     const activeBarStyle = {};
+    let finalBarStyle = barStyle;
     if (position !== 'left') {
       activeBarStyle.left = null;
       activeBarStyle.right = '1rem';
+      finalBarStyle = rightBarStyle;
     }
     const onClick = registeredActions[actionCreator] ?
       () => dispatch(registeredActions[actionCreator]()) :
       null;
     return {
       ...toast,
-      barStyle,
+      barStyle: finalBarStyle,
       activeBarStyle,
       actionStyle,
       onClick
@@ -49,6 +59,10 @@ export class Toasts extends React.Component {
     dispatch: PropTypes.func
   };
 
+  styleFactory(index, style) {
+    return { ...style, bottom: `${4 + index * 8}rem` };
+  }
+
   handleDismiss(notification) {
     this.props.dispatch(removeToast(notification));
   }
@@ -57,6 +71,8 @@ export class Toasts extends React.Component {
     const { toasts = [], dispatch } = this.props;
     return (
       <NotificationStack
+        activeBarStyle={ this.styleFactory }
+        barStyle={ this.styleFactory }
         notifications={
           addDispatchableActionsToToast({ toasts, dispatch })
         }

common/app/toasts/redux/actions.js

@@ -9,7 +9,7 @@ export const makeToast = createAction(
     // assign current value of key to new toast
     // and then increment key value
     key: key++,
-    dismissAfter: timeout || 40000,
+    dismissAfter: timeout || 10000,
     position: rest.position === 'left' ? 'left' : 'right'
   })
 );

package.json

@@ -94,7 +94,7 @@
     "react-images": "^0.4.6",
     "react-motion": "~0.4.2",
     "react-no-ssr": "^1.0.1",
-    "react-notification": "^5.0.7",
+    "react-notification": "https://github.com/BerkeleyTrue/react-notification#freecodecamp",
     "react-pure-render": "^1.0.2",
     "react-redux": "^4.0.6",
     "react-router": "^2.0.0",