Styling tweaks

src/assets/css/chat.scss

@@ -126,7 +126,7 @@ $chat-text-size: 0.7pt;
         right:-30px;
         top:0;
         .v-icon {
-            color: #cccccc;
+            color: #eeeeee;
             &:hover {
                 color: #888888;
             }
@@ -314,11 +314,19 @@ $chat-text-size: 0.7pt;
 }
 
 .quick-reaction-container {
+    position: absolute;
+    top: -18px;
+    right: 10px;
+    background-color: #000000;
+    border: 3px solid white;
+    border-radius: 15px;
+    height: 30px;
     .quick-reaction {
-        border: 1px solid #e2e2e2;
-        border-radius: 9px;
+        // border: 1px solid #e2e2e2;
+        // border-radius: 9px;
         margin: 0px 2px;
         padding: 2px;
+        font-size: 10px;
         &:hover {
             border: 1px solid #888888;
             background-color: #e2e2e2;
@@ -328,8 +336,10 @@ $chat-text-size: 0.7pt;
             font-size: 0.7rem;
         }
     }
-    .sent {
-        background-color: palegreen;
+    .sent .quick-reaction-count {
+        color: white;
+        font-weight: 700;
+        // background-color: palegreen;
     }
 }
 

src/components/messages/QuickReactions.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="quick-reaction-container">
+  <div class="quick-reaction-container" v-show="reactions">
     <span :class="{'quick-reaction':true,'sent':value.includes($matrix.currentUserId)}" v-for="(value, name) in reactionMap" :key="name" @mousedown="onClickEmoji(name)">
       {{ name }} <span class="quick-reaction-count">{{ value.length }}</span>
     </span>

src/components/messages/messageMixin.js

@@ -42,7 +42,7 @@ export default {
     {
       // Can we find the original message?
       const originalEventId = relatesTo['m.in_reply_to'].event_id;
-      if (originalEventId) {
+      if (originalEventId && this.timelineSet) {
         const originalEvent = this.timelineSet.findEventById(originalEventId);
         this.inReplyToEvent = originalEvent;
         this.inReplyToSender = this.messageEventDisplayName(originalEvent);