Use backbone for flash messages

app/assets/javascripts/app/app.js

@@ -123,6 +123,7 @@ var app = {
     });
     app.sidebar = new app.views.Sidebar();
     app.backToTop = new app.views.BackToTop({el: $(document)});
+    app.flashMessages = new app.views.FlashMessages({el: $("#flash-container")});
   },
 
   /* mixpanel wrapper function */

app/assets/javascripts/app/models/post/interactions.js

@@ -87,11 +87,7 @@ app.models.Post.Interactions = Backbone.Model.extend({
     var self = this;
 
     this.comments.make(text).fail(function () {
-      var flash = new Diaspora.Widgets.FlashMessages();
-      flash.render({
-        success: false,
-        notice: Diaspora.I18n.t("failed_to_post_message")
-      });
+      app.flashMessages.error(Diaspora.I18n.t("failed_to_post_message"));
     }).done(function() {
       self.trigger('change'); //updates after sync
     });
@@ -102,16 +98,11 @@ app.models.Post.Interactions = Backbone.Model.extend({
   },
 
   reshare : function(){
-    var interactions = this
-      , reshare = this.post.reshare()
-      , flash = new Diaspora.Widgets.FlashMessages();
+    var interactions = this;
 
-    reshare.save()
+    this.post.reshare().save()
       .done(function(reshare) {
-        flash.render({
-          success: true,
-          notice: Diaspora.I18n.t("reshares.successful")
-        });
+          app.flashMessages.success(Diaspora.I18n.t("reshares.successful"));
         interactions.reshares.add(reshare);
         if (app.stream && /^\/(?:stream|activity|aspects)/.test(app.stream.basePath())) {
           app.stream.addNow(reshare);
@@ -119,10 +110,7 @@ app.models.Post.Interactions = Backbone.Model.extend({
         interactions.trigger("change");
       })
       .fail(function(){
-        flash.render({
-          success: false,
-          notice: Diaspora.I18n.t("reshares.duplicate")
-        });
+        app.flashMessages.error(Diaspora.I18n.t("reshares.duplicate"));
       });
 
     app.instrument("track", "Reshare");

app/assets/javascripts/app/pages/profile.js

@@ -2,45 +2,47 @@
 
 app.pages.Profile = app.views.Base.extend({
   events: {
-    'click #block_user_button': 'blockPerson',
-    'click #unblock_user_button': 'unblockPerson'
+    "click #block_user_button": "blockPerson",
+    "click #unblock_user_button": "unblockPerson"
   },
 
   subviews: {
-    '#profile': 'sidebarView',
-    '.profile_header': 'headerView',
-    '#main_stream': 'streamView'
+    "#profile": "sidebarView",
+    ".profile_header": "headerView",
+    "#main_stream": "streamView"
   },
 
-  tooltipSelector: '.profile_button .profile-header-icon, .sharing_message_container',
+  tooltipSelector: ".profile_button .profile-header-icon, .sharing_message_container",
 
   initialize: function(opts) {
     if( !this.model ) {
       this._populateModel(opts);
     }
 
-    if( app.hasPreload('photos') )
-      this.photos = app.parsePreload('photos');  // we don't interact with it, so no model
-    if( app.hasPreload('contacts') )
-      this.contacts = app.parsePreload('contacts');  // we don't interact with it, so no model
+    if(app.hasPreload("photos")){
+      this.photos = app.parsePreload("photos");
+    }
+    if(app.hasPreload("contacts")){
+      this.contacts = app.parsePreload("contacts");
+    }
 
-    this.streamCollection = _.has(opts, 'streamCollection') ? opts.streamCollection : null;
-    this.streamViewClass = _.has(opts, 'streamView') ? opts.streamView : null;
+    this.streamCollection = _.has(opts, "streamCollection") ? opts.streamCollection : null;
+    this.streamViewClass = _.has(opts, "streamView") ? opts.streamView : null;
 
-    this.model.on('change', this.render, this);
-    this.model.on('sync', this._done, this);
+    this.model.on("change", this.render, this);
+    this.model.on("sync", this._done, this);
 
     // bind to global events
-    var id = this.model.get('id');
-    app.events.on('person:block:'+id, this.reload, this);
-    app.events.on('person:unblock:'+id, this.reload, this);
-    app.events.on('aspect:create', this.reload, this);
-    app.events.on('aspect_membership:update', this.reload, this);
+    var id = this.model.get("id");
+    app.events.on("person:block:"+id, this.reload, this);
+    app.events.on("person:unblock:"+id, this.reload, this);
+    app.events.on("aspect:create", this.reload, this);
+    app.events.on("aspect_membership:update", this.reload, this);
   },
 
   _populateModel: function(opts) {
-    if( app.hasPreload('person') ) {
-      this.model = new app.models.Person(app.parsePreload('person'));
+    if( app.hasPreload("person") ) {
+      this.model = new app.models.Person(app.parsePreload("person"));
     } else if(opts && opts.person_id) {
       this.model = new app.models.Person({guid: opts.person_id});
       this.model.fetch();
@@ -50,14 +52,18 @@ app.pages.Profile = app.views.Base.extend({
   },
 
   sidebarView: function() {
-    if( !this.model.has('profile') ) return false;
+    if(!this.model.has("profile")){
+      return false;
+    }
     return new app.views.ProfileSidebar({
-      model: this.model,
+      model: this.model
     });
   },
 
   headerView: function() {
-    if( !this.model.has('profile') ) return false;
+    if(!this.model.has("profile")){
+      return false;
+    }
     return new app.views.ProfileHeader({
       model: this.model,
       photos: this.photos,
@@ -66,12 +72,14 @@ app.pages.Profile = app.views.Base.extend({
   },
 
   streamView: function() {
-    if( !this.model.has('profile') ) return false;
+    if(!this.model.has("profile")){
+      return false;
+    }
     if( this.model.isBlocked() ) {
-      $('#main_stream').empty().html(
+      $("#main_stream").empty().html(
         '<div class="dull">'+
-        Diaspora.I18n.t('profile.ignoring', {name: this.model.get('name')}) +
-        '</div>');
+        Diaspora.I18n.t("profile.ignoring", {name: this.model.get("name")}) +
+        "</div>");
       return false;
     }
 
@@ -85,7 +93,7 @@ app.pages.Profile = app.views.Base.extend({
     });
     app.stream.fetch();
 
-    if( this.model.get('is_own_profile') ) {
+    if( this.model.get("is_own_profile") ) {
       app.publisher = new app.views.Publisher({collection : app.stream.items});
     }
 
@@ -93,14 +101,13 @@ app.pages.Profile = app.views.Base.extend({
   },
 
   blockPerson: function() {
-    if( !confirm(Diaspora.I18n.t('ignore_user')) ) return;
+    if(!confirm(Diaspora.I18n.t("ignore_user"))){
+      return;
+    }
 
     var block = this.model.block();
     block.fail(function() {
-      Diaspora.page.flashMessages.render({
-        success: false,
-        notice: Diaspora.I18n.t('ignore_failed')
-      });
+      app.flashMessages.error(Diaspora.I18n.t("ignore_failed"));
     });
 
     return false;
@@ -109,21 +116,18 @@ app.pages.Profile = app.views.Base.extend({
   unblockPerson: function() {
     var block = this.model.unblock();
     block.fail(function() {
-      Diaspora.page.flashMessages.render({
-        success: false,
-        notice: Diaspora.I18.t('unblock_failed')
-      });
+      app.flashMessages.error(Diaspora.I18.t("unblock_failed"));
     });
     return false;
   },
 
   reload: function() {
-    this.$('#profile').addClass('loading');
+    this.$("#profile").addClass("loading");
     this.model.fetch();
   },
 
   _done: function() {
-    this.$('#profile').removeClass('loading');
+    this.$("#profile").removeClass("loading");
   }
 });
 // @license-end

app/assets/javascripts/app/views.js

@@ -105,16 +105,10 @@ app.views.Base = Backbone.View.extend({
     var report = new app.models.Report();
     report.save(data, {
       success: function() {
-        Diaspora.page.flashMessages.render({
-          success: true,
-          notice: Diaspora.I18n.t('report.status.created')
-        });
+        app.flashMessages.success(Diaspora.I18n.t("report.status.created"));
       },
       error: function() {
-        Diaspora.page.flashMessages.render({
-          success: false,
-          notice: Diaspora.I18n.t('report.status.exists')
-        });
+        app.flashMessages.error(Diaspora.I18n.t("report.status.exists"));
       }
     });
   },
@@ -124,21 +118,17 @@ app.views.Base = Backbone.View.extend({
   destroyModel: function(evt) {
     evt && evt.preventDefault();
     var self = this;
-    var url = this.model.urlRoot + '/' + this.model.id;
+    var url = this.model.urlRoot + "/" + this.model.id;
 
     if( confirm(_.result(this, "destroyConfirmMsg")) ) {
-      this.$el.addClass('deleting');
+      this.$el.addClass("deleting");
       this.model.destroy({ url: url })
         .done(function() {
           self.remove();
         })
         .fail(function() {
-          self.$el.removeClass('deleting');
-          var flash = new Diaspora.Widgets.FlashMessages();
-          flash.render({
-            success: false,
-            notice: Diaspora.I18n.t('failed_to_remove')
-          });
+          self.$el.removeClass("deleting");
+          app.flashMessages.error(Diaspora.I18n.t("failed_to_remove"));
         });
     }
   },

app/assets/javascripts/app/views/aspect_create_view.js

@@ -52,18 +52,12 @@ app.views.AspectCreate = app.views.Base.extend({
 
       self.modal.modal("hide");
       app.events.trigger("aspect:create", aspectId);
-      Diaspora.page.flashMessages.render({
-        "success": true,
-        "notice": Diaspora.I18n.t("aspects.create.success", {"name": aspectName})
-      });
+      app.flashMessages.success(Diaspora.I18n.t("aspects.create.success", {"name": aspectName}));
     });
 
     aspect.on("error", function() {
       self.modal.modal("hide");
-      Diaspora.page.flashMessages.render({
-        "success": false,
-        "notice": Diaspora.I18n.t("aspects.create.failure")
-      });
+      app.flashMessages.error(Diaspora.I18n.t("aspects.create.failure"));
     });
     return aspect.save();
   }

app/assets/javascripts/app/views/aspect_membership_view.js

@@ -89,7 +89,7 @@ app.views.AspectMembership = app.views.AspectsDropdown.extend({
     if( this.dropdown.find("li.selected").length === 0 ) {
       var msg = Diaspora.I18n.t("aspect_dropdown.started_sharing_with", { "name": this._name() });
       startSharing = true;
-      Diaspora.page.flashMessages.render({ "success": true, "notice": msg });
+      app.flashMessages.success(msg);
     }
 
     app.events.trigger("aspect_membership:create", {
@@ -110,7 +110,7 @@ app.views.AspectMembership = app.views.AspectsDropdown.extend({
     this.dropdown.closest('.aspect_membership_dropdown').removeClass('open'); // close the dropdown
 
     var msg = Diaspora.I18n.t(msg_id, { 'name': this._name() });
-    Diaspora.page.flashMessages.render({ 'success':false, 'notice':msg });
+    app.flashMessages.error(msg);
   },
 
   // remove the membership with the given id
@@ -143,7 +143,7 @@ app.views.AspectMembership = app.views.AspectsDropdown.extend({
     if( this.dropdown.find("li.selected").length === 0 ) {
       var msg = Diaspora.I18n.t("aspect_dropdown.stopped_sharing_with", { "name": this._name() });
       stopSharing = true;
-      Diaspora.page.flashMessages.render({ "success": true, "notice": msg });
+      app.flashMessages.success(msg);
     }
 
     app.events.trigger("aspect_membership:destroy", {

app/assets/javascripts/app/views/contact_view.js

@@ -19,7 +19,6 @@ app.views.Contact = app.views.Base.extend({
   },
 
   postRenderTemplate: function() {
-    var self = this;
     var dropdownEl = this.$('.aspect_membership_dropdown.placeholder');
     if( dropdownEl.length === 0 ) {
       return;
@@ -54,7 +53,7 @@ app.views.Contact = app.views.Base.extend({
       },
       error: function(){
         var msg = Diaspora.I18n.t("contacts.error_add", { "name": self.model.get("person").name });
-        Diaspora.page.flashMessages.render({ "success": false, "notice": msg });
+        app.flashMessages.error(msg);
       }
     });
   },
@@ -78,7 +77,7 @@ app.views.Contact = app.views.Base.extend({
         },
         error: function(){
           var msg = Diaspora.I18n.t("contacts.error_remove", { "name": self.model.get("person").name });
-          Diaspora.page.flashMessages.render({ "success": false, "notice": msg });
+          app.flashMessages.error(msg);
         }
       });
   }

app/assets/javascripts/app/views/feedback_view.js

@@ -11,13 +11,13 @@ app.views.Feedback = app.views.Base.extend({
 
     "click .post_report" : "report",
     "click .block_user" : "blockUser",
-    "click .hide_post" : "hidePost",
+    "click .hide_post" : "hidePost"
   },
 
   tooltipSelector : ".label",
 
   initialize : function() {
-    this.model.interactions.on('change', this.render, this);
+    this.model.interactions.on("change", this.render, this);
     this.initViews && this.initViews(); // I don't know why this was failing with $.noop... :(
   },
 
@@ -47,7 +47,7 @@ app.views.Feedback = app.views.Base.extend({
 
   blockUser: function(evt) {
     if(evt) { evt.preventDefault(); }
-    if(!confirm(Diaspora.I18n.t('ignore_user'))) { return; }
+    if(!confirm(Diaspora.I18n.t("ignore_user"))) { return; }
 
     this.model.blockAuthor()
       .done(function() {
@@ -55,16 +55,13 @@ app.views.Feedback = app.views.Base.extend({
         document.location.href = "/stream";
       })
       .fail(function() {
-        Diaspora.page.flashMessages.render({
-          success: false,
-          notice: Diaspora.I18n.t('hide_post_failed')
-        });
+        app.flashMessages.error(Diaspora.I18n.t("hide_post_failed"));
       });
   },
 
   hidePost : function(evt) {
     if(evt) { evt.preventDefault(); }
-    if(!confirm(Diaspora.I18n.t('hide_post'))) { return; }
+    if(!confirm(Diaspora.I18n.t("hide_post"))) { return; }
 
     $.ajax({
       url : "/share_visibilities/42",
@@ -77,11 +74,8 @@ app.views.Feedback = app.views.Base.extend({
         document.location.href = "/stream";
       })
       .fail(function() {
-        Diaspora.page.flashMessages.render({
-          success: false,
-          notice: Diaspora.I18n.t('ignore_post_failed')
-        });
+        app.flashMessages.error(Diaspora.I18n.t("ignore_post_failed"));
       });
-  },
+  }
 });
 // @license-end

app/assets/javascripts/app/views/flash_messages_view.js

+app.views.FlashMessages = app.views.Base.extend({
+  templateName: "flash_messages",
+
+  _flash: function(message, error){
+    this.presenter = {
+      message: message,
+      alertLevel: error ? "alert-danger" : "alert-success"
+    };
+
+    this.renderTemplate();
+  },
+
+  success: function(message){
+    this._flash(message, false);
+  },
+
+  error: function(message){
+    this._flash(message, true);
+  }
+});

app/assets/javascripts/app/views/pod_entry_view.js

@@ -52,22 +52,15 @@ app.views.PodEntry = app.views.Base.extend({
   },
 
   recheckPod: function() {
-    var self  = this,
-        flash = new Diaspora.Widgets.FlashMessages();
+    var self  = this;
     this.$el.addClass("checking");
 
     this.model.recheck()
       .done(function(){
-        flash.render({
-          success: true,
-          notice: Diaspora.I18n.t("admin.pods.recheck.success")
-        });
+        app.flashMessages.success(Diaspora.I18n.t("admin.pods.recheck.success"));
       })
       .fail(function(){
-        flash.render({
-          success: false,
-          notice: Diaspora.I18n.t("admin.pods.recheck.failure")
-        });
+        app.flashMessages.error(Diaspora.I18n.t("admin.pods.recheck.failure"));
       })
       .always(function(){
         self.$el

app/assets/javascripts/app/views/publisher_view.js

@@ -215,7 +215,7 @@ app.views.Publisher = Backbone.View.extend({
           app.publisher.trigger("publisher:error");
         }
         self.setInputEnabled(true);
-        Diaspora.page.flashMessages.render({ "success":false, "notice":resp.responseText });
+        app.flashMessages.error(resp.responseText);
         self.setButtonsEnabled(true);
         self.setInputEnabled(true);
       }

app/assets/javascripts/app/views/single-post-viewer/single_post_moderation.js

 app.views.SinglePostModeration = app.views.Feedback.extend({
   templateName: "single-post-viewer/single-post-moderation",
 
-  className: 'control-icons',
+  className: "control-icons",
 
   events: function() {
     return _.defaults({
@@ -19,7 +19,7 @@ app.views.SinglePostModeration = app.views.Feedback.extend({
 
   renderPluginWidgets : function() {
     app.views.Base.prototype.renderPluginWidgets.apply(this);
-    this.$('a').tooltip({placement: 'bottom'});
+    this.$("a").tooltip({placement: "bottom"});
   },
 
   authorIsCurrentUser: function() {
@@ -28,7 +28,7 @@ app.views.SinglePostModeration = app.views.Feedback.extend({
 
   destroyModel: function(evt) {
     if(evt) { evt.preventDefault(); }
-    var url = this.model.urlRoot + '/' + this.model.id;
+    var url = this.model.urlRoot + "/" + this.model.id;
 
     if (confirm(Diaspora.I18n.t("remove_post"))) {
       this.model.destroy({ url: url })
@@ -37,11 +37,7 @@ app.views.SinglePostModeration = app.views.Feedback.extend({
           document.location.href = "/stream";
         })
         .fail(function() {
-          var flash = new Diaspora.Widgets.FlashMessages();
-          flash.render({
-            success: false,
-            notice: Diaspora.I18n.t('failed_to_remove')
-          });
+          app.flashMessages.error(Diaspora.I18n.t("failed_to_remove"));
         });
     }
   },

app/assets/javascripts/app/views/stream_post_views.js

@@ -39,10 +39,10 @@ app.views.StreamPost = app.views.Post.extend({
                      ".permalink"].join(", "),
 
   initialize : function(){
-    var personId = this.model.get('author').id;
-    app.events.on('person:block:'+personId, this.remove, this);
+    var personId = this.model.get("author").id;
+    app.events.on("person:block:"+personId, this.remove, this);
 
-    this.model.on('remove', this.remove, this);
+    this.model.on("remove", this.remove, this);
     //subviews
     this.commentStreamView = new app.views.CommentStream({model : this.model});
     this.oEmbedView = new app.views.OEmbed({model : this.model});
@@ -85,14 +85,11 @@ app.views.StreamPost = app.views.Post.extend({
 
   blockUser: function(evt){
     if(evt) { evt.preventDefault(); }
-    if(!confirm(Diaspora.I18n.t('ignore_user'))) { return }
+    if(!confirm(Diaspora.I18n.t("ignore_user"))) { return }
 
     this.model.blockAuthor()
       .fail(function() {
-        Diaspora.page.flashMessages.render({
-          success: false,
-          notice: Diaspora.I18n.t('ignore_failed')
-        });
+        app.flashMessages.error(Diaspora.I18n.t("ignore_failed"));
       });
   },
 
@@ -104,7 +101,7 @@ app.views.StreamPost = app.views.Post.extend({
 
   hidePost : function(evt) {
     if(evt) { evt.preventDefault(); }
-    if(!confirm(Diaspora.I18n.t('confirm_dialog'))) { return }
+    if(!confirm(Diaspora.I18n.t("confirm_dialog"))) { return }
 
     var self = this;
     $.ajax({
@@ -117,10 +114,7 @@ app.views.StreamPost = app.views.Post.extend({
         self.remove();
       })
       .fail(function() {
-        Diaspora.page.flashMessages.render({
-          success: false,
-          notice: Diaspora.I18n.t('hide_post_failed')
-        });
+        app.flashMessages.error(Diaspora.I18n.t("hide_post_failed"));
       });
   },
 

app/assets/javascripts/diaspora.js

@@ -70,7 +70,6 @@
     $.extend(this, {
       directionDetector: this.instantiate("DirectionDetector"),
       events: function() { return Diaspora.page.eventsContainer.data("events"); },
-      flashMessages: this.instantiate("FlashMessages"),
       header: this.instantiate("Header", body.find("header")),
       timeAgo: this.instantiate("TimeAgo")
     });

app/assets/javascripts/pages/users-getting-started.js

@@ -18,7 +18,7 @@ Diaspora.Pages.UsersGettingStarted = function() {
 
       /* flash message prompt */
       var message = Diaspora.I18n.t("getting_started.hey", {'name': $("#profile_first_name").val()});
-      Diaspora.page.flashMessages.render({success: true, notice: message});
+      app.flashMessages.success(message);
     });
 
     $("#profile_first_name").bind("change", function(){
@@ -45,7 +45,7 @@ Diaspora.Pages.UsersGettingStarted = function() {
         confirmation = confirm(confirmMessage);
       }
 
-      Diaspora.page.flashMessages.render({success: true, notice: message});
+      app.flashMessages.success(message);
       return confirmation;
     });
 
@@ -66,7 +66,7 @@ Diaspora.Pages.UsersGettingStarted = function() {
       startText: "",
       emptyText: "no_results",
       selectionAdded: function(elem){tagFollowings.create({"name":$(elem[0]).text().substring(2)})},
-      selectionRemoved: function(elem){ 
+      selectionRemoved: function(elem){
         tagFollowings.where({"name":$(elem[0]).text().substring(2)})[0].destroy();
         elem.remove();
       }

app/assets/javascripts/widgets/flash-messages.js

-// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
-
-(function() {
-  var FlashMessages = function() {
-    var self = this;
-
-    this.subscribe("widget/ready", function() {
-      self.animateMessages();
-    });
-
-    this.animateMessages = function() {
-      self.flashMessages().addClass("expose").delay(8000).fadeTo(200, 0.5);
-    };
-
-    this.render = function(result) {
-      self.flashMessages().removeClass("expose").remove();
-
-      $("<div/>", {
-        id: result.success ? "flash_notice" : "flash_error"
-      })
-      .html($("<div/>", {
-        'class': "message"
-        })
-        .text(result.notice))
-      .prependTo(document.body);
-
-
-      self.animateMessages();
-    };
-
-    this.flashMessages = function() {
-      return $("#flash_notice, #flash_error, #flash_alert");
-    };
-  };
-
-  Diaspora.Widgets.FlashMessages = FlashMessages;
-})();
-// @license-end

app/assets/stylesheets/_flash_messages.scss

-#flash_notice,
-#flash_alert,
-#flash_error {
-  position : fixed;
+#flash-body {
+  left: 0;
+  position: fixed;
+  text-align: center;
+  top: -100px;
   z-index: 999;
-  top : -100px;
-  left : 0;
-  width : 100%;
-
-  text-align : center;
-  color: $text-dark-grey;
-
-  &.expose {
-    @include animation(expose, 10s)
-  }
-
-  .message {
-    box-shadow: 0 1px 4px rgba(0,0,0,0.8);
-
-    display : inline-block;
-    padding: 10px 12px;
-    min-width: 400px;
-    max-width: 800px;
-
-    color : #fff;
-    background-color : rgba(0,0,0,0.8);
-    border : 1px solid rgba(255,255,255,0.7);
-    border-radius: 6px;
+  width: 100%;
+  &.expose {  @include animation(expose, 10s) }
 
+  #flash-message {
+    border-radius: 0;
+    box-shadow: $card-shadow;
+    display: inline-block;
     font-weight: bold;
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    font-size: 13px;
-  }
-}
-
-#flash_notice {
-  .message {
-    color: $text-dark-grey;
-    background-color: #F4F899;
-    border-color: darken(#F4F899, 40%);
-  }
-}
-
-#flash_error,
-#flash_alert {
-  .message {
-    background-color: #CA410B;
-    border-color: darken(#CA410B, 10%);
+    max-width: 800px;
+    min-width: 500px;
+    padding: 10px 12px;
+    &.alert-danger { border: 1px solid darken($state-danger-bg, 10%); }
+    &.alert-succes { border: 1px solid darken($state-success-bg, 10%); }
+    &.alert-warning { border: 1px solid darken($state-warning-bg, 10%); }
   }
 }

app/assets/stylesheets/mobile/mobile.scss

@@ -35,10 +35,6 @@ h3 {  margin-top: 0; }
 .clear { clear: both; }
 #main { padding: 56px 10px 0 10px; }
 
-.message {
-  padding-left: 2px;
-}
-
 .avatar {
   border-radius: 4px;
 }

app/assets/templates/flash_messages_tpl.jst.hbs

+<div id="flash-body" class="expose">
+  <div id="flash-message" class="alert {{ alertLevel }}">
+    {{ message }}
+  </div>
+</div>

app/helpers/layout_helper.rb

@@ -67,8 +67,15 @@ module LayoutHelper
 
   def flash_messages
     flash.map do |name, msg|
-      content_tag(:div, :id => "flash_#{name}") do
-        content_tag(:div, msg, :class => 'message')
+      klass = if name == "alert"
+                "warning"
+              elsif name == "error"
+                "danger"
+              else
+                "success"
+              end
+      content_tag(:div, msg, id: "flash-body", class: "expose") do
+        content_tag(:div, msg, id: "flash-message", class: "message alert alert-#{klass}")
       end
     end.join(' ').html_safe
   end