5 files changed, 28 insertions, 8 deletions
diff --git a/web-ui/app/js/mail_list_actions/ui/compose_trigger.js b/web-ui/app/js/mail_list_actions/ui/compose_trigger.js
index 33430598..ec79cb26 100644
--- a/web-ui/app/js/mail_list_actions/ui/compose_trigger.js
+++ b/web-ui/app/js/mail_list_actions/ui/compose_trigger.js
@@ -38,9 +38,19 @@ define(
         this.trigger(document, events.dispatchers.rightPane.openComposeBox);
       };
 
+      this.showEmailSuccess = function () {
+        this.trigger(document, events.ui.userAlerts.displayMessage, {message: 'Your message was sent!', class: 'success'});
+      };
+
+      this.showEmailError = function (ev, data) {
+        this.trigger(document, events.ui.userAlerts.displayMessage, {message: 'Error,  message not sent: ' + data.responseJSON.message, class: 'error'});
+      };
+
       this.after('initialize', function () {
         this.render();
         this.on('click', this.enableComposing);
+        this.on(document, events.mail.sent, this.showEmailSuccess);
+        this.on(document, events.mail.send_failed, this.showEmailError);
       });
     }
   }
diff --git a/web-ui/app/js/mail_view/data/mail_sender.js b/web-ui/app/js/mail_view/data/mail_sender.js
index 0d11c636..8bb01f70 100644
--- a/web-ui/app/js/mail_view/data/mail_sender.js
+++ b/web-ui/app/js/mail_view/data/mail_sender.js
@@ -36,7 +36,7 @@ define(
 
       function failureSendingMail(on) {
         return function(result) {
-          on.trigger(document, events.mail.send_failed);
+          on.trigger(document, events.mail.send_failed, result);
         };
       }
 
@@ -51,6 +51,7 @@ define(
       });
 
       this.sendMail = function(event, data) {
+        this.trigger(events.dispatchers.rightPane.openNoMessageSelected);
         monitoredAjax.call(_, this, this.attr.mailsResource, {
           type: 'POST',
           dataType: 'json',
diff --git a/web-ui/app/js/user_alerts/ui/user_alerts.js b/web-ui/app/js/user_alerts/ui/user_alerts.js
index 57701579..b02762aa 100644
--- a/web-ui/app/js/user_alerts/ui/user_alerts.js
+++ b/web-ui/app/js/user_alerts/ui/user_alerts.js
@@ -40,7 +40,7 @@ define(
 
 
       this.displayMessage = function (ev, data) {
-        this.render({ message: data.message});
+        this.render({ message:  {content: data.message, class: (data.class || 'success')}});
       };
 
       this.after('initialize', function () {
diff --git a/web-ui/app/scss/_alerts.scss b/web-ui/app/scss/_alerts.scss
index bd1210df..cfb31cbe 100644
--- a/web-ui/app/scss/_alerts.scss
+++ b/web-ui/app/scss/_alerts.scss
@@ -4,11 +4,20 @@
   position: fixed;
   z-index: 10000;
   text-align: center;
-  span {
-    background: $warning;
+  span{
     padding: 5px 60px;
-    border: 1px solid darken($warning, 10%);
-    color: darken($warning, 50%);
-    @include box-shadow(1px 1px 3px darken($warning, 60%));
+    &.success {
+        background: $warning;
+        color: darken($warning, 50%);
+        border: 1px solid darken($warning, 10%);
+        @include box-shadow(1px 1px 3px darken($warning, 60%));
+    }
+    &.error {
+        font-weight: bold;
+        color: white;
+        background: $error;
+        border: 1px solid darken($error, 10%);
+        @include box-shadow(1px 1px 3px darken($error, 60%));
+    }
   }
 }
diff --git a/web-ui/app/templates/user_alerts/message.hbs b/web-ui/app/templates/user_alerts/message.hbs
index d2fff04a..3a0055eb 100644
--- a/web-ui/app/templates/user_alerts/message.hbs
+++ b/web-ui/app/templates/user_alerts/message.hbs
@@ -1 +1 @@
-<span>{{ message }}</span>
+<span class="{{ message.class }}">{{ message.content }}</span>