badges and broken avatars

skins/base/css/molecules/MemberTile.css

@@ -29,6 +29,11 @@ limitations under the License.
 	height: 32px;
 }
 
+.mx_MemberTile_avatar img {
+	border-radius: 16px;	
+	background-color: #dbdbdb;
+}
+
 .mx_MemberTile_name {
 	display: table-cell;
 	vertical-align: middle;

skins/base/css/molecules/MessageTile.css

@@ -29,6 +29,12 @@ limitations under the License.
 	float: left;	
 }
 
+.mx_MessageTile_avatar img {
+	background-color: #dbdbdb;
+	border-radius: 16px;
+	border: 0px;
+}
+
 .mx_MessageTile_continuation {
 	margin-top: 8px ! important;
 }

skins/base/css/molecules/RoomTile.css

@@ -31,6 +31,7 @@ limitations under the License.
 	vertical-align: middle;
 	width: 32px;
 	height: 32px;
+	border-radius: 16px;	
 }
 
 .mx_RoomTile_name {
@@ -40,12 +41,24 @@ limitations under the License.
     text-overflow: ellipsis;
 }
 
+.mx_RoomTile_badge {	
+	float: right;
+	background-color: #d8d8d8;
+	color: #747474;
+	border-radius: 10px;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 22px;
+	width: 34px;
+	height: 20px;
+	vertical-align: top;
+	text-align: center;
+}
+
 .mx_RoomTile_unread {
-    font-weight: bold;
 }
 
 .mx_RoomTile_highlight {
-    background-color: lime;
 }
 
 .mx_RoomTile_invited {

skins/base/views/molecules/MemberTile.js

@@ -18,6 +18,7 @@ limitations under the License.
 
 var React = require('react');
 
+var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 var MemberTileController = require("../../../../src/controllers/molecules/MemberTile");
 
 module.exports = React.createClass({
@@ -26,7 +27,7 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_MemberTile">
-                <div className="mx_MemberTile_avatar"><img src="img/placeholder.png" width="32" height="32" alt="()"/></div>            
+                <div className="mx_MemberTile_avatar"><img src={ this.props.member ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.member, 32, 32, "crop") : null } width="32" height="32"/></div>            
                 <div className="mx_MemberTile_name">{this.props.member.name}</div>
             </div>
         );

skins/base/views/molecules/MessageTile.js

@@ -20,6 +20,7 @@ var React = require('react');
 
 var classNames = require("classnames");
 
+var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 var ComponentBroker = require('../../../../src/ComponentBroker');
 
 var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
@@ -58,7 +59,7 @@ module.exports = React.createClass({
         return (
             <div className={classes}>
                 <div className="mx_MessageTile_avatar">
-                    <img src="img/placeholder.png" width="32" height="32"/>
+                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 32, 32, "crop") : null } width="32" height="32"/>
                 </div>
                 <MessageTimestamp ts={this.props.mxEvent.getTs()} />
                 <SenderProfile mxEvent={this.props.mxEvent} />

skins/base/views/molecules/RoomTile.js

@@ -35,10 +35,18 @@ module.exports = React.createClass({
             'mx_RoomTile_highlight': this.props.highlight,
             'mx_RoomTile_invited': this.props.room.currentState.members[myUserId].membership == 'invite'
         });
+        var name = this.props.room.name.replace(":", ":\u200b");
+        var badge;
+        if (this.props.highlight) {
+            badge = <div className="mx_RoomTile_badge">!</div>;
+        }
+        else if (this.props.unread) {
+            badge = <div className="mx_RoomTile_badge">1</div>;
+        }
         return (
             <div className={classes} onClick={this.onClick}>
                 <div className="mx_RoomTile_avatar"><img src="img/placeholder.png" width="32" height="32" alt="()"/></div>
-                <div className="mx_RoomTile_name">{this.props.room.name}</div>
+                <div className="mx_RoomTile_name">{name}{ badge }</div>
             </div>
         );
     }

src/controllers/organisms/RoomView.js

@@ -234,7 +234,6 @@ module.exports = {
                 this.state.room.timeline[i].sender.userId ===
                     this.state.room.timeline[i - 1].sender.userId)
             {
-                console.log("i=" + i + ", continuation=true");
                 continuation = true;
             }
             if (!TileType) continue;