From 86c7b746e3c8cedab70b8f8937b11717cdfd30aa Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 5 Nov 2019 14:47:00 +0200
Subject: [PATCH] addon prompt, share prompt and addons adapted to the new
 modal dialog

---
 src/common/ModalDialog/styles.less           |  11 +-
 src/common/SharePrompt/SharePrompt.js        |  62 ++----
 src/common/SharePrompt/styles.less           | 208 ++++++++-----------
 src/routes/Addons/AddonPrompt/AddonPrompt.js | 170 ++++++---------
 src/routes/Addons/AddonPrompt/styles.less    | 177 ++++------------
 src/routes/Addons/Addons.js                  | 139 ++++++-------
 src/routes/Addons/styles.less                | 154 ++------------
 7 files changed, 311 insertions(+), 610 deletions(-)

diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index 09196210b..9eb93b01f 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -45,15 +45,20 @@
         }
 
         h1 {
+            margin-bottom: 1rem;
             font-size: 1.2rem;
         }
 
         .modal-dialog-content {
-            margin-top: 1rem;
+            padding: 1rem;
+
+            >:not(:first-child) {
+                margin-top: 1rem;
+            }
         }
 
         .modal-dialog-buttons {
-            margin-top: 1rem;
+            margin: 1rem;
             display: flex;
             flex-direction: row;
         }
@@ -94,6 +99,6 @@
     }
 
     &:not(:last-child) {
-        margin-right: 1rem;
+        margin-right: 2rem;
     }
 }
\ No newline at end of file
diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index 292a33d2a..8a8dbefef 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -2,55 +2,34 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-const { useRouteFocused } = require('stremio-router');
 const Button = require('stremio/common/Button');
 const TextInput = require('stremio/common/TextInput');
 const styles = require('./styles');
 
-const SharePrompt = ({ className, label, url, close, onClick }) => {
+const SharePrompt = ({ className, url }) => {
     const inputRef = React.useRef(null);
-    const focusRoute = useRouteFocused();
     const copyToClipboard = React.useCallback(() => {
         inputRef.current.select();
         document.execCommand('copy');
     }, []);
-    React.useEffect(() => {
-        const onKeyUp = (event) => {
-            if (event.key === 'Escape' && typeof close === 'function') {
-                close();
-            }
-        };
-        if (focusRoute) {
-            window.addEventListener('keyup', onKeyUp);
-        }
-        return () => {
-            window.removeEventListener('keyup', onKeyUp);
-        };
-    }, [close, focusRoute]);
     return (
-        <div className={classnames(className, styles['share-prompt-container'])} onClick={onClick}>
-            <Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={close}>
-                <Icon className={styles['icon']} icon={'ic_x'} />
-            </Button>
-            <div className={styles['share-prompt-content']}>
-                <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'} />
-                        <div className={styles['label']}>FACEBOOK</div>
-                    </Button>
-                    <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>
-                </div>
-                <div className={styles['url-container']}>
-                    <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>
-                    </Button>
-                </div>
+        <div className={classnames(className, styles['share-prompt-container'])}>
+            <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'} />
+                    <div className={styles['label']}>FACEBOOK</div>
+                </Button>
+                <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>
+            </div>
+            <div className={styles['url-container']}>
+                <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>
+                </Button>
             </div>
         </div>
     );
@@ -58,10 +37,7 @@ const SharePrompt = ({ className, label, url, close, onClick }) => {
 
 SharePrompt.propTypes = {
     className: PropTypes.string,
-    label: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-    close: PropTypes.func,
-    onClick: PropTypes.func
+    url: PropTypes.string.isRequired
 };
 
 module.exports = SharePrompt;
diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index 36c97ce7f..712f9d7cf 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -1,133 +1,107 @@
 .share-prompt-container {
-    position: relative;
-    z-index: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 2.4rem 0;
-    background-color: var(--color-surfacelighter);
+    .buttons-container {
+        flex: none;
+        align-self: stretch;
+        display: flex;
+        flex-direction: row;
 
-    .close-button-container {
-        position: absolute;
-        top: 0.4rem;
-        right: 0.4rem;
-        z-index: 1;
-        width: 2rem;
-        height: 2rem;
-        padding: 0.4rem;
-
-        &:hover {
-            background-color: var(--color-surfacelight);
-        }
-
-        .icon {
-            display: block;
-            width: 100%;
-            height: 100%;
-            fill: var(--color-backgrounddarker);
-        }
-    }
-
-    .share-prompt-content {
-        padding: 0 2.4rem;
-
-        .share-prompt-label {
-            font-size: 1.3rem;
-            color: var(--color-backgrounddarker);
-        }
-
-        .buttons-container {
-            flex: none;
-            align-self: stretch;
+        .button-container {
+            flex-grow: 0;
+            flex-shrink: 1;
+            flex-basis: 14rem;
             display: flex;
             flex-direction: row;
-            margin: 1.4rem 0;
+            align-items: center;
+            justify-content: center;
+            padding: 0.6rem 1rem;
 
-            .button-container {
-                flex-grow: 0;
-                flex-shrink: 1;
-                flex-basis: 14rem;
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: center;
-                padding: 0.6rem 1rem;
-
-                .icon {
-                    flex: none;
-                    width: 1.4rem;
-                    height: 1.4rem;
-                    margin-right: 0.6rem;
-                    fill: var(--color-surfacelighter);
-                }
-
-                .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: 2rem;
-                }
+            .icon {
+                flex: none;
+                width: 1.4rem;
+                height: 1.4rem;
+                margin-right: 0.6rem;
+                fill: var(--color-surfacelighter);
             }
 
-            .facebook-button {
-                background-color: var(--color-facebook);
-            }
-
-            .twitter-button {
-                background-color: var(--color-twitter);
-            }
-        }
-
-        .url-container {
-            display: flex;
-            flex-direction: row;
-            border: thin solid var(--color-surface);
-
-            .url-content {
-                flex: 1;
-                min-width: 12rem;
-                padding: 0.6rem 1rem;
-                font-size: 0.9rem;
-                color: var(--color-surfacedark);
-                text-align: center;
-            }
-
-            .copy-button {
+            .label {
                 flex-grow: 0;
                 flex-shrink: 1;
                 flex-basis: auto;
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: center;
-                padding: 0.6rem 1rem;
-                background-color: var(--color-surface);
+                font-size: 0.8rem;
+                font-weight: 500;
+                color: var(--color-surfacelighter);
+                text-align: center;
+            }
 
-                .icon {
-                    flex: none;
-                    width: 1.4rem;
-                    height: 1.4rem;
-                    margin-right: 0.6rem;
-                    fill: var(--color-surfacedarker);
-                }
+            &:hover {
+                filter: brightness(1.2);
+            }
 
-                .label {
-                    color: var(--color-surfacedarker);
-                }
+            &:focus {
+                outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
+                outline-offset: calc(-2 * var(--focus-outline-size));
+            }
 
-                &:hover, &:focus {
-                    filter: brightness(1.2);
-                }
+            &:not(:last-child) {
+                margin-right: 2rem;
+            }
+        }
+
+        .facebook-button {
+            background-color: var(--color-facebook);
+        }
+
+        .twitter-button {
+            background-color: var(--color-twitter);
+        }
+    }
+
+    .url-container {
+        display: flex;
+        flex-direction: row;
+        margin-top: 2rem;
+        border: thin solid var(--color-surface);
+
+        .url-content {
+            flex: 1;
+            min-width: 12rem;
+            padding: 0.6rem 1rem;
+            font-size: 0.9rem;
+            color: var(--color-surfacedark);
+            text-align: center;
+            border-right: thin solid var(--color-surface);
+        }
+
+        .copy-button {
+            flex-grow: 0;
+            flex-shrink: 1;
+            flex-basis: auto;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            padding: 0.6rem 1rem;
+            background-color: var(--color-surface);
+
+            .icon {
+                flex: none;
+                width: 1.4rem;
+                height: 1.4rem;
+                margin-right: 0.6rem;
+                fill: var(--color-surfacedarker);
+            }
+
+            .label {
+                color: var(--color-surfacedarker);
+            }
+
+            &:hover {
+                filter: brightness(1.2);
+            }
+
+            &:focus {
+                outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
+                outline-offset: calc(-1.5 * var(--focus-outline-size));
             }
         }
     }
diff --git a/src/routes/Addons/AddonPrompt/AddonPrompt.js b/src/routes/Addons/AddonPrompt/AddonPrompt.js
index 54b056a47..4d6f9ffc8 100644
--- a/src/routes/Addons/AddonPrompt/AddonPrompt.js
+++ b/src/routes/Addons/AddonPrompt/AddonPrompt.js
@@ -1,116 +1,86 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('stremio-icons/dom');
-const { useRouteFocused } = require('stremio-router');
-const { Button } = require('stremio/common');
 const styles = require('./styles');
 
-const AddonPrompt = ({ className, id, name, logo, description, types, catalogs, version, transportUrl, installed, official, cancel, onClick, toggle }) => {
-    const focusRoute = useRouteFocused();
-    React.useEffect(() => {
-        const onKeyUp = (event) => {
-            if (event.key === 'Escape') {
-                cancel();
-            }
-        };
-        if (focusRoute) {
-            window.addEventListener('keyup', onKeyUp);
-        }
-        return () => {
-            window.removeEventListener('keyup', onKeyUp);
-        };
-    }, [cancel, focusRoute]);
+const AddonPrompt = ({ className, id, name, logo, description, types, catalogs, version, transportUrl, official }) => {
     return (
-        <div className={classnames(className, styles['addon-prompt-container'])} onClick={onClick}>
-            <Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={cancel}>
-                <Icon className={styles['icon']} icon={'ic_x'} />
-            </Button>
-            <div className={styles['addon-prompt-content']}>
-                <div className={classnames(styles['title-container'], { [styles['title-with-logo-container']]: typeof logo === 'string' && logo.length > 0 })}>
-                    {
-                        typeof logo === 'string' && logo.length > 0 ?
-                            <div className={styles['logo-container']}>
-                                <img className={styles['logo']} src={logo} alt={' '} />
-                            </div>
-                            :
-                            null
-                    }
-                    {typeof name === 'string' && name.length > 0 ? name : id}
-                    {' '}
-                    {
-                        typeof version === 'string' && version.length > 0 ?
-                            <span className={styles['version-container']}>v.{version}</span>
-                            :
-                            null
-                    }
-                </div>
+        <div className={classnames(className, styles['addon-prompt-container'])}>
+            <div className={classnames(styles['title-container'], { [styles['title-with-logo-container']]: typeof logo === 'string' && logo.length > 0 })}>
                 {
-                    typeof description === 'string' && description.length > 0 ?
-                        <div className={styles['section-container']}>
-                            <span className={styles['section-header']}>{description}</span>
+                    typeof logo === 'string' && logo.length > 0 ?
+                        <div className={styles['logo-container']}>
+                            <img className={styles['logo']} src={logo} alt={' '} />
                         </div>
                         :
                         null
                 }
+                {typeof name === 'string' && name.length > 0 ? name : id}
+                {' '}
                 {
-                    typeof transportUrl === 'string' && transportUrl.length > 0 ?
-                        <div className={styles['section-container']}>
-                            <span className={styles['section-header']}>URL: </span>
-                            <span className={classnames(styles['section-label'], styles['transport-url-label'])}>{transportUrl}</span>
-                        </div>
-                        :
-                        null
-                }
-                {
-                    Array.isArray(types) && types.length > 0 ?
-                        <div className={styles['section-container']}>
-                            <span className={styles['section-header']}>Supported types: </span>
-                            <span className={styles['section-label']}>
-                                {
-                                    types.length === 1 ?
-                                        types[0]
-                                        :
-                                        types.slice(0, -1).join(', ') + ' & ' + types[types.length - 1]
-                                }
-                            </span>
-                        </div>
-                        :
-                        null
-                }
-                {
-                    Array.isArray(catalogs) && catalogs.length > 0 ?
-                        <div className={styles['section-container']}>
-                            <span className={styles['section-header']}>Supported catalogs: </span>
-                            <span className={styles['section-label']}>
-                                {
-                                    catalogs.length === 1 ?
-                                        catalogs[0].name
-                                        :
-                                        catalogs.slice(0, -1).map(({ name }) => name).join(', ') + ' & ' + catalogs[catalogs.length - 1].name
-                                }
-                            </span>
-                        </div>
-                        :
-                        null
-                }
-                {
-                    !official ?
-                        <div className={styles['section-container']}>
-                            <div className={classnames(styles['section-label'], styles['disclaimer-label'])}>Using third-party add-ons will always be subject to your responsibility and the governing law of the jurisdiction you are located.</div>
-                        </div>
+                    typeof version === 'string' && version.length > 0 ?
+                        <span className={styles['version-container']}>v.{version}</span>
                         :
                         null
                 }
             </div>
-            <div className={styles['buttons-container']}>
-                <Button className={classnames(styles['button-container'], styles['cancel-button'])} title={'Cancel'} onClick={cancel}>
-                    <div className={styles['label']}>Cancel</div>
-                </Button>
-                <Button className={classnames(styles['button-container'], installed ? styles['uninstall-button'] : styles['install-button'])} title={installed ? 'Uninstall' : 'Install'} onClick={() => { toggle(); cancel() }}>
-                    <div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div>
-                </Button>
-            </div>
+            {
+                typeof description === 'string' && description.length > 0 ?
+                    <div className={styles['section-container']}>
+                        <span className={styles['section-header']}>{description}</span>
+                    </div>
+                    :
+                    null
+            }
+            {
+                typeof transportUrl === 'string' && transportUrl.length > 0 ?
+                    <div className={styles['section-container']}>
+                        <span className={styles['section-header']}>URL: </span>
+                        <span className={classnames(styles['section-label'], styles['transport-url-label'])}>{transportUrl}</span>
+                    </div>
+                    :
+                    null
+            }
+            {
+                Array.isArray(types) && types.length > 0 ?
+                    <div className={styles['section-container']}>
+                        <span className={styles['section-header']}>Supported types: </span>
+                        <span className={styles['section-label']}>
+                            {
+                                types.length === 1 ?
+                                    types[0]
+                                    :
+                                    types.slice(0, -1).join(', ') + ' & ' + types[types.length - 1]
+                            }
+                        </span>
+                    </div>
+                    :
+                    null
+            }
+            {
+                Array.isArray(catalogs) && catalogs.length > 0 ?
+                    <div className={styles['section-container']}>
+                        <span className={styles['section-header']}>Supported catalogs: </span>
+                        <span className={styles['section-label']}>
+                            {
+                                catalogs.length === 1 ?
+                                    catalogs[0].name
+                                    :
+                                    catalogs.slice(0, -1).map(({ name }) => name).join(', ') + ' & ' + catalogs[catalogs.length - 1].name
+                            }
+                        </span>
+                    </div>
+                    :
+                    null
+            }
+            {
+                !official ?
+                    <div className={styles['section-container']}>
+                        <div className={classnames(styles['section-label'], styles['disclaimer-label'])}>Using third-party add-ons will always be subject to your responsibility and the governing law of the jurisdiction you are located.</div>
+                    </div>
+                    :
+                    null
+            }
         </div>
     );
 };
@@ -127,11 +97,7 @@ AddonPrompt.propTypes = {
     })),
     version: PropTypes.string,
     transportUrl: PropTypes.string,
-    installed: PropTypes.bool,
-    official: PropTypes.bool,
-    cancel: PropTypes.func,
-    onClick: PropTypes.func,
-    toggle: PropTypes.func
+    official: PropTypes.bool
 };
 
 module.exports = AddonPrompt;
diff --git a/src/routes/Addons/AddonPrompt/styles.less b/src/routes/Addons/AddonPrompt/styles.less
index 11249348a..b58aafceb 100644
--- a/src/routes/Addons/AddonPrompt/styles.less
+++ b/src/routes/Addons/AddonPrompt/styles.less
@@ -1,153 +1,54 @@
 .addon-prompt-container {
-    position: relative;
-    z-index: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 3rem 0;
-    background-color: var(--color-surfacelighter);
+    .title-container {
+        font-size: 3rem;
+        font-weight: 300;
+        word-break: break-all;
 
-    .close-button-container {
-        position: absolute;
-        top: 0.5rem;
-        right: 0.5rem;
-        z-index: 1;
-        width: 2.5rem;
-        height: 2.5rem;
-        padding: 0.5rem;
-
-        &:hover {
-            background-color: var(--color-surfacelight);
+        &.title-with-logo-container {
+            &::first-line {
+                line-height: 5rem;
+            }
         }
 
-        .icon {
-            display: block;
-            width: 100%;
-            height: 100%;
-            fill: var(--color-backgrounddarker);
+        .logo-container {
+            width: 5rem;
+            height: 5rem;
+            margin-right: 0.5rem;
+            background-color: var(--color-surfacelight20);
+            float: left;
+
+            .logo {
+                display: block;
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+                object-position: center;
+            }
+        }
+
+        .version-container {
+            font-size: 1.5rem;
+            font-weight: 400;
         }
     }
 
-    .addon-prompt-content {
-        flex-grow: 0;
-        flex-shrink: 1;
-        flex-basis: auto;
-        align-self: stretch;
-        padding: 0 3rem;
-        overflow-y: auto;
+    .section-container {
+        margin-top: 1rem;
 
-        .title-container {
-            font-size: 3rem;
+        .section-header {
+            font-size: 1.2rem;
+        }
+
+        .section-label {
+            font-size: 1.2rem;
             font-weight: 300;
-            word-break: break-all;
 
-            &.title-with-logo-container {
-                &::first-line {
-                    line-height: 5rem;
-                }
+            &.transport-url-label {
+                user-select: text;
             }
 
-            .logo-container {
-                width: 5rem;
-                height: 5rem;
-                margin-right: 0.5rem;
-                background-color: var(--color-surfacelight20);
-                float: left;
-
-                .logo {
-                    display: block;
-                    width: 100%;
-                    height: 100%;
-                    object-fit: contain;
-                    object-position: center;
-                }
-            }
-
-            .version-container {
-                font-size: 1.5rem;
-                font-weight: 400;
-            }
-        }
-
-        .section-container {
-            margin-top: 1rem;
-
-            .section-header {
-                font-size: 1.2rem;
-            }
-
-            .section-label {
-                font-size: 1.2rem;
-                font-weight: 300;
-
-                &.transport-url-label {
-                    user-select: text;
-                }
-
-                &.disclaimer-label {
-                    font-style: italic;
-                }
-            }
-        }
-    }
-
-    .buttons-container {
-        flex: none;
-        align-self: stretch;
-        display: flex;
-        flex-direction: row;
-        margin-top: 2rem;
-        padding: 0 3rem;
-
-        .button-container {
-            flex: 1;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: center;
-            height: 4rem;
-            padding: 0 1rem;
-
-            &:first-child {
-                margin-right: 2rem;
-            }
-
-            .label {
-                flex-grow: 0;
-                flex-shrink: 1;
-                flex-basis: auto;
-                max-height: 2.4em;
-                font-size: 1.3rem;
-                font-weight: 500;
-                text-align: center;
-            }
-        }
-
-        .cancel-button, .uninstall-button {
-            outline-color: var(--color-surfacedark);
-            outline-style: solid;
-
-            &:hover, &:focus {
-                background-color: var(--color-surfacelight);
-            }
-
-            .label {
-                color: var(--color-backgrounddarker);
-            }
-        }
-
-        .install-button {
-            background-color: var(--color-signal5);
-
-            &:hover, &:focus {
-                filter: brightness(1.2);
-            }
-
-            &:focus {
-                outline-color: var(--color-surfacedarker);
-            }
-
-            .label {
-                color: var(--color-surfacelighter);
+            &.disclaimer-label {
+                font-style: italic;
             }
         }
     }
diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index ab5100085..e50f98116 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -1,8 +1,6 @@
 const React = require('react');
-const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-const { Modal, useRouteFocused } = require('stremio-router');
-const { Button, Multiselect, NavBar, TextInput, SharePrompt } = require('stremio/common');
+const { Button, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog } = require('stremio/common');
 const Addon = require('./Addon');
 const AddonPrompt = require('./AddonPrompt');
 const useAddons = require('./useAddons');
@@ -11,7 +9,6 @@ const styles = require('./styles');
 
 const Addons = ({ urlParams, queryParams }) => {
     const inputRef = React.useRef(null);
-    const focusRoute = useRouteFocused();
     const [query, setQuery] = React.useState('');
     const queryOnChange = React.useCallback((event) => {
         setQuery(event.currentTarget.value);
@@ -29,32 +26,13 @@ const Addons = ({ urlParams, queryParams }) => {
             setAddAddonModalOpened(false);
         }
     }, [setSelectedAddon]);
-    React.useEffect(() => {
-        const onKeyUp = (event) => {
-            if (event.key === 'Escape' && typeof close === 'function') {
-                setAddAddonModalOpened(false);
-            }
-        };
-        if (focusRoute) {
-            window.addEventListener('keyup', onKeyUp);
-        }
-        return () => {
-            window.removeEventListener('keyup', onKeyUp);
-        };
-    }, [close, focusRoute]);
-    const promptModalBackgroundOnClick = React.useCallback((event) => {
-        if (!event.nativeEvent.clearSelectedAddonPrevented) {
-            clearSelectedAddon();
-            setAddAddonModalOpened(false);
-            setSharedAddon(null);
-        }
-    }, [clearSelectedAddon]);
-    const promptOnClick = React.useCallback((event) => {
-        event.nativeEvent.clearSelectedAddonPrevented = true;
-    }, []);
     const setInstalledAddon = React.useCallback((currentAddon) => {
         return installedAddons.some((installedAddon) => installedAddon.transportUrl === currentAddon.transportUrl);
     }, [installedAddons]);
+    const toggleAddon = React.useCallback(() => {
+        setInstalledAddon(selectedAddon) ? uninstallSelectedAddon(selectedAddon) : installSelectedAddon(selectedAddon);
+        clearSelectedAddon();
+    });
     return (
         <div className={styles['addons-container']}>
             <NavBar className={styles['nav-bar']} backButton={true} title={'Add-ons'} />
@@ -108,62 +86,77 @@ const Addons = ({ urlParams, queryParams }) => {
                 </div>
                 {
                     addAddonModalOpened ?
-                        <Modal className={styles['prompt-modal-container']} onClick={promptModalBackgroundOnClick}>
-                            <div className={classnames(styles['prompt-container'], styles['add-addon-prompt-container'])}>
-                                <div className={classnames(styles['prompt'], styles['add-addon-prompt'])} onClick={promptOnClick}>
-                                    <Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={() => setAddAddonModalOpened(false)}>
-                                        <Icon className={styles['icon']} icon={'ic_x'} />
-                                    </Button>
-                                    <div className={styles['add-addon-prompt-content']}>
-                                        <div className={styles['add-addon-prompt-label']}>Add add-on</div>
-                                        <TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} placeholder={'Paste url...'} />
-                                        <div className={styles['buttons-container']}>
-                                            <Button className={classnames(styles['button-container'], styles['cancel-button'])} title={'Cancel'} onClick={() => setAddAddonModalOpened(false)}>
-                                                <div className={styles['label']}>Cancel</div>
-                                            </Button>
-                                            <Button className={classnames(styles['button-container'], styles['add-button'])} title={'Add'} onClick={onAddButtonClicked}>
-                                                <div className={styles['label']}>Add</div>
-                                            </Button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </Modal>
+                        <ModalDialog
+                            className={styles['add-addon-prompt-container']}
+                            title={'Add add-on'}
+                            buttons={[
+                                {
+                                    label: 'Cancel',
+                                    className: styles['cancel-button'],
+                                    props: {
+                                        title: 'Cancel',
+                                        onClick: () => setAddAddonModalOpened(false)
+                                    }
+                                },
+                                {
+                                    label: 'Add',
+                                    props: {
+                                        title: 'Add',
+                                        onClick: onAddButtonClicked
+                                    }
+                                }
+                            ]}
+                            onCloseRequest={() => setAddAddonModalOpened(false)}
+                        >
+                            <TextInput ref={inputRef} className={styles['url-content']} type={'text'} tabIndex={'-1'} placeholder={'Paste url...'} />
+                        </ModalDialog>
                         :
                         null
                 }
                 {
                     selectedAddon !== null ?
-                        <Modal className={styles['prompt-modal-container']} onClick={promptModalBackgroundOnClick}>
-                            <div className={classnames(styles['prompt-container'], styles['addon-prompt-container'])}>
-                                <AddonPrompt
-                                    {...selectedAddon.manifest}
-                                    transportUrl={selectedAddon.transportUrl}
-                                    installed={setInstalledAddon(selectedAddon)}
-                                    official={selectedAddon.flags.official}
-                                    className={styles['prompt']}
-                                    cancel={clearSelectedAddon}
-                                    onClick={promptOnClick}
-                                    toggle={() => setInstalledAddon(selectedAddon) ? uninstallSelectedAddon(selectedAddon) : installSelectedAddon(selectedAddon)}
-                                />
-                            </div>
-                        </Modal>
+                        <ModalDialog
+                            className={styles['addon-prompt-container']}
+                            buttons={[
+                                {
+                                    label: 'Cancel',
+                                    className: styles['cancel-button'],
+                                    props: {
+                                        title: 'Cancel',
+                                        onClick: clearSelectedAddon
+                                    }
+                                },
+                                {
+                                    label: setInstalledAddon(selectedAddon) ? 'Uninstall' : 'Install',
+                                    props: {
+                                        title: setInstalledAddon(selectedAddon) ? 'Uninstall' : 'Install',
+                                        onClick: toggleAddon
+                                    }
+                                }
+                            ]}
+                            onCloseRequest={clearSelectedAddon}
+                        >
+                            <AddonPrompt
+                                {...selectedAddon.manifest}
+                                transportUrl={selectedAddon.transportUrl}
+                                installed={setInstalledAddon(selectedAddon)}
+                                official={selectedAddon.flags.official}
+                                className={styles['prompt']}
+                                cancel={clearSelectedAddon}
+                            />
+                        </ModalDialog>
                         :
                         null
                 }
                 {
                     sharedAddon !== null ?
-                        <Modal className={styles['prompt-modal-container']} onClick={promptModalBackgroundOnClick}>
-                            <div className={classnames(styles['prompt-container'], styles['share-prompt-container'])}>
-                                <SharePrompt
-                                    label={'Share add-on'}
-                                    url={sharedAddon.transportUrl}
-                                    className={styles['prompt']}
-                                    close={() => setSharedAddon(null)}
-                                    onClick={promptOnClick}
-                                />
-                            </div>
-                        </Modal>
+                        <ModalDialog className={styles['share-prompt-container']} title={'Share add-on'} onCloseRequest={() => setSharedAddon(null)}>
+                            <SharePrompt
+                                url={sharedAddon.transportUrl}
+                                className={styles['prompt']}
+                                close={() => setSharedAddon(null)}
+                            />
+                        </ModalDialog>
                         :
                         null
                 }
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 5a87e221d..d97a130ea 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -123,145 +123,31 @@
     }
 }
 
-.prompt-modal-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--color-background60);
+.add-addon-prompt-container {
+    width: 30rem;
 
-    .prompt-container {
-        flex: none;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        height: 80%;
-
-        .prompt {
-            flex-grow: 0;
-            flex-shrink: 1;
-            flex-basis: auto;
-            align-self: stretch;
-        }
+    .url-content {
+        flex: 1;
+        width: 100%;
+        padding: 0.5rem;
+        font-size: 0.9rem;
+        color: var(--color-surfacedark);
+        border: thin solid var(--color-surface);
     }
 
-    .add-addon-prompt-container {
-        width: 30rem;
-
-        .add-addon-prompt {
-            position: relative;
-            z-index: 0;
-            display: flex;
-            flex-direction: column;
-            padding: 2.4rem 0;
-            background-color: var(--color-surfacelighter);
-        
-            .close-button-container {
-                position: absolute;
-                top: 0.4rem;
-                right: 0.4rem;
-                z-index: 1;
-                width: 2rem;
-                height: 2rem;
-                padding: 0.4rem;
-        
-                &:hover {
-                    background-color: var(--color-surfacelight);
-                }
-        
-                .icon {
-                    display: block;
-                    width: 100%;
-                    height: 100%;
-                    fill: var(--color-backgrounddarker);
-                }
-            }
-        
-            .add-addon-prompt-content {
-                padding: 0 2.4rem;
-        
-                .add-addon-prompt-label {
-                    margin-bottom: 1.4rem;
-                    font-size: 1.3rem;
-                    color: var(--color-backgrounddarker);
-                }
-    
-                .url-content {
-                    flex: 1;
-                    width: 100%;
-                    padding: 0.5rem;
-                    font-size: 0.9rem;
-                    color: var(--color-surfacedark);
-                    border: thin solid var(--color-surface);
-                }
-
-                .buttons-container {
-                    flex: none;
-                    align-self: stretch;
-                    display: flex;
-                    flex-direction: row;
-                    margin-top: 2rem;
-            
-                    .button-container {
-                        flex: 1;
-                        display: flex;
-                        flex-direction: row;
-                        align-items: center;
-                        justify-content: center;
-                        height: 3rem;
-                        padding: 0 1rem;
-            
-                        &:first-child {
-                            margin-right: 2rem;
-                        }
-            
-                        .label {
-                            flex-grow: 0;
-                            flex-shrink: 1;
-                            flex-basis: auto;
-                            max-height: 2.4em;
-                            font-size: 1.2rem;
-                            text-align: center;
-                        }
-                    }
-            
-                    .cancel-button {
-                        outline-color: var(--color-surfacedark);
-                        outline-style: solid;
-            
-                        &:hover, &:focus {
-                            background-color: var(--color-surfacelight);
-                        }
-            
-                        .label {
-                            color: var(--color-backgrounddarker);
-                        }
-                    }
-            
-                    .add-button {
-                        background-color: var(--color-signal5);
-            
-                        &:hover, &:focus {
-                            filter: brightness(1.2);
-                        }
-            
-                        &:focus {
-                            outline-color: var(--color-surfacedarker);
-                        }
-            
-                        .label {
-                            color: var(--color-surfacelighter);
-                        }
-                    }
-                }
-            }
-        }
+    .cancel-button {
+        background-color: var(--color-surfacedark);
     }
+}
 
-    .addon-prompt-container {
-        width: 50rem;
-    }
+.addon-prompt-container {
+    width: 50rem;
 
-    .share-prompt-container {
-        width: 30rem;
+    .cancel-button {
+        background-color: var(--color-surfacedark);
     }
+}
+
+.share-prompt-container {
+    width: 30rem;
 }
\ No newline at end of file