Merge branch 'develop' into feat/report-notification

1 files changed, 14 insertions, 8 deletions

diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index e508a3e9..dde67d21 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -3,8 +3,8 @@
     trigger="click"
     placement="top"
     :offset="{ y: 5 }"
-    class="react-button-popover"
     :bound-to="{ x: 'container' }"
+    remove-padding
   >
     <div
       slot="content"
@@ -22,15 +22,17 @@
           v-for="emoji in commonEmojis"
           :key="emoji"
           class="emoji-button"
+          :title="emoji.displayText"
           @click="addReaction($event, emoji, close)"
         >
-          {{ emoji }}
+          {{ emoji.replacement }}
         </span>
         <div class="reaction-picker-divider" />
         <span
           v-for="(emoji, key) in emojis"
           :key="key"
           class="emoji-button"
+          :title="emoji.displayText"
           @click="addReaction($event, emoji.replacement, close)"
         >
           {{ emoji.replacement }}
@@ -38,11 +40,14 @@
         <div class="reaction-bottom-fader" />
       </div>
     </div>
-    <span slot="trigger">
+    <span
+      slot="trigger"
+      class="ReactButton"
+      :title="$t('tool_tip.add_reaction')"
+    >
       <FAIcon
-        class="fa-scale-110 fa-old-padding add-reaction-button"
+        class="fa-scale-110 fa-old-padding"
         :icon="['far', 'smile-beam']"
-        :title="$t('tool_tip.add_reaction')"
       />
     </span>
   </Popover>
@@ -102,10 +107,11 @@
   }
 }
 
-.add-reaction-button {
-  cursor: pointer;
+.ReactButton {
+  padding: 10px;
+  margin: -10px;
 
-  &:hover {
+  &:hover .svg-inline--fa {
     color: $fallback--text;
     color: var(--text, $fallback--text);
   }