SnackBar

client/coral-framework/modules/notification/Notification.js

@@ -1,17 +1,18 @@
 import React from 'react';
+import {SnackBar} from 'coral-ui';
 
 const Notification = (props) => {
   if (props.notification.text) {
-    setTimeout(() => {
-      props.clearNotification();
-    }, props.notifLength);
+    // setTimeout(() => {
+    //   props.clearNotification();
+    // }, props.notifLength);
   }
   return <div>
   {
     props.notification.text &&
-    <dialog open id='coral-notif' className={`coral-notif-${  props.notification.type}`}>
+    <SnackBar id='coral-notif' className={`coral-notif-${props.notification.type}`}>
       {props.notification.text}
-    </dialog>
+    </SnackBar>
   }
   </div>;
 };

client/coral-ui/components/SnackBar.css

@@ -0,0 +1,19 @@
+.SnackBar {
+  top: 0;
+  background: red;
+  position: fixed;
+  cursor: default;
+  background-color: #323232;
+  z-index: 3;
+  display: flex;
+  will-change: transform;
+  transition: transform .25s cubic-bezier(.4,0,1,1);
+  pointer-events: none;
+  transform: translate(-50%,80px);
+  padding: 18px 14px;
+  vertical-align: middle;
+  color: #fff;
+  border-radius: 3px;
+  text-align: center;
+  left: 50%;
+}

client/coral-ui/components/SnackBar.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from './SnackBar.css'
+
+const SnackBar = ({children}) => (
+  <div className={styles.SnackBar}>{children}</div>
+);
+
+export default SnackBar;

client/coral-ui/index.js

@@ -14,3 +14,4 @@ export {default as List} from './components/List';
 export {default as Item} from './components/Item';
 export {default as Card} from './components/Card';
 export {default as Pager} from './components/Pager';
+export {default as SnackBar} from './components/SnackBar';