2 files changed, 66 insertions, 44 deletions

diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js
index d7d85676..551649c7 100644
--- a/src/components/search_bar/search_bar.js
+++ b/src/components/search_bar/search_bar.js
@@ -1,9 +1,19 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes,
+  faSearch
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes,
+  faSearch
+)
+
 const SearchBar = {
   data: () => ({
     searchTerm: undefined,
     hidden: true,
-    error: false,
-    loading: false
+    error: false
   }),
   watch: {
     '$route': function (route) {
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 4d5a1aec..6cf9179e 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -1,40 +1,50 @@
 <template>
-  <div>
-    <div class="search-bar-container">
-      <i
-        v-if="loading"
-        class="icon-spin4 finder-icon animate-spin-slow"
+  <div
+    class="SearchBar"
+    :class="{ '-expanded': !hidden }"
+  >
+    <button
+      v-if="hidden"
+      class="button-unstyled nav-icon"
+      :title="$t('nav.search')"
+      @click.prevent.stop="toggleHidden"
+    >
+      <FAIcon
+        fixed-width
+        class="fa-scale-110 fa-old-padding"
+        icon="search"
       />
-      <a
-        v-if="hidden"
-        href="#"
-        :title="$t('nav.search')"
-      ><i
-        class="button-icon icon-search"
+    </button>
+    <template v-else>
+      <input
+        id="search-bar-input"
+        ref="searchInput"
+        v-model="searchTerm"
+        class="search-bar-input"
+        :placeholder="$t('nav.search')"
+        type="text"
+        @keyup.enter="find(searchTerm)"
+      >
+      <button
+        class="button-default search-button"
+        @click="find(searchTerm)"
+      >
+        <FAIcon
+          fixed-width
+          icon="search"
+        />
+      </button>
+      <button
+        class="button-unstyled cancel-search"
         @click.prevent.stop="toggleHidden"
-      /></a>
-      <template v-else>
-        <input
-          id="search-bar-input"
-          ref="searchInput"
-          v-model="searchTerm"
-          class="search-bar-input"
-          :placeholder="$t('nav.search')"
-          type="text"
-          @keyup.enter="find(searchTerm)"
-        >
-        <button
-          class="btn search-button"
-          @click="find(searchTerm)"
-        >
-          <i class="icon-search" />
-        </button>
-        <i
-          class="button-icon icon-cancel"
-          @click.prevent.stop="toggleHidden"
+      >
+        <FAIcon
+          fixed-width
+          icon="times"
+          class="cancel-icon fa-scale-110 fa-old-padding"
         />
-      </template>
-    </div>
+      </button>
+    </template>
   </div>
 </template>
 
@@ -43,30 +53,32 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.search-bar-container {
-  max-width: 100%;
+.SearchBar {
   display: inline-flex;
   align-items: baseline;
   vertical-align: baseline;
   justify-content: flex-end;
 
+  &.-expanded {
+    width: 100%;
+  }
+
   .search-bar-input,
   .search-button {
     height: 29px;
   }
 
   .search-bar-input {
-    // TODO: do this properly without a rough guesstimate of 2 icons + paddings
-    max-width: calc(100% - 30px - 30px - 20px);
+    flex: 1 0 auto;
   }
 
-  .search-button {
-    margin-left: .5em;
-    margin-right: .5em;
+  .cancel-search {
+    height: 50px;
   }
 
-  .icon-cancel {
-    cursor: pointer;
+  .cancel-icon {
+    color: $fallback--text;
+    color: var(--btnTopBarText, $fallback--text);
   }
 }