1 files changed, 11 insertions, 22 deletions
diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue
index 3c69e3b4..69bd1d21 100644
--- a/src/components/user_finder/user_finder.vue
+++ b/src/components/user_finder/user_finder.vue
@@ -1,13 +1,13 @@
 <template>
   <span class="user-finder-container">
-    <span class="finder-error base05" v-if="error">
+    <span class="alert error" v-if="error">
       <i class="icon-cancel user-finder-icon" @click="dismissError"/>
       {{$t('finder.error_fetching_user')}}
     </span>
     <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" />
     <a href="#" v-if="hidden"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden"/></a>
     <span v-else>
-      <input class="user-finder-input base03-border" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/>
+      <input class="user-finder-input" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/>
       <i class="icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
     </span>
   </span>
@@ -16,27 +16,16 @@
 <script src="./user_finder.js"></script>
 
 <style lang="scss">
- .user-finder-container {
-   height: 21px;
-   max-width: 100%;
- }
+@import '../../_variables.scss';
 
- .user-finder-icon {
- }
+.user-finder-container {
+  height: 29px;
+  max-width: 100%;
+}
 
- .user-finder-input {
-   border-width: 1px;
-   border-style: solid;
-   border-color: inherit;
-   border-radius: 5px;
-   max-width: 80%;
-   padding: 0.1em 0.2em 0.2em 0.2em;
- }
+.user-finder-input {
+  max-width: 80%;
+  vertical-align: middle;
+}
 
- .finder-error {
-   background-color: rgba(255, 48, 16, 0.65);
-   margin: 0.35em;
-   border-radius: 5px;
-   padding: 0.25em;
- }
 </style>