feat(InputMenu): new component to search for track titles

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>
   );

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
+};

styles/components/inputMenu.scss

@@ -0,0 +1,10 @@
+.input-menu {
+  font-size: $menuSize;
+  color: $fontColor;
+  border: 0;
+  background-color: $backgroundSecondary;
+
+  &:focus {
+    outline: none;
+  }
+}

styles/index.scss

@@ -20,3 +20,4 @@
 @import 'components/buttonGhost';
 @import 'components/buttonActive';
 @import 'components/streamInteractions';
+@import 'components/inputMenu';