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" /> - -
+
+ { onChange(e.target.value); }} + className="search__field" + placeholder="What are you looking for?" + /> + + + +
); } 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; } }