studio - soft landing UI: sign in and basic styling/layout tweaks

cms/static/sass/_account.scss

@@ -19,7 +19,7 @@
     
     header {
       position: relative;
-      margin-bottom: ($baseline/2);
+      margin-bottom: $baseline;
       border-bottom: 1px solid $gray-l4;
       padding-bottom: ($baseline/2);
 
@@ -129,6 +129,22 @@
             &.short {
               width: 25%;
             }
+
+            ::-webkit-input-placeholder {
+               color: $gray-l4;
+            }
+
+            :-moz-placeholder {
+               color: $gray-l3; 
+            }
+
+            ::-moz-placeholder {
+               color: $gray-l3;  
+            }
+
+            :-ms-input-placeholder {  
+               color: $gray-l3; 
+            }
           }
 
           textarea.long {
@@ -212,12 +228,20 @@
 
 .signup {
 
-
 }
 
 .signin {
 
+  #field-password {
+    position: relative;
 
+    .action-forgotpassword {
+      @include font-size(13);
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  }
 }
 
 // @include transition(all 1s ease-in-out);
\ No newline at end of file

cms/static/sass/_header.scss

@@ -19,13 +19,13 @@
     }
   }
 
-  .header {
+  header {
     @include clearfix();
     max-width: $fg-max-width;
     min-width: $fg-min-width;
     width: flex-grid(12);
     margin: 0 auto;
-    color: $lightGrey;
+    color: $gray-l1;
   }
 }
 

cms/templates/login.html

 <%inherit file="base.html" />
 <%! from django.core.urlresolvers import reverse %>
-<%block name="title">Log in</%block>
+<%block name="title">Sign in</%block>
 <%block name="bodyclass">not-signedin signin</%block>
 
 <%block name="content">
 
-  <div class="edx-studio-logo-large"></div>
-
-  <article class="log-in-box">
+<div class="wrapper-content wrapper">
+  <section class="content">
     <header>
-      <h1>Log in to edX studio</h1>
+      <h1>Sign into edX Studio</h1>
+      <a href="" class="action action-signin">Don't have a Studio Account? Sign up!</a>
     </header>
-    <form class="log-in-form" id="login_form" action="login_post" method="post">
-      <div class="row">
-        <label>Email</label>
-        <input name="email" type="email" class="email-field" tabindex="1">
-      </div>
-      <div class="row">
-        <label>Password <a href="${forgot_password_link}" class="forgot-button">Forgot password?</a></label>
-        <input name="password" type="password" class="password-field" tabindex="2">
-      </div>
-      <div class="row form-actions">
-        <input name="submit" type="submit" value="Log In" class="log-in-button" tabindex="3">
-        <span class="or">or</span>
-        <a href="${reverse('signup')}" class="sign-up-button" tabindex="4">Sign up</a>
+
+    <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>
+          
+          <ol class="list-input">
+            <li class="field text required" id="field-email">
+              <label for="email">Email Address</label>
+              <input id="email" type="email" name="email" placeholder="e.g. jane.doe@gmail.com" />              
+            </li>
+
+            <li class="field text required" id="field-password">
+              <a href="${forgot_password_link}" class="action action-forgotpassword">Forgot password?</a>
+              <label for="password">Password</label>
+              <input id="password" type="password" name="password" />              
+            </li>
+          </ol>
+        </fieldset>
+
+        <div class="form-actions">
+          <button type="submit" id="submit" name="submit" class="action action-primary">Sign into edX Studio</button>
+        </div>
+
+        <!-- no honor code for CMS, but need it because we're using the lms student object -->
+        <input name="honor_code" type="checkbox" value="true" checked="true" hidden="true">
+      </form>
+    </article>
+
+    <aside class="content-supplementary" role="complimentary">
+      <h2 class="sr">Studio Support</h2>
+
+      <div class="bit">
+        <h3>Need Help?</h3>
+        <p>Having trouble with your account? Use <a href="" rel="external">our support center</a> to look over self help steps, find solutions others have found to the same problem, or let us know of your issue.</p>
       </div>
-    </form>
-  </article>
+    </aside>
+  </section>
+</div>
+</%block>
 
+<%block name="jsextra">
 <script type="text/javascript">
 (function() {
   function getCookie(name) {
@@ -64,5 +92,4 @@
   });
 })(this)
 </script>
-      
-</%block>
+</%block>
\ No newline at end of file

cms/templates/signup.html

@@ -10,13 +10,13 @@
   <section class="content">
     <header>
       <h1>Sign Up for edX Studio</h1>
-      <a href="" class="action action-signin">Already have a Studio Account? Sign In</a>
+      <a href="" class="action action-signin">Already have a Studio Account? Sign in</a>
     </header>
 
     <p class="introduction">Ready to start creating online courses? Sign up below and start creating your first edX course today.</p>
 
     <article class="content-primary" role="main">
-      <form id="register_form" method="post">
+      <form id="register_form" method="post" action="register_post">
         <div id="register_error" name="register_error" class="message message-status message-status-error">
         </div>
         
@@ -67,6 +67,9 @@
         <div class="form-actions">
           <button type="submit" id="submit" name="submit" class="action action-primary">Create My Account & Start Authoring Courses</button>
         </div>
+
+        <!-- no honor code for CMS, but need it because we're using the lms student object -->
+        <input name="honor_code" type="checkbox" value="true" checked="true" hidden="true">
       </form>
     </article>
 

cms/templates/widgets/header.html

@@ -2,6 +2,11 @@
 
 <div class="wrapper-header wrapper">
   <header class="primary" role="banner">
+    
+    <span class="wrapper wrapper-flex">
+      
+    </span>
+    
     <h1 class="branding"><a href="#">edX Studio</a></h1>
     
     % if context_course: