merged in login errors branch

index.html

@@ -10,6 +10,7 @@
       <p>6.002x (Circuits and Electronics) is an experimental on-line adaptation of MIT&rsquo;s first undergraduate analog design course: 6.002. This course will run, free of charge, for students worldwide from March 1, 2012 through June 8, 2012.</p>
     </section>
 </%block>
+
 <%block name="header_class">course</%block>
 
 <section class="index-content">

login.html

@@ -2,9 +2,12 @@
 ${ error }
 
 <div id="login_div">
-  <h1>Log in to MITx</h1>
+  <header>
+    <h1>Log in to MITx</h1>
+    <p class="no-account">If you don&rsquo;t have an account yet, <a href="#enroll" rel="leanModal">please enroll here</a></p>
+  </header>
+
   <form id="login_form" method="post">
-    <div id="login_error"></div>
     <ol>
       <li>
         <label>E-mail*</label>

marketing.html

@@ -87,7 +87,6 @@ function postJSON(url, data, callback) {
   <%block name="bodyextra"/>
 
   <footer>
-    <!-- Template based on a design from http://www.dotemplate.com/ - Donated $10 (pmitros) so we don't need to include credit. -->
     <div class="footer-wrapper">
       <p> Copyright &copy; 2012. MIT. <a href="/t/copyright.html">Some rights reserved.</a></p>
 
@@ -101,6 +100,7 @@ function postJSON(url, data, callback) {
 
 % if settings.COURSEWARE_ENABLED:
   <div id="login" class="leanModal_box"><%include file="login.html" /></div>
+  <div id="enroll" class="leanModal_box" name="enroll"><%include file="create_account.html" /></div>
 % endif
   <div id="pwd_reset" class="leanModal_box"><%include file="password_reset_form.html" /></div>
   <div id="reset_done" class="leanModal_box"></div>
@@ -122,8 +122,10 @@ $(document).ready(function(){
       function(json) {
         if(json.success) {
           location.href="/courseware";
+        } else if($('#login_error').length == 0) {
+        $('#login_form').prepend('<div id="login_error">Email or password is incorrect.</div>');
         } else {
-          $('#login_error').html("Invalid Login");
+          $('#login_error').stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000);
         }
       }
     );

sass/_index-extends.scss

@@ -48,19 +48,21 @@
 
 .button {
   @include border-radius(3px);
-  @include border-radius(3px);
   @include inline-block();
   @include transition();
   background-color: $mit-red;
+  border: 1px solid darken($mit-red, 10%);
   color: #fff;
   margin: lh() 0 lh(.5);
   padding: lh(.25) lh(.5);
   text-decoration: none;
   font-style: normal;
+  @include box-shadow(inset 0 1px 0 lighten($mit-red, 8%));
   -webkit-font-smoothing: antialiased;
 
   &:hover {
     background-color: darken($mit-red, 10%);
+    border-color: darken($mit-red, 20%);
   }
 
   span {

sass/_index.scss

@@ -167,13 +167,16 @@ header.announcement {
 
           a {
             @extend .button;
+            @include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%));
             background-color: darken($mit-red, 20%);
             display: block;
             padding: lh(.5) lh();
+            border-color: darken($mit-red, 30%);
             text-align: center;
 
             &:hover {
               background-color: darken($mit-red, 10%);
+              border-color: darken($mit-red, 20%);
             }
           }
         }
@@ -410,11 +413,12 @@ section.index-content {
 
         &.cta {
           width: 100%;
+          text-align: center;
 
           a.enroll {
             @extend .button;
-            padding: lh(.5) lh();
-            display: block;
+            padding: lh(.5) lh(2);
+            @include inline-block();
             text-align: center;
             font: 800 18px $header-font-family;
           }

sass/_leanmodal.scss

@@ -83,14 +83,17 @@ div.leanModal_box {
     text-align: left;
 
     div#enroll_error, div#login_error, div#pwd_error {
+      $error-color: #333;
       -webkit-font-smoothing: antialiased;
-      background-color: #F50200;
+      background-color: $error-color;
+      border: darken($error-color, 20%);
       color: #fff;
+      text-shadow: 0 1px 0 darken($error-color, 10%);
+      font-family: "Open sans";
       font-weight: bold;
       letter-spacing: 1px;
-      margin-bottom: lh();
-      padding: lh(.2);
-      text-transform: uppercase;
+      margin: (-(lh())) (-(lh())) lh();
+      padding: lh(.5);
 
       &:empty {
         padding: 0;
@@ -157,6 +160,18 @@ div.leanModal_box {
 div#login {
   min-width: 400px;
 
+  header {
+    border-bottom: 1px solid #ddd;
+    margin-bottom: lh();
+    padding-bottom: lh();
+
+    h1 {
+      border-bottom: 0;
+      padding-bottom: 0;
+      margin-bottom: lh(.25);
+    }
+  }
+
   ol {
     li {
       width: auto;
@@ -206,6 +221,7 @@ div#feedback_div{
 div#calculator_div {
   max-width: 500px;
 
+
   form {
     padding-bottom: lh();
     margin-bottom: lh();