Unread badge is now attached to avatar in left pane

stylesheets/_modules.scss

@@ -2011,6 +2011,9 @@
   background-color: $color-gray-05;
 }
 
+.module-conversation-list-item__avatar-container {
+  position: relative;
+}
 .module-conversation-list-item__avatar {
   margin-top: 8px;
   margin-bottom: 8px;
@@ -2064,6 +2067,31 @@
   background-color: $color-conversation-blue_grey;
 }
 
+.module-conversation-list-item__unread-count {
+  color: $color-white;
+  background-color: $color-signal-blue;
+  text-align: center;
+
+  padding-top: 1px;
+  padding-left: 2px;
+  padding-right: 2px;
+
+  position: absolute;
+  right: -6px;
+  top: 6px;
+
+  font-weight: 300;
+  font-size: 11px;
+  letter-spacing: 0.25px;
+
+  height: 16px;
+  min-width: 16px;
+  line-height: 16px;
+  border-radius: 8px;
+
+  box-shadow: 0px 0px 1px 2px $color-white-05;
+}
+
 .module-conversation-list-item__content {
   flex-grow: 1;
   margin-left: 12px;
@@ -2142,23 +2170,6 @@
   font-weight: 300;
 }
 
-.module-conversation-list-item__unread-count {
-  color: $color-white;
-  background-color: $color-signal-blue;
-  text-align: center;
-
-  // For alignment with the message text
-  margin-top: 1px;
-
-  font-size: 10px;
-  margin-left: 5px;
-  min-width: 20px;
-  height: 20px;
-  width: 20px;
-  line-height: 20px;
-  border-radius: 10px;
-}
-
 .module-conversation-list-item__message__status-icon {
   flex-shrink: 0;
 

stylesheets/_variables.scss

@@ -89,6 +89,7 @@ $color-steel-shade: #5a5a63;
 $color-white-015: rgba($color-white, 0.15);
 $color-white-02: rgba($color-white, 0.2);
 $color-white-04: rgba($color-white, 0.4);
+$color-white-05: rgba($color-white, 0.5);
 $color-white-06: rgba($color-white, 0.6);
 $color-white-07: rgba($color-white, 0.7);
 $color-white-075: rgba($color-white, 0.75);

ts/components/ConversationListItem.tsx

@@ -45,6 +45,7 @@ export class ConversationListItem extends React.Component<Props> {
       const initial = getInitial(name || '');
 
       return (
+        <div className="module-conversation-list-item__avatar-container">
           <div
             className={classNames(
               'module-conversation-list-item__avatar',
@@ -54,6 +55,8 @@ export class ConversationListItem extends React.Component<Props> {
           >
             {initial}
           </div>
+          {this.renderUnread()}
+        </div>
       );
     }
 
@@ -62,14 +65,31 @@ export class ConversationListItem extends React.Component<Props> {
     }`;
 
     return (
+      <div className="module-conversation-list-item__avatar-container">
         <img
           className="module-conversation-list-item__avatar"
           alt={i18n('contactAvatarAlt', [title])}
           src={avatarPath}
         />
+        {this.renderUnread()}
+      </div>
     );
   }
 
+  public renderUnread() {
+    const { unreadCount } = this.props;
+
+    if (unreadCount > 0) {
+      return (
+        <div className="module-conversation-list-item__unread-count">
+          {unreadCount}
+        </div>
+      );
+    }
+
+    return null;
+  }
+
   public renderHeader() {
     const {
       unreadCount,
@@ -116,20 +136,6 @@ export class ConversationListItem extends React.Component<Props> {
     );
   }
 
-  public renderUnread() {
-    const { unreadCount } = this.props;
-
-    if (unreadCount > 0) {
-      return (
-        <div className="module-conversation-list-item__unread-count">
-          {unreadCount}
-        </div>
-      );
-    }
-
-    return null;
-  }
-
   public renderMessage() {
     const { lastMessage, unreadCount, i18n } = this.props;
 
@@ -164,7 +170,6 @@ export class ConversationListItem extends React.Component<Props> {
             )}
           />
         ) : null}
-        {this.renderUnread()}
       </div>
     );
   }