CSS adjustments for search

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 (
+    <span/>
+  );
+}

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 (
-    <div className="search">
+    <form className="search" onSubmit={handleSubmit}>
-      <input value={value} type="text" onChange={(e) => { onChange(e.target.value); }} className="search__field" placeholder="Search" />
+      <input
-      <span className="icon icon--search search__icon" />
+        value={value}
-    </div>
+        type="text"
+        onChange={(e) => { onChange(e.target.value); }}
+        className="search__field"
+        placeholder="What are you looking for?"
+      />
+      <span className="search__button">
+        <button type="submit" className="button">
+          <span className="icon icon--search button__icon" />
+          Search
+        </button>
+      </span>
+    </form>
   );
 }

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

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

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;
+    top: 50%;
-    left: 14px;
+    margin-top: -18px;
+    right: 7px;
   }
 }