From 86531aec1a83e75f3dd95543e5eae6943037cc04 Mon Sep 17 00:00:00 2001
From: Joshua Byrd <phocks@gmail.com>
Date: Sun, 26 Jan 2020 19:46:57 +1000
Subject: [PATCH] OK let's make a search tomorrow

---
 components/heading.js        |  3 ++-
 components/heading.scss      | 10 ++++++++--
 components/search.js         | 10 ++++++++--
 components/search.scss       | 10 +++++++---
 public/icons/favorite-8.svg  |  1 +
 public/icons/magnifier-1.svg |  1 +
 6 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 public/icons/favorite-8.svg
 create mode 100644 public/icons/magnifier-1.svg

diff --git a/components/heading.js b/components/heading.js
index 535c09b..d31d229 100644
--- a/components/heading.js
+++ b/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>
   );
 };
diff --git a/components/heading.scss b/components/heading.scss
index 83d7b90..84383c5 100644
--- a/components/heading.scss
+++ b/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 {
diff --git a/components/search.js b/components/search.js
index b6875ff..1e7a2ff 100644
--- a/components/search.js
+++ b/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>
   );
diff --git a/components/search.scss b/components/search.scss
index 026cc7a..84f9737 100644
--- a/components/search.scss
+++ b/components/search.scss
@@ -1,8 +1,10 @@
-.root {
+.search {
   background-color: white;
   border-bottom: 1px solid #dcdcdc;
   min-height: 100px;
   display: flex;
+  padding-left: 1rem;
+  // align-items: center;
 
   form {
     flex: 1;
@@ -10,8 +12,10 @@
 
   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;
   }
 }
\ No newline at end of file
diff --git a/public/icons/favorite-8.svg b/public/icons/favorite-8.svg
new file mode 100644
index 0000000..851a714
--- /dev/null
+++ b/public/icons/favorite-8.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17.867 3.493l4.133 3.444v5.127l-10 8.333-10-8.334v-5.126l4.133-3.444 5.867 3.911 5.867-3.911zm.133-2.493l-6 4-6-4-6 5v7l12 10 12-10v-7l-6-5z"/></svg>
\ No newline at end of file
diff --git a/public/icons/magnifier-1.svg b/public/icons/magnifier-1.svg
new file mode 100644
index 0000000..2c90350
--- /dev/null
+++ b/public/icons/magnifier-1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z"/></svg>
\ No newline at end of file