Toast type (success/warning/etc)

app/components/Layout/Layout.js

@@ -112,7 +112,7 @@ class Layout extends React.Component<Props> {
           </Content>
         </Flex>
         <Modals ui={ui} />
-        <Toasts />
+        <Toasts ui={ui} />
       </Container>
     );
   }

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;

app/components/Toasts/components/Toast.js

@@ -4,12 +4,12 @@ import styled from 'styled-components';
 import { darken } from 'polished';
 import { color } from 'shared/styles/constants';
 import { fadeAndScaleIn } from 'shared/styles/animations';
+import type { Toast as TToast } from '../../../types';
 
 type Props = {
   onRequestClose: () => void,
   closeAfterMs: number,
-  message: string,
-  type: 'warning' | 'error' | 'info',
+  toast: TToast,
 };
 
 class Toast extends React.Component<Props> {
@@ -17,7 +17,6 @@ class Toast extends React.Component<Props> {
 
   static defaultProps = {
     closeAfterMs: 3000,
-    type: 'warning',
   };
 
   componentDidMount() {
@@ -32,14 +31,14 @@ class Toast extends React.Component<Props> {
   }
 
   render() {
-    const { type, onRequestClose } = this.props;
+    const { toast, onRequestClose } = this.props;
     const message =
-      typeof this.props.message === 'string'
-        ? this.props.message
-        : this.props.message.toString();
+      typeof toast.message === 'string'
+        ? toast.message
+        : toast.message.toString();
 
     return (
-      <Container onClick={onRequestClose} type={type}>
+      <Container onClick={onRequestClose} type={toast.type}>
         <Message>{message}</Message>
       </Container>
     );