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] 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