2 files changed, 22 insertions, 7 deletions
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index abcf0455..de0df70c 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -1,5 +1,8 @@
 import Popover from '../popover/popover.vue'
-import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
+
+library.add(faSmileBeam)
 
 const ReactButton = {
   props: ['status'],
@@ -29,13 +32,23 @@ const ReactButton = {
     emojis () {
       if (this.filterWord !== '') {
         const filterWordLowercase = this.filterWord.toLowerCase()
-        return this.$store.state.instance.emoji.filter(emoji =>
-          emoji.displayText.toLowerCase().includes(filterWordLowercase)
-        )
+        let orderedEmojiList = []
+        for (const emoji of this.$store.state.instance.emoji) {
+          const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
+          if (indexOfFilterWord > -1) {
+            if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) {
+              orderedEmojiList[indexOfFilterWord] = []
+            }
+            orderedEmojiList[indexOfFilterWord].push(emoji)
+          }
+        }
+        return orderedEmojiList.flat()
       }
       return this.$store.state.instance.emoji || []
     },
-    ...mapGetters(['mergedConfig'])
+    mergedConfig () {
+      return this.$store.getters.mergedConfig
+    }
   }
 }
 
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 0b34add1..95d95b11 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -12,6 +12,7 @@
       <div class="reaction-picker-filter">
         <input
           v-model="filterWord"
+          size="1"
           :placeholder="$t('emoji.search_emoji')"
         >
       </div>
@@ -36,9 +37,10 @@
         <div class="reaction-bottom-fader" />
       </div>
     </div>
-    <i
+    <FAIcon
       slot="trigger"
-      class="icon-smile button-icon add-reaction-button"
+      class="fa-scale-110 fa-old-padding add-reaction-button"
+      :icon="['far', 'smile-beam']"
       :title="$t('tool_tip.add_reaction')"
     />
   </Popover>