Merge pull request #929 from MITx/feature/cas/tomg/bigger-sign-up

Polished sign up

cms/static/sass/_login.scss

@@ -40,6 +40,7 @@
 
 	label {
 		display: block;
+		margin-bottom: 5px;
 		font-size: 13px;
 		font-weight: 700;
 	}
@@ -67,17 +68,56 @@
 	}
 
 	.form-actions {
-		margin-bottom: 0;
+		@include clearfix;
+		margin-top: 32px;
+		margin-bottom: 5px;
+		text-align: center;
 	}
 
-	input[type="submit"] {
+	.log-in-button,
+	.create-account-button {
 		@include blue-button;
-		margin-right: 10px;
-		padding: 8px 20px 10px;
+		padding: 8px 0 10px;
+		font-family: $sans-serif;
+		@include transition(all .15s);
+	}
+
+	.create-account-button {
+		padding: 10px 40px 12px;
+		margin-bottom: 10px;
+	}
+
+	.enrolled {
+		font-size: 14px;
+	}
+
+	.sign-up-button {
+		@include white-button;
+		padding: 7px 0 9px;
+	}
+
+	.log-in-button,
+	.sign-up-button {
+		@include box-sizing(border-box);
+		float: left;
+		width: 45%;
+	}
+
+	.or {
+		float: left;
+		display: inline-block;
+		width: 10%;
+		font-size: 15px;
+		line-height: 36px;
+		color: $darkGrey;
+		text-align: center;
 	}
 
 	.forgot-button {
-		font-size: 13px;
+		float: right;
+		font-size: 11px;
+		font-weight: 400;
+		line-height: 21px;
 	}
 
 	.log-in-extra {

cms/templates/login.html

@@ -17,17 +17,15 @@
         <input name="email" type="email" class="email-field">
       </div>
       <div class="row">
-        <label>Password</label>
+        <label>Password <a href="#" class="forgot-button">Forgot password?</a></label>
         <input name="password" type="password" class="password-field">
       </div>
       <div class="row form-actions">
         <input name="submit" type="submit" value="Log In" class="log-in-button">
-        <a href="#" class="forgot-button">Forgot password?</a>
-      </div>      
+        <span class="or">or</span>
+        <a href="${reverse('signup')}" class="sign-up-button">Sign up</a>        
+      </div>
     </form>
-    <div class="log-in-extra">
-      <p>Not enrolled? <a href="${reverse('signup')}">Sign up.</a></p>
-    </div>
   </article>
 
 <script type="text/javascript">

cms/templates/signup.html

@@ -52,12 +52,10 @@
       <input name="honor_code" type="checkbox" value="true" checked="true" hidden="true">
 
     <div class="row form-actions submit">
-      <input name="submit" type="submit" value="Create My Account">
+      <input name="submit" type="submit" value="Create My Account" class="create-account-button">
+      <p class="enrolled">Already enrolled? <a href="/">Log In.</a></p>
     </div>
   </form>
-  <div class="log-in-extra">
-    <p>Already enrolled? <a href="/">Log In.</a></p>
-  </div>
 </article>
 
 <script type="text/javascript">