From 78c633556edee209f6844ba8e8a64b6c38800bd6 Mon Sep 17 00:00:00 2001
From: Robin Wieruch <wrobin@gmx.net>
Date: Sun, 29 May 2016 17:32:25 +0200
Subject: [PATCH] feat(InputMenu): new component to search for track titles

---
 src/components/FilterName/index.js |  7 ++++++-
 src/components/InputMenu/index.js  | 17 +++++++++++++++++
 styles/components/inputMenu.scss   | 10 ++++++++++
 styles/index.scss                  |  1 +
 4 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 src/components/InputMenu/index.js
 create mode 100644 styles/components/inputMenu.scss

diff --git a/src/components/FilterName/index.js b/src/components/FilterName/index.js
index 36f0464..ad0da2c 100644
--- a/src/components/FilterName/index.js
+++ b/src/components/FilterName/index.js
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as actions from '../../actions/index';
 import { ButtonInline } from '../../components/ButtonInline';
+import { InputMenu } from '../../components/InputMenu';
 
 function FilterName({
   filterNameQuery,
@@ -24,7 +25,11 @@ function FilterName({
         </ButtonInline>
       </div>
       <div className="stream-interaction-content">
-        <input onChange={(event) => onNameFilter(event.target.value.toLowerCase())} value={filterNameQuery} />
+        <InputMenu
+          placeholder="SEARCH..."
+          onChange={(event) => onNameFilter(event.target.value.toLowerCase())}
+          value={filterNameQuery}
+        />
       </div>
     </div>
   );
diff --git a/src/components/InputMenu/index.js b/src/components/InputMenu/index.js
new file mode 100644
index 0000000..704a081
--- /dev/null
+++ b/src/components/InputMenu/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+function InputMenu({ value, onChange, placeholder }) {
+  return (
+    <input
+      type="text"
+      className="input-menu"
+      placeholder={placeholder}
+      onChange={onChange}
+      value={value}
+    />
+  );
+}
+
+export {
+  InputMenu
+};
diff --git a/styles/components/inputMenu.scss b/styles/components/inputMenu.scss
new file mode 100644
index 0000000..a029a92
--- /dev/null
+++ b/styles/components/inputMenu.scss
@@ -0,0 +1,10 @@
+.input-menu {
+  font-size: $menuSize;
+  color: $fontColor;
+  border: 0;
+  background-color: $backgroundSecondary;
+
+  &:focus {
+    outline: none;
+  }
+}
diff --git a/styles/index.scss b/styles/index.scss
index ddb18fc..bb43300 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -20,3 +20,4 @@
 @import 'components/buttonGhost';
 @import 'components/buttonActive';
 @import 'components/streamInteractions';
+@import 'components/inputMenu';