lipstick for hangup button and typing notifs

skins/base/css/molecules/MemberInfo.css

@@ -55,6 +55,8 @@ limitations under the License.
 
 .mx_MemberInfo_field {
     padding: 6px;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .mx_MemberInfo_button {

skins/base/css/molecules/RoomHeader.css

@@ -43,6 +43,26 @@ limitations under the License.
     width: 100%;
 }
 
+.mx_RoomHeader_hangupButton {
+    height: 48px;
+    margin-top: 18px;
+    background-color: #80cef4;
+    border-radius: 48px;
+    margin-right: 8px;
+    color: #fff;
+    line-height: 48px;
+    text-align: center;
+
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    -webkit-flex: 0 0 90px;
+    flex: 0 0 90px;
+}
+
 .mx_RoomHeader_rightRow {
     height: 48px;
     margin-top: 18px;
@@ -50,11 +70,11 @@ limitations under the License.
     border-radius: 48px;
     border: 1px solid #a9dbf4;
 
-    -webkit-box-ordinal-group: 2;
+    -webkit-box-ordinal-group: 3;
-    -moz-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 3;
-    -ms-flex-order: 2;
+    -ms-flex-order: 3;
-    -webkit-order: 2;
+    -webkit-order: 3;
-    order: 2;
+    order: 3;
 
     -webkit-flex: 0 0 200px;
     flex: 0 0 200px;    

skins/base/css/organisms/RoomView.css

@@ -105,6 +105,20 @@ limitations under the License.
     border-top: 1px solid #a8dbf3;
 }
 
+.mx_RoomView_typingBar {
+    margin-top: 17px;
+    margin-left: 56px;
+    color: #818794;
+}
+
+.mx_RoomView_typingBar img {
+    padding-left: 12px;
+    padding-right: 12px;
+    margin-left: -64px;
+    margin-top: -7px;
+    float: left;    
+}
+
 .mx_RoomView .mx_MessageComposer {
     -webkit-box-ordinal-group: 5;
     -moz-box-ordinal-group: 5;

skins/base/views/molecules/RoomHeader.js

@@ -44,8 +44,8 @@ module.exports = React.createClass({
                 case "ringback":
                 case "connected":
                     callButtons = (
-                        <div className="mx_RoomHeader_button" onClick={this.onHangupClick}>
+                        <div className="mx_RoomHeader_hangupButton" onClick={this.onHangupClick}>
-                        BYEBYE
+                            End call
                         </div>
                     );
                     break;
@@ -66,6 +66,7 @@ module.exports = React.createClass({
                             { topic }
                         </div>
                     </div>
+                    {callButtons}
                     <div className="mx_RoomHeader_rightRow">
                         <div className="mx_RoomHeader_button">
                             <img src="img/settings.png" width="32" height="32"/>
@@ -73,7 +74,6 @@ module.exports = React.createClass({
                         <div className="mx_RoomHeader_button">
                             <img src="img/search.png" width="32" height="32"/>
                         </div>
-                        {callButtons}
                         <div className="mx_RoomHeader_button" onClick={this.onVideoClick}>
                             <img src="img/video.png" width="32" height="32"/>
                         </div>

skins/base/views/organisms/RoomView.js

@@ -97,6 +97,7 @@ module.exports = React.createClass({
                 if (typingString) {
                     statusBar = (
                         <div className="mx_RoomView_typingBar">
+                            <img src="img/typing.png" width="40" height="40" alt=""/>
                             {typingString}
                         </div>
                     );