Merge remote-tracking branch 'origin/develop' into settings-changed

* origin/develop: (306 commits)
  fallback if shadows aren't defined
  Translated using Weblate (Chinese (Traditional))
  Translated using Weblate (Ukrainian)
  Translated using Weblate (Italian)
  Translated using Weblate (Ukrainian)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Italian)
  Translated using Weblate (Russian)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Russian)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  ...

1 files changed, 54 insertions, 42 deletions

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