pearson registration - revised UI states for reg form, simplified markup for…

pearson registration - revised UI states for reg form, simplified markup for form fields, synched button styles/text b/t registration form and dashboard

lms/static/sass/multicourse/_dashboard.scss

@@ -410,7 +410,7 @@
       margin: 20px 0 10px;
       padding: 15px 20px;
       font-family: $sans-serif;
-      background: #fffcf0;
+      background: tint($yellow,70%);
       border: 1px solid #ccc;
 
       .message-copy {
@@ -498,18 +498,28 @@
         }
       }
 
+      .contact-button {
+        @include button(simple, $blue);
+      }
+
       .exam-button {
         @include button(simple, $pink);
+      }
+
+      .button {
         float: right;
         padding: 9px 18px 10px;
         font-size: 13px;
-        font-weight: 400;
+        font-weight: bold;
+        letter-spacing: 0;
 
         &:hover {
           text-decoration: none;
         }
       }
 
+
+
       &.is-shown {
         display: block;
       }

lms/static/sass/multicourse/_testcenter-register.scss

@@ -71,11 +71,21 @@ $red: rgb(178, 6, 16);
 		@include border-radius(3px);
 		@include box-shadow(0 1px 2px 0 rgba(0,0,0, 0.2));
 
-		.instructions {
+		.instructions, .note {
 			margin: 0;
 			padding: ($baseline*1.5) ($baseline*1.5) 0 ($baseline*1.5);
 			font-family: $sans-serif;
 			font-size: 14px;
+			color: tint($base-font-color, 20%);
+
+			strong {
+				font-weight: normal;
+			}
+
+			.title, .indicator {
+				color: $base-font-color;
+				font-weight: 700;
+			}
 		}
 
 		fieldset {
@@ -84,11 +94,11 @@ $red: rgb(178, 6, 16);
 		}
 
 		.form-actions {
+			@include clearfix();
 			padding: ($baseline*1.5);
 
 			button[type="submit"] {
 				display: block;
-				width: 100%;
 				@include button(simple, $blue);
 				@include box-sizing(border-box);
 				@include border-radius(3px);
@@ -98,6 +108,23 @@ $red: rgb(178, 6, 16);
 				text-align: center;
 			}
 
+			.action-primary {
+				float: left;
+				width: flex-grid(5,8);
+				margin-right: flex-gutter(2);
+			}
+
+			.action-secondary {
+				display: block;
+				float: left;
+				width: flex-grid(2,8);
+				margin-top: $baseline;
+				padding: ($baseline/4);
+				font-size: 13px;
+				text-align: right;
+				text-transform: uppercase;
+			}
+
 			&.error {
 
 			}
@@ -224,7 +251,7 @@ $red: rgb(178, 6, 16);
 					display: block;
 					float: left;
 					border-bottom: none;
-					margin: 0 ($baseline) 0 0;
+					margin: 0 $baseline ($baseline/2) 0;
 					padding-bottom: 0;
 
 					input, textarea {
@@ -239,7 +266,7 @@ $red: rgb(178, 6, 16);
 					}
 				}
 
-				&.postal {
+				&.postal-2 {
 					border-bottom: none;
 					margin-bottom: 0;
 					padding-bottom: 0;
@@ -268,7 +295,6 @@ $red: rgb(178, 6, 16);
 		padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
 		font-family: $sans-serif;
 		font-size: 13px;
-		text-align: right;
 
 		&.is-hidden {
 			display: none;
@@ -343,7 +369,7 @@ $red: rgb(178, 6, 16);
 							top: 0;
 							right: $baseline;
 							margin-left: $baseline;
-							content: "testing";
+							content: "not started";
 							text-transform: uppercase;
 							font-size: 11px;
 							font-weight: normal;
@@ -408,6 +434,18 @@ $red: rgb(178, 6, 16);
 						}
 					}
 
+					&.status-initial {
+
+						&:before {
+							background: transparent;
+							border: 1px dotted gray;
+						}
+
+						.title:after {
+							color: gray;
+						}
+					}
+
 					&:hover {
 
 						.details, .item {
@@ -438,6 +476,10 @@ $red: rgb(178, 6, 16);
 				background: tint($yellow,70%);
 				font-size: 14px;
 
+				.title {
+					font-size: 14px;
+				}
+
 				.label, .value {
 					display: inline-block;					
 				}
@@ -556,6 +598,58 @@ $red: rgb(178, 6, 16);
 			font-size: 14px;
 		}
 
+		// registration status
+		&.message-flash {
+			display: block;
+			@include border-radius(3px);
+			position: relative;
+			margin: 0 0 ($baseline*2) 0;
+			border: 1px solid #ccc;
+			padding-top: ($baseline*0.75);
+			background: tint($yellow,70%);
+			font-size: 14px;
+
+			.message-title, .message-copy {
+				font-family: $sans-serif;
+				font-size: 14px;
+			}
+
+			.message-title {
+				font-weight: bold;
+				margin: 0 0 ($baseline/4) 0;
+			}
+
+			.contact-button {
+				@include button(simple, $blue);
+			}
+
+			.exam-button {
+			  @include button(simple, $pink);
+			}
+
+			.button {
+				position: absolute;
+				top: ($baseline/4);
+				right: $baseline;
+				margin: ($baseline/2) 0 0 0;
+				padding: ($baseline/2) $baseline;
+				font-size: 13px;
+				font-weight: bold;
+
+				&:hover {
+				  text-decoration: none;
+				}
+			}
+
+			&.message-action {
+
+				.message-title, .message-copy {
+					width: 65%;
+				}
+			}
+		}
+
+
 		// submission error
 		&.submission-error {
 			border: 1px solid tint($red,85%);

lms/templates/dashboard.html

@@ -228,8 +228,8 @@
 
                 % if registration is None and testcenter_exam_info.is_registering():	    
                 <div class="message message-status is-shown exam-register">
-                      <a href="${testcenter_register_target}" class="exam-button" id="exam_register_button">Register for Pearson exam</a>
-                      <p class="message-copy">Registration for the Pearson exam is now open and will close on <strong>${testcenter_exam_info.registration_end_date_text}</strong></p>
+                  <a href="${testcenter_register_target}" class="button exam-button" id="exam_register_button">Register for Pearson exam</a>
+                  <p class="message-copy">Registration for the Pearson exam is now open and will close on <strong>${testcenter_exam_info.registration_end_date_text}</strong></p>
                 </div>
                 % endif
                 <!-- display a registration for a current exam, even if the registration period is over -->
@@ -245,10 +245,12 @@
                     % if  registration.is_rejected():	    
                 	<!-- TODO: revise rejection text -->
                 <div class="message message-status is-shown exam-schedule">
+                  <a href="mailto:exam-help@edx.org?subject=Pearson VUE Exam - ${get_course_about_section(course, 'university')} ${course.number}" class="button contact-button">Contact exam-help@edx.org</a>
                   <p class="message-copy">Your 
                     <a href="${testcenter_register_target}" id="exam_register_link">registration for the Pearson exam</a>
      has been rejected. Please check the information you provided, and try to correct any demographic errors.  Otherwise
      contact someone at edX or Pearson, or just scream for help.</p>
+                   
                 </div>
                     % endif
                    	% if not registration.is_accepted() and not registration.is_rejected():