diff --git a/js/components/Icon.js b/js/components/Icon.js
new file mode 100644
index 0000000..c101ec7
--- /dev/null
+++ b/js/components/Icon.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import actions from '../actions';
+
+// import question from '../../assets/icons/question.svg';
+
+function Icon({ name, ...props }) {
+ return (
+
+ );
+}
diff --git a/js/components/Search.js b/js/components/Search.js
index 0e5f116..eb7082c 100644
--- a/js/components/Search.js
+++ b/js/components/Search.js
@@ -1,11 +1,27 @@
import React from 'react';
import classNames from 'classnames';
-export default function Search({ value, onChange }) {
+export default function Search({ value, onChange, onSubmit = () => {} }) {
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ onSubmit();
+ };
+
return (
-
- { onChange(e.target.value); }} className="search__field" placeholder="Search" />
-
-
+
);
}
diff --git a/styles/components/button.css b/styles/components/button.css
new file mode 100644
index 0000000..6b07e42
--- /dev/null
+++ b/styles/components/button.css
@@ -0,0 +1,17 @@
+.button {
+ border: none;
+ background: transparent;
+ position: relative;
+ padding: 10px 10px 10px 35px;
+ margin: 0;
+ font-size: 16px;
+ line-height: 16px;
+ color: var(--color-gray-normal);
+
+ &__icon {
+ position: absolute;
+ left: 5px;
+ top: 50%;
+ margin-top: -11px;
+ }
+}
diff --git a/styles/components/icon-link.css b/styles/components/icon-link.css
index 02ed96a..b9c36d4 100644
--- a/styles/components/icon-link.css
+++ b/styles/components/icon-link.css
@@ -22,6 +22,14 @@
}
&:hover {
- text-decoration: underline;
+ color: var(--color-white);
+ &:after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: -8px;
+ width: 100%;
+ border-bottom: 2px solid var(--color-white);
+ }
}
}
diff --git a/styles/components/search.css b/styles/components/search.css
index 733c9d9..1f63c36 100644
--- a/styles/components/search.css
+++ b/styles/components/search.css
@@ -3,11 +3,13 @@
width: 600px;
height: 50px;
position: relative;
+ margin: 0;
+ padding: 0;
&__field {
height: 100%;
width: 100%;
- padding: 10px 20px 10px 50px;
+ padding: 10px 120px 10px 20px;
background: #3A444A;
display: block;
border: none;
@@ -27,9 +29,10 @@
}
}
- &__icon {
+ &__button {
position: absolute;
- top: 14px;
- left: 14px;
+ top: 50%;
+ margin-top: -18px;
+ right: 7px;
}
}