error messages

src/css/message.less

@@ -17,6 +17,12 @@
           animation: messageShowHide 3.2s;
 }
 
+.ck-message-error {
+  color: #fff;
+  background-color: fade(#FF2D55, 95%);
+  border-bottom: 1px solid lighten(#FF2D55, 3%);
+}
+
 @-webkit-keyframes messageShowHide {
   8% { top: 0; }
   92% { top: 0;  }

src/css/variables.less

@@ -1,6 +1,6 @@
 
 // Colors
-@themeColor     : rgb(62, 163, 255); //rgb(76, 217, 100);
+@themeColor     : rgb(62, 163, 255);
 @themeColorText : darken(@themeColor, 10%);
 
 // Animation speed

src/js/content-kit-editor/commands/image.js

@@ -69,7 +69,7 @@ ImageCommand.prototype = {
             editor.removeBlockAt(failedIndex);
             editor.syncVisual();
           }, 1000);
-          return new Message().show(error.message || 'Error uploading image');
+          return new Message().showError(error.message || 'Error uploading image');
         }
         insertImageWithSrc(response.url, editor);
       }

src/js/content-kit-editor/commands/oembed.js

@@ -48,7 +48,7 @@ OEmbedCommand.prototype.exec = function(url) {
         } else if (typeof error !== 'string') {
           errorMsg = 'Error: unexpected embed error.';
         }
-        new Message().show(errorMsg);
+        new Message().showError(errorMsg);
         embedIntent.show();
       } else {
         var embedModel = new EmbedModel(response);

src/js/content-kit-editor/views/message.js

@@ -1,20 +1,31 @@
 import View from './view';
 import { inherit } from '../../content-kit-utils/object-utils';
 
+var defaultClassNames = ['ck-message'];
+
 function Message(options) {
   options = options || {};
-  options.classNames = ['ck-message'];
+  options.classNames = defaultClassNames;
   View.call(this, options);
 }
 inherit(Message, View);
 
-Message.prototype.show = function(message) {
-  var messageView = this;
-  messageView.element.innerHTML = message;
-  Message._super.prototype.show.call(messageView);
+function show(view, message) {
+  view.element.innerHTML = message;
+  Message._super.prototype.show.call(view);
   setTimeout(function() {
-    messageView.hide();
+    view.hide();
   }, 3200);
+}
+
+Message.prototype.showInfo = function(message) {
+  this.setClasses(defaultClassNames);
+  show(this, message);
+};
+
+Message.prototype.showError = function(message) {
+  this.addClass('ck-message-error');
+  show(this, message);
 };
 
 export default Message;

src/js/content-kit-editor/views/view.js

@@ -1,3 +1,8 @@
+function renderClasses(view) {
+  var classNames = view.classNames;
+  view.element.className = classNames && classNames.length ? classNames.join(' ') : '';
+}
+
 function View(options) {
   this.tagName = options.tagName || 'div';
   this.classNames = options.classNames || [];
@@ -31,15 +36,19 @@ View.prototype = {
     var index = this.classNames.indexOf(className);
     if (index === -1) {
       this.classNames.push(className);
-      this.element.className = this.classNames.join(' ');
+      renderClasses(this);
     }
   },
   removeClass: function(className) {
     var index = this.classNames.indexOf(className);
     if (index > -1) {
       this.classNames.splice(index, 1);
-      this.element.className = this.classNames.join(' ');
+      renderClasses(this);
     }
+  },
+  setClasses: function(classNameArr) {
+    this.classNames = classNameArr;
+    renderClasses(this);
   }
 };