Toast redesigned

src/common/Toasts/Toast/Toast.js

@@ -5,9 +5,30 @@ const Icon = require('stremio-icons/dom');
 const Button = require('stremio/common/Button');
 const styles = require('./styles');
 
-const Toast = ({ type, title, text, icon, closeButton, onClick, onClose }) => {
+const Toast = ({ type, title, message, icon, dataset, onSelect, onClose }) => {
+    const toastOnClick = React.useCallback((event) => {
+        if (!event.nativeEvent.selectPrevented && typeof onSelect === 'function') {
+            onSelect({
+                type: 'select',
+                dataset: dataset,
+                reactEvent: event,
+                nativeEvent: event.nativeEvent
+            });
+        }
+    }, [dataset, onSelect]);
+    const closeButtonOnClick = React.useCallback((event) => {
+        event.nativeEvent.selectPrevented = true;
+        if (typeof onClose === 'function') {
+            onClose({
+                type: 'close',
+                dataset: dataset,
+                reactEvent: event,
+                nativeEvent: event.nativeEvent
+            });
+        }
+    }, [dataset, onClose]);
     return (
-        <div className={classnames(styles['toast-container'], styles[type])}>
+        <Button className={classnames(styles['toast-container'], styles['alert'], styles[type])} tabIndex={-1} onClick={toastOnClick}>
             {
                 typeof icon === 'string' && icon.length > 0 ?
                     <div className={styles['icon-container']}>
@@ -16,34 +37,29 @@ const Toast = ({ type, title, text, icon, closeButton, onClick, onClose }) => {
                     :
                     null
             }
-            <div className={classnames(styles['message-container'], { [styles.clickable]: typeof onClick === 'function' })} onClick={onClick}>
+            <div className={styles['info-container']}>
                 {
                     typeof title === 'string' && title.length > 0 ?
-                        <h1>{title}</h1>
+                        <div className={styles['title-container']}>{title}</div>
                         :
                         null
                 }
-                {text}
+                <div className={styles['message-container']}>{message}</div>
             </div>
-            {
-                closeButton ?
-                    <Button className={styles['close-button-container']} title={'Close'} onClick={onClose}>
-                        <Icon className={styles['icon']} icon={'ic_x'} />
-                    </Button>
-                    :
-                    null
-            }
-        </div>
+            <Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={closeButtonOnClick}>
+                <Icon className={styles['icon']} icon={'ic_x'} />
+            </Button>
+        </Button>
     );
 };
 
 Toast.propTypes = {
-    type: PropTypes.string,
+    type: PropTypes.oneOf(['success', 'alert', 'error']),
     title: PropTypes.string,
-    text: PropTypes.string,
+    message: PropTypes.string,
     icon: PropTypes.string,
-    closeButton: PropTypes.bool,
-    onClick: PropTypes.func,
+    dataset: PropTypes.objectOf(PropTypes.string),
+    onSelect: PropTypes.func,
     onClose: PropTypes.func
 };
 

src/common/Toasts/Toast/index.js

@@ -1,3 +1,3 @@
 const Toast = require('./Toast');
 
-module.exports = Toast;
+module.exports = Toast;

src/common/Toasts/Toast/styles.less

@@ -2,13 +2,14 @@
     display: flex;
     flex-direction: row;
     min-height: 6rem;
+    max-width: 25rem;
     margin-bottom: 1rem;
     border: thin solid;
-    color: var(--color-backgrounddarker);
-    fill: var(--color-backgrounddarker);
     background-color: var(--color-surfacelighter);
     overflow: visible;
-    pointer-events: all;
+    box-shadow: 0 0.3rem 0.5rem var(--color-backgrounddarker40),
+        0 0.6rem 1rem var(--color-backgrounddarker20);
+    pointer-events: auto;
 
     &.success {
         color: var(--color-signal5);
@@ -26,10 +27,10 @@
     }
 
     .icon-container {
-        width: 5rem;
-        padding: 1rem;
-        padding-right: 0;
-        overflow: visible;
+        flex: none;
+        align-self: stretch;
+        width: 4.5rem;
+        padding: 1.2rem 0 1.2rem 1.2rem;
 
         .icon {
             display: block;
@@ -38,33 +39,35 @@
         }
     }
 
-    .message-container {
+    .info-container {
         flex: 1;
+        align-self: stretch;
         padding: 1rem;
 
-        &.clickable {
-            cursor: pointer;
+        .title-container {
+            font-size: 1.2rem;
         }
 
-        .message-caption {
-            font-weight: bold;
+        .message-container {
+            font-size: 1.1rem;
         }
     }
 
     .close-button-container {
         flex: none;
+        align-self: flex-start;
         width: 3rem;
         height: 3rem;
         padding: 1rem;
 
+        &:hover {
+            background-color: var(--color-surfacelight);
+        }
+
         .icon {
             display: block;
             width: 100%;
             height: 100%;
         }
-
-        &:hover {
-            background-color: var(--color-surfacelight);
-        }
     }
 }