From 56b8353dfd28090ead1385bf6b74d892833f3d93 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Tue, 5 Feb 2013 16:41:24 -0500
Subject: [PATCH] studio - soft landing: refined sign in/up error states
 visually

---
 cms/static/sass/_account.scss | 39 ++++++++++++++++++++++++++++++++++-
 cms/templates/login.html      |  8 +++----
 cms/templates/signup.html     |  4 ++--
 3 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/cms/static/sass/_account.scss b/cms/static/sass/_account.scss
index c0190e77bf..8aaf87b9b6 100644
--- a/cms/static/sass/_account.scss
+++ b/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;
+  }
+}
diff --git a/cms/templates/login.html b/cms/templates/login.html
index 3cbb591450..079e6cb344 100644
--- a/cms/templates/login.html
+++ b/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);
         }
       }
diff --git a/cms/templates/signup.html b/cms/templates/signup.html
index 3ff6ca953e..caade2efd8 100644
--- a/cms/templates/signup.html
+++ b/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');
             }
           }
         );