From 0bb10097a0cf63b2cfcaa9c650897c19181e25f7 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 1 Apr 2020 13:35:16 +0300
Subject: [PATCH 01/12] StreamPlaceholder improved

---
 .../StreamPlaceholder/StreamPlaceholder.js    |  6 ++--
 .../Stream/StreamPlaceholder/styles.less      | 30 +++++++++++--------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/Stream/StreamPlaceholder/StreamPlaceholder.js b/src/routes/MetaDetails/StreamsList/Stream/StreamPlaceholder/StreamPlaceholder.js
index 6785417ba..661ee215d 100644
--- a/src/routes/MetaDetails/StreamsList/Stream/StreamPlaceholder/StreamPlaceholder.js
+++ b/src/routes/MetaDetails/StreamsList/Stream/StreamPlaceholder/StreamPlaceholder.js
@@ -1,7 +1,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('stremio-icons/dom');
+const PlayIconCircleCentered = require('stremio/common/PlayIconCircleCentered');
 const styles = require('./styles');
 
 const StreamPlaceholder = ({ className }) => {
@@ -14,9 +14,7 @@ const StreamPlaceholder = ({ className }) => {
                 <div className={styles['description-container']} />
                 <div className={styles['description-container']} />
             </div>
-            <div className={styles['play-icon-container']}>
-                <Icon className={styles['play-icon']} icon={'ic_play'} />
-            </div>
+            <PlayIconCircleCentered className={styles['play-icon']} />
         </div>
     );
 };
diff --git a/src/routes/MetaDetails/StreamsList/Stream/StreamPlaceholder/styles.less b/src/routes/MetaDetails/StreamsList/Stream/StreamPlaceholder/styles.less
index c8f82a3df..a25aa9816 100644
--- a/src/routes/MetaDetails/StreamsList/Stream/StreamPlaceholder/styles.less
+++ b/src/routes/MetaDetails/StreamsList/Stream/StreamPlaceholder/styles.less
@@ -1,27 +1,31 @@
+:import('~stremio/common/PlayIconCircleCentered/styles.less') {
+    play-icon-circle-centered-background: background;
+    play-icon-circle-centered-icon: icon;
+}
+
 .stream-placeholder-container {
     display: flex;
     flex-direction: row;
     align-items: center;
-    background-color: var(--color-placeholder);
+    padding: 0.5rem 1rem;
 
     .addon-container {
         flex: none;
-        padding: 0.5rem;
 
         .addon-name {
             width: 5rem;
             height: 2rem;
-            background-color: var(--color-placeholder);
+            background-color: var(--color-placeholder-background);
         }
     }
 
     .info-container {
         flex: 1;
-        padding: 0.5rem;
+        margin: 0.5rem 1rem;
 
         .description-container {
             height: 1.2rem;
-            background-color: var(--color-placeholder);
+            background-color: var(--color-placeholder-background);
 
             &:nth-child(1) {
                 width: 80%;
@@ -34,17 +38,17 @@
         }
     }
 
-    .play-icon-container {
+    .play-icon {
         flex: none;
-        width: 5rem;
+        width: 3.5rem;
         height: 5rem;
-        padding: 1.5rem;
 
-        .play-icon {
-            display: block;
-            width: 100%;
-            height: 100%;
-            fill: var(--color-placeholder);
+        .play-icon-circle-centered-background {
+            fill: none;
+        }
+
+        .play-icon-circle-centered-icon {
+            fill: var(--color-placeholder-background);
         }
     }
 }
\ No newline at end of file

From b4a1a98b5a61af16a2d6929a671fd04f46198052 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 1 Apr 2020 13:37:59 +0300
Subject: [PATCH 02/12] SeasonsBarPlaceholder improved

---
 .../SeasonsBarPlaceholder.js                  |  6 ++--
 .../SeasonsBarPlaceholder/styles.less         | 32 +++++++++++++------
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js
index 3aca88864..5c8f8cc75 100644
--- a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js
+++ b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js
@@ -8,13 +8,15 @@ const SeasonsBarPlaceholder = ({ className }) => {
     return (
         <div className={classnames(className, styles['seasons-bar-placeholder-container'])}>
             <div className={styles['prev-season-button']}>
-                <Icon className={styles['icon']} icon={'ic_arrow_left'} />
+                <Icon className={styles['icon']} icon={'ic_arrow_thin_left'} />
+                <div className={styles['label']} />
             </div>
             <div className={styles['seasons-popup-label-container']}>
                 <div className={styles['seasons-popup-label']} />
             </div>
             <div className={styles['next-season-button']}>
-                <Icon className={styles['icon']} icon={'ic_arrow_right'} />
+                <div className={styles['label']} />
+                <Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
             </div>
         </div>
     );
diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less
index ec0352240..d96b475de 100644
--- a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less
+++ b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less
@@ -1,19 +1,33 @@
 .seasons-bar-placeholder-container {
     display: flex;
     flex-direction: row;
+    padding: 1rem;
 
     .prev-season-button, .next-season-button {
         flex: none;
-        width: 4rem;
-        height: 4rem;
-        padding: 1rem;
-        background-color: var(--color-placeholder);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 6.5rem;
+        height: 3.5rem;
+        padding: 0.5rem;
+        background-color: var(--color-placeholder-background);
+
+        &>:first-child {
+            margin-right: 0.5rem;
+        }
 
         .icon {
             display: block;
-            width: 100%;
-            height: 100%;
-            fill: var(--color-placeholder);
+            width: 1.5rem;
+            height: 1.5rem;
+            fill: var(--color-placeholder-background);
+        }
+
+        .label {
+            flex: 1;
+            height: 1.2em;
+            background-color: var(--color-placeholder-background);
         }
     }
 
@@ -24,12 +38,12 @@
         align-items: center;
         justify-content: center;
         margin: 0 1rem;
-        background-color: var(--color-placeholder);
+        background-color: var(--color-placeholder-background);
 
         .seasons-popup-label {
             width: 50%;
             height: 1.2rem;
-            background-color: var(--color-placeholder);
+            background-color: var(--color-placeholder-background);
         }
     }
 }
\ No newline at end of file

From 97b57d16e990e34964d474d38bd12d3c53417003 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 1 Apr 2020 13:39:04 +0300
Subject: [PATCH 03/12] VideoPlaceholder improved

---
 .../VideoPlaceholder/VideoPlaceholder.js      |  3 ---
 .../Video/VideoPlaceholder/styles.less        | 23 ++++---------------
 2 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/VideoPlaceholder.js b/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/VideoPlaceholder.js
index 025f78647..41fa1923e 100644
--- a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/VideoPlaceholder.js
+++ b/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/VideoPlaceholder.js
@@ -11,9 +11,6 @@ const VideoPlaceholder = ({ className }) => {
                 <div className={styles['name-container']} />
                 <div className={styles['released-container']} />
             </div>
-            <div className={styles['next-icon-container']}>
-                <Icon className={styles['next-icon']} icon={'ic_arrow_thin_right'} />
-            </div>
         </div>
     );
 };
diff --git a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less b/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
index 3edf01b4b..0bb6ef501 100644
--- a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
+++ b/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
@@ -2,37 +2,24 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    background-color: var(--color-placeholder);
+    padding: 0.5rem 1rem;
 
     .info-container {
         flex: 1;
-        padding: 0.5rem;
+        height: 3rem;
+        margin: 0.5rem 1rem;
 
         .name-container {
             width: 80%;
             height: 1.2rem;
-            background: var(--color-placeholder);
+            background: var(--color-placeholder-background);
         }
 
         .released-container {
             width: 40%;
             height: 1.2rem;
             margin-top: 0.5rem;
-            background: var(--color-placeholder);
-        }
-    }
-
-    .next-icon-container {
-        flex: none;
-        width: 2rem;
-        height: 2.5rem;
-        padding: 0.5rem;
-
-        .next-icon {
-            display: block;
-            width: 100%;
-            height: 100%;
-            fill: var(--color-placeholder);
+            background: var(--color-placeholder-background);
         }
     }
 }
\ No newline at end of file

From f322c12df835a3d6dd6c8909d811107b4826b803 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 1 Apr 2020 13:43:36 +0300
Subject: [PATCH 04/12] unused Icon value removed

---
 .../VideosList/Video/VideoPlaceholder/VideoPlaceholder.js        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/VideoPlaceholder.js b/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/VideoPlaceholder.js
index 41fa1923e..45f8bee0d 100644
--- a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/VideoPlaceholder.js
+++ b/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/VideoPlaceholder.js
@@ -1,7 +1,6 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('stremio-icons/dom');
 const styles = require('./styles');
 
 const VideoPlaceholder = ({ className }) => {

From 3b05b6af08e96761fdc60bb71c392551662c1729 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 1 Apr 2020 17:24:00 +0300
Subject: [PATCH 05/12] SeasonsBarPlaceholder styles improved

---
 .../SeasonsBarPlaceholder.js                  |  7 +++--
 .../SeasonsBarPlaceholder/styles.less         | 28 ++++++++++++-------
 .../Video/VideoPlaceholder/styles.less        |  3 +-
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js
index 5c8f8cc75..9b839ce0c 100644
--- a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js
+++ b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/SeasonsBarPlaceholder.js
@@ -9,13 +9,14 @@ const SeasonsBarPlaceholder = ({ className }) => {
         <div className={classnames(className, styles['seasons-bar-placeholder-container'])}>
             <div className={styles['prev-season-button']}>
                 <Icon className={styles['icon']} icon={'ic_arrow_thin_left'} />
-                <div className={styles['label']} />
+                <div className={styles['label']}>Prev</div>
             </div>
             <div className={styles['seasons-popup-label-container']}>
-                <div className={styles['seasons-popup-label']} />
+                <div className={styles['seasons-popup-label']}>Season 1</div>
+                <Icon className={styles['seasons-popup-icon']} icon={'ic_arrow_thin_down'} />
             </div>
             <div className={styles['next-season-button']}>
-                <div className={styles['label']} />
+                <div className={styles['label']}>Next</div>
                 <Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
             </div>
         </div>
diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less
index d96b475de..cd29e1313 100644
--- a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less
+++ b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less
@@ -1,6 +1,7 @@
 .seasons-bar-placeholder-container {
     display: flex;
     flex-direction: row;
+    justify-content: space-between;
     padding: 1rem;
 
     .prev-season-button, .next-season-button {
@@ -11,7 +12,6 @@
         width: 6.5rem;
         height: 3.5rem;
         padding: 0.5rem;
-        background-color: var(--color-placeholder-background);
 
         &>:first-child {
             margin-right: 0.5rem;
@@ -26,24 +26,32 @@
 
         .label {
             flex: 1;
-            height: 1.2em;
-            background-color: var(--color-placeholder-background);
+            max-height: 1.2em;
+            font-weight: 500;
+            text-align: center;
+            color: var(--color-placeholder-text);
         }
     }
 
     .seasons-popup-label-container {
-        flex: 1;
-        align-self: stretch;
+        flex: 0 1 auto;
         display: flex;
+        flex-direction: row;
         align-items: center;
-        justify-content: center;
         margin: 0 1rem;
-        background-color: var(--color-placeholder-background);
 
         .seasons-popup-label {
-            width: 50%;
-            height: 1.2rem;
-            background-color: var(--color-placeholder-background);
+            max-height: 1.2em;
+            font-weight: 500;
+            color: var(--color-placeholder-text);
+        }
+
+        .seasons-popup-icon {
+            flex: none;
+            width: 1rem;
+            height: 1rem;
+            margin-left: 1rem;
+            fill: var(--color-placeholder-background);
         }
     }
 }
\ No newline at end of file
diff --git a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less b/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
index 0bb6ef501..dc7579e27 100644
--- a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
+++ b/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
@@ -16,8 +16,7 @@
         }
 
         .released-container {
-            width: 40%;
-            height: 1.2rem;
+            height: 1rem;
             margin-top: 0.5rem;
             background: var(--color-placeholder-background);
         }

From 55bacef0a18f8c7292c8fcdb24e6ec3a4403141d Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 2 Apr 2020 13:07:55 +0300
Subject: [PATCH 06/12] SearchBar component implemented

---
 src/common/SearchBar/SearchBar.js | 33 +++++++++++++++++++++++++
 src/common/SearchBar/index.js     |  3 +++
 src/common/SearchBar/styles.less  | 41 +++++++++++++++++++++++++++++++
 src/common/index.js               |  2 ++
 4 files changed, 79 insertions(+)
 create mode 100644 src/common/SearchBar/SearchBar.js
 create mode 100644 src/common/SearchBar/index.js
 create mode 100644 src/common/SearchBar/styles.less

diff --git a/src/common/SearchBar/SearchBar.js b/src/common/SearchBar/SearchBar.js
new file mode 100644
index 000000000..d672ddc5c
--- /dev/null
+++ b/src/common/SearchBar/SearchBar.js
@@ -0,0 +1,33 @@
+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 SearchBarPlaceholder = require('./SearchBarPlaceholder');
+const styles = require('./styles');
+
+const SearchBar = ({ className, title, search, searchInputOnChange }) => {
+    return (
+        <label title={title} className={classnames(className, styles['search-bar-container'])}>
+            <TextInput
+                className={styles['search-input']}
+                type={'text'}
+                placeholder={title}
+                value={search}
+                onChange={searchInputOnChange}
+            />
+            <Icon className={styles['icon']} icon={'ic_search'} />
+        </label>
+    );
+};
+
+SearchBar.Placeholder = SearchBarPlaceholder;
+
+SearchBar.propTypes = {
+    className: PropTypes.string,
+    title: PropTypes.string,
+    search: PropTypes.string,
+    searchInputOnChange: PropTypes.func
+};
+
+module.exports = SearchBar;
diff --git a/src/common/SearchBar/index.js b/src/common/SearchBar/index.js
new file mode 100644
index 000000000..c6a6a7609
--- /dev/null
+++ b/src/common/SearchBar/index.js
@@ -0,0 +1,3 @@
+const SearchBar = require('./SearchBar');
+
+module.exports = SearchBar;
diff --git a/src/common/SearchBar/styles.less b/src/common/SearchBar/styles.less
new file mode 100644
index 000000000..784673042
--- /dev/null
+++ b/src/common/SearchBar/styles.less
@@ -0,0 +1,41 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
+.search-bar-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.5rem;
+    padding: 0 1rem;
+    border-radius: 3.5rem;
+    border: var(--focus-outline-size) solid transparent;
+    background-color: @color-background;
+    cursor: text;
+
+    &:hover, &:focus-within {
+        background-color: @color-background-light1;
+    }
+
+    &: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-90;
+    }
+}
\ No newline at end of file
diff --git a/src/common/index.js b/src/common/index.js
index 81b0c1d16..4edbb546e 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -14,6 +14,7 @@ const { HorizontalNavBar, VerticalNavBar } = require('./NavBar');
 const PaginationInput = require('./PaginationInput');
 const PlayIconCircleCentered = require('./PlayIconCircleCentered');
 const Popup = require('./Popup');
+const SearchBar = require('./SearchBar');
 const SharePrompt = require('./SharePrompt');
 const Slider = require('./Slider');
 const TextInput = require('./TextInput');
@@ -51,6 +52,7 @@ module.exports = {
     PaginationInput,
     PlayIconCircleCentered,
     Popup,
+    SearchBar,
     SharePrompt,
     Slider,
     TextInput,

From e8553454c23947ef7b6c60bc750317ae2ca98174 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 2 Apr 2020 13:08:30 +0300
Subject: [PATCH 07/12] SearchBarPlaceholder implemented

---
 .../SearchBarPlaceholder.js                   | 21 ++++++++++++++++
 .../SearchBar/SearchBarPlaceholder/index.js   |  3 +++
 .../SearchBarPlaceholder/styles.less          | 25 +++++++++++++++++++
 3 files changed, 49 insertions(+)
 create mode 100644 src/common/SearchBar/SearchBarPlaceholder/SearchBarPlaceholder.js
 create mode 100644 src/common/SearchBar/SearchBarPlaceholder/index.js
 create mode 100644 src/common/SearchBar/SearchBarPlaceholder/styles.less

diff --git a/src/common/SearchBar/SearchBarPlaceholder/SearchBarPlaceholder.js b/src/common/SearchBar/SearchBarPlaceholder/SearchBarPlaceholder.js
new file mode 100644
index 000000000..e1def6d81
--- /dev/null
+++ b/src/common/SearchBar/SearchBarPlaceholder/SearchBarPlaceholder.js
@@ -0,0 +1,21 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const Icon = require('stremio-icons/dom');
+const styles = require('./styles');
+
+const SearchBarPlaceholder = ({ className, title }) => {
+    return (
+        <div className={classnames(className, styles['search-bar-container'])}>
+            <div className={styles['search-input']}>{title}</div>
+            <Icon className={styles['icon']} icon={'ic_search'} />
+        </div>
+    );
+};
+
+SearchBarPlaceholder.propTypes = {
+    className: PropTypes.string,
+    title: PropTypes.string
+};
+
+module.exports = SearchBarPlaceholder;
diff --git a/src/common/SearchBar/SearchBarPlaceholder/index.js b/src/common/SearchBar/SearchBarPlaceholder/index.js
new file mode 100644
index 000000000..e7dc7ba8c
--- /dev/null
+++ b/src/common/SearchBar/SearchBarPlaceholder/index.js
@@ -0,0 +1,3 @@
+const SearchBarPlaceholder = require('./SearchBarPlaceholder');
+
+module.exports = SearchBarPlaceholder;
diff --git a/src/common/SearchBar/SearchBarPlaceholder/styles.less b/src/common/SearchBar/SearchBarPlaceholder/styles.less
new file mode 100644
index 000000000..3c43128d4
--- /dev/null
+++ b/src/common/SearchBar/SearchBarPlaceholder/styles.less
@@ -0,0 +1,25 @@
+.search-bar-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.5rem;
+    padding: 0 1rem;
+    border-radius: 3.5rem;
+    border: var(--focus-outline-size) solid transparent;
+    background-color: var(--color-placeholder-background);
+
+    .search-input {
+        flex: 1;
+        max-height: 1.2em;
+        margin-right: 1rem;
+        font-size: 1.1rem;
+        color: var(--color-placeholder-text);
+    }
+
+    .icon {
+        flex: none;
+        width: 1.5rem;
+        height: 1.5rem;
+        fill: var(--color-placeholder-background);
+    }
+}
\ No newline at end of file

From 28badaa9648c66e1ad4666846671bdb8e2371395 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 2 Apr 2020 13:13:29 +0300
Subject: [PATCH 08/12] VideosList uses SearchBar component

---
 .../MetaDetails/VideosList/VideosList.js      | 20 ++++------
 src/routes/MetaDetails/VideosList/styles.less | 39 +------------------
 2 files changed, 9 insertions(+), 50 deletions(-)

diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index 9fbffd0a8..1531b60eb 100644
--- a/src/routes/MetaDetails/VideosList/VideosList.js
+++ b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -1,9 +1,8 @@
 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 SearchBar = require('stremio/common/SearchBar');
 const SeasonsBar = require('./SeasonsBar');
 const Video = require('./Video');
 const useSelectableSeasons = require('./useSelectableSeasons');
@@ -30,6 +29,7 @@ const VideosList = ({ className, metaResource }) => {
                 !metaResource || metaResource.content.type === 'Loading' ?
                     <React.Fragment>
                         <SeasonsBar.Placeholder className={styles['seasons-bar']} />
+                        <SearchBar.Placeholder className={styles['search-bar']} title={'Search videos'} />
                         <div className={styles['videos-scroll-container']}>
                             <Video.Placeholder />
                             <Video.Placeholder />
@@ -57,16 +57,12 @@ const VideosList = ({ className, metaResource }) => {
                                     :
                                     null
                             }
-                            <label title={'Search videos'} className={styles['search-bar-container']}>
-                                <TextInput
-                                    className={styles['search-input']}
-                                    type={'text'}
-                                    placeholder={'Search videos'}
-                                    value={search}
-                                    onChange={searchInputOnChange}
-                                />
-                                <Icon className={styles['icon']} icon={'ic_search'} />
-                            </label>
+                            <SearchBar
+                                className={styles['search-bar']}
+                                title={'Search videos'}
+                                search={search}
+                                searchInputOnChange={searchInputOnChange}
+                            />
                             <div className={styles['videos-container']}>
                                 {
                                     videosForSeason
diff --git a/src/routes/MetaDetails/VideosList/styles.less b/src/routes/MetaDetails/VideosList/styles.less
index c5117daa7..58d061c53 100644
--- a/src/routes/MetaDetails/VideosList/styles.less
+++ b/src/routes/MetaDetails/VideosList/styles.less
@@ -37,51 +37,14 @@
         align-self: stretch;
     }
 
-    .search-bar-container {
+    .search-bar {
         flex: none;
         align-self: stretch;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        height: 3.5rem;
-        padding: 0 1rem;
         margin: 0 1.5rem 1rem 1.5rem;
-        border-radius: 3.5rem;
-        border: var(--focus-outline-size) solid transparent;
-        background-color: @color-background;
-        cursor: text;
 
         &:first-child {
             margin-top: 1rem;
         }
-
-        &:hover, &:focus-within {
-            background-color: @color-background-light1;
-        }
-
-        &: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-90;
-        }
     }
 
     .videos-container {

From 2844775d194132b006110b56924ca5f6762cb813 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 2 Apr 2020 13:24:13 +0300
Subject: [PATCH 09/12] Addons uses SearchBar component

---
 src/routes/Addons/Addons.js   | 18 ++++++----------
 src/routes/Addons/styles.less | 40 +----------------------------------
 2 files changed, 8 insertions(+), 50 deletions(-)

diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index d9a05dcc0..09f524399 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -2,7 +2,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const { useRouteFocused } = require('stremio-router');
 const Icon = require('stremio-icons/dom');
-const { AddonDetailsModal, Button, Image, Multiselect, MainNavBars, TextInput, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
+const { AddonDetailsModal, Button, Image, Multiselect, MainNavBars, TextInput, SearchBar, SharePrompt, ModalDialog, useBinaryState } = require('stremio/common');
 const Addon = require('./Addon');
 const useAddons = require('./useAddons');
 const useSelectableInputs = require('./useSelectableInputs');
@@ -103,16 +103,12 @@ const Addons = ({ urlParams, queryParams }) => {
                         />
                     ))}
                     <div className={styles['spacing']} />
-                    <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>
+                    <SearchBar
+                        className={styles['search-bar']}
+                        title={'Search addons'}
+                        search={search}
+                        searchInputOnChange={searchInputOnChange}
+                    />
                 </div>
                 {
                     addons.selectable.catalogs.length === 0 && addons.catalog_resource === null ?
diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 5f9eb01a6..68eda10a4 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -85,48 +85,10 @@
                 flex: 1;
             }
 
-            .search-bar-container {
+            .search-bar {
                 flex-grow: 0;
                 flex-shrink: 1;
                 flex-basis: 18rem;
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                height: 3.5rem;
-                padding: 0 1rem;
-                border-radius: 2.3rem;
-                border: var(--focus-outline-size) solid transparent;
-                background-color: @color-background;
-                cursor: text;
-
-                &:hover, &:focus-within {
-                    background-color: @color-background-light2;
-                }
-
-                &: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;
-                }
-
             }
         }
 

From e76b2b4f7542e05640c3e3469215f65cc29b0d3c Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 2 Apr 2020 14:06:51 +0300
Subject: [PATCH 10/12] SearchBar props renamed

---
 src/common/SearchBar/SearchBar.js               | 10 +++++-----
 src/routes/Addons/Addons.js                     |  4 ++--
 src/routes/MetaDetails/VideosList/VideosList.js |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/common/SearchBar/SearchBar.js b/src/common/SearchBar/SearchBar.js
index d672ddc5c..3f11dab33 100644
--- a/src/common/SearchBar/SearchBar.js
+++ b/src/common/SearchBar/SearchBar.js
@@ -6,15 +6,15 @@ const TextInput = require('stremio/common/TextInput');
 const SearchBarPlaceholder = require('./SearchBarPlaceholder');
 const styles = require('./styles');
 
-const SearchBar = ({ className, title, search, searchInputOnChange }) => {
+const SearchBar = ({ className, title, value, onChange }) => {
     return (
         <label title={title} className={classnames(className, styles['search-bar-container'])}>
             <TextInput
                 className={styles['search-input']}
                 type={'text'}
                 placeholder={title}
-                value={search}
-                onChange={searchInputOnChange}
+                value={value}
+                onChange={onChange}
             />
             <Icon className={styles['icon']} icon={'ic_search'} />
         </label>
@@ -26,8 +26,8 @@ SearchBar.Placeholder = SearchBarPlaceholder;
 SearchBar.propTypes = {
     className: PropTypes.string,
     title: PropTypes.string,
-    search: PropTypes.string,
-    searchInputOnChange: PropTypes.func
+    value: PropTypes.string,
+    onChange: PropTypes.func
 };
 
 module.exports = SearchBar;
diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js
index 09f524399..c0caedc7f 100644
--- a/src/routes/Addons/Addons.js
+++ b/src/routes/Addons/Addons.js
@@ -106,8 +106,8 @@ const Addons = ({ urlParams, queryParams }) => {
                     <SearchBar
                         className={styles['search-bar']}
                         title={'Search addons'}
-                        search={search}
-                        searchInputOnChange={searchInputOnChange}
+                        value={search}
+                        onChange={searchInputOnChange}
                     />
                 </div>
                 {
diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js
index 1531b60eb..04ff1a994 100644
--- a/src/routes/MetaDetails/VideosList/VideosList.js
+++ b/src/routes/MetaDetails/VideosList/VideosList.js
@@ -60,8 +60,8 @@ const VideosList = ({ className, metaResource }) => {
                             <SearchBar
                                 className={styles['search-bar']}
                                 title={'Search videos'}
-                                search={search}
-                                searchInputOnChange={searchInputOnChange}
+                                value={search}
+                                onChange={searchInputOnChange}
                             />
                             <div className={styles['videos-container']}>
                                 {

From 91606220c58d2cda6838288a9e2681c3b1989657 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 2 Apr 2020 15:38:00 +0300
Subject: [PATCH 11/12] SeasonsBarPlaceholder icon flex none added

---
 .../VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less
index cd29e1313..4145a52ca 100644
--- a/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less
+++ b/src/routes/MetaDetails/VideosList/SeasonsBar/SeasonsBarPlaceholder/styles.less
@@ -18,6 +18,7 @@
         }
 
         .icon {
+            flex: none;
             display: block;
             width: 1.5rem;
             height: 1.5rem;

From 57c4ead20fb7f2d7189c02cc4a081a6751f18ca2 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Thu, 2 Apr 2020 15:48:19 +0300
Subject: [PATCH 12/12] VideoPlaceholder info space fixed

---
 .../MetaDetails/VideosList/Video/VideoPlaceholder/styles.less | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less b/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
index dc7579e27..aa94f84cc 100644
--- a/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
+++ b/src/routes/MetaDetails/VideosList/Video/VideoPlaceholder/styles.less
@@ -6,6 +6,9 @@
 
     .info-container {
         flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
         height: 3rem;
         margin: 0.5rem 1rem;
 
@@ -17,7 +20,6 @@
 
         .released-container {
             height: 1rem;
-            margin-top: 0.5rem;
             background: var(--color-placeholder-background);
         }
     }