fix(replies): change avatar color to correct one

components/views/chat/message/Message.less

@@ -70,7 +70,7 @@
   }
   &:hover {
     &:extend(.background-semitransparent-light);
-    .message-actions {
+    .message-container > .message-actions {
       display: flex;
     }
   }

components/views/chat/message/reply/Item/Item.html

@@ -0,0 +1,50 @@
+<div class="reply-container">
+  <div class="is-reply">
+    <span @click="(event) => $emit('click', event)">
+      <UiCircle
+        :type="src ? 'image' :'random'"
+        :seed="address"
+        :size="35"
+        :source="src"
+      />
+    </span>
+    <div class="reply-body">
+      <div class="reply-heading">
+        <span @click="(event) => $emit('click', event)">
+          <!-- TODO: update badges //AP-397 -->
+          <UiUserName :username="username" :badge="''" />
+        </span>
+        <TypographyText :text="timestamp" />
+      </div>
+      <div class="reply-content">
+        <MessageMarkdown
+          v-if="reply.replyType === 'text'"
+          :text="markdownToHtml(reply.payload)"
+          class="markdown"
+          data-cy="reply-message"
+        />
+        <UiChatImage
+          v-else-if="reply.replyType === 'image'"
+          :source="reply.payload.url"
+          alt=""
+        />
+        <UiChatEmbedsVideoPlayer
+          v-else-if="reply.replyType === 'video'"
+          :data="reply.payload"
+        />
+        <UiChatEmbedsAudioPlayer
+          v-else-if="reply.replyType === 'audio'"
+          :data="reply.payload"
+        />
+        <UiChatEmbedsFile
+          v-else-if="reply.replyType === 'file'"
+          :data="reply.payload"
+        />
+        <MessageActions
+          :emojiReaction="(event) => $emit('emoji-reaction', event,  reply.id)"
+        />
+      </div>
+    </div>
+  </div>
+  <MessageReactions :message="message" :group="group" :reply="reply" />
+</div>

components/views/chat/message/reply/Item/Item.less

@@ -0,0 +1,47 @@
+.reply-container {
+  .emoji-reactions {
+    margin-top: 0;
+    margin-left: 3rem;
+    position: relative;
+  }
+  .is-reply {
+    .circle {
+      margin-top: 0.3rem;
+      cursor: pointer;
+    }
+
+    .reply-body {
+      .reply-heading {
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+
+        .is-text {
+          margin-left: @light-spacing;
+          font-size: @micro-text-size;
+          &:extend(.font-muted);
+          display: flex;
+          align-items: flex-end;
+          height: 1.2rem;
+        }
+      }
+
+      .reply-content {
+        position: relative;
+      }
+      margin-left: 0.75rem;
+      &:extend(.full-width);
+    }
+    &:extend(.full-width);
+    padding: 0.5rem;
+    display: flex;
+    margin-bottom: 0.25rem;
+  }
+  display: flex;
+  flex-direction: column;
+  &:hover {
+    .message-actions {
+      display: flex;
+    }
+  }
+}

components/views/chat/message/reply/Item/Item.vue

@@ -0,0 +1,76 @@
+<template src="./Item.html"></template>
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import { mapState } from 'vuex'
+import { UIMessage, Group } from '~/types/messaging'
+import {
+  getUsernameFromState,
+  convertTimestampToDate,
+  getAddressFromState,
+} from '~/utilities/Messaging'
+
+export default Vue.extend({
+  props: {
+    message: {
+      type: Object as PropType<UIMessage>,
+      default: () => ({
+        id: '0',
+        at: 1620515543000,
+        type: 'text',
+        payload: 'Invalid Message',
+      }),
+    },
+    group: {
+      type: Object as PropType<Group>,
+      default: () => {},
+    },
+    reply: {
+      type: Object,
+      default: () => {},
+    },
+    markdownToHtml: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  computed: {
+    ...mapState(['ui', 'friends', 'accounts']),
+    address() {
+      if (!this.reply.from) {
+        return ''
+      }
+      return getAddressFromState(this.reply.from, this.$store.state)
+    },
+    username() {
+      if (!this.reply.from) {
+        return ''
+      }
+      return getUsernameFromState(this.reply.from, this.$store.state)
+    },
+    timestamp() {
+      if (!this.reply.at) {
+        return ''
+      }
+      return convertTimestampToDate(this.$t('friends.details'), this.reply.at)
+    },
+    src(): string {
+      // To check if the sender is you we just compare the from field
+      // with your textile public key
+      if (this.reply.from === this.$TextileManager?.getIdentityPublicKey()) {
+        const myHash = this.accounts.details?.profilePicture
+        return myHash ? `${this.$Config.textile.browser}/ipfs/${myHash}` : ''
+      }
+
+      // Try to find the friend you are talking to
+      const friend = this.$Hounddog.findFriend(this.reply.from, this.friends)
+
+      if (friend?.profilePicture) {
+        return `${this.$Config.textile.browser}/ipfs/${friend?.profilePicture}`
+      }
+
+      return ''
+    },
+  },
+})
+</script>
+<style lang="less" src="./Item.less"></style>

components/views/chat/message/reply/Reply.html

@@ -8,68 +8,20 @@
     <plus-square-icon size="1.1x" />
     &nbsp; {{ makeReplyText }}
   </div>
-  <div
-    class="reply-container"
-    v-if="showReplies"
-    v-for="reply in message.replies"
-  >
-    <div
-      class="is-reply"
-      @mouseenter="mouseOver(reply.id)"
-      @mouseleave="mouseOver('')"
-    >
-      <span v-on:click="showQuickProfile">
-        <UiCircle type="random" :seed="reply.from" :size="35" />
-      </span>
-      <div class="reply-body">
-        <div class="reply-heading">
-          <span v-on:click="showQuickProfile">
-            <!-- TODO: update badges //AP-397 -->
-            <UiUserName :username="getUsernameFromReply(reply)" :badge="''" />
-          </span>
-          <TypographyText :text="getTimestampFromReply(reply.at)" />
-        </div>
-        <div class="reply-content">
-          <MessageMarkdown
-            v-if="reply.replyType === 'text'"
-            :text="markdownToHtml(reply.payload)"
-            class="markdown"
-            data-cy="reply-message"
-          />
-          <UiChatImage
-            v-else-if="reply.replyType === 'image'"
-            :image="reply.payload.url"
-            alt=""
-          />
-          <UiChatEmbedsVideoPlayer
-            v-else-if="reply.replyType === 'video'"
-            :data="reply.payload"
-          />
-          <UiChatEmbedsAudioPlayer
-            v-else-if="reply.replyType === 'audio'"
-            :data="reply.payload"
-          />
-          <UiChatEmbedsFile
-            v-else-if="reply.replyType === 'file'"
-            :data="reply.payload"
-          />
-          <MessageActions
-            v-if="replyHover == reply.id"
-            :hideReply="true"
-            :emojiReaction="(event) => emojiReaction(event, reply.id)"
-          />
-        </div>
-      </div>
+  <template v-else>
+    <MessageReplyItem
+      v-for="reply in message.replies"
+      :key="reply.id"
+      :reply="reply"
+      :message="message"
+      :group="group"
+      :markdownToHtml="markdownToHtml"
+      @emoji-reaction="emojiReaction"
+      @click="showQuickProfile"
+    />
+    <div @click="toggleReplies" class="reply-close" data-cy="reply-close">
+      <minus-square-icon size="1.1x" />
+      &nbsp; {{$t('conversation.collapse')}}
     </div>
-    <MessageReactions :message="message" :group="group" :reply="reply" />
-  </div>
-  <div
-    v-if="showReplies"
-    @click="toggleReplies"
-    class="reply-close"
-    data-cy="reply-close"
-  >
-    <minus-square-icon size="1.1x" />
-    &nbsp; {{$t('conversation.collapse')}}
-  </div>
+  </template>
 </div>

components/views/chat/message/reply/Reply.less

@@ -21,49 +21,6 @@
     &:extend(.font-secondary);
   }
 
-  .reply-container {
-    .emoji-reactions {
-      margin-top: 0;
-      margin-left: 3rem;
-      position: relative;
-    }
-    .is-reply {
-      .circle {
-        margin-top: 0.3rem;
-        cursor: pointer;
-      }
-
-      .reply-body {
-        .reply-heading {
-          display: inline-flex;
-          flex-direction: row;
-          align-items: center;
-
-          .is-text {
-            margin-left: @light-spacing;
-            font-size: @micro-text-size;
-            &:extend(.font-muted);
-            display: flex;
-            align-items: flex-end;
-            height: 1.2rem;
-          }
-        }
-
-        .reply-content {
-          position: relative;
-        }
-        margin-left: 0.75rem;
-        &:extend(.full-width);
-      }
-      word-break: break-word;
-      &:extend(.full-width);
-      padding: 0.5rem;
-      display: flex;
-      margin-bottom: 0.25rem;
-    }
-    display: flex;
-    flex-direction: column;
-  }
   &:extend(.bordered);
   &:extend(.round-corners);
   padding: (@light-spacing / 2) @light-spacing;

components/views/chat/message/reply/Reply.vue

@@ -4,10 +4,7 @@ import Vue, { PropType } from 'vue'
 import { mapState } from 'vuex'
 import { PlusSquareIcon, MinusSquareIcon } from 'satellite-lucide-icons'
 import { UIMessage, Group } from '~/types/messaging'
-import {
-  getUsernameFromState,
-  convertTimestampToDate,
-} from '~/utilities/Messaging'
+import { getUsernameFromState } from '~/utilities/Messaging'
 import { toHTML } from '~/libraries/ui/Markdown'
 
 export default Vue.extend({
@@ -37,11 +34,10 @@ export default Vue.extend({
   data() {
     return {
       showReplies: false,
-      replyHover: '',
     }
   },
   computed: {
-    ...mapState(['chat']),
+    ...mapState(['ui', 'chat']),
     setChatReply: {
       set(state) {
         this.$store.commit('chat/setChatReply', state)
@@ -107,18 +103,6 @@ export default Vue.extend({
     markdownToHtml(text: string) {
       return toHTML(text, { liveTyping: false })
     },
-    getUsernameFromReply(reply: any) {
-      return getUsernameFromState(reply.from, this.$store.state)
-    },
-    /**
-     * @method mouseOver DocsTODO
-     * @description
-     * @param replyId
-     * @example
-     */
-    mouseOver(replyId: string) {
-      this.$data.replyHover = replyId
-    },
     /**
      * @method emojiReaction DocsTODO
      * @description
@@ -137,10 +121,8 @@ export default Vue.extend({
             : this.$props.message.to,
       })
       this.$store.commit('ui/toggleEnhancers', {
-        show: true,
-        floating: !!this.$device.isMobile,
-        position: [e.clientX, e.clientY],
-        containerWidth: this.$el.clientWidth,
+        show: !this.ui.enhancers.show,
+        floating: true,
       })
     },
     /**
@@ -168,9 +150,6 @@ export default Vue.extend({
         value: this.$data.showReplies,
       }
     },
-    getTimestampFromReply(timestamp: number) {
-      return convertTimestampToDate(this.$t('friends.details'), timestamp)
-    },
   },
 })
 </script>