5 files changed, 38 insertions, 9 deletions
diff --git a/src/App.js b/src/App.js
index 89aed01d..4f3fd798 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,6 +21,7 @@ export default {
   },
   data: () => ({
     mobileActivePanel: 'timeline',
+    finderHidden: true,
     supportsMask: window.CSS && window.CSS.supports && (
       window.CSS.supports('mask-size', 'contain') ||
         window.CSS.supports('-webkit-mask-size', 'contain') ||
@@ -53,7 +54,8 @@ export default {
     },
     logoBgStyle () {
       return Object.assign({
-        'margin': `${this.$store.state.instance.logoMargin} 0`
+        'margin': `${this.$store.state.instance.logoMargin} 0`,
+        opacity: this.finderHidden ? 1 : 0
       }, this.enableMask ? {} : {
         'background-color': this.enableMask ? '' : 'transparent'
       })
@@ -80,6 +82,9 @@ export default {
     logout () {
       this.$router.replace('/main/public')
       this.$store.dispatch('logout')
+    },
+    onFinderToggled (hidden) {
+      this.finderHidden = hidden
     }
   }
 }
diff --git a/src/App.scss b/src/App.scss
index 0a303b15..7f33cd51 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -269,6 +269,9 @@ nav {
     justify-content: center;
     flex: 0 0 auto;
     z-index: -1;
+    transition: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 100ms;
 
     .mask {
       mask-repeat: no-repeat;
@@ -597,6 +600,11 @@ nav {
   color: $fallback--faint;
   color: var(--faint, $fallback--faint);
 }
+@media all and (min-width: 959px) {
+  .logo {
+    opacity: 1 !important;
+  }
+}
 
 @media all and (max-width: 959px) {
   .mobile-hidden {
diff --git a/src/App.vue b/src/App.vue
index 048c1e77..a3a7ecf6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,7 +13,7 @@
           <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
         </div>
         <div class='item right'>
-          <user-finder class="nav-icon"></user-finder>
+          <user-finder class="nav-icon" @toggled="onFinderToggled"></user-finder>
           <router-link @click.native="activatePanel('timeline')" :to="{ name: 'settings'}"><i class="icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
           <a href="#" v-if="currentUser" @click.prevent="logout"><i class="icon-logout nav-icon" :title="$t('login.logout')"></i></a>
         </div>
diff --git a/src/components/user_finder/user_finder.js b/src/components/user_finder/user_finder.js
index 74f79d1b..55c6c402 100644
--- a/src/components/user_finder/user_finder.js
+++ b/src/components/user_finder/user_finder.js
@@ -11,6 +11,7 @@ const UserFinder = {
     },
     toggleHidden () {
       this.hidden = !this.hidden
+      this.$emit('toggled', this.hidden)
     }
   }
 }
diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue
index 4d9f6842..9efdfab7 100644
--- a/src/components/user_finder/user_finder.vue
+++ b/src/components/user_finder/user_finder.vue
@@ -1,11 +1,14 @@
 <template>
   <div class="user-finder-container">
     <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" />
-    <a href="#" v-if="hidden"  :title="$t('finder.find_user')" ><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a>
-    <span v-else>
+    <a href="#" v-if="hidden" :title="$t('finder.find_user')"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a>
+    <template v-else>
       <input class="user-finder-input" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/>
+      <button class="btn search-button" @click="findUser(username)">
+        <i class="icon-search"/>
+      </button>
       <i class="icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
-    </span>
+    </template>
   </div>
 </template>
 
@@ -16,11 +19,23 @@
 
 .user-finder-container {
   max-width: 100%;
-}
+  display: inline-flex;
+  align-items: baseline;
+  vertical-align: baseline;
+
+
+  .user-finder-input,
+  .search-button {
+    height: 29px;
+  }
+  .user-finder-input {
+    max-width: 80%;
+  }
 
-.user-finder-input {
-  max-width: 80%;
-  vertical-align: middle;
+  .search-button {
+    margin-left: .5em;
+    margin-right: .5em;
+  }
 }
 
 </style>