From 23663a4d66cb17e6f400b88bcc274f9c78037634 Mon Sep 17 00:00:00 2001
From: Zach Bruggeman <mail@bruggie.com>
Date: Fri, 24 Mar 2017 20:55:04 -0700
Subject: [PATCH] Design tweaks

---
 src/components/Header.vue | 24 +++++++++++++++---------
 src/components/Search.vue | 12 +++++++-----
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index f160fc4..7703033 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <header :class="`bg-blue absolute top-0 w-100 ${lights ? 'z-3' : 'z-max'}`">
+  <header :class="`bg-blue absolute top-0 w-100 bw1 bb b--dark-blue ${lights ? 'z-3' : 'z-max'}`">
     <div class="header-container center relative">
       <div class="logo-container">
         <router-link to="/" class="db no-underline">
@@ -9,12 +9,18 @@
       </div>
       <div v-if="username">
         <div class="absolute nav" style="left: 95px; top: 14px;">
-          <router-link exact to="/" class="white no-underline bg-animate"><i class="fa fa-th-list v-mid mr2" aria-hidden="true"></i> Queue</router-link>
-          <router-link to="/history" class="white no-underline bg-animate"><i class="fa fa-history v-mid mr2" aria-hidden="true"></i> History</router-link>
+          <router-link exact to="/" class="white no-underline bg-animate">
+            <i class="fa fa-th-list v-mid mr2" aria-hidden="true"></i>
+            <span class="fw6">Queue</span>
+          </router-link>
+          <router-link to="/history" class="white no-underline bg-animate">
+            <i class="fa fa-history v-mid mr2" aria-hidden="true"></i>
+            <span class="fw6">History</span>
+          </router-link>
         </div>
         <div class="absolute search right-0" style="top: 6px;">
           <search />
-          <span class="f6 fw5 dib ml1 ba b--white-40 bg-transparent bg-animate white br1 pointer ph2 pv1 tc logout" @click="logout">Log out</span>
+          <span class="f6 fw5 dib ml1 ba b--light-blue bg-transparent bg-animate white br1 pointer ph2 pv1 tc logout" @click="logout">Log out</span>
         </div>
       </div>
     </div>
@@ -94,18 +100,18 @@ export default {
   }
 
   .nav a {
-    height: 64px;
+    height: 62px;
     display: inline-block;
     margin-right: -5px;
     position: relative;
     top: -23px;
     padding: 1.4rem 1rem;
-    border-bottom: 0.25rem solid #357edd;
+    border-bottom: 0 solid #00449e;
     transition: all 0.2s ease-in-out;
   }
 
   .nav a:hover {
-    border-bottom: 0.25rem solid #2c60a2;
+    border-bottom-width: 0.25rem;
   }
 
   .nav .fa {
@@ -113,9 +119,9 @@ export default {
   }
 
   .nav .router-link-active {
-    border-bottom: 0.25rem solid #2c60a2;
+    border-bottom: 0.25rem solid #00449e;
   }
   .logout:hover {
-    background-color: #2c60a2;
+    background-color: #00449e;
   }
 </style>
diff --git a/src/components/Search.vue b/src/components/Search.vue
index dc3cfad..52a72d8 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -3,7 +3,7 @@
     <form @submit.prevent="search">
       <input
         type="text"
-        class="br2 br--left input-reset white bw0 search-bar"
+        class="br2 br--left input-reset white bw0 bg-dark-blue search-bar"
         placeholder="Search Crunchyroll"
         v-model="searchInput"
         ref="input"
@@ -11,10 +11,10 @@
         @focus="focus"
         @blur="blur"
       >
-      <button class="br2 br--right pointer bw0 button-reset search-btn"><i class="fa fa-search white"></i></button>
+      <button class="br2 br--right pointer bw0 button-reset bg-dark-blue search-btn"><i class="fa fa-search white"></i></button>
     </form>
     <div v-if="showResults" class="absolute br2 shadow-1 bg-white w-100 mt1">
-      <div v-for="(series, index) in matching" :key="series.id" :id="series.id" :class="`search-result ${index === selected ? 'selected' : ''}`" @mousedown="resultPress">
+      <div v-for="(series, index) in matching" :key="series.id" :id="series.id" :data-index="index" :class="`bb b--black-40 search-result ${index === selected ? 'selected' : ''}`" @mouseover="resultHover" @mousedown="resultPress">
         <img :src="series.image" :alt="series.name">
         <span class="truncate dib f6">{{series.name}}</span>
       </div>
@@ -100,6 +100,9 @@
         this.selected = -1
         this.focused = false
       },
+      resultHover ({target}) {
+        this.selected = parseInt(target.dataset.index, 10)
+      },
       resultPress ({target, which}) {
         if (which !== 1) return
         this.$router.push(`/series/${target.id}`)
@@ -122,7 +125,6 @@
 
 <style scoped>
   .search-bar {
-    background-color: #2c60a2;
     padding: 0.5rem;
   }
 
@@ -132,7 +134,6 @@
   }
 
   .search-btn {
-    background-color: #2c60a2;
     padding: 0.5rem;
     margin-left: -5px;
   }
@@ -154,6 +155,7 @@
   .search-result:last-child {
     border-bottom-left-radius: 0.25rem;
     border-bottom-right-radius: 0.25rem;
+    border: 0;
   }
 
   .search-result.selected, .search-result:hover {