ModalDialog formatting

src/common/ModalDialog/ModalDialog.js

@@ -1,4 +1,5 @@
 const React = require('react');
+const ReactIs = require('react-is');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Button = require('stremio/common/Button');
@@ -27,27 +28,36 @@ const ModalDialog = ({ className, children, title, buttons, onClose }) => {
     }, [onClose]);
     return (
         <Modal className={styles['modal-container']} onMouseDown={onModalContainerClick}>
-            <div className={classnames(styles['modal-dialog-container'], className)}>
-                <Button className={styles['close-button']} onClick={onClose}>
-                    <Icon className={styles['x-icon']} icon={'ic_x'} />
+            <div className={classnames(className, styles['modal-dialog-container'])}>
+                <Button className={styles['close-button-container']} title={'Close'} onClick={onClose}>
+                    <Icon className={styles['icon']} icon={'ic_x'} />
                 </Button>
                 <h1>{title}</h1>
                 <div className={styles['modal-dialog-content']}>
                     {children}
                 </div>
                 <div className={styles['modal-dialog-buttons']}>
-                    {Array.isArray(buttons) && buttons.length ? buttons.map((button, key) => (
-                        <Button key={key} className={classnames(styles['action-button'], button.className)} {...button.props}>
-                            {
-                                button.icon
-                                    ?
-                                    <Icon className={styles['icon']} icon={button.icon} ></Icon>
-                                    :
-                                    null
-                            }
-                            {button.label}
-                        </Button>
-                    )) : null}
+                    {
+                        Array.isArray(buttons) && buttons.length > 0 ?
+                            buttons.map((button, key) => (
+                                <Button key={key} className={classnames(button.className, styles['action-button'])} {...button.props}>
+                                    {
+                                        typeof button.icon === 'string' && button.icon.length > 0 ?
+                                            <Icon className={styles['icon']} icon={button.icon} />
+                                            :
+                                            null
+                                    }
+                                    {
+                                        ReactIs.isValidElementType(button.label) ?
+                                            button.label
+                                            :
+                                            null
+                                    }
+                                </Button>
+                            ))
+                            :
+                            null
+                    }
                 </div>
             </div>
         </Modal>
@@ -66,4 +76,4 @@ ModalDialog.propTypes = {
     onClose: PropTypes.func
 };
 
-module.exports = ModalDialog;
+module.exports = ModalDialog;

src/common/ModalDialog/styles.less

@@ -13,33 +13,35 @@
             overflow: visible;
         }
 
-        .close-button {
+        .close-button-container {
             display: flex;
             flex-direction: row;
             align-items: center;
+            justify-content: center;
             position: absolute;
             top: .2rem;
             right: .2rem;
             width: 2rem;
             height: 2rem;
+            padding: 0.5rem;
 
-            .x-icon {
-                flex: 1 0 0;
-                width: 1rem;
-                height: 1rem;
+            .icon {
+                display: block;
+                width: 100%;
+                height: 100%;
                 fill: var(--color-surfacedark);
             }
 
             &:hover {
                 background-color: var(--color-surfacelight);
 
-                .x-icon {
+                .icon {
                     fill: var(--color-signal2);
                 }
             }
 
             &:focus {
-                .x-icon {
+                .icon {
                     fill: var(--color-signal2);
                 }
             }
@@ -81,7 +83,6 @@
     &:focus {
         outline: 3px solid var(--color-surfacelighter);
         outline-offset: -4px;
-
     }
 
     &:global(.disabled) {

storybook/stories/ModalDialog/ModalDialog.js

@@ -59,12 +59,7 @@ storiesOf('ModalDialog', module).add('ModalDialog', () => {
             }
         },
         {
-            label: (
-                <React.Fragment>
-                    <Icon className={styles['icon']} icon={'ic_actor'} />
-                    {'A button with a long name, icon and custom class'}
-                </React.Fragment>
-            ),
+            label: 'A button with a long name, icon and custom class',
             className: styles['custom-button'],
             props: {
                 onClick: action('A button with a long name and icon clicked')