get frontend rendering with new markup/css

js/popup.js

@@ -16,7 +16,7 @@
 
 
 
-new Whisper.ConversationListView({el: $('#contacts')});
+new Whisper.ConversationListView().$el.appendTo($('#gutter'));
 Whisper.Threads.fetch({reset: true});
 
 textsecure.registerOnLoadFunction(function() {

js/views/conversation_list_item_view.js

@@ -4,8 +4,8 @@ var Whisper = Whisper || {};
   'use strict';
 
   Whisper.ConversationListItemView = Backbone.View.extend({
-    tagName: 'li',
-    className: 'conversation',
+    tagName: 'div',
+    className: 'contact',
 
     events: {
       'click': 'open',
@@ -36,7 +36,9 @@ var Whisper = Whisper || {};
     render: function() {
       this.$el.html(
         Mustache.render(this.template, {
-          name: this.model.get('name')
+          contact_name: this.model.get('name'),
+          last_message: this.model.get('lastMessage'),
+          last_message_timestamp: this.model.get('timestamp')
         })
       );
 

js/views/conversation_list_view.js

@@ -4,7 +4,7 @@ var Whisper = Whisper || {};
   'use strict';
 
   Whisper.ConversationListView = Whisper.ListView.extend({
-    tagName: 'ul',
+    tagName: 'div',
     id: 'contacts',
     itemView: Whisper.ConversationListItemView,
     collection: Whisper.Threads,

js/views/message_list_view.js

@@ -5,11 +5,11 @@ var Whisper = Whisper || {};
 
   Whisper.MessageListView = Whisper.ListView.extend({
     tagName: 'ul',
-    className: 'messages',
+    className: 'discussion',
     itemView: Whisper.MessageView,
 
     render: function() {
-      $('#main .message-container').html('').append(this.el);
+      $('#discussion').html('').append(this.el);
     }
   });
 })();

js/views/message_view.js

@@ -5,7 +5,7 @@ var Whisper = Whisper || {};
 
   Whisper.MessageView = Backbone.View.extend({
     tagName:   "li",
-    className: "message",
+    className: "entry",
 
     initialize: function() {
       this.$el.addClass(this.model.get('type'));
@@ -21,9 +21,10 @@ var Whisper = Whisper || {};
     render: function() {
       this.$el.html(
         Mustache.render(this.template, {
-          body: this.model.get('body'),
+          message: this.model.get('body'),
           date: this.formatTimestamp(),
-          attachments: this.model.get('attachments')
+          attachments: this.model.get('attachments'),
+          bubble_class: this.model.get('type') === 'outgoing' ? 'sent' : 'incoming'
         })
       );