3 files changed, 23 insertions, 31 deletions
diff --git a/src/components/chat_list_item/chat_list_item.js b/src/components/chat_list_item/chat_list_item.js
index 1c27088c..b6b0519a 100644
--- a/src/components/chat_list_item/chat_list_item.js
+++ b/src/components/chat_list_item/chat_list_item.js
@@ -1,7 +1,7 @@
 import { mapState } from 'vuex'
 import StatusContent from '../status_content/status_content.vue'
 import fileType from 'src/services/file_type/file_type.service'
-import ChatAvatar from '../chat_avatar/chat_avatar.vue'
+import UserAvatar from '../user_avatar/user_avatar.vue'
 import AvatarList from '../avatar_list/avatar_list.vue'
 import Timeago from '../timeago/timeago.vue'
 import ChatTitle from '../chat_title/chat_title.vue'
@@ -12,7 +12,7 @@ const ChatListItem = {
     'chat'
   ],
   components: {
-    ChatAvatar,
+    UserAvatar,
     AvatarList,
     Timeago,
     ChatTitle,
diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
index 12269f89..3ec59ea2 100644
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@@ -1,17 +1,8 @@
 .chat-list-item {
-  &:hover .animated.avatar {
-    canvas {
-      display: none;
-    }
-    img {
-      visibility: visible;
-    }
-  }
-
   display: flex;
   flex-direction: row;
   padding: 0.75em;
-  height: 4.85em;
+  height: 5em;
   overflow: hidden;
   box-sizing: border-box;
   cursor: pointer;
@@ -22,7 +13,7 @@
 
   &:hover {
     background-color: var(--selectedPost, $fallback--lightBg);
-    box-shadow: 0 0px 3px 1px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
   }
 
   .chat-list-item-left {
@@ -47,12 +38,6 @@
     white-space: nowrap;
   }
 
-  .member-count {
-    color: $fallback--text;
-    color: var(--faintText, $fallback--text);
-    margin-right: 2px;
-  }
-
   .name-and-account-name {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -65,7 +50,7 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    margin: 0.35rem 0;
+    margin: 0.35em 0;
     height: 1.2em;
     line-height: 1.2em;
     color: $fallback--text;
@@ -78,17 +63,24 @@
     pointer-events: none;
   }
 
-  .unread-indicator-wrapper {
-    display: flex;
-    align-items: center;
-    margin-left: 10px;
+  &:hover .animated.avatar {
+    canvas {
+      display: none;
+    }
+    img {
+      visibility: visible;
+    }
   }
 
-  .unread-indicator {
-    border-radius: 100%;
-    height: 8px;
-    width: 8px;
-    background-color: $fallback--link;
-    background-color: var(--link, $fallback--link);
+  .avatar.still-image {
+    border-radius: $fallback--avatarAltRadius;
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+  }
+
+  .status-body {
+    img.emoji {
+      width: 1.4em;
+      height: 1.4em;
+    }
   }
 }
diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
index 26ad581b..640426b8 100644
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@@ -4,7 +4,7 @@
     @click.capture.prevent="openChat"
   >
     <div class="chat-list-item-left">
-      <ChatAvatar
+      <UserAvatar
         :user="chat.account"
         height="48px"
         width="48px"