studio - soft landing: refined sign in/up error states visually

cms/static/sass/_account.scss

@@ -244,4 +244,41 @@
   }
 }
 
-// @include transition(all 1s ease-in-out);
\ No newline at end of file
+// messages
+.message {
+  @include font-size(14);
+  display: block;
+}
+
+.message-status {
+  display: none;
+  @include border-top-radius(2px);
+  @include box-sizing(border-box);
+  border-bottom: 2px solid $yellow-d2;
+  margin: 0 0 $baseline 0;
+  padding: ($baseline/2) $baseline;
+  font-weight: 500;
+  background: $yellow-d1;
+  color: $white;
+
+  .ss-icon {
+    position: relative;
+    top: 3px;
+    @include font-size(16);
+    display: inline-block;
+    margin-right: ($baseline/2);
+  }
+
+  .text {
+    display: inline-block;
+  }
+
+  &.error {
+    border-color: shade($red, 50%);
+    background: tint($red, 20%);
+  }
+
+  &.is-shown {
+    display: block;
+  }
+}

cms/templates/login.html

@@ -14,8 +14,6 @@
 
     <article class="content-primary" role="main">
       <form id="login_form" method="post" action="login_post">
-        <div id="login_error" name="login_error" class="message message-status message-status-error">
-        </div>
         
         <fieldset>
           <legend class="sr">Required Information to Sign into edX Studio</legend>
@@ -81,10 +79,10 @@
         if(json.success) {
           location.href = "${reverse('index')}";
         } else if($('#login_error').length == 0) {
-          $('#login_form').prepend('<div id="login_error">' + json.value + '</div>');
-          $('#login_error').slideDown(150);
+          $('#login_form').prepend('<div id="login_error" class="message message-status error">' + json.value + '</span></div>');
+          $('#login_error').addClass('is-shown');
         } else {
-          $('#login_error').stop().slideDown(150);
+          $('#login_error').stop().addClass('is-shown');
           $('#login_error').html(json.value);
         }
       }

cms/templates/signup.html

@@ -17,7 +17,7 @@
 
     <article class="content-primary" role="main">
       <form id="register_form" method="post" action="register_post">
-        <div id="register_error" name="register_error" class="message message-status message-status-error">
+        <div id="register_error" name="register_error" class="message message-status message-status error">
         </div>
         
         <fieldset>
@@ -131,7 +131,7 @@
             if(json.success) {
               location.href = "${reverse('index')}";
             } else {
-              $('#register_error').html(json.value).stop().slideDown(150);
+              $('#register_error').html(json.value).stop().addClass('is-shown');
             }
           }
         );