From cae2eae1c7bfd2c560bad1f0c0a4bebc38b4bd48 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 1 Nov 2019 16:47:46 +0200
Subject: [PATCH] ModalDialog formatting

---
 src/common/ModalDialog/ModalDialog.js        | 42 ++++++++++++--------
 src/common/ModalDialog/styles.less           | 17 ++++----
 storybook/stories/ModalDialog/ModalDialog.js |  7 +---
 3 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js
index 32f76a468..6aed44168 100644
--- a/src/common/ModalDialog/ModalDialog.js
+++ b/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;
\ No newline at end of file
+module.exports = ModalDialog;
diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index 5afbd41ed..6de3bb7e7 100644
--- a/src/common/ModalDialog/styles.less
+++ b/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) {
diff --git a/storybook/stories/ModalDialog/ModalDialog.js b/storybook/stories/ModalDialog/ModalDialog.js
index 6bc3125fd..c32f7a7e3 100644
--- a/storybook/stories/ModalDialog/ModalDialog.js
+++ b/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')