styled new post error messages

lms/static/coffee/src/discussion/utils.coffee

@@ -127,7 +127,7 @@ class @DiscussionUtil
       if response.errors? and response.errors.length > 0
         errorsField.empty()
         for error in response.errors
-          errorsField.append($("<li>").addClass("new-post-form-error").html(error))
+          errorsField.append($("<li>").addClass("new-post-form-error").html(error)).show()
 
   @clearFormErrors: (errorsField) ->
     errorsField.empty()

lms/static/sass/_discussion.scss

@@ -211,6 +211,28 @@
 
 
 body.discussion {
+  .new-post-form-errors {
+    display: none;
+    background: $error-red;
+    padding: 0;
+    border: 1px solid #333;
+    list-style: none;
+    color: #fff;
+    line-height: 1.6;
+    border-radius: 3px;
+    @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, .2));
+
+    li {
+      padding: 10px 20px 12px 45px;
+      border-bottom: 1px solid #dc4949;
+      background: url(../images/white-error-icon.png) no-repeat 15px 14px;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
   .course-tabs .right {
     float: right;
 

lms/templates/discussion/_new_post.html

@@ -23,8 +23,6 @@
 
 <article class="new-post-article">
     <div class="inner-wrapper">        
-        <div class="new-post-form-errors">
-        </div>
         <form class="new-post-form">
             <div class="left-column">
                 <label>Create new post in:</label>
@@ -46,6 +44,7 @@
                 </div>
             </div>
             <div class="right-column">
+                <ul class="new-post-form-errors"></ul>
                 <div class="form-row">
                     <input type="text" class="new-post-title" name="title" placeholder="Title">
                 </div>