From bd79b8f8da72029d3fb6ae87454cdd843abe5458 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 21 Feb 2019 14:00:21 +0200
Subject: [PATCH 1/4] install addon dialog implemented

---
 .../InstallAddonDialog/InstallAddonDialog.js  | 111 ++++++++++++
 src/routes/Addons/InstallAddonDialog/index.js |   3 +
 .../Addons/InstallAddonDialog/styles.less     | 161 ++++++++++++++++++
 3 files changed, 275 insertions(+)
 create mode 100644 src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js
 create mode 100644 src/routes/Addons/InstallAddonDialog/index.js
 create mode 100644 src/routes/Addons/InstallAddonDialog/styles.less

diff --git a/src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js b/src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js
new file mode 100644
index 000000000..8c24604ea
--- /dev/null
+++ b/src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js
@@ -0,0 +1,111 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon, { dataUrl as iconDataUrl } from 'stremio-icons/dom';
+import colors from 'stremio-colors';
+import styles from './styles';
+
+const MAX_DESCRIPTION_SYMBOLS = 200;
+
+const renderName = (name) => {
+    if (name.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className={styles['name']}>{name}</div>
+    );
+}
+
+const renderVersion = (version) => {
+    if (version.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className={styles['version']}>{'v. ' + version}</div>
+    );
+}
+
+const renderType = (types) => {
+    if (types.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className={styles['types']}>
+            {types.length <= 1 ? types.join('') : types.slice(0, -1).join(', ') + ' & ' + types[types.length - 1]}
+        </div>
+    );
+}
+
+const renderDescription = (description) => {
+    if (description.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className={styles['description']}>{description.length > MAX_DESCRIPTION_SYMBOLS ? description.slice(0, MAX_DESCRIPTION_SYMBOLS) + '...' : description}</div>
+    );
+}
+
+const InstallAddonDialog = (props) => {
+    const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.surface });
+    const imageStyle = {
+        backgroundImage: `url('${placeholderIconUrl}')`
+    };
+
+    return (
+        <div className={styles['install-addon-dialog']}>
+            <div className={styles['x-container']}>
+                <div style={imageStyle} className={styles['x-icon']} />
+            </div>
+            <div className={styles['info-container']}>
+                <div className={styles['install-label']}>Install Add-on</div>
+                <div className={styles['basic-info']}>
+                    <div className={styles['logo-container']}>
+                        <Icon className={styles['logo']} icon={props.logo.length === 0 ? 'ic_addons' : props.logo} />
+                    </div>
+                    <div className={styles['header-container']}>
+                        <div className={styles['header']}>
+                            {renderName(props.name)}
+                            {renderVersion(props.version)}
+                        </div>
+                    </div>
+                </div>
+                {renderType(props.types)}
+                {renderDescription(props.description)}
+                <div className={styles['notice']}>
+                    Using third-party add-ons will always be subject to your responsibility and the governing law of the jurisdiction you are located.
+                </div>
+                <div className={styles['buttons']}>
+                    <div className={styles['cancel-button']} >
+                        <span className={styles['label']}>Cancel</span>
+                    </div>
+                    <div className={styles['install-button']} onClick={props.onInstallClicked} >
+                        <span className={styles['label']}>Install</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+InstallAddonDialog.propTypes = {
+    className: PropTypes.string,
+    logo: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    version: PropTypes.string.isRequired,
+    types: PropTypes.arrayOf(PropTypes.string).isRequired,
+    description: PropTypes.string.isRequired,
+    onInstallClicked: PropTypes.func.isRequired
+};
+InstallAddonDialog.defaultProps = {
+    logo: 'ic_youtube_small',
+    name: 'YouTube',
+    version: '1.3.0',
+    types: ['Channels', 'Videos'],
+    description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.',
+    isInstalled: false
+};
+
+export default InstallAddonDialog;
diff --git a/src/routes/Addons/InstallAddonDialog/index.js b/src/routes/Addons/InstallAddonDialog/index.js
new file mode 100644
index 000000000..17b998b98
--- /dev/null
+++ b/src/routes/Addons/InstallAddonDialog/index.js
@@ -0,0 +1,3 @@
+import InstallAddonDialog from './InstallAddonDialog';
+
+export default InstallAddonDialog;
diff --git a/src/routes/Addons/InstallAddonDialog/styles.less b/src/routes/Addons/InstallAddonDialog/styles.less
new file mode 100644
index 000000000..4b17f5b03
--- /dev/null
+++ b/src/routes/Addons/InstallAddonDialog/styles.less
@@ -0,0 +1,161 @@
+.install-addon-dialog {
+    --addon-dialog-width: 380px;
+    --spacing: 16px;
+    font-size: 13px;
+}
+
+.install-addon-dialog {
+    padding: calc(var(--spacing) * 0.6);
+    width: var(--addon-dialog-width);
+    background-color: var(--color-surfacelighter);
+
+    .x-container {
+        display: flex;
+        justify-content: flex-end;
+
+        .x-icon {
+            width: calc(var(--spacing) * 0.7);
+            height: calc(var(--spacing) * 0.7);
+            fill: var(--color-surface);
+            background-position: center;
+            background-repeat: no-repeat;
+            cursor: pointer;
+        }
+    }
+
+    .info-container {
+        padding: calc(var(--spacing) * 0.3) var(--spacing) var(--spacing) var(--spacing);
+
+        .install-label {
+            font-size: 1.2em;
+            font-weight: 500;
+            color: var(--color-backgrounddarker);
+        }
+
+        .basic-info {
+            margin: calc(var(--spacing) * 0.5) 0;
+            display: flex;
+            flex-direction: row;
+
+            .logo-container {
+                margin-right: var(--spacing);
+                width: calc(var(--spacing) * 3);
+                height: calc(var(--spacing) * 3);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .logo {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .header-container {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                overflow: hidden;
+
+                .header {
+                    width: 100%;
+                    display: flex;
+                    align-items: baseline;
+
+                    .name {
+                        margin-right: var(--spacing);
+                        max-width: 80%;
+                        font-size: 1.5em;
+                        font-weight: 100;
+                        overflow: hidden;
+                        white-space: pre;
+                        text-overflow: ellipsis;
+                        color: var(--color-backgrounddarker);
+                    }
+
+                    .version {
+                        flex: 1;
+                        font-weight: 100;
+                        overflow: hidden;
+                        white-space: pre;
+                        text-overflow: ellipsis;
+                        color: var(--color-backgrounddarker);
+                    }
+                }
+            }
+        }
+
+        .types {
+            min-height: var(--spacing);
+            font-weight: 100;
+            overflow: hidden;
+            white-space: pre;
+            text-overflow: ellipsis;
+            color: var(--color-backgrounddarker);
+        }
+
+        .description {
+            margin-top: calc(var(--spacing) * 0.5);
+            font-weight: 100;
+            overflow: hidden;
+            overflow-wrap: break-word;
+            color: var(--color-backgrounddarker);
+        }
+
+        .notice {
+            margin-top: var(--spacing);
+            font-weight: 100;
+            font-style: italic;
+            color: var(--color-backgrounddarker);
+        }
+
+        .buttons {
+            margin-top: var(--spacing);
+            height: calc(var(--spacing) * 2.5);
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+
+            .cancel-button {
+                width: 45%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-color: var(--color-surfacedark);
+                cursor: pointer;
+
+                .label {
+                    font-size: 1.1em;
+                    font-weight: 100;
+                    color: var(--color-surfacelighter);
+                }
+
+                &:hover {
+                    background-color: var(--color-surface);
+                }
+            }
+
+            .install-button {
+                width: 45%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-color: var(--color-signal5);
+                cursor: pointer;
+
+                .label {
+                    font-size: 1.1em;
+                    font-weight: 100;
+                    color: var(--color-surfacelighter);
+                }
+
+                &:hover {
+                    background-color: var(--color-signal560);
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

From 59e86d5317128a45c10ee13cdeb1b00ba6b7322b Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 5 Apr 2019 16:16:59 +0300
Subject: [PATCH 2/4] install addon dialog refactored

---
 .../InstallAddonDialog/InstallAddonDialog.js  | 31 +++---
 .../Addons/InstallAddonDialog/styles.less     | 94 ++++++++++---------
 2 files changed, 65 insertions(+), 60 deletions(-)

diff --git a/src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js b/src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js
index 8c24604ea..4d5704b18 100644
--- a/src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js
+++ b/src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Icon, { dataUrl as iconDataUrl } from 'stremio-icons/dom';
-import colors from 'stremio-colors';
+import classnames from 'classnames';
+import { Input } from 'stremio-common';
+import Icon from 'stremio-icons/dom';
 import styles from './styles';
 
 const MAX_DESCRIPTION_SYMBOLS = 200;
@@ -22,7 +23,7 @@ const renderVersion = (version) => {
     }
 
     return (
-        <div className={styles['version']}>{'v. ' + version}</div>
+        <div className={styles['version']}>v. {version}</div>
     );
 }
 
@@ -49,16 +50,11 @@ const renderDescription = (description) => {
 }
 
 const InstallAddonDialog = (props) => {
-    const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.surface });
-    const imageStyle = {
-        backgroundImage: `url('${placeholderIconUrl}')`
-    };
-
     return (
         <div className={styles['install-addon-dialog']}>
-            <div className={styles['x-container']}>
-                <div style={imageStyle} className={styles['x-icon']} />
-            </div>
+            <Input className={styles['x-container']} type={'button'}>
+                <Icon className={styles['icon']} icon={'ic_x'} onClick={props.onClose} />
+            </Input>
             <div className={styles['info-container']}>
                 <div className={styles['install-label']}>Install Add-on</div>
                 <div className={styles['basic-info']}>
@@ -78,12 +74,12 @@ const InstallAddonDialog = (props) => {
                     Using third-party add-ons will always be subject to your responsibility and the governing law of the jurisdiction you are located.
                 </div>
                 <div className={styles['buttons']}>
-                    <div className={styles['cancel-button']} >
-                        <span className={styles['label']}>Cancel</span>
-                    </div>
-                    <div className={styles['install-button']} onClick={props.onInstallClicked} >
-                        <span className={styles['label']}>Install</span>
-                    </div>
+                    <Input className={classnames(styles['button'], styles['cancel-button'])} type={'button'} onClick={props.onClose}>
+                        <div className={styles['label']}>Cancel</div>
+                    </Input>
+                    <Input className={classnames(styles['button'], styles['install-button'])} type={'button'} onClick={props.onInstallClicked} >
+                        <div className={styles['label']}>Install</div>
+                    </Input>
                 </div>
             </div>
         </div>
@@ -97,6 +93,7 @@ InstallAddonDialog.propTypes = {
     version: PropTypes.string.isRequired,
     types: PropTypes.arrayOf(PropTypes.string).isRequired,
     description: PropTypes.string.isRequired,
+    onClose: PropTypes.func.isRequired,
     onInstallClicked: PropTypes.func.isRequired
 };
 InstallAddonDialog.defaultProps = {
diff --git a/src/routes/Addons/InstallAddonDialog/styles.less b/src/routes/Addons/InstallAddonDialog/styles.less
index 4b17f5b03..48669547d 100644
--- a/src/routes/Addons/InstallAddonDialog/styles.less
+++ b/src/routes/Addons/InstallAddonDialog/styles.less
@@ -1,5 +1,5 @@
 .install-addon-dialog {
-    --addon-dialog-width: 380px;
+    --addon-dialog-width: 450px;
     --spacing: 16px;
     font-size: 13px;
 }
@@ -11,20 +11,36 @@
 
     .x-container {
         display: flex;
+        flex-direction: row;
         justify-content: flex-end;
 
-        .x-icon {
-            width: calc(var(--spacing) * 0.7);
-            height: calc(var(--spacing) * 0.7);
-            fill: var(--color-surface);
-            background-position: center;
-            background-repeat: no-repeat;
+        .icon {
+            padding: 0.3em;
+            width: 1.5em;
+            height: 1.5em;
+            fill: var(--color-surfacedark);
             cursor: pointer;
+
+            &:hover {
+                fill: var(--color-surface);
+            }
+        }
+
+        &:focus {
+            .icon {
+                background-color: var(--color-surfacelight);
+            }
+        }
+
+        &:hover {
+            .icon {
+                background-color: transparent;
+            }
         }
     }
 
     .info-container {
-        padding: calc(var(--spacing) * 0.3) var(--spacing) var(--spacing) var(--spacing);
+        padding: 0 var(--spacing) var(--spacing) var(--spacing);
 
         .install-label {
             font-size: 1.2em;
@@ -33,17 +49,13 @@
         }
 
         .basic-info {
-            margin: calc(var(--spacing) * 0.5) 0;
             display: flex;
             flex-direction: row;
 
             .logo-container {
                 margin-right: var(--spacing);
-                width: calc(var(--spacing) * 3);
-                height: calc(var(--spacing) * 3);
-                display: flex;
-                align-items: center;
-                justify-content: center;
+                width: 4em;
+                height: 4em;
 
                 .logo {
                     width: 100%;
@@ -54,17 +66,19 @@
             .header-container {
                 flex: 1;
                 display: flex;
+                flex-direction: row;
                 align-items: center;
                 overflow: hidden;
 
                 .header {
                     width: 100%;
                     display: flex;
+                    flex-direction: row;
                     align-items: baseline;
 
                     .name {
                         margin-right: var(--spacing);
-                        max-width: 80%;
+                        max-width: 10em;
                         font-size: 1.5em;
                         font-weight: 100;
                         overflow: hidden;
@@ -86,7 +100,7 @@
         }
 
         .types {
-            min-height: var(--spacing);
+            min-height: 1.2em;
             font-weight: 100;
             overflow: hidden;
             white-space: pre;
@@ -95,7 +109,6 @@
         }
 
         .description {
-            margin-top: calc(var(--spacing) * 0.5);
             font-weight: 100;
             overflow: hidden;
             overflow-wrap: break-word;
@@ -103,27 +116,25 @@
         }
 
         .notice {
-            margin-top: var(--spacing);
+            padding: 0.5em 0;
             font-weight: 100;
             font-style: italic;
             color: var(--color-backgrounddarker);
         }
 
         .buttons {
-            margin-top: var(--spacing);
-            height: calc(var(--spacing) * 2.5);
             display: flex;
             flex-direction: row;
             align-items: center;
             justify-content: space-between;
 
-            .cancel-button {
-                width: 45%;
-                height: 100%;
+            .button {
+                flex: 1;
+                padding: 1em;
                 display: flex;
+                flex-direction: row;
                 align-items: center;
                 justify-content: center;
-                background-color: var(--color-surfacedark);
                 cursor: pointer;
 
                 .label {
@@ -132,30 +143,27 @@
                     color: var(--color-surfacelighter);
                 }
 
-                &:hover {
-                    background-color: var(--color-surface);
-                }
-            }
+                &.cancel-button {
+                    margin-right: 3em;
+                    background-color: var(--color-surfacedark);
 
-            .install-button {
-                width: 45%;
-                height: 100%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                background-color: var(--color-signal5);
-                cursor: pointer;
-
-                .label {
-                    font-size: 1.1em;
-                    font-weight: 100;
-                    color: var(--color-surfacelighter);
+                    &:focus, &:hover {
+                        background-color: var(--color-surface);
+                    }
                 }
 
-                &:hover {
-                    background-color: var(--color-signal560);
+                &.install-button {
+                    background-color: var(--color-signal5);
+
+                    &:focus, &:hover {
+                        background-color: var(--color-signal560);
+                    }
                 }
             }
         }
+
+        >:not(:last-child) {
+            margin-bottom: calc(var(--spacing) * 0.5);
+        }
     }
 }
\ No newline at end of file

From d1f6512b967c6481ab7242b9afa5014c48879a40 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 5 Apr 2019 16:28:45 +0300
Subject: [PATCH 3/4] defaultProps cleared

---
 .../Addons/InstallAddonDialog/InstallAddonDialog.js    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js b/src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js
index 4d5704b18..a472d7b5e 100644
--- a/src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js
+++ b/src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js
@@ -97,11 +97,11 @@ InstallAddonDialog.propTypes = {
     onInstallClicked: PropTypes.func.isRequired
 };
 InstallAddonDialog.defaultProps = {
-    logo: 'ic_youtube_small',
-    name: 'YouTube',
-    version: '1.3.0',
-    types: ['Channels', 'Videos'],
-    description: 'Watch your favourite YouTube channels ad-free and get notified when they upload new videos.',
+    logo: '',
+    name: '',
+    version: '',
+    types: [],
+    description: '',
     isInstalled: false
 };
 

From 35a88b89554b2f2a03bf1eff95c63f56e566d9d8 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 5 Apr 2019 16:33:25 +0300
Subject: [PATCH 4/4] isInstalled removed

---
 src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js b/src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js
index a472d7b5e..141294636 100644
--- a/src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js
+++ b/src/routes/Addons/InstallAddonDialog/InstallAddonDialog.js
@@ -101,8 +101,7 @@ InstallAddonDialog.defaultProps = {
     name: '',
     version: '',
     types: [],
-    description: '',
-    isInstalled: false
+    description: ''
 };
 
 export default InstallAddonDialog;