From 789c7b60cc238d4b264d444e8e911a60d82c7b50 Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Thu, 19 Jan 2017 16:51:41 +0100
Subject: [PATCH 1/4] CSS for avatars that appear when users are typing

---
 .../structures/_RoomStatusBar.scss            | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
index 5daac88f..12cecffe 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
@@ -40,12 +40,12 @@ limitations under the License.
     opacity: 0.5;
     position: relative;
     top: -4px;
-/*    
+/*
     animation-duration: 1s;
     animation-name: bounce;
     animation-direction: alternate;
     animation-iteration-count: infinite;
-*/    
+*/
 }
 
 .mx_RoomStatusBar_placeholderIndicator span:nth-child(1) {
@@ -70,6 +70,29 @@ limitations under the License.
     }
 }
 
+.mx_RoomStatusBar_typingIndicatorAvatars {
+    width: 24px;
+    text-align: left;
+}
+
+.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar {
+    margin-right: -12px;
+}
+
+.mx_RoomStatusBar_typingIndicatorRemaining {
+    display: inline-block;
+    color: #acacac;
+    background-color: #ddd;
+    border-radius: 40px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    font-size: 0.8em;
+    vertical-align: top;
+    text-align: center;
+    position: absolute;
+}
+
 .mx_RoomStatusBar_scrollDownIndicator {
     cursor: pointer;
 }

From 956deca844505c75f03a1406a5ffd4532804cbde Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Fri, 20 Jan 2017 16:59:41 +0100
Subject: [PATCH 2/4] Add bg-color border to typing avatars

---
 .../css/matrix-react-sdk/structures/_RoomStatusBar.scss       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
index 12cecffe..b7bdeaa0 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
@@ -71,18 +71,20 @@ limitations under the License.
 }
 
 .mx_RoomStatusBar_typingIndicatorAvatars {
-    width: 24px;
+    width: 52px;
     text-align: left;
 }
 
 .mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar {
     margin-right: -12px;
+    border:1px solid $primary-bg-color;
 }
 
 .mx_RoomStatusBar_typingIndicatorRemaining {
     display: inline-block;
     color: #acacac;
     background-color: #ddd;
+    border:1px solid $primary-bg-color;
     border-radius: 40px;
     width: 24px;
     height: 24px;

From 9ffedf5e7d8b0962c1b39038ecc8e59b5fc1459c Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Fri, 20 Jan 2017 17:00:59 +0100
Subject: [PATCH 3/4] space after colons

---
 .../css/matrix-react-sdk/structures/_RoomStatusBar.scss       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
index b7bdeaa0..44e9d983 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
@@ -77,14 +77,14 @@ limitations under the License.
 
 .mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar {
     margin-right: -12px;
-    border:1px solid $primary-bg-color;
+    border: 1px solid $primary-bg-color;
 }
 
 .mx_RoomStatusBar_typingIndicatorRemaining {
     display: inline-block;
     color: #acacac;
     background-color: #ddd;
-    border:1px solid $primary-bg-color;
+    border: 1px solid $primary-bg-color;
     border-radius: 40px;
     width: 24px;
     height: 24px;

From afcf9de8d47f463b83e9b40dcfb37c6f5de47215 Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Fri, 20 Jan 2017 17:35:01 +0100
Subject: [PATCH 4/4] Handle avatars with initials

---
 .../css/matrix-react-sdk/structures/_RoomStatusBar.scss    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
index 44e9d983..d3f1439d 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
@@ -75,11 +75,16 @@ limitations under the License.
     text-align: left;
 }
 
-.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar {
+.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
     margin-right: -12px;
     border: 1px solid $primary-bg-color;
 }
 
+.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
+    padding-left: 1px;
+    padding-top: 1px;
+}
+
 .mx_RoomStatusBar_typingIndicatorRemaining {
     display: inline-block;
     color: #acacac;