OK let's make a search tomorrow

components/heading.js

@@ -3,12 +3,13 @@ import css from "./heading.scss";
 
 export default props => {
   return (
-    <div className={css.root}>
+    <div className={css.heading}>
       <Link href="/">
         <a>
           <span className={css.branding}>quoke</span>
         </a>
       </Link>
+      <img className={css.heart} src="/icons/favorite-8.svg" />
     </div>
   );
 };

components/heading.scss

@@ -1,8 +1,12 @@
-.root {
+.heading {
   color: white;
   padding: 0.5rem 1rem;
   display: flex;
   align-items: center;
+  min-height: 100px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 
   a {
     color: white;
@@ -13,7 +17,9 @@
     text-decoration: underline;
   }
 
-  min-height: 100px;
+  .heart {
+    filter: invert(1);
+  }
 }
 
 .branding {

components/search.js

@@ -2,9 +2,15 @@ import css from "./search.scss";
 
 export default props => {
   return (
-    <div className={css.root}>
+    <div className={css.search}>
+      <img src="/icons/magnifier-1.svg" />
       <form method="get" action="/search">
-        <input type="search" placeholder="Search..." name="q"></input>
+        <input
+          type="search"
+          placeholder="Search..."
+          name="q"
+          autoComplete="off"
+        ></input>
       </form>
     </div>
   );

components/search.scss

@@ -1,17 +1,21 @@
-.root {
+.search {
   background-color: white;
   border-bottom: 1px solid #dcdcdc;
   min-height: 100px;
   display: flex;
+  padding-left: 1rem;
+  // align-items: center;
 
   form {
     flex: 1;
   }
 
   input[type=search] {
     width: 100%;
-    height: 100%;
+    min-height: 100%;
     border: none;
-    padding: 0rem 1rem;
+    padding: 0 1rem 0 0.8rem;
+    outline: none;
+    font-size: 1em;
   }
 }