From aa1f2a1c3f05f414621adf2ab10635e230339a59 Mon Sep 17 00:00:00 2001
From: eugenijm <eugenijm@protonmail.com>
Date: Sun, 10 May 2020 14:06:48 +0300
Subject: [PATCH] wip

---
 src/components/chat/chat.vue                  | 14 ++++++++------
 src/components/chat_avatar/chat_avatar.vue    |  3 +++
 src/components/chat_message/chat_message.scss |  7 +++++++
 src/components/chat_title/chat_title.js       |  4 ++++
 src/components/chat_title/chat_title.vue      |  6 ++++++
 5 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 5847348e..dd56c03b 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -22,12 +22,14 @@
               :fallback-user="currentUser"
             />
           </div>
-          <ChatAvatar
-            :users="chatParticipants"
-            :fallback-user="currentUser"
-            width="35px"
-            height="35px"
-          />
+          <div style="visibility: hidden">
+            <ChatAvatar
+              :users="chatParticipants"
+              :fallback-user="currentUser"
+              width="23px"
+              height="23px"
+            />
+          </div>
         </div>
         <template>
           <div
diff --git a/src/components/chat_avatar/chat_avatar.vue b/src/components/chat_avatar/chat_avatar.vue
index f76039e2..e39b998e 100644
--- a/src/components/chat_avatar/chat_avatar.vue
+++ b/src/components/chat_avatar/chat_avatar.vue
@@ -102,6 +102,9 @@
 }
 
 .direct-conversation-avatar {
+  display: inline-block;
+  vertical-align: middle;
+
   &.single-user {
     border-radius: $fallback--avatarAltRadius;
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index 3e219e24..23ec8280 100644
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@@ -37,7 +37,14 @@
 
     .avatar-wrapper {
       margin-right: 10px;
+      // margin-top: 13px;
+      top: 5px;
       width: 32px;
+      position: relative;
+
+      // img {
+      //   position: absolute;
+      // }
     }
 
     .link-preview, .attachments {
diff --git a/src/components/chat_title/chat_title.js b/src/components/chat_title/chat_title.js
index 07590d58..4f9a47c4 100644
--- a/src/components/chat_title/chat_title.js
+++ b/src/components/chat_title/chat_title.js
@@ -1,11 +1,15 @@
 import Vue from 'vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import ChatAvatar from '../chat_avatar/chat_avatar.vue'
 import { mapState } from 'vuex'
 
 const USER_LIMIT = 10
 
 export default Vue.component('direct-conversation-title', {
   name: 'ChatTitle',
+  components: {
+    ChatAvatar
+  },
   props: [
     'users', 'fallbackUser'
   ],
diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
index b8bbf171..0e6dbd30 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -4,6 +4,12 @@
     class="direct-conversation-title"
     :title="title"
   >
+    <ChatAvatar
+      :users="otherUsers"
+      :fallback-user="currentUser"
+      width="23px"
+      height="23px"
+    />
     <span
       v-for="(user, index) in otherUsersTruncated"
       :key="user.id"