Toast type (success/warning/etc)

app/components/Toasts/Toasts.js

@@ -1,14 +1,18 @@
 // @flow
 import * as React from 'react';
-import { inject, observer } from 'mobx-react';
+import { observer } from 'mobx-react';
 import styled from 'styled-components';
 import { layout } from 'shared/styles/constants';
 import Toast from './components/Toast';
+import UiStore from '../../stores/UiStore';
 
+type Props = {
+  ui: UiStore,
+};
 @observer
-class Toasts extends React.Component<*> {
-  handleClose = index => {
-    this.props.ui.remove(index);
+class Toasts extends React.Component<Props> {
+  handleClose = (index: number) => {
+    this.props.ui.removeToast(index);
   };
 
   render() {
@@ -16,11 +20,11 @@ class Toasts extends React.Component<*> {
 
     return (
       <List>
-        {ui.toasts.map((error, index) => (
+        {ui.toasts.map((toast, index) => (
           <Toast
             key={index}
             onRequestClose={this.handleClose.bind(this, index)}
-            message={error}
+            toast={toast}
           />
         ))}
       </List>
@@ -35,6 +39,7 @@ const List = styled.ol`
   list-style: none;
   margin: 0;
   padding: 0;
+  z-index: 1000;
 `;
 
-export default inject('ui')(Toasts);
+export default Toasts;