fix(chat): reaction buttons style and ui

assets/styles/base.less

@@ -200,6 +200,10 @@ a.link {
 }
 
 // Buttons
+button {
+  cursor: pointer;
+  &:extend(.font-primary);
+}
 .button {
   border: none;
   &.active {
@@ -485,11 +489,6 @@ a.link {
   }
 }
 
-// Swiper
-.sidebar-container.swiper-slide.swiper-slide-active {
-  transform: none;
-}
-
 //Scrollbar
 .auto-scroll {
   &::-webkit-scrollbar-thumb {
@@ -678,14 +677,6 @@ a.link {
   &:extend(.font-flair);
 }
 
-//Reactions
-.emoji-reactions {
-  .emoji-reaction.emoji-reacted {
-    &:extend(.background-flair-gradient);
-    &:extend(.glow-flair);
-  }
-}
-
 //Message
 .is-message {
   .pinned-message {

components/views/chat/message/reactions/Reactions.html

@@ -1,29 +1,24 @@
-<div class="emoji-reactions" v-if="reactions">
-  <div v-for="reaction in reactions">
-    <div v-if="hovering === reaction.emoji" class="reactors">
-      <div class="reactors-emoji">{{reaction.emoji}}</div>
-      <div class="reactors-list">
-        <span class="reactor">{{getReactorsList(reaction.reactors)}}</span>
-      </div>
-    </div>
-    <div
-      :class="didIReact(reaction) ? 'emoji-reaction emoji-reacted' : 'emoji-reaction'"
+<div class="message-reactions" v-if="reactions">
+  <template v-for="reaction in reactions">
+    <button
+      class="reaction-button"
+      :class="{reacted : didIReact(reaction)}"
       @click="quickReaction(reaction.emoji)"
       data-cy="reaction-to-message"
-      @mouseenter="toggleReactors(reaction.emoji)"
-      @mouseleave="toggleReactors(null)"
     >
+      <div class="reaction-details">
+        <div class="reactors-emoji">{{reaction.emoji}}</div>
+        <div>{{getReactorsList(reaction.reactors)}}</div>
+      </div>
       <span data-cy="emoji-reaction-value">{{reaction.emoji}}</span>
       <span data-cy="emoji-reaction-count">{{reaction.reactors.length}}</span>
-      <div></div>
-    </div>
-  </div>
-  <div class="react-button" @click="emojiReaction">
-    <smile-icon
-      size="1x"
-      v-if="reactions.length"
-      class="emoji-icon"
-      @click="emojiReaction"
-    />
-  </div>
+    </button>
+  </template>
+  <button
+    class="add-reaction"
+    @click="emojiReaction"
+    v-tooltip.top="$t('pages.chat.add_reaction')"
+  >
+    <smile-icon size="1x" v-if="reactions.length" />
+  </button>
 </div>

components/views/chat/message/reactions/Reactions.less

@@ -1,68 +1,75 @@
-.emoji-reactions {
-  .emoji-reaction {
-    &:nth-child(1) {
-      margin-left: 0;
+.message-reactions {
+  display: flex;
+  align-items: center;
+  gap: @xlight-spacing;
+  margin: @light-spacing 0;
+
+  &:hover,
+  &:focus-within {
+    .add-reaction {
+      display: flex;
     }
+  }
+
+  .reaction-button {
+    display: flex;
+    gap: @xlight-spacing;
+    align-items: center;
+    position: relative;
+    padding: (@light-spacing / 2) @light-spacing;
+    color: white;
     &:extend(.background-semitransparent-light);
     &:extend(.bordered);
     &:extend(.round-corners);
-    padding: (@light-spacing / 2) @light-spacing;
-    margin: 0 (@light-spacing / 2);
-    margin-left: 0;
-    cursor: pointer;
-    text-align: center;
-    max-width: 3.5rem;
-  }
-  .react-button {
-    display: none;
-  }
-  &:hover {
-    .react-button {
-      display: inline-block;
-    }
-  }
-  .emoji-icon {
-    font-size: 1.1rem;
-    margin: 8px 8px 2px 10px;
-    cursor: pointer;
-    &:extend(.font-muted);
-  }
-  .reactors {
-    .reactors-emoji {
-      font-size: 2rem;
-      padding: 0px 4px;
-      text-shadow: -1px 0 1px @midground, 0 1px 1px @midground,
-        1px 0 1px @midground, 0 -1px 1px @midground, 0 0 12px @gray;
+
+    &.reacted {
+      &:extend(.background-flair-gradient);
+      &:extend(.glow-flair);
     }
-    .reactors-list {
-      .reactor {
+
+    &:hover,
+    &:focus {
+      .reaction-details {
         display: flex;
-        flex-flow: row wrap;
-        margin-left: 8px;
-        font-size: 10pt;
       }
     }
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    max-width: 240px;
-    bottom: 36px;
-    margin: 0px;
-    margin-left: -60px;
-    &:extend(.background-semitransparent-dark);
-    &:extend(.blur);
-    padding: 8px 12px;
-    &:extend(.bordered);
-    &:extend(.round-corners);
 
-    &:extend(.first-layer);
-    animation: @animation-speed fadeIn;
-    animation-fill-mode: both;
-    opacity: 0;
+    .reaction-details {
+      display: none;
+      align-items: center;
+      gap: @xlight-spacing;
+      padding: @light-spacing;
+      width: 140px;
+
+      position: absolute;
+      bottom: 36px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      font-size: 10pt;
+      text-align: left;
+      cursor: default;
+
+      &:extend(.background-semitransparent-dark);
+      &:extend(.blur);
+      &:extend(.bordered);
+      &:extend(.round-corners);
+      &:extend(.first-layer);
+
+      .reactors-emoji {
+        font-size: 2rem;
+        padding: 0px 4px;
+        text-shadow: -1px 0 1px @midground, 0 1px 1px @midground,
+          1px 0 1px @midground, 0 -1px 1px @midground, 0 0 12px @gray;
+      }
+    }
+  }
+
+  .add-reaction {
+    display: none;
+    font-size: 1.1rem;
+    background: transparent;
+    border: none;
+    &:extend(.font-muted);
   }
-  display: flex;
-  margin-top: @light-spacing;
-  margin-bottom: @normal-spacing;
 }

components/views/chat/message/reactions/Reactions.vue

@@ -1,10 +1,9 @@
 <template src="./Reactions.html"></template>
 <script lang="ts">
-// eslint-disable-next-line import/named
 import Vue, { PropType } from 'vue'
 import { mapState } from 'vuex'
 import { SmileIcon } from 'satellite-lucide-icons'
-import { Group, UIReply, UIMessage } from '~/types/messaging'
+import { Group, UIReply, UIMessage, UIReaction } from '~/types/messaging'
 import { getUsernameFromState } from '~/utilities/Messaging'
 
 export default Vue.extend({
@@ -35,11 +34,6 @@ export default Vue.extend({
       default: () => {},
     },
   },
-  data() {
-    return {
-      hovering: false,
-    }
-  },
   computed: {
     ...mapState(['accounts']),
     reactions() {
@@ -93,23 +87,14 @@ export default Vue.extend({
           : this.$props.message.id,
       })
     },
-    /**
-     * @method toggleReactors DocsTODO
-     * @description
-     * @param emoji
-     * @example
-     */
-    toggleReactors(emoji: any) {
-      this.$data.hovering = emoji
-    },
     /**
      * @method didIReact DocsTODO
      * @description
      * @param reaction
      * @returns
      * @example
      */
-    didIReact(reaction: any) {
+    didIReact(reaction: UIReaction) {
       return reaction.reactors.includes(this.accounts.details.textilePubkey)
     },
     getReactorsList(reactors: string[], limit = 3) {
@@ -118,7 +103,7 @@ export default Vue.extend({
         .slice(0, limit)
         .reduce(
           (reactorsList, reactorPublickey, i) =>
-            `${reactorsList}${i === 0 ? '' : ','}${getUsernameFromState(
+            `${reactorsList}${i === 0 ? '' : ', '}${getUsernameFromState(
               reactorPublickey,
               this.$store.state,
             )}`,

locales/en-US.js

@@ -543,6 +543,7 @@ export default {
         loading: 'Loading ...',
         no_more: 'No more data.',
       },
+      add_reaction: 'Add reaction',
     },
     newMessage: {
       new_message: 'New Message',