Closes #842 - Toast messages hanging

app/components/Toasts/Toasts.js

@@ -10,20 +10,16 @@ type Props = {
 };
 @observer
 class Toasts extends React.Component<Props> {
-  handleClose = (index: number) => {
-    this.props.ui.removeToast(index);
-  };
-
   render() {
     const { ui } = this.props;
 
     return (
       <List>
-        {ui.toasts.map((toast, index) => (
+        {ui.orderedToasts.map(toast => (
           <Toast
-            key={index}
-            onRequestClose={this.handleClose.bind(this, index)}
+            key={toast.id}
             toast={toast}
+            onRequestClose={() => ui.removeToast(toast.id)}
           />
         ))}
       </List>

app/components/Toasts/components/Toast.js

@@ -15,7 +15,7 @@ class Toast extends React.Component<Props> {
   timeout: TimeoutID;
 
   static defaultProps = {
-    closeAfterMs: 3000,
+    closeAfterMs: 30000,
   };
 
   componentDidMount() {
@@ -37,15 +37,17 @@ class Toast extends React.Component<Props> {
         : toast.message.toString();
 
     return (
-      <Container onClick={onRequestClose} type={toast.type}>
-        <Message>{message}</Message>
-      </Container>
+      <li>
+        <Container onClick={onRequestClose} type={toast.type}>
+          <Message>{message}</Message>
+        </Container>
+      </li>
     );
   }
 }
 
-const Container = styled.li`
-  display: flex;
+const Container = styled.div`
+  display: inline-block;
   align-items: center;
   animation: ${fadeAndScaleIn} 100ms ease;
   margin: 8px 0;