From bf57bf993a6d389e453249bd12df62273aedb9ac Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 16 Mar 2020 15:19:12 +0200
Subject: [PATCH 01/56] not needed renderMultiselectLabelContent func removed;
 prev/next label added

---
 src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js
index d830d710d..5fdd455da 100644
--- a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js
+++ b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBar.js
@@ -16,9 +16,6 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
     const selected = React.useMemo(() => {
         return [String(season)];
     }, [season]);
-    const renderMultiselectLabelContent = React.useMemo(() => () => (
-        <div className={styles['season-label']}>Season {season}</div>
-    ), [season]);
     const prevNextButtonOnClick = React.useCallback((event) => {
         if (typeof onSelect === 'function') {
             const seasonIndex = seasons.indexOf(season);
@@ -50,6 +47,7 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
         <div className={classnames(className, styles['seasons-bar-container'])}>
             <Button className={styles['prev-season-button']} data-action={'prev'} onClick={prevNextButtonOnClick}>
                 <Icon className={styles['icon']} icon={'ic_arrow_left'} />
+                <div className={styles['label']}>Prev</div>
             </Button>
             <Multiselect
                 className={styles['seasons-popup-label-container']}
@@ -57,10 +55,10 @@ const SeasonsBar = ({ className, seasons, season, onSelect }) => {
                 options={options}
                 selected={selected}
                 disabled={false}
-                renderLabelContent={renderMultiselectLabelContent}
                 onSelect={seasonOnSelect}
             />
             <Button className={styles['next-season-button']} data-action={'next'} onClick={prevNextButtonOnClick}>
+                <div className={styles['label']}>Next</div>
                 <Icon className={styles['icon']} icon={'ic_arrow_right'} />
             </Button>
         </div>

From 658362154b2f78e1c580660d3deb9c2059002225 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 16 Mar 2020 15:27:46 +0200
Subject: [PATCH 02/56] SeasonsBar styles adapted to design changes

---
 .../VideosList/SeasonsBar/styles.less         | 73 ++++++++++++++-----
 1 file changed, 53 insertions(+), 20 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
index b70da1d3f..0281736d1 100644
--- a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
+++ b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
@@ -1,24 +1,54 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
+:import('~stremio/common/Multiselect/styles.less') {
+    season-label: label;
+    season-icon: icon;
+}
+
 .seasons-bar-container {
     display: flex;
     flex-direction: row;
     overflow: visible;
+    background: @color-background-dark3-80;
 
     .prev-season-button, .next-season-button {
         flex: none;
-        width: 4rem;
-        height: 4rem;
-        padding: 1rem;
-        background-color: var(--color-surfacedarker60);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        width: 6.5rem;
+        padding: 0.5rem;
 
-        &:hover, &:focus {
-            background-color: var(--color-surfacedarker);
+        &:hover {
+            .label {
+                color: @color-surface-dark1;
+            }
+
+            .icon {
+                fill: @color-surface-dark3;
+            }
+        }
+
+        &:focus {
+            outline: none;
+            background-color: @color-surface-light5-10;
+        }
+
+        &>:first-child {
+            margin-right: 1rem;
+        }
+
+        .label {
+            max-height: 1.2em;
+            color: @color-surface-dark3-90;
         }
 
         .icon {
             display: block;
-            width: 100%;
-            height: 100%;
-            fill: var(--color-surfacelighter);
+            width: 1.5rem;
+            height: 1.5rem;
+            fill: @color-surface-dark5;
         }
     }
 
@@ -28,26 +58,29 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        margin: 0 1rem;
-        background-color: var(--color-surfacedarker60);
+        margin: 0 2rem;
+        background-color: unset;
         overflow: visible;
 
         &:hover, &:focus {
-            background-color: var(--color-surfacedarker);
+            background-color: @color-background-dark1;
+
+            .season-icon {
+                fill: @color-surface-dark3;
+            }
         }
 
         &:global(.active) {
-            background-color: var(--color-surfacedark);
+            background-color: @color-background;
         }
 
         .season-label {
-            flex-grow: 0;
-            flex-shrink: 1;
-            flex-basis: auto;
-            max-height: 3.6em;
-            padding: 0 0.2rem;
-            font-size: 1.1rem;
-            color: var(--color-surfacelighter);
+            flex: none;
+            color: @color-surface-light5-90;
+        }
+
+        .season-icon {
+            fill: @color-surface-dark5;
         }
     }
 }
\ No newline at end of file

From c3f7d78aeaa1561ee47f89a5e7fa325c8c73e799 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 17 Mar 2020 15:04:16 +0200
Subject: [PATCH 03/56] Stream uses PlayIconCircleCentered component; addonName
 removed from info-container

---
 .../MetaDetails/StreamsList/Stream/Stream.js   | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/Stream/Stream.js b/src/routes/MetaDetails/StreamsList/Stream/Stream.js
index 13cf4f04b..63acbfe14 100644
--- a/src/routes/MetaDetails/StreamsList/Stream/Stream.js
+++ b/src/routes/MetaDetails/StreamsList/Stream/Stream.js
@@ -2,7 +2,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-const { Button, Image } = require('stremio/common');
+const { Button, Image, PlayIconCircleCentered } = require('stremio/common');
 const StreamPlaceholder = require('./StreamPlaceholder');
 const styles = require('./styles');
 
@@ -11,7 +11,7 @@ const Stream = ({ className, addonName, title, thumbnail, progress, ...props })
         <Button {...props} className={classnames(className, styles['stream-container'])} title={title}>
             {
                 typeof thumbnail === 'string' && thumbnail.length > 0 ?
-                    <div className={styles['thumbnail-container']}>
+                    <div className={styles['thumbnail-container']} title={addonName}>
                         <Image
                             className={styles['thumbnail']}
                             src={thumbnail}
@@ -29,18 +29,8 @@ const Stream = ({ className, addonName, title, thumbnail, progress, ...props })
                         <div className={styles['addon-name']}>{addonName}</div>
                     </div>
             }
-            <div className={styles['info-container']}>
-                {
-                    typeof thumbnail === 'string' && thumbnail.length > 0 ?
-                        <div className={styles['addon-name-label']}>{addonName}</div>
-                        :
-                        null
-                }
-                <div className={styles['title-label']}>{title}</div>
-            </div>
-            <div className={styles['play-icon-container']}>
-                <Icon className={styles['play-icon']} icon={'ic_play'} />
-            </div>
+            <div className={styles['info-container']}>{title}</div>
+            <PlayIconCircleCentered className={styles['play-icon']} />
             {
                 progress !== null && !isNaN(progress) && progress > 0 ?
                     <div className={styles['progress-bar-container']}>

From 1c9c08104c177b52d5dca47bfed669fe6650bef8 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 17 Mar 2020 17:05:51 +0200
Subject: [PATCH 04/56] Stream styles adapted to design changes

---
 .../StreamsList/Stream/styles.less            | 67 ++++++++++---------
 1 file changed, 37 insertions(+), 30 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/Stream/styles.less b/src/routes/MetaDetails/StreamsList/Stream/styles.less
index 589037827..2b3f4dd24 100644
--- a/src/routes/MetaDetails/StreamsList/Stream/styles.less
+++ b/src/routes/MetaDetails/StreamsList/Stream/styles.less
@@ -1,13 +1,29 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
+:import('~stremio/common/PlayIconCircleCentered/styles.less') {
+    play-icon-circle-centered-background: background;
+    play-icon-circle-centered-icon: icon;
+}
+
 .stream-container {
     display: flex;
     flex-direction: row;
     align-items: center;
     flex-wrap: wrap;
-    min-width: 18rem;
-    background-color: var(--color-surfacedarker60);
+    background-color: @color-background-dark3-80;
 
     &:hover, &:focus {
-        background-color: var(--color-surfacedarker);
+        background-color: @color-background;
+
+        .play-icon {
+            .play-icon-circle-centered-background {
+                fill: @color-accent4;
+            }
+
+            .play-icon-circle-centered-icon {
+                fill: @color-surface-light5;
+            }
+        }
     }
 
     .thumbnail-container, .addon-name-container {
@@ -26,7 +42,7 @@
             display: block;
             width: 5rem;
             height: 5rem;
-            fill: var(--color-surfacelight20);
+            fill: @color-secondaryvariant1-light3;
         }
 
         .addon-name {
@@ -34,38 +50,29 @@
             max-height: 3.6em;
             font-size: 1.1rem;
             text-align: center;
-            color: var(--color-surfacelighter);
+            color: @color-surface-light5;
         }
     }
 
     .info-container {
         flex: 1;
-        padding: 0.5rem;
-
-        .addon-name-label {
-            font-size: 1.1rem;
-            max-height: 3.6em;
-            margin-bottom: 0.5rem;
-            color: var(--color-surfacelighter);
-        }
-
-        .title-label {
-            max-height: 3.6em;
-            color: var(--color-surfacelighter);
-        }
+        max-height: 3.6em;
+        margin: 0.5rem;
+        font-size: 0.8rem;
+        color: @color-surface-90;
     }
 
-    .play-icon-container {
-        flex: none;
-        width: 6rem;
-        height: 6rem;
-        padding: 2rem;
+    .play-icon {
+        width: 3.5rem;
+        height: 5rem;
+        margin: 0.5rem 1.5rem 0.5rem 0.5rem;
 
-        .play-icon {
-            display: block;
-            width: 100%;
-            height: 100%;
-            fill: var(--color-surfacelighter);
+        .play-icon-circle-centered-background {
+            fill: none;
+        }
+
+        .play-icon-circle-centered-icon {
+            fill: @color-surface-dark5;
         }
     }
 
@@ -73,11 +80,11 @@
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 100%;
-        background-color: var(--color-backgroundlighter);
+        background-color: @color-background-light2;
 
         .progress-bar {
             height: 0.5rem;
-            background-color: var(--color-primary);
+            background-color: @color-primaryvariant1;
         }
     }
 }
\ No newline at end of file

From 6ce25dd493a5e2dd33dc488ae2addb8579ba0af9 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 17 Mar 2020 18:39:51 +0200
Subject: [PATCH 05/56] StreamsList styles adapted to design changes

---
 .../MetaDetails/StreamsList/StreamsList.js    |  4 +--
 .../MetaDetails/StreamsList/styles.less       | 32 +++++++------------
 2 files changed, 13 insertions(+), 23 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index 2e0f8de86..3d10a9518 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -38,9 +38,9 @@ const StreamsList = ({ className, streamsResources }) => {
                                 </React.Fragment>
                 }
             </div>
-            <Button className={styles['install-addons-container']} title={'Install addons'} href={'#/addons'}>
+            <Button className={styles['install-addons-container']} title={'Install Addons'} href={'#/addons'}>
                 <Icon className={styles['icon']} icon={'ic_addons'} />
-                <div className={styles['label']}>Install addons</div>
+                <div className={styles['label']}>Install Addons</div>
             </Button>
         </div>
     );
diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index f6cc71c59..88c4389a3 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -1,7 +1,8 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .streams-list-container {
     display: flex;
     flex-direction: column;
-    background: var(--color-backgrounddark80);
 
     .streams-scroll-container {
         flex-grow: 0;
@@ -14,20 +15,11 @@
             padding: 2rem 0;
             font-size: 2rem;
             text-align: center;
-            color: var(--color-surfacelighter);
+            color: @color-surface-light5;
         }
 
         .stream {
             width: var(--item-size);
-            margin: 1rem 2rem;
-
-            &:first-child {
-                margin-top: 2rem;
-            }
-
-            &:last-child {
-                margin-bottom: 0;
-            }
         }
     }
 
@@ -38,30 +30,28 @@
         flex-direction: row;
         align-items: center;
         justify-content: center;
-        width: var(--item-size);
-        margin: 1rem 2rem 2rem 2rem;
-        padding: 1rem;
-        background-color: var(--color-signal5);
+        padding: 1.3rem;
+        background-color: @color-accent3;
 
         &:hover, &:focus {
-            filter: brightness(1.2);
+            background-color: @color-accent3-light2;
         }
 
         .icon {
             flex: none;
-            width: 3rem;
-            height: 3rem;
+            width: 2rem;
+            height: 2rem;
             margin-right: 1rem;
-            fill: var(--color-surfacelighter);
+            fill: @color-surface-light5;
         }
 
         .label {
             flex-grow: 0;
             flex-shrink: 1;
             flex-basis: auto;
-            font-size: 1.5rem;
+            font-size: 1.4rem;
             max-height: 3.6em;
-            color: var(--color-surfacelighter);
+            color: @color-surface-light5;
         }
     }
 }
\ No newline at end of file

From 07c9bfa445a7e675ddb70231a151e30fc9891a5e Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 17 Mar 2020 18:51:25 +0200
Subject: [PATCH 06/56] new color theme applied to ActionButton

---
 src/common/MetaPreview/ActionButton/styles.less | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/common/MetaPreview/ActionButton/styles.less b/src/common/MetaPreview/ActionButton/styles.less
index 748b3a39d..c301df320 100644
--- a/src/common/MetaPreview/ActionButton/styles.less
+++ b/src/common/MetaPreview/ActionButton/styles.less
@@ -1,10 +1,13 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .action-button-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    background-color: @color-surface-light5-20;
 
     &:hover, &:focus {
-        background-color: var(--color-surfacedarker60);
+        background-color: @color-accent3;
     }
 
     .icon-container {
@@ -21,7 +24,7 @@
             display: block;
             width: 100%;
             height: 100%;
-            fill: var(--color-surfacelighter);
+            fill: @color-surface-light5;
         }
     }
 
@@ -38,7 +41,7 @@
             padding: 0 0.2rem;
             max-height: 2.4em;
             text-align: center;
-            color: var(--color-surfacelighter);
+            color: @color-surface-light5-90;
         }
     }
 }
\ No newline at end of file

From 8e92119618d225a205c0315e52c337ad3c91c3bd Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 18 Mar 2020 19:31:58 +0200
Subject: [PATCH 07/56] MetaLinks focus allowed

---
 src/common/MetaPreview/MetaLinks/MetaLinks.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/common/MetaPreview/MetaLinks/MetaLinks.js b/src/common/MetaPreview/MetaLinks/MetaLinks.js
index 0ddb3d096..586606393 100644
--- a/src/common/MetaPreview/MetaLinks/MetaLinks.js
+++ b/src/common/MetaPreview/MetaLinks/MetaLinks.js
@@ -9,7 +9,7 @@ const MetaLinks = ({ className, label, links }) => {
         <div className={classnames(className, styles['meta-links-container'])}>
             {
                 typeof label === 'string' && label.length > 0 ?
-                    <div className={styles['label-container']}>{label}:</div>
+                    <div className={styles['label-container']}>{label}</div>
                     :
                     null
             }
@@ -17,9 +17,8 @@ const MetaLinks = ({ className, label, links }) => {
                 Array.isArray(links) && links.length > 0 ?
                     <div className={styles['links-container']}>
                         {links.map(({ label, href }, index) => (
-                            <Button key={index} className={styles['link-container']} title={label} tabIndex={-1} href={href}>
+                            <Button key={index} className={styles['link-container']} title={label} href={href}>
                                 {label}
-                                {index < links.length - 1 ? ',' : null}
                             </Button>
                         ))}
                     </div>

From 304e640a3c1491a9aee5c09f3c9ef08aa6c11924 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 18 Mar 2020 19:32:40 +0200
Subject: [PATCH 08/56] MetaLinks styles adapted to design changes

---
 src/common/MetaPreview/MetaLinks/styles.less | 21 +++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/common/MetaPreview/MetaLinks/styles.less b/src/common/MetaPreview/MetaLinks/styles.less
index 1a9ded8ba..5d1c7b25c 100644
--- a/src/common/MetaPreview/MetaLinks/styles.less
+++ b/src/common/MetaPreview/MetaLinks/styles.less
@@ -1,8 +1,10 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .meta-links-container {
     .label-container {
         margin-bottom: 0.2rem;
-        font-size: 1.2rem;
-        color: var(--color-surfacelighter);
+        text-transform: uppercase;
+        color: @color-surface-dark3-90;
     }
 
     .links-container {
@@ -16,12 +18,21 @@
             flex-basis: auto;
             margin-right: 0.5rem;
             margin-bottom: 0.2rem;
+            padding: 0.3rem 0.5rem;
             white-space: nowrap;
             text-overflow: ellipsis;
-            color: var(--color-surfacelighter);
+            border-radius: 2rem;
+            border: var(--focus-outline-size) solid transparent;
+            color: @color-surface-light2-90;
+            background-color: @color-surface-light5-20;
 
-            &:hover {
-                text-decoration: underline;
+            &:hover, &:focus {
+                background-color: @color-surface-light5-30;
+            }
+
+            &:focus {
+                outline: none;
+                border-color: @color-surface-light5;
             }
         }
     }

From e08fe92336c51059714679d82a08023eb0cbc6bc Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 20 Mar 2020 11:21:40 +0200
Subject: [PATCH 09/56] Video styles adapted to design changes

---
 .../MetaDetails/VideosList/Video/Video.js     |  43 +++---
 .../MetaDetails/VideosList/Video/styles.less  | 122 +++++++++---------
 2 files changed, 86 insertions(+), 79 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/Video/Video.js b/src/routes/MetaDetails/VideosList/Video/Video.js
index 4b13e30e6..db9af6e97 100644
--- a/src/routes/MetaDetails/VideosList/Video/Video.js
+++ b/src/routes/MetaDetails/VideosList/Video/Video.js
@@ -34,31 +34,32 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
                 </div>
                 {
                     released instanceof Date && !isNaN(released.getTime()) ?
-                        <div className={styles['released-container']}>
-                            {released.toLocaleString(undefined, { year: '2-digit', month: 'short', day: 'numeric' })}
+                        <div className={styles['released-info-container']}>
+                            <div className={styles['released-container']}>
+                                {released.toLocaleString(undefined, { year: '2-digit', month: 'short', day: 'numeric' })}
+                            </div>
+                            <div className={styles['upcoming-watched-container']}>
+                                {
+                                    upcoming ?
+                                        <div className={styles['upcoming-container']}>
+                                            <div className={styles['flag-label']}>Upcoming</div>
+                                        </div>
+                                        :
+                                        null
+                                }
+                                {
+                                    watched ?
+                                        <div className={styles['watched-container']}>
+                                            <div className={styles['flag-label']}>Watched</div>
+                                        </div>
+                                        :
+                                        null
+                                }
+                            </div>
                         </div>
                         :
                         null
                 }
-                {
-                    upcoming ?
-                        <div className={styles['upcoming-container']}>
-                            <div className={styles['flag-label']}>Upcoming</div>
-                        </div>
-                        :
-                        null
-                }
-                {
-                    watched ?
-                        <div className={styles['watched-container']}>
-                            <div className={styles['flag-label']}>Watched</div>
-                        </div>
-                        :
-                        null
-                }
-            </div>
-            <div className={styles['next-icon-container']}>
-                <Icon className={styles['next-icon']} icon={'ic_arrow_thin_right'} />
             </div>
             {
                 progress !== null && !isNaN(progress) && progress > 0 ?
diff --git a/src/routes/MetaDetails/VideosList/Video/styles.less b/src/routes/MetaDetails/VideosList/Video/styles.less
index 8d9e5b855..a190a03cb 100644
--- a/src/routes/MetaDetails/VideosList/Video/styles.less
+++ b/src/routes/MetaDetails/VideosList/Video/styles.less
@@ -1,11 +1,13 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .video-container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    background-color: var(--color-surfacedarker60);
+    background-color: @color-background-dark3-80;
 
     &:hover, &:focus {
-        background-color: var(--color-surfacedarker);
+        background-color: @color-background;
     }
 
     .thumbnail-container {
@@ -16,7 +18,7 @@
         .thumbnail {
             display: block;
             width: 5rem;
-            max-height: 10rem;
+            height: 5rem;
             object-fit: contain;
             object-position: center;
         }
@@ -25,7 +27,7 @@
             display: block;
             width: 5rem;
             height: 5rem;
-            fill: var(--color-surfacelight20);
+            fill: @color-secondaryvariant1-light3;
         }
     }
 
@@ -33,69 +35,73 @@
         flex: 1;
         align-self: stretch;
         display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-content: flex-start;
+        flex-direction: column;
+        justify-content: space-between;
         padding: 0.5rem;
 
         &:first-child {
-            align-content: center;
-        }
+            height: 4rem;
 
-        .title-container {
-            flex-grow: 0;
-            flex-shrink: 0;
-            flex-basis: 100%;
-            max-height: 4.8em;
-            color: var(--color-surfacelighter);
-        }
-
-        .released-container {
-            flex-grow: 0;
-            flex-shrink: 0;
-            flex-basis: 100%;
-            margin-top: 0.5rem;
-            font-size: 0.8rem;
-            max-height: 2.4em;
-            color: var(--color-surfacelight);
-        }
-
-        .watched-container, .upcoming-container {
-            flex: none;
-            max-width: 100%;
-            margin-top: 0.5rem;
-            margin-right: 0.5rem;
-            padding: 0.2rem 0.4rem;
-
-            .flag-label {
-                max-height: 2.4em;
-                font-size: 0.8rem;
-                font-weight: 700;
-                text-transform: uppercase;
-                color: var(--color-surfacelighter);
-                text-shadow: 1px 1px var(--color-surfacedarker60);
+            .title-container {
+                max-height: 1.2em;
             }
         }
 
-        .upcoming-container {
-            background-color: var(--color-signal5);
+        .title-container {
+            max-height: 2.4em;
+            color: @color-surface-light5-90;
         }
 
-        .watched-container {
-            background-color: var(--color-primarylight);
-        }
-    }
+        .released-info-container {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            margin-top: 0.5rem;
 
-    .next-icon-container {
-        flex: none;
-        align-self: center;
-        padding: 0.5rem;
+            .released-container {
+                flex: 1;
+                margin-right: 0.5rem;
+                font-size: 0.8rem;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                text-transform: uppercase;
+                color: @color-surface-dark5;
+            }
 
-        .next-icon {
-            display: block;
-            width: 1rem;
-            height: 1.5rem;
-            fill: var(--color-surfacelighter);
+            .upcoming-watched-container {
+                display: flex;
+                flex-direction: row;
+
+                &>:nth-child(2) {
+                    margin-left: 0.5rem;
+                }
+
+                .upcoming-container, .watched-container {
+                    padding: 0.2rem 0.4rem;
+                    max-width: 10rem;
+
+                    &:not(:only-child) {
+                        max-width: 5rem;
+                    }
+
+                    .flag-label {
+                        font-size: 0.8rem;
+                        font-weight: 500;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        text-transform: uppercase;
+                        color: @color-background;
+                    }
+                }
+
+                .upcoming-container {
+                    background-color: @color-accent4;
+                }
+
+                .watched-container {
+                    background-color: @color-accent5;
+                }
+            }
         }
     }
 
@@ -103,11 +109,11 @@
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 100%;
-        background-color: var(--color-backgroundlighter);
+        background-color: @color-background-light2;
 
         .progress-bar {
             height: 0.5rem;
-            background-color: var(--color-primary);
+            background-color: @color-primaryvariant1;
         }
     }
 }
\ No newline at end of file

From 43718197e4eef5b6e46492d31796ef25aa587977 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 23 Mar 2020 13:17:22 +0200
Subject: [PATCH 10/56] search added to VideosList

---
 .../MetaDetails/VideosList/VideosList.js      | 40 +++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index d7e04b78a..88990d005 100644
--- a/src/routes/MetaDetails/VideosList/VideosList.js
+++ b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -1,6 +1,8 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
+const Icon = require('stremio-icons/dom');
+const TextInput = require('stremio/common/TextInput');
 const SeasonsBar = require('./SeasonsBar');
 const Video = require('./Video');
 const useSelectableSeasons = require('./useSelectableSeasons');
@@ -17,6 +19,10 @@ const VideosList = ({ className, metaResource }) => {
     const seasonOnSelect = React.useCallback((event) => {
         selectSeason(event.value);
     }, []);
+    const [search, setSearch] = React.useState('');
+    const searchInputOnChange = React.useCallback((event) => {
+        setSearch(event.currentTarget.value);
+    }, []);
     return (
         <div className={classnames(className, styles['videos-list-container'])}>
             {
@@ -49,14 +55,34 @@ const VideosList = ({ className, metaResource }) => {
                                     :
                                     null
                             }
-                            <div className={styles['videos-scroll-container']}>
-                                {videosForSeason.map((video, index) => (
-                                    <Video
-                                        {...video}
-                                        key={index}
-                                        className={styles['video']}
+                            <div className={styles['search-container']}>
+                                <label className={styles['search-bar-container']}>
+                                    <TextInput
+                                        className={styles['search-input']}
+                                        type={'text'}
+                                        placeholder={'Search addons'}
+                                        value={search}
+                                        onChange={searchInputOnChange}
                                     />
-                                ))}
+                                    <Icon className={styles['icon']} icon={'ic_search'} />
+                                </label>
+                            </div>
+                            <div className={styles['videos-scroll-container']}>
+                                {videosForSeason
+                                    .filter((video) => {
+                                        return search.length === 0 ||
+                                            (
+                                                (typeof video.title === 'string' && video.title.toLowerCase().includes(search.toLowerCase())) ||
+                                                (video.released.toLocaleString(undefined, { year: '2-digit', month: 'short', day: 'numeric' }).toLowerCase().includes(search.toLowerCase()))
+                                            );
+                                    })
+                                    .map((video, index) => (
+                                        <Video
+                                            {...video}
+                                            key={index}
+                                            className={styles['video']}
+                                        />
+                                    ))}
                             </div>
                         </React.Fragment>
             }

From 65d584d4dc4d81fb544854caebab6a1ca2eaa885 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 23 Mar 2020 13:17:57 +0200
Subject: [PATCH 11/56] VideosList styles adapted to design changes

---
 src/routes/MetaDetails/VideosList/styles.less | 75 ++++++++++++++-----
 1 file changed, 55 insertions(+), 20 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/styles.less b/src/routes/MetaDetails/VideosList/styles.less
index 6311956c7..b337e5477 100644
--- a/src/routes/MetaDetails/VideosList/styles.less
+++ b/src/routes/MetaDetails/VideosList/styles.less
@@ -1,18 +1,70 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .videos-list-container {
     display: flex;
     flex-direction: column;
-    background: var(--color-backgrounddark80);
 
     .seasons-bar, .message-label {
         flex: none;
         width: var(--item-size);
-        margin: 2rem 2rem 1rem 2rem;
+        padding: 1rem 0;
     }
 
     .message-label {
         font-size: 1.4rem;
         text-align: center;
-        color: var(--color-surfacelighter);
+        color: @color-surface-light5;
+    }
+
+    .search-container {
+        padding: 0 1.5rem 1rem 1.5rem;
+        background-color: @color-background-dark3-80;
+
+        &:first-child {
+            padding-top: 1rem;
+        }
+
+        .search-bar-container {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            width: calc(var(--item-size) - 3rem);
+            height: 3.5rem;
+            padding: 0 1rem;
+            border-radius: 2.3rem;
+            border: var(--focus-outline-size) solid transparent;
+            background-color: @color-background-dark1;
+            cursor: text;
+
+            &:hover, &:focus-within {
+                background-color: @color-background;
+            }
+
+            &:focus-within {
+                border: var(--focus-outline-size) solid @color-surface-light5;
+            }
+
+            .search-input {
+                flex: 1;
+                margin-right: 1rem;
+                font-size: 1.1rem;
+                color: @color-surface-light5;
+
+                &::placeholder {
+                    max-height: 1.2em;
+                    opacity: 1;
+                    color: @color-secondaryvariant1-light1-90;
+                }
+            }
+
+            .icon {
+                flex: none;
+                width: 1.5rem;
+                height: 1.5rem;
+                fill: @color-secondaryvariant1;
+            }
+
+        }
     }
 
     .videos-scroll-container {
@@ -20,25 +72,8 @@
         align-self: stretch;
         overflow-y: auto;
 
-        &:first-child {
-            .video {
-                &:first-child {
-                    margin-top: 2rem;
-                }
-            }
-        }
-
         .video {
             width: var(--item-size);
-            margin: 1rem 2rem;
-
-            &:first-child {
-                margin-top: 0;
-            }
-
-            &:last-child {
-                margin-bottom: 2rem;
-            }
         }
     }
 }
\ No newline at end of file

From e1aafa149a13fd4b43fb378ef15743f88ad97feb Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 23 Mar 2020 13:18:22 +0200
Subject: [PATCH 12/56] SeasonsBar prev/next button focus fixed

---
 src/routes/MetaDetails/VideosList/SeasonsBar/styles.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
index 0281736d1..f765e4c42 100644
--- a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
+++ b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
@@ -20,7 +20,7 @@
         width: 6.5rem;
         padding: 0.5rem;
 
-        &:hover {
+        &:hover, &:focus {
             .label {
                 color: @color-surface-dark1;
             }

From 32090b4f5ee97a643a602baf27c0575bb187439c Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 24 Mar 2020 10:46:08 +0200
Subject: [PATCH 13/56] MetaDetails styles adapted to design changes

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

diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less
index 4bdea39ca..481af6738 100644
--- a/src/routes/MetaDetails/styles.less
+++ b/src/routes/MetaDetails/styles.less
@@ -1,9 +1,11 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .metadetails-container {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
-    background-color: var(--color-background);
+    background-color: @color-background-dark2;
 
     .nav-bar {
         flex: none;
@@ -30,9 +32,9 @@
                 display: block;
                 width: 100%;
                 height: 100%;
+                opacity: 0.2;
                 object-fit: cover;
                 object-position: top left;
-                filter: brightness(50%);
             }
         }
 
@@ -42,7 +44,7 @@
         }
 
         .videos-list, .streams-list {
-            --item-size: 28rem;
+            --item-size: 26.5rem;
             flex-grow: 0;
             flex-shrink: 0;
             flex-basis: auto;

From 8b5f5804428041624b339dee3a4a7770c4baf82f Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 24 Mar 2020 13:29:49 +0200
Subject: [PATCH 14/56] MetaPreview imdb button uses Button component instead
 of ActionButton

---
 src/common/MetaPreview/MetaPreview.js | 34 +++++++++++++++------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/common/MetaPreview/MetaPreview.js b/src/common/MetaPreview/MetaPreview.js
index 0aca83e9a..2b2d5851b 100644
--- a/src/common/MetaPreview/MetaPreview.js
+++ b/src/common/MetaPreview/MetaPreview.js
@@ -3,6 +3,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const UrlUtils = require('url');
 const Icon = require('stremio-icons/dom');
+const Button = require('stremio/common/Button');
 const Image = require('stremio/common/Image');
 const ModalDialog = require('stremio/common/ModalDialog');
 const SharePrompt = require('stremio/common/SharePrompt');
@@ -102,8 +103,14 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                         null
                 }
                 {
-                    (typeof releaseInfo === 'string' && releaseInfo.length > 0) || (released instanceof Date && !isNaN(released.getTime())) || (typeof runtime === 'string' && runtime.length > 0) ?
+                    (typeof releaseInfo === 'string' && releaseInfo.length > 0) || (released instanceof Date && !isNaN(released.getTime())) || (typeof runtime === 'string' && runtime.length > 0) || typeof linksGroups[IMDB_LINK_CATEGORY] === 'object' ?
                         <div className={styles['runtime-release-info-container']}>
+                            {
+                                typeof runtime === 'string' && runtime.length > 0 ?
+                                    <div className={styles['runtime-label']}>{runtime}</div>
+                                    :
+                                    null
+                            }
                             {
                                 typeof releaseInfo === 'string' && releaseInfo.length > 0 ?
                                     <div className={styles['release-info-label']}>{releaseInfo}</div>
@@ -114,8 +121,17 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                                         null
                             }
                             {
-                                typeof runtime === 'string' && runtime.length > 0 ?
-                                    <div className={styles['runtime-label']}>{runtime}</div>
+                                typeof linksGroups[IMDB_LINK_CATEGORY] === 'object' ?
+                                    <Button
+                                        className={styles['imdb-button-container']}
+                                        title={linksGroups[IMDB_LINK_CATEGORY].label}
+                                        href={linksGroups[IMDB_LINK_CATEGORY].href}
+                                        target={'_blank'}
+                                        {...(compact ? { tabIndex: -1 } : null)}
+                                    >
+                                        <Icon className={styles['icon']} icon={'ic_imdbnoframe'} />
+                                        <div className={styles['label']}>{linksGroups[IMDB_LINK_CATEGORY].label}</div>
+                                    </Button>
                                     :
                                     null
                             }
@@ -178,18 +194,6 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                         :
                         null
                 }
-                {
-                    typeof linksGroups[IMDB_LINK_CATEGORY] === 'object' ?
-                        <ActionButton
-                            {...linksGroups[IMDB_LINK_CATEGORY]}
-                            className={styles['action-button']}
-                            icon={'ic_imdb'}
-                            target={'_blank'}
-                            {...(compact ? { tabIndex: -1 } : null)}
-                        />
-                        :
-                        null
-                }
                 {
                     !compact && typeof linksGroups[SHARE_LINK_CATEGORY] === 'object' ?
                         <React.Fragment>

From 18413fbaa850e09264ee36a2fb7453a7c3ff6988 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 24 Mar 2020 14:12:24 +0200
Subject: [PATCH 15/56] MetaPreview styles adapted to design changes

---
 src/common/MetaPreview/styles.less | 67 +++++++++++++++++++++++++-----
 1 file changed, 57 insertions(+), 10 deletions(-)

diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less
index c17afc0cc..f1756c05b 100644
--- a/src/common/MetaPreview/styles.less
+++ b/src/common/MetaPreview/styles.less
@@ -1,3 +1,5 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .meta-preview-container {
     position: relative;
     z-index: 0;
@@ -50,7 +52,8 @@
     .meta-info-container {
         flex: 1;
         align-self: stretch;
-        padding: 0 1rem;
+        width: 32.5rem;
+        padding: 0 2rem;
         overflow-y: auto;
 
         .logo, .logo-placeholder-icon {
@@ -74,6 +77,7 @@
         .runtime-release-info-container {
             display: flex;
             flex-direction: row;
+            align-items: center;
             flex-wrap: wrap;
             margin-top: 1rem;
 
@@ -81,22 +85,61 @@
                 flex-grow: 0;
                 flex-shrink: 1;
                 flex-basis: auto;
-                margin: 1rem 1rem 1rem 0;
-                font-size: 1.2rem;
-                text-align: center;
-                color: var(--color-surfacelighter);
+                margin-right: 2rem;
+                margin-bottom: 0.5rem;
+                font-size: 1.4rem;
+                color: @color-surface-light5-90;
+            }
+
+            .imdb-button-container {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                margin-bottom: 0.5rem;
+                padding: 0.3rem 1rem;
+                border-radius: 2.3rem;
+                border: var(--focus-outline-size) solid transparent;
+                background-color: @color-surface-light5-20;
+
+                &:hover, &:focus-within {
+                    background-color: @color-surface-light5-30;
+                }
+
+                &:focus-within {
+                    outline: none;
+                    border: var(--focus-outline-size) solid @color-surface-light5;
+                }
+
+                .icon {
+                    flex: none;
+                    width: 3rem;
+                    margin-right: 1rem;
+                    fill: @color-surface-dark2;
+                }
+
+                .label {
+                    flex-grow: 0;
+                    flex-shrink: 1;
+                    flex-basis: auto;
+                    max-height: 1.2em;
+                    font-size: 1.6rem;
+                    font-weight: 500;
+                    color: @color-surface-light5-90;
+                }
             }
         }
 
         .name-container {
             margin-top: 1rem;
-            font-size: 1.4rem;
-            color: var(--color-surfacelighter);
+            font-size: 1.7rem;
+            color: @color-surface-light5-90;
         }
 
         .description-container {
+            max-height: 6.8em;
             margin-top: 1rem;
-            color: var(--color-surfacelighter);
+            line-height: 1.7em;
+            color: @color-surface-light5-90;
         }
 
         .meta-links {
@@ -110,13 +153,17 @@
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
-        padding: 0 1rem;
+        padding: 0 2rem;
 
         .action-button {
             flex: none;
             width: 6rem;
             height: 6rem;
-            margin: 1rem 0;
+            margin: 2rem 0;
+
+            &:not(:last-child) {
+                margin-right: 1.5rem;
+            }
         }
     }
 }

From d993db6127948d170bad39dec1cb9542c8f822b5 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 25 Mar 2020 14:39:29 +0200
Subject: [PATCH 16/56] meta_details_cat image added

---
 images/meta_details_cat.png | Bin 0 -> 10018 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 images/meta_details_cat.png

diff --git a/images/meta_details_cat.png b/images/meta_details_cat.png
new file mode 100644
index 0000000000000000000000000000000000000000..f16d1a43b09422fdefb535b6db8e3cb8bab217e4
GIT binary patch
literal 10018
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

literal 0
HcmV?d00001


From 521146e72234aec8cbdc7861ad88811208fdbd6c Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 25 Mar 2020 15:34:44 +0200
Subject: [PATCH 17/56] VideosList message container styled

---
 .../MetaDetails/VideosList/VideosList.js      |  6 +++--
 src/routes/MetaDetails/VideosList/styles.less | 27 +++++++++++++++----
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index 88990d005..6db7c5ee3 100644
--- a/src/routes/MetaDetails/VideosList/VideosList.js
+++ b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -2,6 +2,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
+const Image = require('stremio/common/Image');
 const TextInput = require('stremio/common/TextInput');
 const SeasonsBar = require('./SeasonsBar');
 const Video = require('./Video');
@@ -39,8 +40,9 @@ const VideosList = ({ className, metaResource }) => {
                     </React.Fragment>
                     :
                     metaResource.content.type === 'Err' || videosForSeason.length === 0 ?
-                        <div className={styles['message-label']}>
-                            No videos found for this meta
+                        <div className={styles['message-container']}>
+                            <Image className={styles['image']} src={'/images/meta_details_cat.png'} />
+                            <div className={styles['label']}>No videos found for this meta</div>
                         </div>
                         :
                         <React.Fragment>
diff --git a/src/routes/MetaDetails/VideosList/styles.less b/src/routes/MetaDetails/VideosList/styles.less
index b337e5477..dc637da58 100644
--- a/src/routes/MetaDetails/VideosList/styles.less
+++ b/src/routes/MetaDetails/VideosList/styles.less
@@ -4,16 +4,33 @@
     display: flex;
     flex-direction: column;
 
-    .seasons-bar, .message-label {
+    .seasons-bar, .message-container {
         flex: none;
         width: var(--item-size);
+    }
+
+    .seasons-bar {
         padding: 1rem 0;
     }
 
-    .message-label {
-        font-size: 1.4rem;
-        text-align: center;
-        color: @color-surface-light5;
+    .message-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: 100%;
+        padding: 2rem;
+        background-color: @color-background-dark3-80;
+
+        .image {
+            flex: none;
+            margin-bottom: 1rem;
+        }
+
+        .label {
+            font-size: 1.4rem;
+            text-align: center;
+            color: @color-surface-light5;
+        }
     }
 
     .search-container {

From 17aca739900f90461c11f03242cb52a0c3bf9e31 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 25 Mar 2020 18:12:34 +0200
Subject: [PATCH 18/56] StreamsList message container styled

---
 .../MetaDetails/StreamsList/StreamsList.js    | 15 +++++---
 .../MetaDetails/StreamsList/styles.less       | 35 ++++++++++++++++---
 2 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index 3d10a9518..d3610db33 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -2,7 +2,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-const { Button } = require('stremio/common');
+const { Button, Image } = require('stremio/common');
 const Stream = require('./Stream');
 const styles = require('./styles');
 
@@ -14,14 +14,21 @@ const StreamsList = ({ className, streamsResources }) => {
             .flat(1);
     }, [streamsResources]);
     return (
-        <div className={classnames(className, styles['streams-list-container'])}>
+        <div className={classnames(className, styles['streams-list-container'], { 'streams-list-message': streamsResources.length === 0 || streamsResources.every((streamsResource) => streamsResource.content.type === 'Err') })}>
             <div className={styles['streams-scroll-container']}>
                 {
                     streamsResources.length === 0 ?
-                        <div className={styles['message-label']}>No addons ware requested for streams</div>
+                        <div className={styles['message-container']}>
+                            <Image className={styles['image']} src={'/images/meta_details_cat.png'} />
+                            <div className={styles['label']}>No addons were requested for streams</div>
+                        </div>
                         :
                         streamsResources.every((streamsResource) => streamsResource.content.type === 'Err') ?
-                            <div className={styles['message-label']}>No streams were found</div>
+                            <div className={styles['message-container']}>
+                                <Image className={styles['image']} src={'/images/meta_details_cat.png'} />
+                                <div className={styles['label']}>No streams were found!</div>
+                                <div className={styles['description']}>Please install some addons to find more streams</div>
+                            </div>
                             :
                             streams.length > 0 ?
                                 streams.map((stream, index) => (
diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index 88c4389a3..a85963eaf 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -4,6 +4,10 @@
     display: flex;
     flex-direction: column;
 
+    &:global(.streams-list-message) {
+        background-color: @color-background-dark3-80;
+    }
+
     .streams-scroll-container {
         flex-grow: 0;
         flex-shrink: 1;
@@ -11,11 +15,32 @@
         align-self: stretch;
         overflow-y: auto;
 
-        .message-label {
-            padding: 2rem 0;
-            font-size: 2rem;
-            text-align: center;
-            color: @color-surface-light5;
+        .message-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: var(--item-size);
+            height: 100%;
+            padding: 2rem;
+    
+            &>:not(:last-child) {
+                margin-bottom: 1rem;
+            }
+    
+            .image, .label, .description {
+                flex: none;
+            }
+    
+            .label {
+                font-size: 1.4rem;
+                text-align: center;
+                color: @color-surface-light5;
+            }
+    
+            .description {
+                text-align: center;
+                color: @color-surface-dark1;
+            }
         }
 
         .stream {

From 7329d1ab0413dcd4781e0477fdb47aafade4951a Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 11:50:28 +0200
Subject: [PATCH 19/56] meta_details_cat image renamed to empty

---
 images/{meta_details_cat.png => empty.png}        | Bin
 src/routes/MetaDetails/StreamsList/StreamsList.js |   4 ++--
 src/routes/MetaDetails/VideosList/VideosList.js   |   2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename images/{meta_details_cat.png => empty.png} (100%)

diff --git a/images/meta_details_cat.png b/images/empty.png
similarity index 100%
rename from images/meta_details_cat.png
rename to images/empty.png
diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index d3610db33..01ca619b2 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -19,13 +19,13 @@ const StreamsList = ({ className, streamsResources }) => {
                 {
                     streamsResources.length === 0 ?
                         <div className={styles['message-container']}>
-                            <Image className={styles['image']} src={'/images/meta_details_cat.png'} />
+                            <Image className={styles['image']} src={'/images/empty.png'} />
                             <div className={styles['label']}>No addons were requested for streams</div>
                         </div>
                         :
                         streamsResources.every((streamsResource) => streamsResource.content.type === 'Err') ?
                             <div className={styles['message-container']}>
-                                <Image className={styles['image']} src={'/images/meta_details_cat.png'} />
+                                <Image className={styles['image']} src={'/images/empty.png'} />
                                 <div className={styles['label']}>No streams were found!</div>
                                 <div className={styles['description']}>Please install some addons to find more streams</div>
                             </div>
diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index 6db7c5ee3..95bbf300b 100644
--- a/src/routes/MetaDetails/VideosList/VideosList.js
+++ b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -41,7 +41,7 @@ const VideosList = ({ className, metaResource }) => {
                     :
                     metaResource.content.type === 'Err' || videosForSeason.length === 0 ?
                         <div className={styles['message-container']}>
-                            <Image className={styles['image']} src={'/images/meta_details_cat.png'} />
+                            <Image className={styles['image']} src={'/images/empty.png'} />
                             <div className={styles['label']}>No videos found for this meta</div>
                         </div>
                         :

From a65848127546fc56e323b4790b8a45ad184c4737 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 12:19:53 +0200
Subject: [PATCH 20/56] MetaPreview compact class width added

---
 src/common/MetaPreview/styles.less | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less
index f1756c05b..f3f8ef276 100644
--- a/src/common/MetaPreview/styles.less
+++ b/src/common/MetaPreview/styles.less
@@ -8,6 +8,8 @@
 
     &.compact {
         .meta-info-container {
+            width: 100%;
+
             .logo, .logo-placeholder-icon {
                 width: 100%;
             }

From 5e187c59311ea4344ace2437fa9cc31d6e8576ab Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 13:02:03 +0200
Subject: [PATCH 21/56] meta info width defined in MetaDetails

---
 src/common/MetaPreview/styles.less | 1 -
 src/routes/MetaDetails/styles.less | 8 ++++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less
index f3f8ef276..4816018da 100644
--- a/src/common/MetaPreview/styles.less
+++ b/src/common/MetaPreview/styles.less
@@ -54,7 +54,6 @@
     .meta-info-container {
         flex: 1;
         align-self: stretch;
-        width: 32.5rem;
         padding: 0 2rem;
         overflow-y: auto;
 
diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less
index 481af6738..db7fba7ae 100644
--- a/src/routes/MetaDetails/styles.less
+++ b/src/routes/MetaDetails/styles.less
@@ -1,5 +1,9 @@
 @import (reference) '~stremio-colors/dist/less/stremio-colors.less';
 
+:import('~stremio/common/MetaPreview/styles.less') {
+    meta-info-container: meta-info-container;
+}
+
 .metadetails-container {
     display: flex;
     flex-direction: column;
@@ -41,6 +45,10 @@
         .meta-preview {
             flex: 1;
             align-self: stretch;
+
+            .meta-info-container {
+                width: 32.5rem;
+            }
         }
 
         .videos-list, .streams-list {

From 34dfc9b5723c8c65b6c20964598ce626cf6b667d Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 13:05:35 +0200
Subject: [PATCH 22/56] MetaPreview action buttons margin increased

---
 src/common/MetaPreview/styles.less | 2 +-
 src/routes/MetaDetails/styles.less | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less
index 4816018da..54e6717b9 100644
--- a/src/common/MetaPreview/styles.less
+++ b/src/common/MetaPreview/styles.less
@@ -163,7 +163,7 @@
             margin: 2rem 0;
 
             &:not(:last-child) {
-                margin-right: 1.5rem;
+                margin-right: 2rem;
             }
         }
     }
diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less
index db7fba7ae..eee627253 100644
--- a/src/routes/MetaDetails/styles.less
+++ b/src/routes/MetaDetails/styles.less
@@ -47,7 +47,7 @@
             align-self: stretch;
 
             .meta-info-container {
-                width: 32.5rem;
+                width: 34rem;
             }
         }
 

From d783f4ccea723a487064f68ab88eddbd3a016a93 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 13:52:53 +0200
Subject: [PATCH 23/56] MetaPreview imdb button flex none added

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

diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less
index 54e6717b9..0ff8ba48a 100644
--- a/src/common/MetaPreview/styles.less
+++ b/src/common/MetaPreview/styles.less
@@ -93,6 +93,7 @@
             }
 
             .imdb-button-container {
+                flex: none;
                 display: flex;
                 flex-direction: row;
                 align-items: center;

From a1c36e84193226a187a520bfa527c6484bebd51b Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 14:05:50 +0200
Subject: [PATCH 24/56] MetaPreview imdb button focus instead of focus-within

---
 src/common/MetaPreview/styles.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less
index 0ff8ba48a..dab12336e 100644
--- a/src/common/MetaPreview/styles.less
+++ b/src/common/MetaPreview/styles.less
@@ -103,11 +103,11 @@
                 border: var(--focus-outline-size) solid transparent;
                 background-color: @color-surface-light5-20;
 
-                &:hover, &:focus-within {
+                &:hover, &:focus {
                     background-color: @color-surface-light5-30;
                 }
 
-                &:focus-within {
+                &:focus {
                     outline: none;
                     border: var(--focus-outline-size) solid @color-surface-light5;
                 }

From eb3b4386d177612b01f806cfb47acfc2c5400d70 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 14:07:22 +0200
Subject: [PATCH 25/56] VideosList search placeholder fixed

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

diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index 95bbf300b..685fab14e 100644
--- a/src/routes/MetaDetails/VideosList/VideosList.js
+++ b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -62,7 +62,7 @@ const VideosList = ({ className, metaResource }) => {
                                     <TextInput
                                         className={styles['search-input']}
                                         type={'text'}
-                                        placeholder={'Search addons'}
+                                        placeholder={'Search videos'}
                                         value={search}
                                         onChange={searchInputOnChange}
                                     />

From 1c17437847d056c8ecc4f8a766023b5ce1ccc157 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 15:50:58 +0200
Subject: [PATCH 26/56] VideosList search: search only by title

---
 src/routes/MetaDetails/VideosList/VideosList.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index 685fab14e..23685b490 100644
--- a/src/routes/MetaDetails/VideosList/VideosList.js
+++ b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -72,11 +72,7 @@ const VideosList = ({ className, metaResource }) => {
                             <div className={styles['videos-scroll-container']}>
                                 {videosForSeason
                                     .filter((video) => {
-                                        return search.length === 0 ||
-                                            (
-                                                (typeof video.title === 'string' && video.title.toLowerCase().includes(search.toLowerCase())) ||
-                                                (video.released.toLocaleString(undefined, { year: '2-digit', month: 'short', day: 'numeric' }).toLowerCase().includes(search.toLowerCase()))
-                                            );
+                                        return search.length === 0 || (typeof video.title === 'string' && video.title.toLowerCase().includes(search.toLowerCase()));
                                     })
                                     .map((video, index) => (
                                         <Video

From 4d6acb2a245a30f5e92aa96f3571fa28c7aa51f5 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 16:28:43 +0200
Subject: [PATCH 27/56] VideosList message label color fixed

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

diff --git a/src/routes/MetaDetails/VideosList/styles.less b/src/routes/MetaDetails/VideosList/styles.less
index dc637da58..45b1fb888 100644
--- a/src/routes/MetaDetails/VideosList/styles.less
+++ b/src/routes/MetaDetails/VideosList/styles.less
@@ -29,7 +29,7 @@
         .label {
             font-size: 1.4rem;
             text-align: center;
-            color: @color-surface-light5;
+            color: @color-surface-light5-90;
         }
     }
 

From c6e1a27903f6e9a9c20775d04eca813b2d28f1c9 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 16:49:29 +0200
Subject: [PATCH 28/56] VideosList search bar unnecessary width removed

---
 src/routes/MetaDetails/VideosList/styles.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/MetaDetails/VideosList/styles.less b/src/routes/MetaDetails/VideosList/styles.less
index 45b1fb888..65563817c 100644
--- a/src/routes/MetaDetails/VideosList/styles.less
+++ b/src/routes/MetaDetails/VideosList/styles.less
@@ -45,7 +45,6 @@
             display: flex;
             flex-direction: row;
             align-items: center;
-            width: calc(var(--item-size) - 3rem);
             height: 3.5rem;
             padding: 0 1rem;
             border-radius: 2.3rem;

From dc491ca03ed1952c9a5300af0501bedcc2edf76f Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 16:51:07 +0200
Subject: [PATCH 29/56] MetaPreview compact class unnecessary width removed

---
 src/common/MetaPreview/styles.less | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less
index dab12336e..9a6cd5dc8 100644
--- a/src/common/MetaPreview/styles.less
+++ b/src/common/MetaPreview/styles.less
@@ -8,8 +8,6 @@
 
     &.compact {
         .meta-info-container {
-            width: 100%;
-
             .logo, .logo-placeholder-icon {
                 width: 100%;
             }

From d8c8b723dfbf5b17745f21549224a2ff842c9499 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 17:14:44 +0200
Subject: [PATCH 30/56] SeasonsBar seasons label background: none used

---
 src/routes/MetaDetails/VideosList/SeasonsBar/styles.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
index f765e4c42..351da1a36 100644
--- a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
+++ b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
@@ -59,7 +59,7 @@
         align-items: center;
         justify-content: center;
         margin: 0 2rem;
-        background-color: unset;
+        background: none;
         overflow: visible;
 
         &:hover, &:focus {

From ef7d930573c17c55f850a859d15ed0c352803880 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 17:16:27 +0200
Subject: [PATCH 31/56] Video flag label color fixed

---
 src/routes/MetaDetails/VideosList/Video/styles.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/MetaDetails/VideosList/Video/styles.less b/src/routes/MetaDetails/VideosList/Video/styles.less
index a190a03cb..3650d9c7b 100644
--- a/src/routes/MetaDetails/VideosList/Video/styles.less
+++ b/src/routes/MetaDetails/VideosList/Video/styles.less
@@ -90,7 +90,7 @@
                         white-space: nowrap;
                         text-overflow: ellipsis;
                         text-transform: uppercase;
-                        color: @color-background;
+                        color: @color-background-90;
                     }
                 }
 

From 2c31b089af09d0774c230a39dd3e0c3912a2a020 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 17:25:38 +0200
Subject: [PATCH 32/56] VideosList upcoming/watched container flex:none added

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

diff --git a/src/routes/MetaDetails/VideosList/Video/styles.less b/src/routes/MetaDetails/VideosList/Video/styles.less
index 3650d9c7b..23448cb34 100644
--- a/src/routes/MetaDetails/VideosList/Video/styles.less
+++ b/src/routes/MetaDetails/VideosList/Video/styles.less
@@ -77,6 +77,7 @@
                 }
 
                 .upcoming-container, .watched-container {
+                    flex: none;
                     padding: 0.2rem 0.4rem;
                     max-width: 10rem;
 

From 689c2e565cbb7ef9b6b5b587d53e8f60e9d535f7 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 17:28:58 +0200
Subject: [PATCH 33/56] Video released info unnecessary margin removed

---
 src/routes/MetaDetails/VideosList/Video/styles.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/MetaDetails/VideosList/Video/styles.less b/src/routes/MetaDetails/VideosList/Video/styles.less
index 23448cb34..2bb1594a8 100644
--- a/src/routes/MetaDetails/VideosList/Video/styles.less
+++ b/src/routes/MetaDetails/VideosList/Video/styles.less
@@ -56,7 +56,6 @@
             display: flex;
             flex-direction: row;
             align-items: center;
-            margin-top: 0.5rem;
 
             .released-container {
                 flex: 1;

From 66a65bfbe0d696e80fcf975f91d7a6a7dcc0e362 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 17:30:08 +0200
Subject: [PATCH 34/56] Video released constainer color fixed

---
 src/routes/MetaDetails/VideosList/Video/styles.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/MetaDetails/VideosList/Video/styles.less b/src/routes/MetaDetails/VideosList/Video/styles.less
index 2bb1594a8..8ffbd075d 100644
--- a/src/routes/MetaDetails/VideosList/Video/styles.less
+++ b/src/routes/MetaDetails/VideosList/Video/styles.less
@@ -64,7 +64,7 @@
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 text-transform: uppercase;
-                color: @color-surface-dark5;
+                color: @color-surface-dark5-90;
             }
 
             .upcoming-watched-container {

From 5f61ce6a19fea64f4a5b6589409c93f30f482beb Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 17:43:17 +0200
Subject: [PATCH 35/56] VideosList message container uses flex instead of
 height

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

diff --git a/src/routes/MetaDetails/VideosList/styles.less b/src/routes/MetaDetails/VideosList/styles.less
index 65563817c..a19be8ef5 100644
--- a/src/routes/MetaDetails/VideosList/styles.less
+++ b/src/routes/MetaDetails/VideosList/styles.less
@@ -14,10 +14,10 @@
     }
 
     .message-container {
+        flex: 1;
         display: flex;
         flex-direction: column;
         align-items: center;
-        height: 100%;
         padding: 2rem;
         background-color: @color-background-dark3-80;
 

From bc6bcfdc5e206cf9e85bb641ea0d286ab422a726 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 18:52:08 +0200
Subject: [PATCH 36/56] VideosList message label flex added

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

diff --git a/src/routes/MetaDetails/VideosList/styles.less b/src/routes/MetaDetails/VideosList/styles.less
index a19be8ef5..201c83bd9 100644
--- a/src/routes/MetaDetails/VideosList/styles.less
+++ b/src/routes/MetaDetails/VideosList/styles.less
@@ -27,6 +27,7 @@
         }
 
         .label {
+            flex: 0 1 auto;
             font-size: 1.4rem;
             text-align: center;
             color: @color-surface-light5-90;

From b9e7bce0bafaab09423b6fb328e91d332bb74a97 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 26 Mar 2020 19:51:39 +0200
Subject: [PATCH 37/56] VideosList bkg color added

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

diff --git a/src/routes/MetaDetails/VideosList/styles.less b/src/routes/MetaDetails/VideosList/styles.less
index 201c83bd9..0ea3737a8 100644
--- a/src/routes/MetaDetails/VideosList/styles.less
+++ b/src/routes/MetaDetails/VideosList/styles.less
@@ -3,6 +3,7 @@
 .videos-list-container {
     display: flex;
     flex-direction: column;
+    background-color: @color-background-dark3-80;
 
     .seasons-bar, .message-container {
         flex: none;

From a97a59778c956e9ee98e3ddf8887d090d213b617 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 11:11:40 +0200
Subject: [PATCH 38/56] VideosList search reset when season change

---
 src/routes/MetaDetails/VideosList/VideosList.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index 23685b490..dba5e5f00 100644
--- a/src/routes/MetaDetails/VideosList/VideosList.js
+++ b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -18,6 +18,7 @@ const VideosList = ({ className, metaResource }) => {
     }, [metaResource]);
     const [seasons, selectedSeason, videosForSeason, selectSeason] = useSelectableSeasons(videos);
     const seasonOnSelect = React.useCallback((event) => {
+        setSearch('');
         selectSeason(event.value);
     }, []);
     const [search, setSearch] = React.useState('');

From d42debb7e979375bb3a19d9c1bf22dbbebe9de5d Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 11:23:15 +0200
Subject: [PATCH 39/56] VideosList release-info-container renamed and always
 rendered

---
 .../MetaDetails/VideosList/Video/Video.js     | 50 +++++++++----------
 .../MetaDetails/VideosList/Video/styles.less  |  3 +-
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/Video/Video.js b/src/routes/MetaDetails/VideosList/Video/Video.js
index db9af6e97..51d75a778 100644
--- a/src/routes/MetaDetails/VideosList/Video/Video.js
+++ b/src/routes/MetaDetails/VideosList/Video/Video.js
@@ -32,34 +32,34 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
                     {episode !== null && !isNaN(episode) ? `${episode}. ` : null}
                     {typeof title === 'string' && title.length > 0 ? title : id}
                 </div>
-                {
-                    released instanceof Date && !isNaN(released.getTime()) ?
-                        <div className={styles['released-info-container']}>
+                <div className={styles['flex-row-container']}>
+                    {
+                        released instanceof Date && !isNaN(released.getTime()) ?
                             <div className={styles['released-container']}>
                                 {released.toLocaleString(undefined, { year: '2-digit', month: 'short', day: 'numeric' })}
                             </div>
-                            <div className={styles['upcoming-watched-container']}>
-                                {
-                                    upcoming ?
-                                        <div className={styles['upcoming-container']}>
-                                            <div className={styles['flag-label']}>Upcoming</div>
-                                        </div>
-                                        :
-                                        null
-                                }
-                                {
-                                    watched ?
-                                        <div className={styles['watched-container']}>
-                                            <div className={styles['flag-label']}>Watched</div>
-                                        </div>
-                                        :
-                                        null
-                                }
-                            </div>
-                        </div>
-                        :
-                        null
-                }
+                            :
+                            null
+                    }
+                    <div className={styles['upcoming-watched-container']}>
+                        {
+                            upcoming ?
+                                <div className={styles['upcoming-container']}>
+                                    <div className={styles['flag-label']}>Upcoming</div>
+                                </div>
+                                :
+                                null
+                        }
+                        {
+                            watched ?
+                                <div className={styles['watched-container']}>
+                                    <div className={styles['flag-label']}>Watched</div>
+                                </div>
+                                :
+                                null
+                        }
+                    </div>
+                </div>
             </div>
             {
                 progress !== null && !isNaN(progress) && progress > 0 ?
diff --git a/src/routes/MetaDetails/VideosList/Video/styles.less b/src/routes/MetaDetails/VideosList/Video/styles.less
index 8ffbd075d..115b1bae2 100644
--- a/src/routes/MetaDetails/VideosList/Video/styles.less
+++ b/src/routes/MetaDetails/VideosList/Video/styles.less
@@ -52,10 +52,11 @@
             color: @color-surface-light5-90;
         }
 
-        .released-info-container {
+        .flex-row-container {
             display: flex;
             flex-direction: row;
             align-items: center;
+            justify-content: flex-end;
 
             .released-container {
                 flex: 1;

From 95ceb4425521c453f948448c27ac122c51288592 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 11:46:10 +0200
Subject: [PATCH 40/56] VideosList elemets width fixed

---
 src/routes/MetaDetails/VideosList/styles.less | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/styles.less b/src/routes/MetaDetails/VideosList/styles.less
index 0ea3737a8..c913fb87a 100644
--- a/src/routes/MetaDetails/VideosList/styles.less
+++ b/src/routes/MetaDetails/VideosList/styles.less
@@ -5,12 +5,9 @@
     flex-direction: column;
     background-color: @color-background-dark3-80;
 
-    .seasons-bar, .message-container {
-        flex: none;
-        width: var(--item-size);
-    }
-
     .seasons-bar {
+        flex: none;
+        align-self: stretch;
         padding: 1rem 0;
     }
 
@@ -19,6 +16,7 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+        width: var(--item-size);
         padding: 2rem;
         background-color: @color-background-dark3-80;
 
@@ -36,6 +34,8 @@
     }
 
     .search-container {
+        flex: none;
+        align-self: stretch;
         padding: 0 1.5rem 1rem 1.5rem;
         background-color: @color-background-dark3-80;
 

From 809db2ed528bbd5fbd7f497caef3f5a894641fa9 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 11:48:54 +0200
Subject: [PATCH 41/56] VideosList search: search by title and released

---
 src/routes/MetaDetails/VideosList/VideosList.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index dba5e5f00..f45d93299 100644
--- a/src/routes/MetaDetails/VideosList/VideosList.js
+++ b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -73,7 +73,11 @@ const VideosList = ({ className, metaResource }) => {
                             <div className={styles['videos-scroll-container']}>
                                 {videosForSeason
                                     .filter((video) => {
-                                        return search.length === 0 || (typeof video.title === 'string' && video.title.toLowerCase().includes(search.toLowerCase()));
+                                        return search.length === 0 ||
+                                            (
+                                                (typeof video.title === 'string' && video.title.toLowerCase().includes(search.toLowerCase())) ||
+                                                (video.released.toLocaleString(undefined, { year: '2-digit', month: 'short', day: 'numeric' }).toLowerCase().includes(search.toLowerCase()))
+                                            );
                                     })
                                     .map((video, index) => (
                                         <Video

From ff05b4b7acac8a326133b422c902bd62c368ae92 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 12:04:17 +0200
Subject: [PATCH 42/56] VideosList search min width added

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

diff --git a/src/routes/MetaDetails/VideosList/styles.less b/src/routes/MetaDetails/VideosList/styles.less
index c913fb87a..38a4fc194 100644
--- a/src/routes/MetaDetails/VideosList/styles.less
+++ b/src/routes/MetaDetails/VideosList/styles.less
@@ -35,7 +35,7 @@
 
     .search-container {
         flex: none;
-        align-self: stretch;
+        min-width: var(--item-size);
         padding: 0 1.5rem 1rem 1.5rem;
         background-color: @color-background-dark3-80;
 

From 433c9373b2eac564b6e052b41e6a963ec91d4c79 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 12:26:45 +0200
Subject: [PATCH 43/56] VideosList search bkg color lighter

---
 src/routes/MetaDetails/VideosList/styles.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/styles.less b/src/routes/MetaDetails/VideosList/styles.less
index 38a4fc194..2067b5664 100644
--- a/src/routes/MetaDetails/VideosList/styles.less
+++ b/src/routes/MetaDetails/VideosList/styles.less
@@ -51,11 +51,11 @@
             padding: 0 1rem;
             border-radius: 2.3rem;
             border: var(--focus-outline-size) solid transparent;
-            background-color: @color-background-dark1;
+            background-color: @color-background;
             cursor: text;
 
             &:hover, &:focus-within {
-                background-color: @color-background;
+                background-color: @color-background-light1;
             }
 
             &:focus-within {

From 01016e6310b1571c24058d57c2a10d681fadd0f8 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 12:31:52 +0200
Subject: [PATCH 44/56] MetaDetails bkg uses linear-gradient

---
 src/routes/MetaDetails/styles.less | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less
index eee627253..ec1537e1c 100644
--- a/src/routes/MetaDetails/styles.less
+++ b/src/routes/MetaDetails/styles.less
@@ -9,7 +9,8 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
-    background-color: @color-background-dark2;
+    background:
+        linear-gradient(to right, @color-background-dark3-60, @color-background-dark3-80);
 
     .nav-bar {
         flex: none;

From 0bb8815282a5153f42b4f702a65e488e3f0c696a Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 13:47:05 +0200
Subject: [PATCH 45/56] MetaPreview meta info scrollbar shows on hover

---
 src/common/MetaPreview/styles.less | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less
index 9a6cd5dc8..10eb2440a 100644
--- a/src/common/MetaPreview/styles.less
+++ b/src/common/MetaPreview/styles.less
@@ -55,6 +55,26 @@
         padding: 0 2rem;
         overflow-y: auto;
 
+        &:hover {
+            &:global(::-webkit-scrollbar-thumb) {
+                background-color: @color-secondaryvariant2-light1;
+
+            }
+
+            &:global(::-webkit-scrollbar-track) {
+                background-color: @color-background-dark2;
+            }
+        }
+
+        &:global(::-webkit-scrollbar-thumb) {
+            background-color: transparent;
+
+        }
+
+        &:global(::-webkit-scrollbar-track) {
+            background-color: transparent;
+        }
+
         .logo, .logo-placeholder-icon {
             display: block;
             max-width: 100%;

From 339310b21e0d09505dbdbecc2647bc78a2ac500e Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 14:41:38 +0200
Subject: [PATCH 46/56] MetaPreview imdb button flex fixed

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

diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less
index 10eb2440a..2c4092a7e 100644
--- a/src/common/MetaPreview/styles.less
+++ b/src/common/MetaPreview/styles.less
@@ -111,7 +111,7 @@
             }
 
             .imdb-button-container {
-                flex: none;
+                flex: 0 1 none;
                 display: flex;
                 flex-direction: row;
                 align-items: center;

From 43f76a86143822cfe86ce2ab1f9c7b24834ecdf1 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 14:42:34 +0200
Subject: [PATCH 47/56] MetaPreview imdb icon color fixed

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

diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less
index 2c4092a7e..25879df9e 100644
--- a/src/common/MetaPreview/styles.less
+++ b/src/common/MetaPreview/styles.less
@@ -134,7 +134,7 @@
                     flex: none;
                     width: 3rem;
                     margin-right: 1rem;
-                    fill: @color-surface-dark2;
+                    fill: @color-surface-dark2-90;
                 }
 
                 .label {

From 024c94d2d092bf29e98f875c754351948c1db6ae Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 14:43:11 +0200
Subject: [PATCH 48/56] ActionButton icon color fixed

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

diff --git a/src/common/MetaPreview/ActionButton/styles.less b/src/common/MetaPreview/ActionButton/styles.less
index c301df320..a74c0cc0e 100644
--- a/src/common/MetaPreview/ActionButton/styles.less
+++ b/src/common/MetaPreview/ActionButton/styles.less
@@ -24,7 +24,7 @@
             display: block;
             width: 100%;
             height: 100%;
-            fill: @color-surface-light5;
+            fill: @color-surface-light5-90;
         }
     }
 

From b65f84caaa7993e78db171cdd18b7717b3c97fb8 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 14:45:11 +0200
Subject: [PATCH 49/56] VIdeosList search reset dropped

---
 src/routes/MetaDetails/VideosList/VideosList.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index f45d93299..685fab14e 100644
--- a/src/routes/MetaDetails/VideosList/VideosList.js
+++ b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -18,7 +18,6 @@ const VideosList = ({ className, metaResource }) => {
     }, [metaResource]);
     const [seasons, selectedSeason, videosForSeason, selectSeason] = useSelectableSeasons(videos);
     const seasonOnSelect = React.useCallback((event) => {
-        setSearch('');
         selectSeason(event.value);
     }, []);
     const [search, setSearch] = React.useState('');

From 1cd751f79fba122f4bc187b457e14ddf894d49bf Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 14:47:23 +0200
Subject: [PATCH 50/56] VIdeo flags container flex added

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

diff --git a/src/routes/MetaDetails/VideosList/Video/styles.less b/src/routes/MetaDetails/VideosList/Video/styles.less
index 115b1bae2..81fc6305e 100644
--- a/src/routes/MetaDetails/VideosList/Video/styles.less
+++ b/src/routes/MetaDetails/VideosList/Video/styles.less
@@ -69,6 +69,7 @@
             }
 
             .upcoming-watched-container {
+                flex: 0 1 auto;
                 display: flex;
                 flex-direction: row;
 

From b4be6d94afe26252957740cbec905d3d3325cead Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 15:06:50 +0200
Subject: [PATCH 51/56] StreamsList text/icon colors -90 added

---
 src/routes/MetaDetails/StreamsList/styles.less | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index a85963eaf..c12ea977d 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -34,12 +34,12 @@
             .label {
                 font-size: 1.4rem;
                 text-align: center;
-                color: @color-surface-light5;
+                color: @color-surface-light5-90;
             }
     
             .description {
                 text-align: center;
-                color: @color-surface-dark1;
+                color: @color-surface-dark1-90;
             }
         }
 
@@ -67,7 +67,7 @@
             width: 2rem;
             height: 2rem;
             margin-right: 1rem;
-            fill: @color-surface-light5;
+            fill: @color-surface-light5-90;
         }
 
         .label {
@@ -76,7 +76,7 @@
             flex-basis: auto;
             font-size: 1.4rem;
             max-height: 3.6em;
-            color: @color-surface-light5;
+            color: @color-surface-light5-90;
         }
     }
 }
\ No newline at end of file

From a8cb0375eba83e0e076f42e922e57faa19bbae63 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 15:15:50 +0200
Subject: [PATCH 52/56] StreamsList message image size added

---
 src/routes/MetaDetails/StreamsList/styles.less | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index c12ea977d..d4b0aa85d 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -27,17 +27,20 @@
                 margin-bottom: 1rem;
             }
     
-            .image, .label, .description {
+            .image {
                 flex: none;
+                width: 10rem;
             }
     
             .label {
+                flex: none;
                 font-size: 1.4rem;
                 text-align: center;
                 color: @color-surface-light5-90;
             }
     
             .description {
+                flex: none;
                 text-align: center;
                 color: @color-surface-dark1-90;
             }

From b5ae863ee2e4e842c10672ef88fcb8e160adab8a Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 15:20:06 +0200
Subject: [PATCH 53/56] VideosList message image width/opacity added

---
 src/routes/MetaDetails/VideosList/styles.less | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/routes/MetaDetails/VideosList/styles.less b/src/routes/MetaDetails/VideosList/styles.less
index 2067b5664..f05348e74 100644
--- a/src/routes/MetaDetails/VideosList/styles.less
+++ b/src/routes/MetaDetails/VideosList/styles.less
@@ -22,7 +22,9 @@
 
         .image {
             flex: none;
+            width: 10rem;
             margin-bottom: 1rem;
+            opacity: 0.9;
         }
 
         .label {

From 2d0aa5be855616d557cd1dfab158dcf0c29452a1 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 15:20:18 +0200
Subject: [PATCH 54/56] StreamsList message image opacity added

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

diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index d4b0aa85d..fee483d28 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -30,6 +30,7 @@
             .image {
                 flex: none;
                 width: 10rem;
+                opacity: 0.9;
             }
     
             .label {

From f53247edfebeb9afa88a89a4f9e932c5440092fc Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 16:40:52 +0200
Subject: [PATCH 55/56] MetaPreview info scrollbar style fixed

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

diff --git a/src/common/MetaPreview/styles.less b/src/common/MetaPreview/styles.less
index 25879df9e..4d8c7b879 100644
--- a/src/common/MetaPreview/styles.less
+++ b/src/common/MetaPreview/styles.less
@@ -56,22 +56,20 @@
         overflow-y: auto;
 
         &:hover {
-            &:global(::-webkit-scrollbar-thumb) {
+            &::-webkit-scrollbar-thumb {
                 background-color: @color-secondaryvariant2-light1;
-
             }
 
-            &:global(::-webkit-scrollbar-track) {
+            &::-webkit-scrollbar-track {
                 background-color: @color-background-dark2;
             }
         }
 
-        &:global(::-webkit-scrollbar-thumb) {
+        &::-webkit-scrollbar-thumb {
             background-color: transparent;
-
         }
 
-        &:global(::-webkit-scrollbar-track) {
+        &::-webkit-scrollbar-track {
             background-color: transparent;
         }
 

From a112e581794b91e7148670ec42d661cd8806dc37 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 27 Mar 2020 18:14:56 +0200
Subject: [PATCH 56/56] MetaDetails meta info media queries added

---
 src/routes/MetaDetails/styles.less | 65 ++++++++++++++++++++++++++++--
 1 file changed, 61 insertions(+), 4 deletions(-)

diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less
index ec1537e1c..47a26e0d7 100644
--- a/src/routes/MetaDetails/styles.less
+++ b/src/routes/MetaDetails/styles.less
@@ -1,4 +1,5 @@
 @import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
 
 :import('~stremio/common/MetaPreview/styles.less') {
     meta-info-container: meta-info-container;
@@ -46,10 +47,6 @@
         .meta-preview {
             flex: 1;
             align-self: stretch;
-
-            .meta-info-container {
-                width: 34rem;
-            }
         }
 
         .videos-list, .streams-list {
@@ -60,4 +57,64 @@
             align-self: stretch;
         }
     }
+}
+
+@media only screen and (min-width: @large) {
+    .metadetails-container {
+        .metadetails-content {
+            .meta-preview {
+                .meta-info-container {
+                    width: 58rem;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: @large) {
+    .metadetails-container {
+        .metadetails-content {
+            .meta-preview {
+                .meta-info-container {
+                    width: 48rem;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: @medium) {
+    .metadetails-container {
+        .metadetails-content {
+            .meta-preview {
+                .meta-info-container {
+                    width: 40rem;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: @small) {
+    .metadetails-container {
+        .metadetails-content {
+            .meta-preview {
+                .meta-info-container {
+                    width: 34rem;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: @xsmall) {
+    .metadetails-container {
+        .metadetails-content {
+            .meta-preview {
+                .meta-info-container {
+                    width: 30rem;
+                }
+            }
+        }
+    }
 }
\ No newline at end of file