shove initials onto default room & member avatars as per the design

src/skins/vector/css/atoms/MemberAvatar.css

@@ -19,3 +19,8 @@ limitations under the License.
     border-radius: 20px;
 }
 
+.mx_MemberAvatar_initial {
+    position: absolute;
+    color: #fff;
+    text-align: center;
+}

src/skins/vector/css/atoms/RoomAvatar.css

@@ -0,0 +1,24 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RoomAvatar {
+}
+
+.mx_RoomAvatar_initial {
+    position: absolute;
+    color: #fff;
+    text-align: center;
+}

src/skins/vector/views/atoms/MemberAvatar.js

@@ -40,6 +40,25 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        // XXX: recalculates default avatar url constantly
+        if (this.state.imageUrl === this.defaultAvatarUrl(this.props.member)) {
+            var initial;
+            if (this.props.member.name[0])
+                initial = this.props.member.name[0].toUpperCase();
+            if (initial === '@' && this.props.member.name[1])
+                initial = this.props.member.name[1].toUpperCase();
+         
+            return (
+                <span>
+                    <span className="mx_MemberAvatar_initial"
+                          style={{ fontSize: (this.props.width * 0.75) + "px",
+                                   width: this.props.width + "px",
+                                   lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>
+                    <img className="mx_MemberAvatar" src={this.state.imageUrl}
+                         onError={this.onError} width={this.props.width} height={this.props.height} />
+                </span>
+            );            
+        }
         return (
             <img className="mx_MemberAvatar" src={this.state.imageUrl}
                 onError={this.onError}

src/skins/vector/views/atoms/RoomAvatar.js

@@ -43,13 +43,33 @@ module.exports = React.createClass({
 
     render: function() {
         var style = {
-            maxWidth: this.props.width,
+            width: this.props.width,
-            maxHeight: this.props.height,
+            height: this.props.height,
         };
-        return (
+
-            <img className="mx_RoomAvatar" src={this.state.imageUrl} onError={this.onError}
+        // XXX: recalculates fallback avatar constantly
-                style={style}
+        if (this.state.imageUrl === this.getFallbackAvatar()) {
-            />
+            var initial;
-        );
+            if (this.props.room.name[0])
+                initial = this.props.room.name[0].toUpperCase();
+            if (initial === '@' && this.props.room.name[1])
+                initial = this.props.room.name[1].toUpperCase();
+         
+            return (
+                <span>
+                    <span className="mx_RoomAvatar_initial"
+                          style={{ fontSize: (this.props.width * 0.75) + "px",
+                                   width: this.props.width + "px",
+                                   lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>
+                    <img className="mx_RoomAvatar" src={this.state.imageUrl}
+                            onError={this.onError} style={style} />
+                </span>
+            );
+        }
+        else {
+            return <img className="mx_RoomAvatar" src={this.state.imageUrl}
+                        onError={this.onError} style={style} />
+        }
+
     }
 });