From 8d92162da27b734c1cf6fcd141a3da01577baf1f Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Sep 2019 13:36:11 +0300
Subject: [PATCH 01/21] ShareModal use require

---
 src/common/ShareModal/ShareModal.js | 49 ++++++++++++++---------------
 src/common/ShareModal/index.js      |  4 +--
 2 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/src/common/ShareModal/ShareModal.js b/src/common/ShareModal/ShareModal.js
index afb6f1d38..dd735bbc6 100644
--- a/src/common/ShareModal/ShareModal.js
+++ b/src/common/ShareModal/ShareModal.js
@@ -1,20 +1,21 @@
-import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { Input, Modal } from 'stremio/common';
-import Icon from 'stremio-icons/dom';
-import styles from './styles';
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const Icon = require('stremio-icons/dom');
+const Button = require('stremio/common/Button');
+const TextInput = require('stremio/common/TextInput');
+const styles = require('./styles');
 
 const renderInput = ({ className, href, icon, label }) => {
     return (
-        <Input className={classnames(styles['button'], className)} type={'link'} href={href} target={'_blank'}>
+        <Button className={classnames(styles['button'], className)} type={'link'} href={href} target={'_blank'}>
             <Icon className={styles['icon']} icon={icon} />{label}
-        </Input>
+        </Button>
     );
 };
 
 const renderUrl = (url) => {
-    const inputRef = useRef(null);
+    const inputRef = React.useRef(null);
     const copyToClipboard = () => {
         inputRef.current.select();
         document.execCommand('copy');
@@ -27,31 +28,29 @@ const renderUrl = (url) => {
     return (
         <div className={styles['url-container']}>
             <input ref={inputRef} className={styles['url']} type={'text'} tabIndex={'-1'} defaultValue={url} readOnly />
-            <Input className={styles['copy-button']} type={'button'} onClick={copyToClipboard}>
+            <Button className={styles['copy-button']} type={'button'} onClick={copyToClipboard}>
                 <Icon className={styles['icon']} icon={'ic_link'} />
                 <div className={styles['label']}>Copy</div>
-            </Input>
+            </Button>
         </div>
     );
 };
 
 const ShareModal = (props) => {
     return (
-        <Modal>
-            <div className={styles['share-modal']}>
-                <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['share-label']}>Share</div>
-                    <div className={styles['buttons']}>
-                        {renderInput({ className: styles['facebook-button'], href: `https://www.facebook.com/sharer/sharer.php?u=${props.url}`, icon: 'ic_facebook', label: 'FACEBOOK' })}
-                        {renderInput({ className: styles['twitter-button'], href: `https://twitter.com/home?status=${props.url}`, icon: 'ic_twitter', label: 'TWITTER' })}
-                    </div>
-                    {renderUrl(props.url)}
+        <div className={styles['share-modal']}>
+            <Button className={styles['x-container']} type={'button'}>
+                <Icon className={styles['icon']} icon={'ic_x'} onClick={props.onClose} />
+            </Button>
+            <div className={styles['info-container']}>
+                <div className={styles['share-label']}>Share</div>
+                <div className={styles['buttons']}>
+                    {renderInput({ className: styles['facebook-button'], href: `https://www.facebook.com/sharer/sharer.php?u=${props.url}`, icon: 'ic_facebook', label: 'FACEBOOK' })}
+                    {renderInput({ className: styles['twitter-button'], href: `https://twitter.com/home?status=${props.url}`, icon: 'ic_twitter', label: 'TWITTER' })}
                 </div>
+                {renderUrl(props.url)}
             </div>
-        </Modal>
+        </div>
     );
 };
 
@@ -63,4 +62,4 @@ ShareModal.defaultProps = {
     url: ''
 };
 
-export default ShareModal;
+module.exports = ShareModal;
diff --git a/src/common/ShareModal/index.js b/src/common/ShareModal/index.js
index d57d639f4..34f1e256f 100644
--- a/src/common/ShareModal/index.js
+++ b/src/common/ShareModal/index.js
@@ -1,3 +1,3 @@
-import ShareModal from './ShareModal';
+const ShareModal = require('./ShareModal');
 
-export default ShareModal;
+module.exports = ShareModal;

From 46178227c8ce131d6ac21681d17ab968cc7def5c Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Sep 2019 13:40:09 +0300
Subject: [PATCH 02/21] ShareModal renamed to SharePrompt

---
 src/common/ShareModal/index.js                            | 3 ---
 .../ShareModal.js => SharePrompt/SharePrompt.js}          | 8 ++++----
 src/common/SharePrompt/index.js                           | 3 +++
 src/common/{ShareModal => SharePrompt}/styles.less        | 0
 src/common/index.js                                       | 4 ++--
 5 files changed, 9 insertions(+), 9 deletions(-)
 delete mode 100644 src/common/ShareModal/index.js
 rename src/common/{ShareModal/ShareModal.js => SharePrompt/SharePrompt.js} (95%)
 create mode 100644 src/common/SharePrompt/index.js
 rename src/common/{ShareModal => SharePrompt}/styles.less (100%)

diff --git a/src/common/ShareModal/index.js b/src/common/ShareModal/index.js
deleted file mode 100644
index 34f1e256f..000000000
--- a/src/common/ShareModal/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const ShareModal = require('./ShareModal');
-
-module.exports = ShareModal;
diff --git a/src/common/ShareModal/ShareModal.js b/src/common/SharePrompt/SharePrompt.js
similarity index 95%
rename from src/common/ShareModal/ShareModal.js
rename to src/common/SharePrompt/SharePrompt.js
index dd735bbc6..4887479d1 100644
--- a/src/common/ShareModal/ShareModal.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -36,7 +36,7 @@ const renderUrl = (url) => {
     );
 };
 
-const ShareModal = (props) => {
+const SharePrompt = (props) => {
     return (
         <div className={styles['share-modal']}>
             <Button className={styles['x-container']} type={'button'}>
@@ -54,12 +54,12 @@ const ShareModal = (props) => {
     );
 };
 
-ShareModal.propTypes = {
+SharePrompt.propTypes = {
     url: PropTypes.string.isRequired,
     onClose: PropTypes.func
 };
-ShareModal.defaultProps = {
+SharePrompt.defaultProps = {
     url: ''
 };
 
-module.exports = ShareModal;
+module.exports = SharePrompt;
diff --git a/src/common/SharePrompt/index.js b/src/common/SharePrompt/index.js
new file mode 100644
index 000000000..c59eea4d0
--- /dev/null
+++ b/src/common/SharePrompt/index.js
@@ -0,0 +1,3 @@
+const SharePrompt = require('./SharePrompt');
+
+module.exports = SharePrompt;
diff --git a/src/common/ShareModal/styles.less b/src/common/SharePrompt/styles.less
similarity index 100%
rename from src/common/ShareModal/styles.less
rename to src/common/SharePrompt/styles.less
diff --git a/src/common/index.js b/src/common/index.js
index 580b6db4a..bd903510c 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -11,7 +11,7 @@ const MetaRowPlaceholder = require('./MetaRowPlaceholder');
 const NavBar = require('./NavBar');
 const PlayIconCircleCentered = require('./PlayIconCircleCentered');
 const Popup = require('./Popup');
-const ShareModal = require('./ShareModal');
+const SharePrompt = require('./SharePrompt');
 const Slider = require('./Slider');
 const TextInput = require('./TextInput');
 const routesRegexp = require('./routesRegexp');
@@ -35,7 +35,7 @@ module.exports = {
     NavBar,
     PlayIconCircleCentered,
     Popup,
-    ShareModal,
+    SharePrompt,
     Slider,
     TextInput,
     routesRegexp,

From e10ee56ca1258bf1cbd00df72acc480a63a09ef3 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Sep 2019 13:42:41 +0300
Subject: [PATCH 03/21] className added to SharePrompt props

---
 src/common/SharePrompt/SharePrompt.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index 4887479d1..7648761db 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -55,6 +55,7 @@ const SharePrompt = (props) => {
 };
 
 SharePrompt.propTypes = {
+    className: PropTypes.string,
     url: PropTypes.string.isRequired,
     onClose: PropTypes.func
 };

From c26fdc885055011d48a633b6d643f3f37eec77f7 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Sep 2019 13:51:57 +0300
Subject: [PATCH 04/21] TextInput used in SharePrompt

---
 src/common/SharePrompt/SharePrompt.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index 7648761db..367776f0e 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -27,7 +27,7 @@ const renderUrl = (url) => {
 
     return (
         <div className={styles['url-container']}>
-            <input ref={inputRef} className={styles['url']} type={'text'} tabIndex={'-1'} defaultValue={url} readOnly />
+            <TextInput ref={inputRef} className={styles['url']} type={'text'} tabIndex={'-1'} defaultValue={url} readOnly />
             <Button className={styles['copy-button']} type={'button'} onClick={copyToClipboard}>
                 <Icon className={styles['icon']} icon={'ic_link'} />
                 <div className={styles['label']}>Copy</div>

From 581193ad54271f323154dae69edba2aebd496f7d Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Sep 2019 13:56:52 +0300
Subject: [PATCH 05/21] not needed type dropped

---
 src/common/SharePrompt/SharePrompt.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index 367776f0e..ff22fef92 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -8,7 +8,7 @@ const styles = require('./styles');
 
 const renderInput = ({ className, href, icon, label }) => {
     return (
-        <Button className={classnames(styles['button'], className)} type={'link'} href={href} target={'_blank'}>
+        <Button className={classnames(styles['button'], className)} href={href} target={'_blank'}>
             <Icon className={styles['icon']} icon={icon} />{label}
         </Button>
     );
@@ -28,7 +28,7 @@ const renderUrl = (url) => {
     return (
         <div className={styles['url-container']}>
             <TextInput ref={inputRef} className={styles['url']} type={'text'} tabIndex={'-1'} defaultValue={url} readOnly />
-            <Button className={styles['copy-button']} type={'button'} onClick={copyToClipboard}>
+            <Button className={styles['copy-button']} onClick={copyToClipboard}>
                 <Icon className={styles['icon']} icon={'ic_link'} />
                 <div className={styles['label']}>Copy</div>
             </Button>
@@ -39,7 +39,7 @@ const renderUrl = (url) => {
 const SharePrompt = (props) => {
     return (
         <div className={styles['share-modal']}>
-            <Button className={styles['x-container']} type={'button'}>
+            <Button className={styles['x-container']}>
                 <Icon className={styles['icon']} icon={'ic_x'} onClick={props.onClose} />
             </Button>
             <div className={styles['info-container']}>

From 93ac68cbd3ab88b24c1339aecf4b57ca959960d5 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Sep 2019 14:05:54 +0300
Subject: [PATCH 06/21] SharePrompt className renamed

---
 src/common/SharePrompt/SharePrompt.js | 2 +-
 src/common/SharePrompt/styles.less    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index ff22fef92..be29ada01 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -38,7 +38,7 @@ const renderUrl = (url) => {
 
 const SharePrompt = (props) => {
     return (
-        <div className={styles['share-modal']}>
+        <div className={classnames(props.className, styles['share-prompt'])}>
             <Button className={styles['x-container']}>
                 <Icon className={styles['icon']} icon={'ic_x'} onClick={props.onClose} />
             </Button>
diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index ca0b05022..53bd3eb88 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -1,10 +1,10 @@
-.share-modal {
+.share-prompt {
     --share-modal-width: 350px;
     --spacing: 20px;
     font-size: 14px;
 }
 
-.share-modal {
+.share-prompt {
     padding: calc(var(--spacing) * 0.5);
     width: var(--share-modal-width);
     color: var(--color-surfacelighter);

From 9e87d14e90f8442dcd7bc609cedbbabea7bcb50f Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Sep 2019 14:54:29 +0300
Subject: [PATCH 07/21] SharePrompt not using separate functions

---
 src/common/SharePrompt/SharePrompt.js | 40 ++++++++++-----------------
 1 file changed, 15 insertions(+), 25 deletions(-)

diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index be29ada01..621aea78c 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -6,37 +6,17 @@ const Button = require('stremio/common/Button');
 const TextInput = require('stremio/common/TextInput');
 const styles = require('./styles');
 
-const renderInput = ({ className, href, icon, label }) => {
-    return (
-        <Button className={classnames(styles['button'], className)} href={href} target={'_blank'}>
-            <Icon className={styles['icon']} icon={icon} />{label}
-        </Button>
-    );
-};
-
-const renderUrl = (url) => {
+const SharePrompt = (props) => {
     const inputRef = React.useRef(null);
     const copyToClipboard = () => {
         inputRef.current.select();
         document.execCommand('copy');
     };
 
-    if (url.length === 0) {
+    if (props.url.length === 0) {
         return null;
     }
 
-    return (
-        <div className={styles['url-container']}>
-            <TextInput ref={inputRef} className={styles['url']} type={'text'} tabIndex={'-1'} defaultValue={url} readOnly />
-            <Button className={styles['copy-button']} onClick={copyToClipboard}>
-                <Icon className={styles['icon']} icon={'ic_link'} />
-                <div className={styles['label']}>Copy</div>
-            </Button>
-        </div>
-    );
-};
-
-const SharePrompt = (props) => {
     return (
         <div className={classnames(props.className, styles['share-prompt'])}>
             <Button className={styles['x-container']}>
@@ -45,10 +25,20 @@ const SharePrompt = (props) => {
             <div className={styles['info-container']}>
                 <div className={styles['share-label']}>Share</div>
                 <div className={styles['buttons']}>
-                    {renderInput({ className: styles['facebook-button'], href: `https://www.facebook.com/sharer/sharer.php?u=${props.url}`, icon: 'ic_facebook', label: 'FACEBOOK' })}
-                    {renderInput({ className: styles['twitter-button'], href: `https://twitter.com/home?status=${props.url}`, icon: 'ic_twitter', label: 'TWITTER' })}
+                    <Button className={classnames(styles['button'], styles['facebook-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}`} target={'_blank'}>
+                        <Icon className={styles['icon']} icon={'ic_facebook'} />FACEBOOK
+                    </Button>
+                    <Button className={classnames(styles['button'], styles['twitter-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}`} target={'_blank'}>
+                        <Icon className={styles['icon']} icon={'ic_twitter'} />TWITTER
+                    </Button>
+                </div>
+                <div className={styles['url-container']}>
+                    <TextInput ref={inputRef} className={styles['url']} type={'text'} tabIndex={'-1'} defaultValue={props.url} readOnly />
+                    <Button className={styles['copy-button']} onClick={copyToClipboard}>
+                        <Icon className={styles['icon']} icon={'ic_link'} />
+                        <div className={styles['label']}>Copy</div>
+                    </Button>
                 </div>
-                {renderUrl(props.url)}
             </div>
         </div>
     );

From e1d6f4a3a1f3195fa707384579ae013f1f15808f Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Sep 2019 15:10:23 +0300
Subject: [PATCH 08/21] SharePrompt classNames renamed

---
 src/common/SharePrompt/SharePrompt.js | 16 ++++++++--------
 src/common/SharePrompt/styles.less    | 16 ++++++++--------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index 621aea78c..430cab28e 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -18,22 +18,22 @@ const SharePrompt = (props) => {
     }
 
     return (
-        <div className={classnames(props.className, styles['share-prompt'])}>
-            <Button className={styles['x-container']}>
+        <div className={classnames(props.className, styles['share-prompt-container'])}>
+            <Button className={styles['close-button-container']}>
                 <Icon className={styles['icon']} icon={'ic_x'} onClick={props.onClose} />
             </Button>
-            <div className={styles['info-container']}>
-                <div className={styles['share-label']}>Share</div>
-                <div className={styles['buttons']}>
-                    <Button className={classnames(styles['button'], styles['facebook-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}`} target={'_blank'}>
+            <div className={styles['share-prompt-content']}>
+                <div className={styles['share-prompt-label']}>Share</div>
+                <div className={styles['buttons-container']}>
+                    <Button className={classnames(styles['button-container'], styles['facebook-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}`} target={'_blank'}>
                         <Icon className={styles['icon']} icon={'ic_facebook'} />FACEBOOK
                     </Button>
-                    <Button className={classnames(styles['button'], styles['twitter-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}`} target={'_blank'}>
+                    <Button className={classnames(styles['button-container'], styles['twitter-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}`} target={'_blank'}>
                         <Icon className={styles['icon']} icon={'ic_twitter'} />TWITTER
                     </Button>
                 </div>
                 <div className={styles['url-container']}>
-                    <TextInput ref={inputRef} className={styles['url']} type={'text'} tabIndex={'-1'} defaultValue={props.url} readOnly />
+                    <TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} defaultValue={props.url} readOnly />
                     <Button className={styles['copy-button']} onClick={copyToClipboard}>
                         <Icon className={styles['icon']} icon={'ic_link'} />
                         <div className={styles['label']}>Copy</div>
diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index 53bd3eb88..6d55e3a3d 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -1,16 +1,16 @@
-.share-prompt {
+.share-prompt-container {
     --share-modal-width: 350px;
     --spacing: 20px;
     font-size: 14px;
 }
 
-.share-prompt {
+.share-prompt-container {
     padding: calc(var(--spacing) * 0.5);
     width: var(--share-modal-width);
     color: var(--color-surfacelighter);
     background-color: var(--color-surfacelighter);
 
-    .x-container {
+    .close-button-container {
         display: flex;
         flex-direction: row;
         justify-content: flex-end;
@@ -40,20 +40,20 @@
         }
     }
 
-    .info-container {
+    .share-prompt-content {
         padding: 0 var(--spacing) calc(var(--spacing) * 1.2) var(--spacing);
 
-        .share-label {
+        .share-prompt-label {
             font-size: 1.1em;
             color: var(--color-backgrounddarker);
         }
 
-        .buttons {
+        .buttons-container {
             padding: var(--spacing) 0;
             display: flex;
             flex-direction: row;
 
-            .button {
+            .button-container {
                 flex: 1;
                 height: 3.2em;
                 display: flex;
@@ -94,7 +94,7 @@
             flex-direction: row;
             border: calc(var(--focusable-border-size) * 0.5) solid var(--color-surface);
 
-            .url {
+            .url-content {
                 flex: 4;
                 padding: calc(var(--spacing) * 0.5);
                 font-size: 0.9em;

From 7c980b08001498617ea2840eb4a8e0ed7e046861 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Sep 2019 15:48:23 +0300
Subject: [PATCH 09/21] label prop added to SharePrompt

---
 src/common/SharePrompt/SharePrompt.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index 430cab28e..5808cac69 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -23,7 +23,7 @@ const SharePrompt = (props) => {
                 <Icon className={styles['icon']} icon={'ic_x'} onClick={props.onClose} />
             </Button>
             <div className={styles['share-prompt-content']}>
-                <div className={styles['share-prompt-label']}>Share</div>
+                <div className={styles['share-prompt-label']}>{props.label}</div>
                 <div className={styles['buttons-container']}>
                     <Button className={classnames(styles['button-container'], styles['facebook-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}`} target={'_blank'}>
                         <Icon className={styles['icon']} icon={'ic_facebook'} />FACEBOOK
@@ -46,10 +46,12 @@ const SharePrompt = (props) => {
 
 SharePrompt.propTypes = {
     className: PropTypes.string,
+    label: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired,
     onClose: PropTypes.func
 };
 SharePrompt.defaultProps = {
+    label: 'Share',
     url: ''
 };
 

From 47ecf701cc8404823f2e36ace42eaba6af116787 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 30 Sep 2019 10:53:53 +0300
Subject: [PATCH 10/21] SharePrompt reimplemented with hooks

---
 src/common/SharePrompt/SharePrompt.js | 40 +++++++++++++++++----------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index 5808cac69..5996f80cf 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -2,38 +2,48 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
+const { useFocusable } = require('stremio-router');
 const Button = require('stremio/common/Button');
 const TextInput = require('stremio/common/TextInput');
 const styles = require('./styles');
 
-const SharePrompt = (props) => {
+const SharePrompt = ({ className, label, url, close }) => {
     const inputRef = React.useRef(null);
-    const copyToClipboard = () => {
+    const focusable = useFocusable();
+    const copyToClipboard = React.useCallback(() => {
         inputRef.current.select();
         document.execCommand('copy');
-    };
-
-    if (props.url.length === 0) {
-        return null;
-    }
-
+    }, []);
+    React.useEffect(() => {
+        const onKeyUp = (event) => {
+            if (event.key === 'Escape') {
+                cancel();
+            }
+        };
+        if (focusable) {
+            window.addEventListener('keyup', onKeyUp);
+        }
+        return () => {
+            window.removeEventListener('keyup', onKeyUp);
+        };
+    }, [close, focusable]);
     return (
-        <div className={classnames(props.className, styles['share-prompt-container'])}>
+        <div className={classnames(className, styles['share-prompt-container'])}>
             <Button className={styles['close-button-container']}>
-                <Icon className={styles['icon']} icon={'ic_x'} onClick={props.onClose} />
+                <Icon className={styles['icon']} icon={'ic_x'} onClick={close} />
             </Button>
             <div className={styles['share-prompt-content']}>
-                <div className={styles['share-prompt-label']}>{props.label}</div>
+                <div className={styles['share-prompt-label']}>{label}</div>
                 <div className={styles['buttons-container']}>
-                    <Button className={classnames(styles['button-container'], styles['facebook-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}`} target={'_blank'}>
+                    <Button className={classnames(styles['button-container'], styles['facebook-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${url}`} target={'_blank'}>
                         <Icon className={styles['icon']} icon={'ic_facebook'} />FACEBOOK
                     </Button>
-                    <Button className={classnames(styles['button-container'], styles['twitter-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}`} target={'_blank'}>
+                    <Button className={classnames(styles['button-container'], styles['twitter-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${url}`} target={'_blank'}>
                         <Icon className={styles['icon']} icon={'ic_twitter'} />TWITTER
                     </Button>
                 </div>
                 <div className={styles['url-container']}>
-                    <TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} defaultValue={props.url} readOnly />
+                    <TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} defaultValue={url} readOnly />
                     <Button className={styles['copy-button']} onClick={copyToClipboard}>
                         <Icon className={styles['icon']} icon={'ic_link'} />
                         <div className={styles['label']}>Copy</div>
@@ -48,7 +58,7 @@ SharePrompt.propTypes = {
     className: PropTypes.string,
     label: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired,
-    onClose: PropTypes.func
+    close: PropTypes.func
 };
 SharePrompt.defaultProps = {
     label: 'Share',

From 16f4b3b5fd2b62441c194cc3e27bbba195f63b4b Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 30 Sep 2019 14:38:39 +0300
Subject: [PATCH 11/21] button labels wrapped in div

---
 src/common/SharePrompt/SharePrompt.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index 5996f80cf..a6fc1ad55 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -36,10 +36,12 @@ const SharePrompt = ({ className, label, url, close }) => {
                 <div className={styles['share-prompt-label']}>{label}</div>
                 <div className={styles['buttons-container']}>
                     <Button className={classnames(styles['button-container'], styles['facebook-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${url}`} target={'_blank'}>
-                        <Icon className={styles['icon']} icon={'ic_facebook'} />FACEBOOK
+                        <Icon className={styles['icon']} icon={'ic_facebook'} />
+                        <div className={styles['label']}>FACEBOOK</div>
                     </Button>
                     <Button className={classnames(styles['button-container'], styles['twitter-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${url}`} target={'_blank'}>
-                        <Icon className={styles['icon']} icon={'ic_twitter'} />TWITTER
+                        <Icon className={styles['icon']} icon={'ic_twitter'} />
+                        <div className={styles['label']}>TWITTER</div>
                     </Button>
                 </div>
                 <div className={styles['url-container']}>

From fd197e4e9d3fd3cdbb785d979100d57d2eb73d05 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 30 Sep 2019 16:39:46 +0300
Subject: [PATCH 12/21] SharePrompt styles based on rem

---
 src/common/SharePrompt/styles.less | 114 ++++++++++++++---------------
 1 file changed, 55 insertions(+), 59 deletions(-)

diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index 6d55e3a3d..33cd87f90 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -1,87 +1,84 @@
 .share-prompt-container {
-    --share-modal-width: 350px;
-    --spacing: 20px;
-    font-size: 14px;
-}
-
-.share-prompt-container {
-    padding: calc(var(--spacing) * 0.5);
-    width: var(--share-modal-width);
-    color: var(--color-surfacelighter);
+    position: relative;
+    z-index: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 2.4rem 0;
     background-color: var(--color-surfacelighter);
 
     .close-button-container {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-end;
-
-        .icon {
-            padding: 0.2em;
-            width: 1.2em;
-            height: 1.2em;
-            fill: var(--color-surfacedark);
-            cursor: pointer;
-
-            &:hover {
-                fill: var(--color-surface);
-            }
-        }
-
-        &:focus {
-            .icon {
-                background-color: var(--color-surfacelight);
-            }
-        }
+        position: absolute;
+        top: 0.4rem;
+        right: 0.4rem;
+        z-index: 1;
+        width: 2rem;
+        height: 2rem;
+        padding: 0.4rem;
 
         &:hover {
-            .icon {
-                background-color: transparent;
-            }
+            background-color: var(--color-surfacelight);
+        }
+
+        .icon {
+            display: block;
+            width: 100%;
+            height: 100%;
+            fill: var(--color-backgrounddarker);
         }
     }
 
     .share-prompt-content {
-        padding: 0 var(--spacing) calc(var(--spacing) * 1.2) var(--spacing);
+        padding: 0 2.4rem;
 
         .share-prompt-label {
-            font-size: 1.1em;
+            font-size: 1.3rem;
             color: var(--color-backgrounddarker);
         }
 
         .buttons-container {
-            padding: var(--spacing) 0;
+            flex: none;
+            align-self: stretch;
             display: flex;
             flex-direction: row;
+            margin: 1.4rem 0;
 
             .button-container {
                 flex: 1;
-                height: 3.2em;
                 display: flex;
                 flex-direction: row;
                 align-items: center;
                 justify-content: center;
-                font-size: 0.8em;
-                color: var(--color-surfacelighter);
-                cursor: pointer;
+                padding: 0.6rem 1rem;
 
                 .icon {
-                    margin-right: 0.6em;
-                    width: 1.4em;
-                    height: 1.4em;
+                    flex: none;
+                    width: 1.4rem;
+                    height: 1.4rem;
+                    margin-right: 0.6rem;
                     fill: var(--color-surfacelighter);
                 }
 
-                &:focus, &:hover {
+                .label {
+                    flex-grow: 0;
+                    flex-shrink: 1;
+                    flex-basis: auto;
+                    font-size: 0.8rem;
+                    font-weight: 500;
+                    color: var(--color-surfacelighter);
+                    text-align: center;
+                }
+
+                &:hover, &:focus {
                     filter: brightness(1.2);
                 }
 
                 &:not(:last-child) {
-                    margin-right: 2em;
+                    margin-right: 2rem;
                 }
             }
 
             .facebook-button {
-                background-color: var(--color-secondary);
+                background-color: var(--color-facebook);
             }
 
             .twitter-button {
@@ -92,29 +89,28 @@
         .url-container {
             display: flex;
             flex-direction: row;
-            border: calc(var(--focusable-border-size) * 0.5) solid var(--color-surface);
+            border: calc(var(--focus-outline-size) * 0.5) solid var(--color-surface);
 
             .url-content {
-                flex: 4;
-                padding: calc(var(--spacing) * 0.5);
-                font-size: 0.9em;
-                text-align: center;
+                min-width: 12rem;
+                padding: 0.6rem 1rem;
+                font-size: 0.9rem;
                 color: var(--color-surfacedark);
+                text-align: center;
             }
 
             .copy-button {
-                flex: 1;
-                padding: calc(var(--spacing) * 0.5);
                 display: flex;
                 flex-direction: row;
+                align-items: center;
                 justify-content: center;
+                padding: 0.6rem 1rem;
                 background-color: var(--color-surface);
-                cursor: pointer;
 
                 .icon {
-                    margin-right: 0.4em;
-                    width: 1em;
-                    height: 1em;
+                    width: 1.4rem;
+                    height: 1.4rem;
+                    margin-right: 0.6rem;
                     fill: var(--color-surfacedarker);
                 }
 
@@ -122,8 +118,8 @@
                     color: var(--color-surfacedarker);
                 }
 
-                &:focus, &:hover {
-                    background-color: var(--color-surface60);
+                &:hover, &:focus {
+                    filter: brightness(1.2);
                 }
             }
         }

From b9bbe707763eb23f1847ac071f8e380a5080bace Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 30 Sep 2019 16:43:19 +0300
Subject: [PATCH 13/21] twitter color added

---
 src/App/styles.less                | 1 +
 src/common/SharePrompt/styles.less | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/App/styles.less b/src/App/styles.less
index 2b0f0b307..4ab98b8ef 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -12,6 +12,7 @@
     --scroll-bar-width: 6px;
     --focus-outline-size: 2px;
     --color-facebook: #4267b2;
+    --color-twitter: #1DA1F2;
     --color-placeholder: #60606080;
 }
 
diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index 33cd87f90..0a305bbea 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -82,7 +82,7 @@
             }
 
             .twitter-button {
-                background-color: var(--color-secondarylighter);
+                background-color: var(--color-twitter);
             }
         }
 

From 24603f02c56976ace36249512a243efa5f27b294 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 30 Sep 2019 17:50:12 +0300
Subject: [PATCH 14/21] url style fixed

---
 src/common/SharePrompt/styles.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index 0a305bbea..8ccd20f58 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -92,6 +92,7 @@
             border: calc(var(--focus-outline-size) * 0.5) solid var(--color-surface);
 
             .url-content {
+                flex: 1;
                 min-width: 12rem;
                 padding: 0.6rem 1rem;
                 font-size: 0.9rem;

From ba9758003297ccc4361e58a2961555d7af8fdc46 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 1 Oct 2019 10:22:26 +0300
Subject: [PATCH 15/21] SharePrompt added to storybook

---
 storybook/stories/SharePrompt/SharePrompt.js | 14 ++++++++++++++
 storybook/stories/SharePrompt/index.js       |  1 +
 storybook/stories/SharePrompt/styles.less    |  4 ++++
 storybook/stories/index.js                   |  1 +
 4 files changed, 20 insertions(+)
 create mode 100644 storybook/stories/SharePrompt/SharePrompt.js
 create mode 100644 storybook/stories/SharePrompt/index.js
 create mode 100644 storybook/stories/SharePrompt/styles.less

diff --git a/storybook/stories/SharePrompt/SharePrompt.js b/storybook/stories/SharePrompt/SharePrompt.js
new file mode 100644
index 000000000..ab52ebd1c
--- /dev/null
+++ b/storybook/stories/SharePrompt/SharePrompt.js
@@ -0,0 +1,14 @@
+const React = require('react');
+const { storiesOf } = require('@storybook/react');
+const { action } = require('@storybook/addon-actions');
+const { SharePrompt } = require('stremio/common');
+const styles = require('./styles');
+
+storiesOf('SharePrompt', module).add('SharePrompt', () => (
+    <SharePrompt
+        className={styles['share-prompt-container']}
+        label={'Demo label'}
+        url={'Demo url'}
+        close={action('Demo item closed')}
+    />
+));
diff --git a/storybook/stories/SharePrompt/index.js b/storybook/stories/SharePrompt/index.js
new file mode 100644
index 000000000..81e66574e
--- /dev/null
+++ b/storybook/stories/SharePrompt/index.js
@@ -0,0 +1 @@
+require('./SharePrompt');
diff --git a/storybook/stories/SharePrompt/styles.less b/storybook/stories/SharePrompt/styles.less
new file mode 100644
index 000000000..bcea78a25
--- /dev/null
+++ b/storybook/stories/SharePrompt/styles.less
@@ -0,0 +1,4 @@
+.share-prompt-container {
+    width: 24rem;
+    margin: 1rem;
+}
\ No newline at end of file
diff --git a/storybook/stories/index.js b/storybook/stories/index.js
index a15267d5f..47a0282dd 100644
--- a/storybook/stories/index.js
+++ b/storybook/stories/index.js
@@ -1,3 +1,4 @@
 require('./Addon');
 require('./MetaItem');
 require('./ColorPicker');
+require('./SharePrompt');

From 9c0ecc862147830790a3676db34219818828da70 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 1 Oct 2019 15:10:26 +0300
Subject: [PATCH 16/21] closing prompt function name fixed

---
 src/common/SharePrompt/SharePrompt.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index a6fc1ad55..d08e16681 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -17,7 +17,7 @@ const SharePrompt = ({ className, label, url, close }) => {
     React.useEffect(() => {
         const onKeyUp = (event) => {
             if (event.key === 'Escape') {
-                cancel();
+                close();
             }
         };
         if (focusable) {

From 18cc4aec4d1b0e8578a4dfa73615ddff3b40ea21 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 1 Oct 2019 15:12:44 +0300
Subject: [PATCH 17/21] default props removed from SharePrompt

---
 src/common/SharePrompt/SharePrompt.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index d08e16681..61cc1b6cf 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -62,9 +62,5 @@ SharePrompt.propTypes = {
     url: PropTypes.string.isRequired,
     close: PropTypes.func
 };
-SharePrompt.defaultProps = {
-    label: 'Share',
-    url: ''
-};
 
 module.exports = SharePrompt;

From 4540411709bebbca8a8d2153f6a3bfa6d33b2565 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 1 Oct 2019 15:15:11 +0300
Subject: [PATCH 18/21] correct twitter link

---
 src/common/SharePrompt/SharePrompt.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index 61cc1b6cf..956112d12 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -39,7 +39,7 @@ const SharePrompt = ({ className, label, url, close }) => {
                         <Icon className={styles['icon']} icon={'ic_facebook'} />
                         <div className={styles['label']}>FACEBOOK</div>
                     </Button>
-                    <Button className={classnames(styles['button-container'], styles['twitter-button'])} href={`https://www.facebook.com/sharer/sharer.php?u=${url}`} target={'_blank'}>
+                    <Button className={classnames(styles['button-container'], styles['twitter-button'])} href={`https://twitter.com/home?status=${url}`} target={'_blank'}>
                         <Icon className={styles['icon']} icon={'ic_twitter'} />
                         <div className={styles['label']}>TWITTER</div>
                     </Button>

From 7648d8f4e14c31f653356d3c60d78e2d9f04453c Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 1 Oct 2019 15:22:00 +0300
Subject: [PATCH 19/21] check if close is function

---
 src/common/SharePrompt/SharePrompt.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index 956112d12..4a1abc80b 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -16,7 +16,7 @@ const SharePrompt = ({ className, label, url, close }) => {
     }, []);
     React.useEffect(() => {
         const onKeyUp = (event) => {
-            if (event.key === 'Escape') {
+            if (event.key === 'Escape' && typeof close === 'function') {
                 close();
             }
         };

From 12f01ec6bee533c246f06945e69c6a33a90f57c5 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 1 Oct 2019 15:36:34 +0300
Subject: [PATCH 20/21] use thin for border width

---
 src/common/SharePrompt/styles.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index 8ccd20f58..1e9874a67 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -89,7 +89,7 @@
         .url-container {
             display: flex;
             flex-direction: row;
-            border: calc(var(--focus-outline-size) * 0.5) solid var(--color-surface);
+            border: thin solid var(--color-surface);
 
             .url-content {
                 flex: 1;

From 4e1104c29277cf0574a5ad5a59b9d2cc215e4188 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 1 Oct 2019 16:05:03 +0300
Subject: [PATCH 21/21] flex properties added to buttons style

---
 src/common/SharePrompt/styles.less | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index 1e9874a67..36c97ce7f 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -43,7 +43,9 @@
             margin: 1.4rem 0;
 
             .button-container {
-                flex: 1;
+                flex-grow: 0;
+                flex-shrink: 1;
+                flex-basis: 14rem;
                 display: flex;
                 flex-direction: row;
                 align-items: center;
@@ -101,6 +103,9 @@
             }
 
             .copy-button {
+                flex-grow: 0;
+                flex-shrink: 1;
+                flex-basis: auto;
                 display: flex;
                 flex-direction: row;
                 align-items: center;
@@ -109,6 +114,7 @@
                 background-color: var(--color-surface);
 
                 .icon {
+                    flex: none;
                     width: 1.4rem;
                     height: 1.4rem;
                     margin-right: 0.6rem;