Default avatars

Someday you'll be able to edit your avatar. Until then, put a bird on
it.

index.html

@@ -68,7 +68,7 @@
             </div>
         </script>
         <script type='text/x-tmpl-mustache' id='contact'>
-            <img class='avatar' src='{{ contact_avatar }}'>
+            <div class='avatar' style='background-image: url({{ contact_avatar }});'></div>
             <div class='contact-details'>
                 <h3>
                 {{ contact_name }}

js/views/conversation_list_item_view.js

@@ -34,6 +34,7 @@ var Whisper = Whisper || {};
       this.$el.html(
         Mustache.render(this.template, {
           contact_name: this.model.get('name'),
+          contact_avatar: this.model.get('image'),
           last_message: this.model.get('lastMessage'),
           last_message_timestamp: this.formatTimestamp()
         })

stylesheets/index.css

@@ -26,6 +26,11 @@ body {
   background-color: aliceblue;
 }
 
+.gutter .contact .avatar {
+  background-position: center;
+  background-size: cover;
+}
+
 .conversation {
   margin: 0;
   padding: 0;