From f5301456505cb0fd2f528dfd3188296c546bc498 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 4 Mar 2020 14:00:54 +0200
Subject: [PATCH 01/39] scrollbar-thumb hover effect added

---
 src/App/styles.less | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/App/styles.less b/src/App/styles.less
index 8324ce583..37b0758d4 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -43,11 +43,15 @@
 }
 
 ::-webkit-scrollbar-thumb {
-    background-color: var(--color-secondarylighter80);
+    background-color: @color-secondaryvariant2-light1;
+
+    &:hover {
+        background-color: @color-secondaryvariant2-light2;
+    }
 }
 
 ::-webkit-scrollbar-track {
-    background-color: var(--color-backgroundlight);
+    background-color: @color-background-dark2;
 }
 
 svg {

From 8ce2beb8186a94542cd6bc4747643ebea7c0a3b1 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 4 Mar 2020 14:03:59 +0200
Subject: [PATCH 02/39] tabIndex -1 for addon buttons; 'share' addon label
 uppercase

---
 src/routes/Addons/Addon/Addon.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/Addons/Addon/Addon.js b/src/routes/Addons/Addon/Addon.js
index 3c97cd1bb..f2922e212 100644
--- a/src/routes/Addons/Addon/Addon.js
+++ b/src/routes/Addons/Addon/Addon.js
@@ -42,7 +42,7 @@ const Addon = ({ className, id, name, version, logo, description, types, install
         );
     }, []);
     return (
-        <Button className={classnames(className, styles['addon-container'])} onKeyDown={onKeyDown}>
+        <Button className={classnames(className, styles['addon-container'])} tabIndex={-1} onKeyDown={onKeyDown}>
             <div className={styles['logo-container']}>
                 <Image
                     className={styles['logo']}
@@ -82,12 +82,12 @@ const Addon = ({ className, id, name, version, logo, description, types, install
                 }
             </div>
             <div className={styles['buttons-container']}>
-                <Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? 'Uninstall' : 'Install'} tabIndex={-1} onClick={toggleButtonOnClick}>
+                <Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? 'Uninstall' : 'Install'} onClick={toggleButtonOnClick}>
                     <div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div>
                 </Button>
-                <Button className={styles['share-button-container']} title={'Share addon'} tabIndex={-1} onClick={shareButtonOnClick}>
+                <Button className={styles['share-button-container']} title={'SHARE ADDON'} onClick={shareButtonOnClick}>
                     <Icon className={styles['icon']} icon={'ic_share'} />
-                    <div className={styles['label']}>Share addon</div>
+                    <div className={styles['label']}>SHARE ADDON</div>
                 </Button>
             </div>
         </Button>

From 4bb917d2a28fa0cf78a9bda3faf7bb5a75f73683 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 4 Mar 2020 14:14:47 +0200
Subject: [PATCH 03/39] Addon styles adapted to design changes

---
 src/routes/Addons/Addon/styles.less | 79 +++++++++++++++++------------
 1 file changed, 46 insertions(+), 33 deletions(-)

diff --git a/src/routes/Addons/Addon/styles.less b/src/routes/Addons/Addon/styles.less
index e57eea428..2d26d843a 100644
--- a/src/routes/Addons/Addon/styles.less
+++ b/src/routes/Addons/Addon/styles.less
@@ -1,16 +1,18 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .addon-container {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    padding: 1rem;
-    background-color: var(--color-backgroundlighter);
+    padding: 1.5rem;
+    background-color: @color-background;
     cursor: inherit;
 
     .logo-container {
         flex: none;
-        width: 8rem;
-        height: 8rem;
-        background-color: var(--color-backgrounddarker);
+        width: 6rem;
+        height: 6rem;
+        background-color: @color-surface-light5;
 
         .logo {
             display: block;
@@ -26,7 +28,7 @@
             width: 100%;
             height: 100%;
             padding: 1rem;
-            fill: var(--color-surfacelighter);
+            fill: @color-secondaryvariant1-light3;
         }
     }
 
@@ -47,7 +49,8 @@
             padding: 0 0.5rem;
             max-height: 3.6em;
             font-size: 1.6rem;
-            color: var(--color-surfacelighter);
+            opacity: 0.9;
+            color: @color-surface-light5;
         }
 
         .version-container {
@@ -57,7 +60,8 @@
             margin-top: 0.5rem;
             padding: 0 0.5rem;
             max-height: 2.4em;
-            color: var(--color-surfacelight);
+            opacity: 0.6;
+            color: @color-surface-light5;
         }
 
         .types-container {
@@ -67,7 +71,8 @@
             margin-top: 0.5rem;
             padding: 0 0.5rem;
             max-height: 2.4em;
-            color: var(--color-surfacelight);
+            opacity: 0.4;
+            color: @color-surface-light5;
             text-transform: capitalize;
         }
 
@@ -78,7 +83,8 @@
             margin-top: 0.5rem;
             padding: 0 0.5rem;
             max-height: 4.8em;
-            color: var(--color-surfacelight);
+            opacity: 0.9;
+            color: @color-surface-light5;
         }
     }
 
@@ -91,7 +97,7 @@
             flex-direction: row;
             align-items: center;
             justify-content: center;
-            height: 3.5rem;
+            height: 4rem;
             padding: 0 1rem;
 
             &:not(:first-child) {
@@ -100,8 +106,8 @@
 
             .icon {
                 flex: none;
-                width: 1.5rem;
-                height: 1.5rem;
+                width: 2rem;
+                height: 2rem;
                 margin-right: 1rem;
             }
 
@@ -117,57 +123,64 @@
         }
 
         .install-button-container {
-            background-color: var(--color-signal5);
+            background-color: @color-accent3;
 
             &:hover {
-                filter: brightness(1.2);
+                background-color: @color-accent3-light2;
+            }
+
+            &:focus {
+                outline-color: @color-surface-light5;
             }
 
             .label {
-                color: var(--color-surfacelighter);
+                color: @color-surface-light5;
             }
         }
 
         .uninstall-button-container {
-            outline-color: var(--color-surfacedark);
+            outline-color: @color-background-light3;
             outline-style: solid;
 
             &:hover {
-                outline-color: var(--color-surfacelight);
+                background-color: @color-background-light2;
+            }
 
-                .label {
-                    color: var(--color-surfacelight);
-                }
+            &:focus {
+                outline-color: @color-surface-light5;
             }
 
             .label {
-                color: var(--color-surfacedark);
+                opacity: 0.9;
+                color: @color-surface-light5;
             }
         }
 
         .share-button-container {
-            outline-color: var(--color-secondarylighter);
-            outline-style: solid;
-
-            &:hover {
-                outline: none;
-                background: var(--color-secondarylight);
-
+            &:hover, &:focus {
                 .icon {
-                    fill: var(--color-surfacelighter);
+                    fill: @color-secondaryvariant1-light1;
                 }
 
                 .label {
-                    color: var(--color-surfacelighter);
+                    text-decoration: underline;
+                    color: @color-secondaryvariant1-light2;
                 }
             }
 
+            &:focus {
+                outline: none;
+                background-color: @color-surface-light5-20;
+            }
+
             .icon {
-                fill: var(--color-secondarylighter);
+                opacity: 0.6;
+                fill: @color-secondaryvariant1-dark1;
             }
 
             .label {
-                color: var(--color-secondarylighter);
+                opacity: 0.9;
+                color: @color-secondaryvariant1;
             }
         }
     }

From 0cba5ec893291545b7be02f05da5758a15c22a77 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 4 Mar 2020 15:13:01 +0200
Subject: [PATCH 04/39] Multiselect label styles adapted to design changes

---
 src/common/Multiselect/styles.less | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/common/Multiselect/styles.less b/src/common/Multiselect/styles.less
index bb1589483..b44062e80 100644
--- a/src/common/Multiselect/styles.less
+++ b/src/common/Multiselect/styles.less
@@ -1,3 +1,5 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 :import('~stremio/common/Popup/styles.less') {
     popup-menu-container: menu-container;
 }
@@ -7,7 +9,15 @@
     flex-direction: row;
     align-items: center;
     padding: 0 1rem;
-    background-color: var(--color-backgroundlighter);
+    background-color: @color-background;
+
+    &:hover, &:focus {
+        background-color: @color-background-light2;
+    }
+
+    &:focus {
+        outline-color: @color-surface-light5;
+    }
 
     &:global(.active) {
         background-color: var(--color-surfacelight);
@@ -24,7 +34,8 @@
     .label {
         flex: 1;
         max-height: 2.4em;
-        color: var(--color-surfacelighter);
+        opacity: 0.9;
+        color: @color-surface-light5;
     }
 
     .icon {
@@ -32,7 +43,7 @@
         width: 1rem;
         height: 1rem;
         margin-left: 1rem;
-        fill: var(--color-surfacelighter);
+        fill: @color-surface-light5;
     }
 
     .popup-menu-container {
@@ -47,7 +58,7 @@
             flex-direction: row;
             align-items: center;
             padding: 1rem;
-            background-color: var(--color-backgroundlighter);
+            background-color: @color-background;
 
             &:global(.selected) {
                 background-color: var(--color-surfacedarker);

From 97dc57f299f1ee4d9e867edb9d28c18757fb0c35 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 4 Mar 2020 16:08:58 +0200
Subject: [PATCH 05/39] Addons notice added; select input catalog options
 rendered as buttons

---
 src/routes/Addons/Addons.js | 40 +++++++++++++++++++++++++------------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 51a9eda78..07064ae48 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -1,5 +1,6 @@
 const React = require('react');
 const PropTypes = require('prop-types');
+const classnames = require('classnames');
 const { useRouteFocused } = require('stremio-router');
 const Icon = require('stremio-icons/dom');
 const { AddonDetailsModal, Button, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
@@ -86,27 +87,40 @@ const Addons = ({ urlParams, queryParams }) => {
         <div className={styles['addons-container']}>
             <NavBar className={styles['nav-bar']} backButton={true} title={'Addons'} />
             <div className={styles['addons-content']}>
-                <div className={styles['selectable-inputs-container']}>
-                    <Button className={styles['add-button-container']} title={'Add addon'} onClick={openAddAddonModal}>
-                        <Icon className={styles['icon']} icon={'ic_plus'} />
-                        <div className={styles['add-button-label']}>Add addon</div>
+                <div className={styles['notice-container']}>
+                    <Button className={styles['close-button-container']} title={'dismiss'}>
+                        <div className={styles['label']}>dismiss</div>
+                        <Icon className={styles['icon']} icon={'ic_x'} />
                     </Button>
-                    {selectInputs.map((selectInput, index) => (
-                        <Multiselect
-                            {...selectInput}
-                            key={index}
-                            className={styles['select-input-container']}
-                        />
-                    ))}
+                    <div className={styles['notice']}>
+                        <Icon className={styles['icon']} icon={'ic_addons'} />
+                        <div className={styles['label']}>This is your addon catalogue - here you can search and install addons to improve your watching experience.</div>
+                    </div>
+                </div>
+                <div className={styles['selectable-inputs-container']}>
+                    <div className={styles['selectable-inputs']}>
+                        <Button className={styles['add-button-container']} title={'Add addon'} onClick={openAddAddonModal}>
+                            <Icon className={styles['icon']} icon={'ic_plus'} />
+                            <div className={styles['add-button-label']}>Add addon</div>
+                        </Button>
+                        <Multiselect {...selectInputs[1]} className={styles['select-input-container']} />
+                        <div className={styles['select-input-options']}>
+                            {selectInputs[0].options.map((option, index) => (
+                                <Button key={index} className={classnames(styles['option-container'], { 'selected': selectInputs[0].selected.includes(option.value) })} onClick={() => selectInputs[0].onSelect(option)}>
+                                    {option.label} addons
+                                </Button>
+                            ))}
+                        </div>
+                    </div>
                     <label className={styles['search-bar-container']}>
-                        <Icon className={styles['icon']} icon={'ic_search'} />
                         <TextInput
                             className={styles['search-input']}
                             type={'text'}
-                            placeholder={'Search addons...'}
+                            placeholder={'Search addons'}
                             value={search}
                             onChange={searchInputOnChange}
                         />
+                        <Icon className={styles['icon']} icon={'ic_search'} />
                     </label>
                 </div>
                 {

From 94d07ecb2336f5c03015f26e1944eec51b6542df Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 4 Mar 2020 16:21:11 +0200
Subject: [PATCH 06/39] Addons screen styles adapted to design changes

---
 src/routes/Addons/styles.less | 231 ++++++++++++++++++++++++++--------
 1 file changed, 181 insertions(+), 50 deletions(-)

diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index f7ef52dcd..83531e8fa 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -1,3 +1,5 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 :import('~stremio/common/Multiselect/styles.less') {
     multiselect-menu-container: menu-container;
 }
@@ -7,7 +9,7 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
-    background-color: var(--color-background);
+    background-color: @color-background-dark2;
 
     .nav-bar {
         flex: none;
@@ -16,96 +18,225 @@
 
     .addons-content {
         flex: 1;
-        align-self: stretch;
         display: flex;
         flex-direction: column;
+        align-self: stretch;
+        padding-top: 1.5rem;
+
+        .notice-container {
+            position: relative;
+            z-index: 0;
+            display: flex;
+            flex-direction: column;
+            margin: 1.5rem 3rem 0 3rem;
+            padding: 1.5rem;
+            background-color: @color-background;
+
+            .close-button-container {
+                position: absolute;
+                top: 0.5rem;
+                right: 0.5rem;
+                bottom: auto;
+                left: auto;
+                z-index: 1;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                padding: 0.5rem;
+
+                &:hover, &:focus {
+                    .label {
+                        color: @color-secondaryvariant1-light1;
+                    }
+
+                    .icon {
+                        fill: @color-secondaryvariant1-light1;
+                    }
+                }
+
+                &:focus {
+                    outline: none;
+                    background-color: @color-surface-light5-20;
+
+                    .label {
+                        text-decoration: underline;
+                    }
+                }
+
+                .label {
+                    margin-right: 0.5rem;
+                    opacity: 0.9;
+                    color: @color-secondaryvariant1-dark1;
+                }
+
+                .icon {
+                    width: 0.8rem;
+                    height: 0.8rem;
+                    fill: @color-secondaryvariant1-dark1;
+                }
+            }
+
+            .notice {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+
+                .icon {
+                    width: 2.3rem;
+                    height: 2.3rem;
+                    margin-right: 1rem;
+                    fill: @color-secondaryvariant2;
+                }
+
+                .label {
+                    font-size: 1.1rem;
+                    opacity: 0.9;
+                    color: @color-secondaryvariant1-light1;
+                }
+            }
+        }
 
         .selectable-inputs-container {
             flex: none;
             align-self: stretch;
             display: flex;
             flex-direction: row;
-            padding: 1.5rem;
+            justify-content: space-between;
+            padding: 1.5rem 3rem;
             overflow: visible;
 
-            .add-button-container {
-                flex: none;
+            .selectable-inputs {
+                flex: 1;
                 display: flex;
                 flex-direction: row;
-                align-items: center;
-                height: 3rem;
-                max-width: 15rem;
                 margin-right: 1.5rem;
-                padding: 0 1rem;
-                background-color: var(--color-signal5);
+                overflow: visible;
 
-                &:hover {
-                    filter: brightness(1.2);
-                }
-
-                .icon {
+                .add-button-container {
                     flex: none;
-                    width: 1.2rem;
-                    height: 1.2rem;
-                    margin-right: 1rem;
-                    fill: var(--color-surfacelighter);
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    justify-content: center;
+                    width: 10rem;
+                    height: 3.5rem;
+                    margin-right: 1.5rem;
+                    padding: 0 1rem;
+                    background-color: @color-accent3;
+
+                    &:hover {
+                        background-color: @color-accent3-light2;
+                    }
+
+                    &:focus {
+                        outline-color: @color-surface-light5;
+                    }
+
+                    .icon {
+                        flex: none;
+                        width: 1.2rem;
+                        height: 1.2rem;
+                        margin-right: 1rem;
+                        fill: @color-surface-light5;
+                    }
+
+                    .add-button-label {
+                        flex-grow: 0;
+                        flex-shrink: 1;
+                        flex-basis: auto;
+                        max-height: 2.4em;
+                        font-size: 1.1rem;
+                        color: @color-surface-light5;
+                    }
                 }
 
-                .add-button-label {
+                .select-input-container {
                     flex-grow: 0;
                     flex-shrink: 1;
-                    flex-basis: auto;
-                    max-height: 2.4em;
-                    font-size: 1.1rem;
-                    color: var(--color-surfacelighter);
+                    flex-basis: 15rem;
+                    height: 3.5rem;
+                    margin-right: 1.5rem;
+
+                    .multiselect-menu-container {
+                        max-height: calc(3.2rem * 7);
+                        overflow: auto;
+                    }
                 }
-            }
 
-            .select-input-container {
-                flex-grow: 0;
-                flex-shrink: 1;
-                flex-basis: 15rem;
-                height: 3rem;
-                margin-right: 1.5rem;
+                .select-input-options {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
 
-                .multiselect-menu-container {
-                    max-height: calc(3.2rem * 7);
-                    overflow: auto;
+                    .option-container {
+                        padding: 0.5rem;
+                        opacity: 0.9;
+                        color: @color-primary-light2;
+
+                        &:hover, &:focus {
+                            color: @color-primary-light4;
+                        }
+
+                        &:focus {
+                            outline: none;
+                            background-color: @color-surface-light5-20;
+                        }
+
+                        &:global(.selected) {
+                            opacity: 0.9;
+                            text-decoration: underline;
+                            color: @color-primaryvariant1;
+
+                            &:hover, &:focus {
+                                color: @color-primaryvariant1-light2;
+                            }
+                        }
+
+                        &:not(:last-child) {
+                            margin-right: 1rem;
+                        }
+                    }
                 }
             }
 
             .search-bar-container {
                 flex-grow: 0;
                 flex-shrink: 1;
-                flex-basis: 15rem;
+                flex-basis: 18rem;
                 display: flex;
                 flex-direction: row;
                 align-items: center;
-                height: 3rem;
+                height: 3.5rem;
                 padding: 0 1rem;
-                background-color: var(--color-backgroundlighter);
+                border-radius: 2.3rem;
+                border: var(--focus-outline-size) solid transparent;
+                background-color: @color-background;
                 cursor: text;
 
                 &:hover, &:focus-within {
-                    filter: brightness(1.2);
+                    background-color: @color-background-light2;
+                }
+
+                &:focus-within {
+                    border: var(--focus-outline-size) solid @color-surface-light5;
                 }
 
                 .icon {
                     flex: none;
-                    width: 1.2rem;
-                    height: 1.2rem;
-                    margin-right: 1rem;
-                    fill: var(--color-surfacelighter);
+                    width: 1.5rem;
+                    height: 1.5rem;
+                    fill: @color-secondaryvariant1;
                 }
 
                 .search-input {
                     flex: 1;
-                    color: var(--color-surfacelighter);
+                    font-size: 1.1rem;
+                    color: @color-surface-light5;
 
                     &::placeholder {
                         max-height: 1.2em;
-                        opacity: 1;
-                        color: var(--color-surfacelight);
+                        opacity: 0.9;
+                        color: @color-secondaryvariant1-light1;
                     }
                 }
             }
@@ -116,13 +247,13 @@
             align-self: stretch;
             padding: 0 1.5rem;
             font-size: 2rem;
-            color: var(--color-surfacelighter);
+            color: @color-surface-light5;
         }
 
         .addons-list-container {
             flex: 1;
             align-self: stretch;
-            padding: 0 1.5rem;
+            padding: 0 3rem;
             overflow-y: auto;
 
             .addon {
@@ -136,12 +267,12 @@
     .addon-url-input {
         width: 25rem;
         padding: 0.5rem 1rem;
-        color: var(--color-surfacedark);
-        border: thin solid var(--color-surface);
+        color: @color-surface;
+        border: thin solid @color-surface;
     }
 
     .cancel-button {
-        background-color: var(--color-surfacedark);
+        background-color: @color-surface;
     }
 }
 

From 21f41d8d2ef4e83208459f392d979bf5fbda9c34 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 4 Mar 2020 19:04:27 +0200
Subject: [PATCH 07/39] yarn lock updated

---
 yarn.lock | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index fd7c395da..eb59144a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10443,8 +10443,8 @@ stream-shift@^1.0.0:
   integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
 
 "stremio-colors@git+ssh://git@github.com/Stremio/stremio-colors.git#v3.0.0":
-  version "2.0.4"
-  resolved "git+ssh://git@github.com/Stremio/stremio-colors.git#0fd22b41b4246dd92182727b49ef9e4a67413202"
+  version "3.0.0"
+  resolved "git+ssh://git@github.com/Stremio/stremio-colors.git#897c9569a167b9f881af9f4b5433ae9644408be3"
 
 "stremio-core-web@git+ssh://git@github.com/stremio/stremio-core-web.git#da5b37865004d0ae140518c4f276d1ed1a1483d9":
   version "0.6.0"

From 7c69187a98e73cdaed407e9d31e11ada8c49c732 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 6 Mar 2020 16:03:10 +0200
Subject: [PATCH 08/39] color theme applied to button

---
 src/common/Button/styles.less | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/common/Button/styles.less b/src/common/Button/styles.less
index 53f567ed4..30e39c7f7 100644
--- a/src/common/Button/styles.less
+++ b/src/common/Button/styles.less
@@ -1,6 +1,8 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .button-container {
     outline-width: var(--focus-outline-size);
-    outline-color: var(--color-surfacelighter);
+    outline-color: @color-surface-light5;
     outline-offset: calc(-1 * var(--focus-outline-size));
     cursor: pointer;
 

From aa8c02da75084086def9bb07e03e7687f3c95be9 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 6 Mar 2020 16:20:53 +0200
Subject: [PATCH 09/39] ModalDIalog title moved below close button

---
 src/common/ModalDialog/ModalDialog.js | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js
index 0ec3360ef..bfcc247ef 100644
--- a/src/common/ModalDialog/ModalDialog.js
+++ b/src/common/ModalDialog/ModalDialog.js
@@ -54,17 +54,15 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
     return (
         <Modal ref={modalContainerRef} {...props} className={classnames(className, styles['modal-container'])} onMouseDown={onModalContainerMouseDown}>
             <div className={styles['modal-dialog-container']} onMouseDown={onModalDialogContainerMouseDown}>
-                <div className={styles['header-container']}>
-                    {
-                        typeof title === 'string' && title.length > 0 ?
-                            <div className={styles['title-container']} title={title}>{title}</div>
-                            :
-                            null
-                    }
-                    <Button className={styles['close-button-container']} title={'Close'} onClick={closeButtonOnClick}>
-                        <Icon className={styles['icon']} icon={'ic_x'} />
-                    </Button>
-                </div>
+                <Button className={styles['close-button-container']} title={'Close'} onClick={closeButtonOnClick}>
+                    <Icon className={styles['icon']} icon={'ic_x'} />
+                </Button>
+                {
+                    typeof title === 'string' && title.length > 0 ?
+                        <div className={styles['title-container']} title={title}>{title}</div>
+                        :
+                        null
+                }
                 <div className={styles['modal-dialog-content']}>
                     {children}
                 </div>

From 00e7a987ff3e4ecabfc6dcb46d427f88bc0fa23b Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 6 Mar 2020 16:21:38 +0200
Subject: [PATCH 10/39] ModalDialog styles adapted to design changes

---
 src/common/ModalDialog/styles.less | 95 ++++++++++++++----------------
 1 file changed, 43 insertions(+), 52 deletions(-)

diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index d14526017..3ceaafe69 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -1,66 +1,59 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .modal-container {
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: var(--color-backgrounddark40);
+    background-color: @color-background-dark5-40;
 
     .modal-dialog-container {
         flex: none;
         display: flex;
         flex-direction: column;
-        max-width: 80%;
+        width: 38rem;
         max-height: 80%;
-        background-color: var(--color-surfacelighter);
+        background-color: @color-surface-light5;
 
-        .header-container {
+        .close-button-container {
             flex: none;
-            align-self: stretch;
-            display: flex;
-            flex-direction: row;
-            justify-content: flex-end;
-            padding: 0.2rem 0.2rem 0;
+            align-self: flex-end;
+            width: 2rem;
+            height: 2rem;
+            margin: 0.2rem 0.2rem 0 0;
+            padding: 0.5rem;
 
-            .title-container {
-                flex: 1;
-                align-self: center;
-                max-height: 2.4em;
-                padding: 0 0.5rem;
-                font-size: 1.2rem;
-                color: var(--color-backgrounddarker);
+            .icon {
+                display: block;
+                width: 100%;
+                height: 100%;
+                fill: @color-surface-dark1;
             }
 
-            .close-button-container {
-                flex: none;
-                align-self: flex-start;
-                width: 2rem;
-                height: 2rem;
-                padding: 0.5rem;
-
+            &:hover, &:focus {
                 .icon {
-                    display: block;
-                    width: 100%;
-                    height: 100%;
-                    fill: var(--color-surfacedark);
-                }
-
-                &:hover, &:focus {
-                    background-color: var(--color-surfacelight);
-
-                    .icon {
-                        fill: var(--color-surfacedarker);
-                    }
-                }
-
-                &:focus {
-                    outline-color: var(--color-surfacedark);
+                    fill: @color-surface-light1;
                 }
             }
+
+            &:focus {
+                outline-color: @color-background-dark5;
+            }
+        }
+
+        .title-container {
+            flex: 1 0 auto;
+            max-height: 2.4em;
+            margin: 0 2rem;
+            font-size: 1.2rem;
+            font-weight: 500;
+            opacity: 0.9;
+            color: @color-background-dark5;
         }
 
         .modal-dialog-content {
             flex: 1;
             align-self: stretch;
-            margin: 2rem 1rem 0;
+            margin: 1.5rem 1rem 0;
             padding: 0 1rem;
             overflow-y: auto;
 
@@ -72,7 +65,7 @@
         .buttons-container {
             flex: none;
             align-self: stretch;
-            margin: 1rem 2rem 0;
+            margin: 2rem 2rem 0;
             display: flex;
             flex-direction: row;
             flex-wrap: wrap;
@@ -90,17 +83,15 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    padding: 1rem;
-    background-color: var(--color-signal5);
-
-    &:focus {
-        outline-width: calc(1.5 * var(--focus-outline-size));
-        outline-color: var(--color-surfacelighter);
-        outline-offset: calc(-2 * var(--focus-outline-size));
-    }
+    padding: 1.2rem;
+    background-color: @color-accent3;
 
     &:hover {
-        filter: brightness(1.2);
+        background-color: @color-accent3-light2;
+    }
+
+    &:focus {
+        outline-color: @color-background-dark5;
     }
 
     &:not(:last-child) {
@@ -112,7 +103,7 @@
         width: 1.2rem;
         height: 1.2rem;
         margin-right: .5rem;
-        fill: var(--color-surfacelighter);
+        fill: @color-surface-light5;
     }
 
     .label {
@@ -122,6 +113,6 @@
         max-height: 3.6em;
         font-size: 1.1rem;
         text-align: center;
-        color: var(--color-surfacelighter);
+        color: @color-surface-light5;
     }
 }
\ No newline at end of file

From 02fce7003415db85adf9bce80a10422e30b011fd Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 6 Mar 2020 16:24:49 +0200
Subject: [PATCH 11/39] AddonDetailsModal styles adapted to design changes

---
 src/common/AddonDetailsModal/styles.less | 32 ++++++++++++++++--------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/common/AddonDetailsModal/styles.less b/src/common/AddonDetailsModal/styles.less
index 146dc9a2f..1c067a01d 100644
--- a/src/common/AddonDetailsModal/styles.less
+++ b/src/common/AddonDetailsModal/styles.less
@@ -1,10 +1,11 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 :import('~stremio/common/ModalDialog/styles.less') {
     label: label;
 }
 
 .addon-details-modal-container {
     .addon-details-container, .addon-details-message-container {
-        width: 60rem;
         max-width: 100%;
     }
 
@@ -15,20 +16,29 @@
         }
     }
 
-    .cancel-button, .uninstall-button {
-        background-color: transparent;
-        outline-width: var(--focus-outline-size);
-        outline-offset: calc(-1 * var(--focus-outline-size));
-        outline-color: var(--color-surfacedarker);
-        outline-style: solid;
+    .uninstall-button, .cancel-button {
+        &:focus {
+            outline-color: @color-background-dark5;
+        }
+    }
 
-        &:hover, &:focus {
-            filter: none;
-            background: var(--color-surfacelight);
+    .cancel-button {
+        background-color: transparent;
+
+        &:hover {
+            background-color: @color-surface-light3;
         }
 
         .label {
-            color: var(--color-surfacedarker);
+            color: @color-surface-dark2;
+        }
+    }
+
+    .uninstall-button {
+        background-color: @color-accent2;
+
+        &:hover {
+            background-color: @color-accent2-light2;
         }
     }
 }
\ No newline at end of file

From 2282720509e362a30cbf60cd8fbb714abc6298f9 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 6 Mar 2020 16:37:17 +0200
Subject: [PATCH 12/39] AddonDetails version moved in title container

---
 .../AddonDetails/AddonDetails.js              | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/common/AddonDetailsModal/AddonDetails/AddonDetails.js b/src/common/AddonDetailsModal/AddonDetails/AddonDetails.js
index d2c43e9c5..4e0de5e73 100644
--- a/src/common/AddonDetailsModal/AddonDetails/AddonDetails.js
+++ b/src/common/AddonDetailsModal/AddonDetails/AddonDetails.js
@@ -20,21 +20,20 @@ const AddonDetails = ({ className, id, name, version, logo, description, types,
                     alt={' '}
                     renderFallback={renderLogoFallback}
                 />
-                <span className={styles['name']}>{typeof name === 'string' && name.length > 0 ? name : id}</span>
+                <div className={styles['name-container']}>
+                    <span className={styles['name']}>{typeof name === 'string' && name.length > 0 ? name : id}</span>
+                    {
+                        typeof version === 'string' && version.length > 0 ?
+                            <span className={styles['version']}>v. {version}</span>
+                            :
+                            null
+                    }
+                </div>
             </div>
             {
                 typeof description === 'string' && description.length > 0 ?
                     <div className={styles['section-container']}>
-                        <span className={styles['section-header']}>{description}</span>
-                    </div>
-                    :
-                    null
-            }
-            {
-                typeof version === 'string' && version.length > 0 ?
-                    <div className={styles['section-container']}>
-                        <span className={styles['section-header']}>Version: </span>
-                        <span className={styles['section-label']}>{version}</span>
+                        <span className={styles['section-label']}>{description}</span>
                     </div>
                     :
                     null

From f3cdd064f946c1862b2d0e4a2c3684eb1e8fb3d0 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 6 Mar 2020 16:37:42 +0200
Subject: [PATCH 13/39] AddonDetails styles adapted to design changes

---
 .../AddonDetails/styles.less                  | 45 +++++++++++++++----
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/common/AddonDetailsModal/AddonDetails/styles.less b/src/common/AddonDetailsModal/AddonDetails/styles.less
index 2d69af547..577dc7e5e 100644
--- a/src/common/AddonDetailsModal/AddonDetails/styles.less
+++ b/src/common/AddonDetailsModal/AddonDetails/styles.less
@@ -1,12 +1,19 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .addon-details-container {
     .title-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
         .logo, .icon {
+            flex: none;
             float: left;
             width: 5rem;
             height: 5rem;
             margin-right: 1rem;
             padding: 0.5rem;
-            background-color: var(--color-backgrounddarker);
+            background-color: @color-background-dark5;
         }
 
         .logo {
@@ -15,13 +22,33 @@
         }
 
         .icon {
-            fill: var(--color-surfacelighter);
+            fill: @color-secondaryvariant1-light3;
         }
 
-        .name {
-            font-size: 2.4rem;
-            font-weight: 300;
-            line-height: 5rem;
+        .name-container {
+            display: flex;
+            flex-direction: row;
+            align-items: baseline;
+            width: 100%;
+
+            .name {
+                margin-right: 1rem;
+                max-width: 80%;
+                max-height: 1.2em;
+                white-space: pre;
+                text-overflow: ellipsis;
+                font-size: 2rem;
+                font-weight: 300;
+                opacity: 0.9;
+            }
+
+            .version {
+                max-width: 20%;
+                max-height: 1.2em;
+                white-space: pre;
+                text-overflow: ellipsis;
+                opacity: 0.6;
+            }
         }
     }
 
@@ -29,12 +56,14 @@
         margin-top: 1rem;
 
         .section-header {
-            font-size: 1.2rem;
+            font-size: 1.1rem;
+            opacity: 0.9;
         }
 
         .section-label {
-            font-size: 1.2rem;
+            font-size: 1.1rem;
             font-weight: 300;
+            opacity: 0.9;
 
             &.transport-url-label {
                 user-select: text;

From 139dbeb4db5de0253635c7bb4fcab1d7864bce10 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 6 Mar 2020 16:41:29 +0200
Subject: [PATCH 14/39] SharePrompt url tabIndex added

---
 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 dabe71f1e..e37521007 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -38,7 +38,7 @@ const SharePrompt = ({ className, url }) => {
                     <div className={styles['label']}>Twitter</div>
                 </Button>
             </div>
-            <div className={styles['url-container']}>
+            <div className={styles['url-container']} tabIndex={0}>
                 <TextInput
                     ref={inputRef}
                     className={styles['url-text-input']}

From 37f0b56e1d86f0146f3a40a65b5f0c0ce2d45ad6 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 6 Mar 2020 16:43:45 +0200
Subject: [PATCH 15/39] SharePrompt styles adapted to design changes

---
 src/common/SharePrompt/styles.less | 80 ++++++++++++++++++------------
 1 file changed, 48 insertions(+), 32 deletions(-)

diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index 7deac93f2..059adbb67 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -1,15 +1,12 @@
-.share-prompt-container {
-    min-width: 18rem;
-    background: var(--color-surfacelighter);
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
 
+.share-prompt-container {
     .buttons-container {
         display: flex;
         flex-direction: row;
 
         .button-container {
-            flex-grow: 0;
-            flex-shrink: 1;
-            flex-basis: 14rem;
+            flex: 1;
             display: flex;
             flex-direction: row;
             align-items: center;
@@ -20,20 +17,11 @@
                 margin-right: 1rem;
             }
 
-            &:hover {
-                filter: brightness(1.2);
-            }
-
-            &:focus {
-                outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
-                outline-offset: calc(-2 * var(--focus-outline-size));
-            }
-
             .icon {
                 flex: none;
                 height: 1.2rem;
                 margin-right: 1rem;
-                fill: var(--color-surfacelighter);
+                fill: @color-surface-light5;
             }
 
             .label {
@@ -41,18 +29,33 @@
                 flex-shrink: 1;
                 flex-basis: auto;
                 max-height: 2.4em;
+                font-size: 1.1rem;
                 font-weight: 500;
                 text-align: center;
-                color: var(--color-surfacelighter);
+                color: @color-surface-light5;
+            }
+        }
+
+        .facebook-button, .twitter-button {
+            &:focus {
+                outline-color: @color-background-dark5;
             }
         }
 
         .facebook-button {
-            background-color: var(--color-facebook);
+            background-color: @color-secondary;
+
+            &:hover {
+                background-color: @color-secondary-light2;
+            }
         }
 
         .twitter-button {
-            background-color: var(--color-twitter);
+            background-color: @color-secondaryvariant2-light1;
+
+            &:hover {
+                background-color: @color-secondaryvariant2-light2;
+            }
         }
     }
 
@@ -60,15 +63,32 @@
         display: flex;
         flex-direction: row;
         margin-top: 1rem;
-        border: thin solid var(--color-surface);
+        background-color: @color-surface-light2;
+
+        &:hover {
+            .url-text-input {
+                background-color: @color-surface-light4;
+            }
+
+            .copy-button {
+                background-color: @color-accent3-light2;
+            }
+        }
+
+        &:focus {
+            outline-style: solid;
+            outline-width: var(--focus-outline-size);
+            outline-color: @color-background-dark5;
+            outline-offset: calc(-1 * var(--focus-outline-size));
+        }
 
         .url-text-input {
             flex: 1;
             align-self: stretch;
             padding: 1rem;
-            color: var(--color-backgroundlighter);
+            font-size: 1.1rem;
             text-align: center;
-            border-right: thin solid var(--color-surface);
+            color: @color-background-dark5;
         }
 
         .copy-button {
@@ -79,16 +99,11 @@
             align-items: center;
             justify-content: center;
             width: 8rem;
-            padding: 0.5rem;
-            background-color: var(--color-surface);
-
-            &:hover {
-                filter: brightness(1.2);
-            }
+            padding: 1rem;
+            background-color: @color-accent3;
 
             &:focus {
-                outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
-                outline-offset: calc(-1.5 * var(--focus-outline-size));
+                outline: none;
             }
 
             .icon {
@@ -96,7 +111,7 @@
                 width: 1.2rem;
                 height: 1.2rem;
                 margin-right: 0.5rem;
-                fill: var(--color-surfacedarker);
+                fill: @color-surface-light5;
             }
 
             .label {
@@ -104,7 +119,8 @@
                 flex-shrink: 1;
                 flex-basis: auto;
                 max-height: 2.4em;
-                color: var(--color-surfacedarker);
+                font-size: 1.1rem;
+                color: @color-surface-light5;
             }
         }
     }

From af7970b2bdc2db4d5ff3d6bbd0a76cdf3c2045a4 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 6 Mar 2020 18:18:25 +0200
Subject: [PATCH 16/39] Addons share prompt shows more details

---
 src/routes/Addons/Addons.js | 47 +++++++++++++++++++++++++++----------
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 07064ae48..340219b95 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -3,7 +3,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useRouteFocused } = require('stremio-router');
 const Icon = require('stremio-icons/dom');
-const { AddonDetailsModal, Button, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
+const { AddonDetailsModal, Button, Image, Multiselect, NavBar, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
 const Addon = require('./Addon');
 const useAddons = require('./useAddons');
 const useSelectableInputs = require('./useSelectableInputs');
@@ -65,12 +65,17 @@ const Addons = ({ urlParams, queryParams }) => {
     const searchInputOnChange = React.useCallback((event) => {
         setSearch(event.currentTarget.value);
     }, []);
-    const [sharedTransportUrl, setSharedTransportUrl] = React.useState(null);
-    const clearSharedTransportUrl = React.useCallback(() => {
-        setSharedTransportUrl(null);
+    const [sharedAddon, setSharedAddon] = React.useState(null);
+    const renderLogoFallback = React.useMemo(() => () => {
+        return (
+            <Icon className={styles['icon']} icon={'ic_addons'} />
+        );
+    }, []);
+    const clearSharedAddon = React.useCallback(() => {
+        setSharedAddon(null);
     }, []);
     const onAddonShare = React.useCallback((event) => {
-        setSharedTransportUrl(event.dataset.transportUrl);
+        setSharedAddon(event.dataset);
     }, []);
     const onAddonToggle = React.useCallback((event) => {
         navigate({ detailsTransportUrl: event.dataset.transportUrl });
@@ -81,7 +86,7 @@ const Addons = ({ urlParams, queryParams }) => {
     React.useLayoutEffect(() => {
         closeAddAddonModal();
         setSearch('');
-        clearSharedTransportUrl();
+        clearSharedAddon();
     }, [urlParams, queryParams]);
     return (
         <div className={styles['addons-container']}>
@@ -167,7 +172,7 @@ const Addons = ({ urlParams, queryParams }) => {
                                                         installed={addon.installed}
                                                         onToggle={onAddonToggle}
                                                         onShare={onAddonShare}
-                                                        dataset={{ transportUrl: addon.transportUrl }}
+                                                        dataset={{ id: addon.manifest.id, name: addon.manifest.name, version: addon.manifest.version, logo: addon.manifest.logo, transportUrl: addon.transportUrl }}
                                                     />
                                                 ))
                                         }
@@ -181,11 +186,12 @@ const Addons = ({ urlParams, queryParams }) => {
                         title={'Add addon'}
                         buttons={addAddonModalButtons}
                         onCloseRequest={closeAddAddonModal}>
+                        <div className={styles['notice']}>You can add an addon via an external link, which will appear under Installed addons.</div>
                         <TextInput
                             ref={addAddonUrlInputRef}
                             className={styles['addon-url-input']}
                             type={'text'}
-                            placeholder={'Paste url...'}
+                            placeholder={'Paste addon URL'}
                             onSubmit={addAddonOnSubmit}
                         />
                     </ModalDialog>
@@ -193,14 +199,31 @@ const Addons = ({ urlParams, queryParams }) => {
                     null
             }
             {
-                typeof sharedTransportUrl === 'string' ?
+                sharedAddon !== null && typeof sharedAddon.transportUrl === 'string' ?
                     <ModalDialog
                         className={styles['share-modal-container']}
-                        title={'Share addon'}
-                        onCloseRequest={clearSharedTransportUrl}>
+                        title={'Share Addon'}
+                        onCloseRequest={clearSharedAddon}>
+                        <div className={styles['title-container']}>
+                            <Image
+                                className={styles['logo']}
+                                src={sharedAddon.logo}
+                                alt={' '}
+                                renderFallback={renderLogoFallback}
+                            />
+                            <div className={styles['name-container']}>
+                                <span className={styles['name']}>{typeof sharedAddon.name === 'string' && sharedAddon.name.length > 0 ? sharedAddon.name : sharedAddon.id}</span>
+                                {
+                                    typeof sharedAddon.version === 'string' && sharedAddon.version.length > 0 ?
+                                        <span className={styles['version']}>v. {sharedAddon.version}</span>
+                                        :
+                                        null
+                                }
+                            </div>
+                        </div>
                         <SharePrompt
                             className={styles['share-prompt-container']}
-                            url={sharedTransportUrl}
+                            url={sharedAddon.transportUrl}
                         />
                     </ModalDialog>
                     :

From dfe6495552e8e5099f9e2a76179ab711744bbbae Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 6 Mar 2020 18:19:06 +0200
Subject: [PATCH 17/39] Addons styles adapted to design changes

---
 src/routes/Addons/styles.less | 112 ++++++++++++++++++++++++++++++----
 1 file changed, 99 insertions(+), 13 deletions(-)

diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 83531e8fa..7c8fbe207 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -4,6 +4,10 @@
     multiselect-menu-container: menu-container;
 }
 
+:import('~stremio/common/ModalDialog/styles.less') {
+    cancel-button-label: label;
+}
+
 .addons-container {
     display: flex;
     flex-direction: column;
@@ -80,6 +84,7 @@
                 display: flex;
                 flex-direction: row;
                 align-items: center;
+                margin-right: 8rem;
 
                 .icon {
                     width: 2.3rem;
@@ -221,15 +226,9 @@
                     border: var(--focus-outline-size) solid @color-surface-light5;
                 }
 
-                .icon {
-                    flex: none;
-                    width: 1.5rem;
-                    height: 1.5rem;
-                    fill: @color-secondaryvariant1;
-                }
-
                 .search-input {
                     flex: 1;
+                    margin-right: 1rem;
                     font-size: 1.1rem;
                     color: @color-surface-light5;
 
@@ -239,6 +238,14 @@
                         color: @color-secondaryvariant1-light1;
                     }
                 }
+
+                .icon {
+                    flex: none;
+                    width: 1.5rem;
+                    height: 1.5rem;
+                    fill: @color-secondaryvariant1;
+                }
+
             }
         }
 
@@ -264,20 +271,99 @@
 }
 
 .add-addon-modal-container {
+    .notice {
+        margin-bottom: 1.5rem;
+        font-size: 1rem;
+        opacity: 0.9;
+    }
+
     .addon-url-input {
-        width: 25rem;
-        padding: 0.5rem 1rem;
-        color: @color-surface;
-        border: thin solid @color-surface;
+        width: 100%;
+        padding: 0.8rem;
+        color: @color-surface-dark5;
+        border: var(--focus-outline-size) solid @color-surface-light2;
+
+        &:hover, &:focus {
+            outline-style: solid;
+            outline-width: var(--focus-outline-size);
+            outline-color: @color-surface-light4;
+            outline-offset: calc(-1 * var(--focus-outline-size));
+        }
+
+        &:focus {
+            outline-color: @color-background-dark5;
+        }
     }
 
     .cancel-button {
-        background-color: @color-surface;
+        background-color: transparent;
+
+        &:hover {
+            background-color: @color-surface-light3;
+        }
+
+        &:focus {
+            outline-color: @color-background-dark5;
+        }
+
+        .cancel-button-label {
+            color: @color-surface-dark2;
+        }
     }
 }
 
 .share-modal-container {
+    .title-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .logo, .icon {
+            flex: none;
+            float: left;
+            width: 5rem;
+            height: 5rem;
+            margin-right: 1rem;
+            padding: 0.5rem;
+        }
+
+        .logo {
+            object-fit: contain;
+            object-position: center;
+        }
+
+        .icon {
+            fill: @color-secondaryvariant1-light3;
+        }
+
+        .name-container {
+            display: flex;
+            flex-direction: row;
+            align-items: baseline;
+            width: 100%;
+
+            .name {
+                margin-right: 1rem;
+                max-width: 80%;
+                max-height: 1.2em;
+                white-space: pre;
+                text-overflow: ellipsis;
+                font-size: 2rem;
+                font-weight: 300;
+                opacity: 0.9;
+            }
+
+            .version {
+                max-width: 20%;
+                max-height: 1.2em;
+                white-space: pre;
+                text-overflow: ellipsis;
+                opacity: 0.6;
+            }
+        }
+    }
+
     .share-prompt-container {
-        width: 25rem;
+        margin-top: 1rem;
     }
 }
\ No newline at end of file

From 4f8a0cfee38602b883162b176f171e644ec52b25 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 6 Mar 2020 18:19:38 +0200
Subject: [PATCH 18/39] Intro switch form  location fixed

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

diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index 0b4eee6aa..bd00249f0 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -248,7 +248,7 @@ const Intro = ({ queryParams }) => {
     const switchFormOnClick = React.useCallback(() => {
         const nextQueryParams = new URLSearchParams(queryParams);
         nextQueryParams.set('form', state.form === SIGNUP_FORM ? LOGIN_FORM : SIGNUP_FORM);
-        window.location.replace(`#/intro?${nextQueryParams}`);
+        window.location = `#/intro?${nextQueryParams}`;
     }, [queryParams, state.form]);
     React.useEffect(() => {
         if ([LOGIN_FORM, SIGNUP_FORM].includes(queryParams.get('form'))) {

From 594b557b5df2f7893fa40e0b6f730f619e0ea9fe Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 9 Mar 2020 12:03:21 +0200
Subject: [PATCH 19/39] Multiselect styles reverted

---
 src/common/Multiselect/styles.less | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/src/common/Multiselect/styles.less b/src/common/Multiselect/styles.less
index b44062e80..bb1589483 100644
--- a/src/common/Multiselect/styles.less
+++ b/src/common/Multiselect/styles.less
@@ -1,5 +1,3 @@
-@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
-
 :import('~stremio/common/Popup/styles.less') {
     popup-menu-container: menu-container;
 }
@@ -9,15 +7,7 @@
     flex-direction: row;
     align-items: center;
     padding: 0 1rem;
-    background-color: @color-background;
-
-    &:hover, &:focus {
-        background-color: @color-background-light2;
-    }
-
-    &:focus {
-        outline-color: @color-surface-light5;
-    }
+    background-color: var(--color-backgroundlighter);
 
     &:global(.active) {
         background-color: var(--color-surfacelight);
@@ -34,8 +24,7 @@
     .label {
         flex: 1;
         max-height: 2.4em;
-        opacity: 0.9;
-        color: @color-surface-light5;
+        color: var(--color-surfacelighter);
     }
 
     .icon {
@@ -43,7 +32,7 @@
         width: 1rem;
         height: 1rem;
         margin-left: 1rem;
-        fill: @color-surface-light5;
+        fill: var(--color-surfacelighter);
     }
 
     .popup-menu-container {
@@ -58,7 +47,7 @@
             flex-direction: row;
             align-items: center;
             padding: 1rem;
-            background-color: @color-background;
+            background-color: var(--color-backgroundlighter);
 
             &:global(.selected) {
                 background-color: var(--color-surfacedarker);

From fd8be7e69032bf22c945a81d04271d9241507494 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 9 Mar 2020 13:34:33 +0200
Subject: [PATCH 20/39] ModalDialog width reverted

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

diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index 3ceaafe69..73c5b1f5b 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -10,7 +10,7 @@
         flex: none;
         display: flex;
         flex-direction: column;
-        width: 38rem;
+        max-width: 80%;
         max-height: 80%;
         background-color: @color-surface-light5;
 

From ccf559b945cb53d02083ab6607d69e19e76a4a50 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 9 Mar 2020 13:44:55 +0200
Subject: [PATCH 21/39] SharePrompt fb/twitter button styles reverted

---
 src/common/SharePrompt/styles.less | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index 059adbb67..fa818037b 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -37,25 +37,21 @@
         }
 
         .facebook-button, .twitter-button {
+            &:hover {
+                filter: brightness(1.2);
+            }
+
             &:focus {
                 outline-color: @color-background-dark5;
             }
         }
 
         .facebook-button {
-            background-color: @color-secondary;
-
-            &:hover {
-                background-color: @color-secondary-light2;
-            }
+            background-color: var(--color-facebook);
         }
 
         .twitter-button {
-            background-color: @color-secondaryvariant2-light1;
-
-            &:hover {
-                background-color: @color-secondaryvariant2-light2;
-            }
+            background-color: var(--color-twitter);
         }
     }
 

From 0ceaeffd7fe9c8413809a5a29e9771c576c5979d Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 9 Mar 2020 13:59:33 +0200
Subject: [PATCH 22/39] Addons notice container removed for now

---
 src/routes/Addons/Addons.js   | 10 -----
 src/routes/Addons/styles.less | 75 -----------------------------------
 2 files changed, 85 deletions(-)

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 340219b95..7cb33eef2 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -92,16 +92,6 @@ const Addons = ({ urlParams, queryParams }) => {
         <div className={styles['addons-container']}>
             <NavBar className={styles['nav-bar']} backButton={true} title={'Addons'} />
             <div className={styles['addons-content']}>
-                <div className={styles['notice-container']}>
-                    <Button className={styles['close-button-container']} title={'dismiss'}>
-                        <div className={styles['label']}>dismiss</div>
-                        <Icon className={styles['icon']} icon={'ic_x'} />
-                    </Button>
-                    <div className={styles['notice']}>
-                        <Icon className={styles['icon']} icon={'ic_addons'} />
-                        <div className={styles['label']}>This is your addon catalogue - here you can search and install addons to improve your watching experience.</div>
-                    </div>
-                </div>
                 <div className={styles['selectable-inputs-container']}>
                     <div className={styles['selectable-inputs']}>
                         <Button className={styles['add-button-container']} title={'Add addon'} onClick={openAddAddonModal}>
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 7c8fbe207..34965b065 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -25,81 +25,6 @@
         display: flex;
         flex-direction: column;
         align-self: stretch;
-        padding-top: 1.5rem;
-
-        .notice-container {
-            position: relative;
-            z-index: 0;
-            display: flex;
-            flex-direction: column;
-            margin: 1.5rem 3rem 0 3rem;
-            padding: 1.5rem;
-            background-color: @color-background;
-
-            .close-button-container {
-                position: absolute;
-                top: 0.5rem;
-                right: 0.5rem;
-                bottom: auto;
-                left: auto;
-                z-index: 1;
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                padding: 0.5rem;
-
-                &:hover, &:focus {
-                    .label {
-                        color: @color-secondaryvariant1-light1;
-                    }
-
-                    .icon {
-                        fill: @color-secondaryvariant1-light1;
-                    }
-                }
-
-                &:focus {
-                    outline: none;
-                    background-color: @color-surface-light5-20;
-
-                    .label {
-                        text-decoration: underline;
-                    }
-                }
-
-                .label {
-                    margin-right: 0.5rem;
-                    opacity: 0.9;
-                    color: @color-secondaryvariant1-dark1;
-                }
-
-                .icon {
-                    width: 0.8rem;
-                    height: 0.8rem;
-                    fill: @color-secondaryvariant1-dark1;
-                }
-            }
-
-            .notice {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                margin-right: 8rem;
-
-                .icon {
-                    width: 2.3rem;
-                    height: 2.3rem;
-                    margin-right: 1rem;
-                    fill: @color-secondaryvariant2;
-                }
-
-                .label {
-                    font-size: 1.1rem;
-                    opacity: 0.9;
-                    color: @color-secondaryvariant1-light1;
-                }
-            }
-        }
 
         .selectable-inputs-container {
             flex: none;

From f5444ef820e48edbf59f4ca8c499be84db3d5467 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 9 Mar 2020 14:37:02 +0200
Subject: [PATCH 23/39] tabIndex for addon buttons removed

---
 src/routes/Addons/Addon/Addon.js    |  6 +++---
 src/routes/Addons/Addon/styles.less | 15 +--------------
 2 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/src/routes/Addons/Addon/Addon.js b/src/routes/Addons/Addon/Addon.js
index f2922e212..6158a426c 100644
--- a/src/routes/Addons/Addon/Addon.js
+++ b/src/routes/Addons/Addon/Addon.js
@@ -42,7 +42,7 @@ const Addon = ({ className, id, name, version, logo, description, types, install
         );
     }, []);
     return (
-        <Button className={classnames(className, styles['addon-container'])} tabIndex={-1} onKeyDown={onKeyDown}>
+        <Button className={classnames(className, styles['addon-container'])} onKeyDown={onKeyDown}>
             <div className={styles['logo-container']}>
                 <Image
                     className={styles['logo']}
@@ -82,10 +82,10 @@ const Addon = ({ className, id, name, version, logo, description, types, install
                 }
             </div>
             <div className={styles['buttons-container']}>
-                <Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? 'Uninstall' : 'Install'} onClick={toggleButtonOnClick}>
+                <Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? 'Uninstall' : 'Install'} tabIndex={-1} onClick={toggleButtonOnClick}>
                     <div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div>
                 </Button>
-                <Button className={styles['share-button-container']} title={'SHARE ADDON'} onClick={shareButtonOnClick}>
+                <Button className={styles['share-button-container']} title={'SHARE ADDON'} tabIndex={-1} onClick={shareButtonOnClick}>
                     <Icon className={styles['icon']} icon={'ic_share'} />
                     <div className={styles['label']}>SHARE ADDON</div>
                 </Button>
diff --git a/src/routes/Addons/Addon/styles.less b/src/routes/Addons/Addon/styles.less
index 2d26d843a..aaef59617 100644
--- a/src/routes/Addons/Addon/styles.less
+++ b/src/routes/Addons/Addon/styles.less
@@ -129,10 +129,6 @@
                 background-color: @color-accent3-light2;
             }
 
-            &:focus {
-                outline-color: @color-surface-light5;
-            }
-
             .label {
                 color: @color-surface-light5;
             }
@@ -146,10 +142,6 @@
                 background-color: @color-background-light2;
             }
 
-            &:focus {
-                outline-color: @color-surface-light5;
-            }
-
             .label {
                 opacity: 0.9;
                 color: @color-surface-light5;
@@ -157,7 +149,7 @@
         }
 
         .share-button-container {
-            &:hover, &:focus {
+            &:hover {
                 .icon {
                     fill: @color-secondaryvariant1-light1;
                 }
@@ -168,11 +160,6 @@
                 }
             }
 
-            &:focus {
-                outline: none;
-                background-color: @color-surface-light5-20;
-            }
-
             .icon {
                 opacity: 0.6;
                 fill: @color-secondaryvariant1-dark1;

From 0cc7eacbdb12f4b60c169dc0252417e3b0833694 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 9 Mar 2020 15:50:41 +0200
Subject: [PATCH 24/39] select input catalog rendered as Multiselect

---
 src/routes/Addons/Addons.js   | 15 +++++++--------
 src/routes/Addons/styles.less | 35 -----------------------------------
 2 files changed, 7 insertions(+), 43 deletions(-)

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 7cb33eef2..1dd6cf808 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -98,14 +98,13 @@ const Addons = ({ urlParams, queryParams }) => {
                             <Icon className={styles['icon']} icon={'ic_plus'} />
                             <div className={styles['add-button-label']}>Add addon</div>
                         </Button>
-                        <Multiselect {...selectInputs[1]} className={styles['select-input-container']} />
-                        <div className={styles['select-input-options']}>
-                            {selectInputs[0].options.map((option, index) => (
-                                <Button key={index} className={classnames(styles['option-container'], { 'selected': selectInputs[0].selected.includes(option.value) })} onClick={() => selectInputs[0].onSelect(option)}>
-                                    {option.label} addons
-                                </Button>
-                            ))}
-                        </div>
+                        {selectInputs.map((selectInput, index) => (
+                            <Multiselect
+                                {...selectInput}
+                                key={index}
+                                className={styles['select-input-container']}
+                            />
+                        ))}
                     </div>
                     <label className={styles['search-bar-container']}>
                         <TextInput
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 34965b065..7d41e3a63 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -92,41 +92,6 @@
                         overflow: auto;
                     }
                 }
-
-                .select-input-options {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-
-                    .option-container {
-                        padding: 0.5rem;
-                        opacity: 0.9;
-                        color: @color-primary-light2;
-
-                        &:hover, &:focus {
-                            color: @color-primary-light4;
-                        }
-
-                        &:focus {
-                            outline: none;
-                            background-color: @color-surface-light5-20;
-                        }
-
-                        &:global(.selected) {
-                            opacity: 0.9;
-                            text-decoration: underline;
-                            color: @color-primaryvariant1;
-
-                            &:hover, &:focus {
-                                color: @color-primaryvariant1-light2;
-                            }
-                        }
-
-                        &:not(:last-child) {
-                            margin-right: 1rem;
-                        }
-                    }
-                }
             }
 
             .search-bar-container {

From 2c3a6ae0fc7afff0ac2548c72ca137b646711307 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 9 Mar 2020 17:37:00 +0200
Subject: [PATCH 25/39] Addon dataset gets the whole addon

---
 src/routes/Addons/Addons.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 1dd6cf808..f82f2a79b 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -75,10 +75,10 @@ const Addons = ({ urlParams, queryParams }) => {
         setSharedAddon(null);
     }, []);
     const onAddonShare = React.useCallback((event) => {
-        setSharedAddon(event.dataset);
+        setSharedAddon(event.dataset.addon);
     }, []);
     const onAddonToggle = React.useCallback((event) => {
-        navigate({ detailsTransportUrl: event.dataset.transportUrl });
+        navigate({ detailsTransportUrl: event.dataset.addon.transportUrl });
     }, [navigate]);
     const closeAddonDetails = React.useCallback(() => {
         navigate({ detailsTransportUrl: null });
@@ -161,7 +161,7 @@ const Addons = ({ urlParams, queryParams }) => {
                                                         installed={addon.installed}
                                                         onToggle={onAddonToggle}
                                                         onShare={onAddonShare}
-                                                        dataset={{ id: addon.manifest.id, name: addon.manifest.name, version: addon.manifest.version, logo: addon.manifest.logo, transportUrl: addon.transportUrl }}
+                                                        dataset={{ addon }}
                                                     />
                                                 ))
                                         }
@@ -196,15 +196,15 @@ const Addons = ({ urlParams, queryParams }) => {
                         <div className={styles['title-container']}>
                             <Image
                                 className={styles['logo']}
-                                src={sharedAddon.logo}
+                                src={sharedAddon.manifest.logo}
                                 alt={' '}
                                 renderFallback={renderLogoFallback}
                             />
                             <div className={styles['name-container']}>
-                                <span className={styles['name']}>{typeof sharedAddon.name === 'string' && sharedAddon.name.length > 0 ? sharedAddon.name : sharedAddon.id}</span>
+                                <span className={styles['name']}>{typeof sharedAddon.manifest.name === 'string' && sharedAddon.manifest.name.length > 0 ? sharedAddon.manifest.name : sharedAddon.manifest.id}</span>
                                 {
-                                    typeof sharedAddon.version === 'string' && sharedAddon.version.length > 0 ?
-                                        <span className={styles['version']}>v. {sharedAddon.version}</span>
+                                    typeof sharedAddon.manifest.version === 'string' && sharedAddon.manifest.version.length > 0 ?
+                                        <span className={styles['version']}>v. {sharedAddon.manifest.version}</span>
                                         :
                                         null
                                 }

From fb6fb60b6c6c53eb512a597c5cadf0bf06511f99 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 9 Mar 2020 18:15:15 +0200
Subject: [PATCH 26/39] text opacity property removed

---
 .../AddonDetails/styles.less                  |  8 +++----
 src/common/ModalDialog/styles.less            |  3 +--
 src/routes/Addons/Addon/styles.less           | 21 +++++++------------
 src/routes/Addons/styles.less                 |  9 ++++----
 4 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/src/common/AddonDetailsModal/AddonDetails/styles.less b/src/common/AddonDetailsModal/AddonDetails/styles.less
index 577dc7e5e..3edbb3b47 100644
--- a/src/common/AddonDetailsModal/AddonDetails/styles.less
+++ b/src/common/AddonDetailsModal/AddonDetails/styles.less
@@ -39,7 +39,7 @@
                 text-overflow: ellipsis;
                 font-size: 2rem;
                 font-weight: 300;
-                opacity: 0.9;
+                color: @color-background-dark5-90;
             }
 
             .version {
@@ -47,7 +47,7 @@
                 max-height: 1.2em;
                 white-space: pre;
                 text-overflow: ellipsis;
-                opacity: 0.6;
+                color: @color-background-dark5-60;
             }
         }
     }
@@ -57,13 +57,13 @@
 
         .section-header {
             font-size: 1.1rem;
-            opacity: 0.9;
+            color: @color-background-dark5-90;
         }
 
         .section-label {
             font-size: 1.1rem;
             font-weight: 300;
-            opacity: 0.9;
+            color: @color-background-dark5-90;
 
             &.transport-url-label {
                 user-select: text;
diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index 73c5b1f5b..41066d014 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -46,8 +46,7 @@
             margin: 0 2rem;
             font-size: 1.2rem;
             font-weight: 500;
-            opacity: 0.9;
-            color: @color-background-dark5;
+            color: @color-background-dark5-90;
         }
 
         .modal-dialog-content {
diff --git a/src/routes/Addons/Addon/styles.less b/src/routes/Addons/Addon/styles.less
index aaef59617..20aba08e7 100644
--- a/src/routes/Addons/Addon/styles.less
+++ b/src/routes/Addons/Addon/styles.less
@@ -49,8 +49,7 @@
             padding: 0 0.5rem;
             max-height: 3.6em;
             font-size: 1.6rem;
-            opacity: 0.9;
-            color: @color-surface-light5;
+            color: @color-surface-light5-90;
         }
 
         .version-container {
@@ -60,8 +59,7 @@
             margin-top: 0.5rem;
             padding: 0 0.5rem;
             max-height: 2.4em;
-            opacity: 0.6;
-            color: @color-surface-light5;
+            color: @color-surface-light5-60;
         }
 
         .types-container {
@@ -71,8 +69,7 @@
             margin-top: 0.5rem;
             padding: 0 0.5rem;
             max-height: 2.4em;
-            opacity: 0.4;
-            color: @color-surface-light5;
+            color: @color-surface-light5-40;
             text-transform: capitalize;
         }
 
@@ -83,8 +80,7 @@
             margin-top: 0.5rem;
             padding: 0 0.5rem;
             max-height: 4.8em;
-            opacity: 0.9;
-            color: @color-surface-light5;
+            color: @color-surface-light5-90;
         }
     }
 
@@ -143,8 +139,7 @@
             }
 
             .label {
-                opacity: 0.9;
-                color: @color-surface-light5;
+                color: @color-surface-light5-90;
             }
         }
 
@@ -161,13 +156,11 @@
             }
 
             .icon {
-                opacity: 0.6;
-                fill: @color-secondaryvariant1-dark1;
+                fill: @color-secondaryvariant1-dark1-60;
             }
 
             .label {
-                opacity: 0.9;
-                color: @color-secondaryvariant1;
+                color: @color-secondaryvariant1-90;
             }
         }
     }
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 7d41e3a63..43586ebf3 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -124,8 +124,7 @@
 
                     &::placeholder {
                         max-height: 1.2em;
-                        opacity: 0.9;
-                        color: @color-secondaryvariant1-light1;
+                        color: @color-secondaryvariant1-light1-90;
                     }
                 }
 
@@ -164,7 +163,7 @@
     .notice {
         margin-bottom: 1.5rem;
         font-size: 1rem;
-        opacity: 0.9;
+        color: @color-background-dark5-90;
     }
 
     .addon-url-input {
@@ -240,7 +239,7 @@
                 text-overflow: ellipsis;
                 font-size: 2rem;
                 font-weight: 300;
-                opacity: 0.9;
+                color: @color-background-dark5-90;
             }
 
             .version {
@@ -248,7 +247,7 @@
                 max-height: 1.2em;
                 white-space: pre;
                 text-overflow: ellipsis;
-                opacity: 0.6;
+                color: @color-background-dark5-60;
             }
         }
     }

From ed8136207aa52ee7bd3b11dfcbbebe05b1457fa6 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 9 Mar 2020 18:40:55 +0200
Subject: [PATCH 27/39] set modal dialogs width in addons screen

---
 src/common/AddonDetailsModal/styles.less |  1 +
 src/common/SharePrompt/styles.less       |  2 ++
 src/routes/Addons/styles.less            | 41 +++++++++++++-----------
 3 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/common/AddonDetailsModal/styles.less b/src/common/AddonDetailsModal/styles.less
index 1c067a01d..59b0a11ac 100644
--- a/src/common/AddonDetailsModal/styles.less
+++ b/src/common/AddonDetailsModal/styles.less
@@ -6,6 +6,7 @@
 
 .addon-details-modal-container {
     .addon-details-container, .addon-details-message-container {
+        width: 40rem;
         max-width: 100%;
     }
 
diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index fa818037b..1f1af9fb9 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -1,6 +1,8 @@
 @import (reference) '~stremio-colors/dist/less/stremio-colors.less';
 
 .share-prompt-container {
+    min-width: 30rem;
+
     .buttons-container {
         display: flex;
         flex-direction: row;
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 43586ebf3..481cd0960 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -5,6 +5,7 @@
 }
 
 :import('~stremio/common/ModalDialog/styles.less') {
+    add-addon-modal-content: modal-dialog-content;
     cancel-button-label: label;
 }
 
@@ -160,27 +161,31 @@
 }
 
 .add-addon-modal-container {
-    .notice {
-        margin-bottom: 1.5rem;
-        font-size: 1rem;
-        color: @color-background-dark5-90;
-    }
+    .add-addon-modal-content {
+        width: 30rem;
 
-    .addon-url-input {
-        width: 100%;
-        padding: 0.8rem;
-        color: @color-surface-dark5;
-        border: var(--focus-outline-size) solid @color-surface-light2;
-
-        &:hover, &:focus {
-            outline-style: solid;
-            outline-width: var(--focus-outline-size);
-            outline-color: @color-surface-light4;
-            outline-offset: calc(-1 * var(--focus-outline-size));
+        .notice {
+            margin-bottom: 1.5rem;
+            font-size: 1rem;
+            color: @color-background-dark5-90;
         }
 
-        &:focus {
-            outline-color: @color-background-dark5;
+        .addon-url-input {
+            width: 100%;
+            padding: 0.8rem;
+            color: @color-surface-dark5;
+            border: var(--focus-outline-size) solid @color-surface-light2;
+
+            &:hover, &:focus {
+                outline-style: solid;
+                outline-width: var(--focus-outline-size);
+                outline-color: @color-surface-light4;
+                outline-offset: calc(-1 * var(--focus-outline-size));
+            }
+
+            &:focus {
+                outline-color: @color-background-dark5;
+            }
         }
     }
 

From fc8c505b7f4c06b3903b45036739cc1947e231bd Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 10 Mar 2020 12:39:05 +0200
Subject: [PATCH 28/39] SharePrompt url correctly copying

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

diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index e37521007..dabe71f1e 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -38,7 +38,7 @@ const SharePrompt = ({ className, url }) => {
                     <div className={styles['label']}>Twitter</div>
                 </Button>
             </div>
-            <div className={styles['url-container']} tabIndex={0}>
+            <div className={styles['url-container']}>
                 <TextInput
                     ref={inputRef}
                     className={styles['url-text-input']}
diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index 1f1af9fb9..ec413e298 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -73,7 +73,7 @@
             }
         }
 
-        &:focus {
+        &:focus-within {
             outline-style: solid;
             outline-width: var(--focus-outline-size);
             outline-color: @color-background-dark5;

From c0748a20c0d166ccba2f792919fa8af5409aa8da Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 10 Mar 2020 14:48:04 +0200
Subject: [PATCH 29/39] Addons screen modals show full addon name/version

---
 .../AddonDetails/styles.less                  | 31 +++++++++---------
 src/routes/Addons/styles.less                 | 32 ++++++++++---------
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/common/AddonDetailsModal/AddonDetails/styles.less b/src/common/AddonDetailsModal/AddonDetails/styles.less
index 3edbb3b47..886cf34b6 100644
--- a/src/common/AddonDetailsModal/AddonDetails/styles.less
+++ b/src/common/AddonDetailsModal/AddonDetails/styles.less
@@ -11,7 +11,7 @@
             float: left;
             width: 5rem;
             height: 5rem;
-            margin-right: 1rem;
+            margin-right: 1.5rem;
             padding: 0.5rem;
             background-color: @color-background-dark5;
         }
@@ -26,27 +26,28 @@
         }
 
         .name-container {
+            flex-grow: 1;
+            flex-shrink: 1;
+            flex-basis: 0;
             display: flex;
             flex-direction: row;
+            flex-wrap: wrap;
             align-items: baseline;
-            width: 100%;
-
+    
             .name {
-                margin-right: 1rem;
-                max-width: 80%;
-                max-height: 1.2em;
-                white-space: pre;
-                text-overflow: ellipsis;
-                font-size: 2rem;
-                font-weight: 300;
+                flex-grow: 0;
+                flex-shrink: 1;
+                flex-basis: auto;
+                margin-right: 0.5rem;
+                font-size: 1.6rem;
                 color: @color-background-dark5-90;
             }
-
+    
             .version {
-                max-width: 20%;
-                max-height: 1.2em;
-                white-space: pre;
-                text-overflow: ellipsis;
+                flex-grow: 1;
+                flex-shrink: 1;
+                flex-basis: auto;
+                margin-top: 0.5rem;
                 color: @color-background-dark5-60;
             }
         }
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 481cd0960..7676a96aa 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -211,13 +211,14 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        width: 30rem;
 
         .logo, .icon {
             flex: none;
             float: left;
             width: 5rem;
             height: 5rem;
-            margin-right: 1rem;
+            margin-right: 1.5rem;
             padding: 0.5rem;
         }
 
@@ -231,27 +232,28 @@
         }
 
         .name-container {
+            flex-grow: 1;
+            flex-shrink: 1;
+            flex-basis: 0;
             display: flex;
             flex-direction: row;
+            flex-wrap: wrap;
             align-items: baseline;
-            width: 100%;
-
+    
             .name {
-                margin-right: 1rem;
-                max-width: 80%;
-                max-height: 1.2em;
-                white-space: pre;
-                text-overflow: ellipsis;
-                font-size: 2rem;
-                font-weight: 300;
+                flex-grow: 0;
+                flex-shrink: 1;
+                flex-basis: auto;
+                margin-right: 0.5rem;
+                font-size: 1.6rem;
                 color: @color-background-dark5-90;
             }
-
+    
             .version {
-                max-width: 20%;
-                max-height: 1.2em;
-                white-space: pre;
-                text-overflow: ellipsis;
+                flex-grow: 1;
+                flex-shrink: 1;
+                flex-basis: auto;
+                margin-top: 0.5rem;
                 color: @color-background-dark5-60;
             }
         }

From 412353f8654a1e7e5ab12964f05e7e24f7fb22b1 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 10 Mar 2020 15:40:49 +0200
Subject: [PATCH 30/39] set share modal width in addons screen

---
 src/common/SharePrompt/styles.less |  2 -
 src/routes/Addons/styles.less      | 95 +++++++++++++++---------------
 2 files changed, 49 insertions(+), 48 deletions(-)

diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index ec413e298..c73a43282 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -1,8 +1,6 @@
 @import (reference) '~stremio-colors/dist/less/stremio-colors.less';
 
 .share-prompt-container {
-    min-width: 30rem;
-
     .buttons-container {
         display: flex;
         flex-direction: row;
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 7676a96aa..daaaee161 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -5,7 +5,7 @@
 }
 
 :import('~stremio/common/ModalDialog/styles.less') {
-    add-addon-modal-content: modal-dialog-content;
+    addon-modal-content: modal-dialog-content;
     cancel-button-label: label;
 }
 
@@ -161,7 +161,7 @@
 }
 
 .add-addon-modal-container {
-    .add-addon-modal-content {
+    .addon-modal-content {
         width: 30rem;
 
         .notice {
@@ -207,59 +207,62 @@
 }
 
 .share-modal-container {
-    .title-container {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
+    .addon-modal-content {
         width: 30rem;
 
-        .logo, .icon {
-            flex: none;
-            float: left;
-            width: 5rem;
-            height: 5rem;
-            margin-right: 1.5rem;
-            padding: 0.5rem;
-        }
-
-        .logo {
-            object-fit: contain;
-            object-position: center;
-        }
-
-        .icon {
-            fill: @color-secondaryvariant1-light3;
-        }
-
-        .name-container {
-            flex-grow: 1;
-            flex-shrink: 1;
-            flex-basis: 0;
+        .title-container {
             display: flex;
             flex-direction: row;
-            flex-wrap: wrap;
-            align-items: baseline;
-    
-            .name {
-                flex-grow: 0;
-                flex-shrink: 1;
-                flex-basis: auto;
-                margin-right: 0.5rem;
-                font-size: 1.6rem;
-                color: @color-background-dark5-90;
+            align-items: center;
+
+            .logo, .icon {
+                flex: none;
+                float: left;
+                width: 5rem;
+                height: 5rem;
+                margin-right: 1.5rem;
+                padding: 0.5rem;
             }
-    
-            .version {
+
+            .logo {
+                object-fit: contain;
+                object-position: center;
+            }
+
+            .icon {
+                fill: @color-secondaryvariant1-light3;
+            }
+
+            .name-container {
                 flex-grow: 1;
                 flex-shrink: 1;
-                flex-basis: auto;
-                margin-top: 0.5rem;
-                color: @color-background-dark5-60;
+                flex-basis: 0;
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+                align-items: baseline;
+
+                .name {
+                    flex-grow: 0;
+                    flex-shrink: 1;
+                    flex-basis: auto;
+                    margin-right: 0.5rem;
+                    font-size: 1.6rem;
+                    color: @color-background-dark5-90;
+                }
+
+                .version {
+                    flex-grow: 1;
+                    flex-shrink: 1;
+                    flex-basis: auto;
+                    margin-top: 0.5rem;
+                    color: @color-background-dark5-60;
+                }
             }
         }
-    }
 
-    .share-prompt-container {
-        margin-top: 1rem;
+        .share-prompt-container {
+            margin-top: 1rem;
+        }
     }
 }
\ No newline at end of file

From aedf581fe0960c06e771f8ee2714bad9871cf77b Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 10 Mar 2020 16:07:23 +0200
Subject: [PATCH 31/39] SharePrompt copy button focus added

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

diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index dabe71f1e..bdda59f99 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -15,10 +15,11 @@ const SharePrompt = ({ className, url }) => {
             inputRef.current.select();
         }
     }, []);
-    const copyToClipboard = React.useCallback(() => {
+    const copyToClipboard = React.useCallback((event) => {
         if (inputRef.current !== null) {
             inputRef.current.select();
             document.execCommand('copy');
+            event.target.focus();
         }
     }, []);
     React.useEffect(() => {
diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index c73a43282..9bf5cf271 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -71,13 +71,6 @@
             }
         }
 
-        &:focus-within {
-            outline-style: solid;
-            outline-width: var(--focus-outline-size);
-            outline-color: @color-background-dark5;
-            outline-offset: calc(-1 * var(--focus-outline-size));
-        }
-
         .url-text-input {
             flex: 1;
             align-self: stretch;
@@ -99,7 +92,7 @@
             background-color: @color-accent3;
 
             &:focus {
-                outline: none;
+                outline-color: @color-background-dark5;
             }
 
             .icon {

From 21ae30d33e373b3dfb738e3b0326a915c659de93 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 10 Mar 2020 16:40:21 +0200
Subject: [PATCH 32/39] SharePrompt url  hover removed

---
 src/common/SharePrompt/SharePrompt.js |  5 ++---
 src/common/SharePrompt/styles.less    | 14 ++++----------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js
index bdda59f99..2fd906d0c 100644
--- a/src/common/SharePrompt/SharePrompt.js
+++ b/src/common/SharePrompt/SharePrompt.js
@@ -15,18 +15,17 @@ const SharePrompt = ({ className, url }) => {
             inputRef.current.select();
         }
     }, []);
-    const copyToClipboard = React.useCallback((event) => {
+    const copyToClipboard = React.useCallback(() => {
         if (inputRef.current !== null) {
             inputRef.current.select();
             document.execCommand('copy');
-            event.target.focus();
         }
     }, []);
     React.useEffect(() => {
         if (routeFocused && inputRef.current !== null) {
             inputRef.current.select();
         }
-    }, []);
+    }, [routeFocused]);
     return (
         <div className={classnames(className, styles['share-prompt-container'])}>
             <div className={styles['buttons-container']}>
diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index 9bf5cf271..a4ee2b3b3 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -61,16 +61,6 @@
         margin-top: 1rem;
         background-color: @color-surface-light2;
 
-        &:hover {
-            .url-text-input {
-                background-color: @color-surface-light4;
-            }
-
-            .copy-button {
-                background-color: @color-accent3-light2;
-            }
-        }
-
         .url-text-input {
             flex: 1;
             align-self: stretch;
@@ -91,6 +81,10 @@
             padding: 1rem;
             background-color: @color-accent3;
 
+            &:hover {
+                background-color: @color-accent3-light2;
+            }
+
             &:focus {
                 outline-color: @color-background-dark5;
             }

From bdc951c0e42edcec52ac118fb7f505b17889cdc9 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 10 Mar 2020 16:56:24 +0200
Subject: [PATCH 33/39] better way for spacing between selectable inputs and
 search bar

---
 src/routes/Addons/Addons.js   | 25 +++++-----
 src/routes/Addons/styles.less | 92 +++++++++++++++++------------------
 2 files changed, 56 insertions(+), 61 deletions(-)

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index f82f2a79b..41d4b5145 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -93,19 +93,18 @@ const Addons = ({ urlParams, queryParams }) => {
             <NavBar className={styles['nav-bar']} backButton={true} title={'Addons'} />
             <div className={styles['addons-content']}>
                 <div className={styles['selectable-inputs-container']}>
-                    <div className={styles['selectable-inputs']}>
-                        <Button className={styles['add-button-container']} title={'Add addon'} onClick={openAddAddonModal}>
-                            <Icon className={styles['icon']} icon={'ic_plus'} />
-                            <div className={styles['add-button-label']}>Add addon</div>
-                        </Button>
-                        {selectInputs.map((selectInput, index) => (
-                            <Multiselect
-                                {...selectInput}
-                                key={index}
-                                className={styles['select-input-container']}
-                            />
-                        ))}
-                    </div>
+                    <Button className={styles['add-button-container']} title={'Add addon'} onClick={openAddAddonModal}>
+                        <Icon className={styles['icon']} icon={'ic_plus'} />
+                        <div className={styles['add-button-label']}>Add addon</div>
+                    </Button>
+                    {selectInputs.map((selectInput, index) => (
+                        <Multiselect
+                            {...selectInput}
+                            key={index}
+                            className={styles['select-input-container']}
+                        />
+                    ))}
+                    <div className={styles['spacing']} />
                     <label className={styles['search-bar-container']}>
                         <TextInput
                             className={styles['search-input']}
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index daaaee161..973e85429 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -36,65 +36,61 @@
             padding: 1.5rem 3rem;
             overflow: visible;
 
-            .selectable-inputs {
-                flex: 1;
+            .add-button-container {
+                flex: none;
                 display: flex;
                 flex-direction: row;
+                align-items: center;
+                justify-content: center;
+                width: 10rem;
+                height: 3.5rem;
                 margin-right: 1.5rem;
-                overflow: visible;
+                padding: 0 1rem;
+                background-color: @color-accent3;
 
-                .add-button-container {
-                    flex: none;
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-                    justify-content: center;
-                    width: 10rem;
-                    height: 3.5rem;
-                    margin-right: 1.5rem;
-                    padding: 0 1rem;
-                    background-color: @color-accent3;
-
-                    &:hover {
-                        background-color: @color-accent3-light2;
-                    }
-
-                    &:focus {
-                        outline-color: @color-surface-light5;
-                    }
-
-                    .icon {
-                        flex: none;
-                        width: 1.2rem;
-                        height: 1.2rem;
-                        margin-right: 1rem;
-                        fill: @color-surface-light5;
-                    }
-
-                    .add-button-label {
-                        flex-grow: 0;
-                        flex-shrink: 1;
-                        flex-basis: auto;
-                        max-height: 2.4em;
-                        font-size: 1.1rem;
-                        color: @color-surface-light5;
-                    }
+                &:hover {
+                    background-color: @color-accent3-light2;
                 }
 
-                .select-input-container {
+                &:focus {
+                    outline-color: @color-surface-light5;
+                }
+
+                .icon {
+                    flex: none;
+                    width: 1.2rem;
+                    height: 1.2rem;
+                    margin-right: 1rem;
+                    fill: @color-surface-light5;
+                }
+
+                .add-button-label {
                     flex-grow: 0;
                     flex-shrink: 1;
-                    flex-basis: 15rem;
-                    height: 3.5rem;
-                    margin-right: 1.5rem;
-
-                    .multiselect-menu-container {
-                        max-height: calc(3.2rem * 7);
-                        overflow: auto;
-                    }
+                    flex-basis: auto;
+                    max-height: 2.4em;
+                    font-size: 1.1rem;
+                    color: @color-surface-light5;
                 }
             }
 
+            .select-input-container {
+                flex-grow: 0;
+                flex-shrink: 1;
+                flex-basis: 15rem;
+                height: 3.5rem;
+                margin-right: 1.5rem;
+
+                .multiselect-menu-container {
+                    max-height: calc(3.2rem * 7);
+                    overflow: auto;
+                }
+            }
+
+            .spacing {
+                flex: 1;
+            }
+
             .search-bar-container {
                 flex-grow: 0;
                 flex-shrink: 1;

From 21279e2172ed9e659c8dd4fcbe0d0a4f9f8d2dab Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 10 Mar 2020 16:59:50 +0200
Subject: [PATCH 34/39] unnecessary flex: none removed

---
 src/common/AddonDetailsModal/AddonDetails/styles.less | 1 -
 src/routes/Addons/styles.less                         | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/common/AddonDetailsModal/AddonDetails/styles.less b/src/common/AddonDetailsModal/AddonDetails/styles.less
index 886cf34b6..38fa4b560 100644
--- a/src/common/AddonDetailsModal/AddonDetails/styles.less
+++ b/src/common/AddonDetailsModal/AddonDetails/styles.less
@@ -7,7 +7,6 @@
         align-items: center;
 
         .logo, .icon {
-            flex: none;
             float: left;
             width: 5rem;
             height: 5rem;
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 973e85429..f71cde176 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -212,7 +212,6 @@
             align-items: center;
 
             .logo, .icon {
-                flex: none;
                 float: left;
                 width: 5rem;
                 height: 5rem;

From ec8de99831db51cf1655b65a11cd3138a94cea79 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 10 Mar 2020 17:19:12 +0200
Subject: [PATCH 35/39] scrollbar styles for firefox

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

diff --git a/src/App/styles.less b/src/App/styles.less
index 37b0758d4..adeabfdc0 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -35,7 +35,7 @@
     overflow: hidden;
     word-break: break-word;
     scrollbar-width: thin;
-    scrollbar-color: var(--color-secondarylighter80) var(--color-backgroundlight);
+    scrollbar-color: @color-secondaryvariant2-light1 @color-background-dark2;
 }
 
 ::-webkit-scrollbar {

From bf5a0c67a7e87cbe30d7664ab369ea6199be2f1b Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 10 Mar 2020 17:20:05 +0200
Subject: [PATCH 36/39] share modal unnecessary check removed

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

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 41d4b5145..fe7e190f9 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -187,7 +187,7 @@ const Addons = ({ urlParams, queryParams }) => {
                     null
             }
             {
-                sharedAddon !== null && typeof sharedAddon.transportUrl === 'string' ?
+                sharedAddon !== null ?
                     <ModalDialog
                         className={styles['share-modal-container']}
                         title={'Share Addon'}

From a1b023b28bf7e04e66599ca5cefc071b9afda51b Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 10 Mar 2020 17:28:26 +0200
Subject: [PATCH 37/39] add addon modal url uses only outline

---
 src/routes/Addons/styles.less | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index f71cde176..3543eb594 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -168,9 +168,10 @@
 
         .addon-url-input {
             width: 100%;
-            padding: 0.8rem;
+            padding: 1rem;
             color: @color-surface-dark5;
-            border: var(--focus-outline-size) solid @color-surface-light2;
+            outline: var(--focus-outline-size) solid @color-surface-light2;
+            outline-offset: calc(-1 * var(--focus-outline-size));
 
             &:hover, &:focus {
                 outline-style: solid;

From d5d63b3e6be70d7f38d6a167aab6ae1c0d187713 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 10 Mar 2020 17:31:12 +0200
Subject: [PATCH 38/39] add addon modal url uses only outline

---
 src/routes/Addons/styles.less | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index f71cde176..9a1719ef4 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -168,15 +168,13 @@
 
         .addon-url-input {
             width: 100%;
-            padding: 0.8rem;
+            padding: 1rem;
             color: @color-surface-dark5;
-            border: var(--focus-outline-size) solid @color-surface-light2;
+            outline: var(--focus-outline-size) solid @color-surface-light2;
+            outline-offset: calc(-1 * var(--focus-outline-size));
 
-            &:hover, &:focus {
-                outline-style: solid;
-                outline-width: var(--focus-outline-size);
+            &:hover {
                 outline-color: @color-surface-light4;
-                outline-offset: calc(-1 * var(--focus-outline-size));
             }
 
             &:focus {

From bbf9b15a17f73a93cec6b8bf281ed9caa39bef4c Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 10 Mar 2020 17:37:53 +0200
Subject: [PATCH 39/39] Addons search opacity 1 added

---
 src/routes/Addons/styles.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 9a1719ef4..993cf2cfa 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -121,6 +121,7 @@
 
                     &::placeholder {
                         max-height: 1.2em;
+                        opacity: 1;
                         color: @color-secondaryvariant1-light1-90;
                     }
                 }