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({
- onNameFilter(event.target.value.toLowerCase())} value={filterNameQuery} />
+ onNameFilter(event.target.value.toLowerCase())}
+ value={filterNameQuery}
+ />
);
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 (
+
+ );
+}
+
+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';