ECOM-531 Updated style after review with Andy Waldrop

lms/static/js/student_account/views/FormView.js

@@ -76,6 +76,10 @@ var edx = edx || {};
             this.fields = data;
 
             for ( i=0; i<len; i++ ) {
+                if ( data[i].errorMessages ) {
+                    data[i].errorMessages = this.escapeStrings( data[i].errorMessages );
+                }
+
                 html.push( _.template( fieldTpl, $.extend( data[i], {
                     form: this.formType,
                     requiredStr: this.requiredStr
@@ -104,6 +108,14 @@ var edx = edx || {};
             }
         },
 
+        escapeStrings: function( obj ) {
+            _.each( obj, function( val, key ) {
+                obj[key] = _.escape( val );
+            });
+
+            return obj;
+        },
+
         forgotPassword: function( event ) {
             event.preventDefault();
 

lms/static/sass/views/_login-register.scss

@@ -101,6 +101,10 @@
         padding-top: 25px;
     }
 
+    .login-form {
+        margin-bottom: 20px;
+    }
+
     %bold-label {
         @include font-size(16);
         font-family: $sans-serif;
@@ -116,6 +120,7 @@
 
     .action-label {
         @extend %bold-label;
+        margin-bottom: 20px;
     }
 
     .form-field {
@@ -221,41 +226,50 @@
     }
 
     .login-provider {
-      @extend %btn-secondary-blue-outline;
-      width: 100%;
-      margin-top: 20px;
-
-      .icon {
-        color: inherit;
-        margin-right: $baseline/2;
-      }
-
-      &.button-Google:hover, &.button-Google:focus {
-        background-color: #dd4b39;
-        border: 1px solid #A5382B;
-      }
-
-      &.button-Google:hover {
-        box-shadow: 0 2px 1px 0 #8D3024;
-      }
-
-      &.button-Facebook:hover, &.button-Facebook:focus {
-        background-color: #3b5998;
-        border: 1px solid #263A62;
-      }
-
-      &.button-Facebook:hover {
-        box-shadow: 0 2px 1px 0 #30487C;
-      }
-
-      &.button-LinkedIn:hover , &.button-LinkedIn:focus {
-        background-color: #0077b5;
-        border: 1px solid #06527D;
-      }
-
-      &.button-LinkedIn:hover {
-        box-shadow: 0 2px 1px 0 #005D8E;
-      }
+        @extend %btn-secondary-blue-outline;
+        width: 100%;
+        margin-bottom: 20px;
+        text-shadow: none;
+        text-transform: none;
+
+        .icon {
+            color: inherit;
+            margin-right: $baseline/2;
+        }
+
+        &:last-child {
+            margin-bottom: 20px;
+        }
+
+        &.button-Google:hover,
+        &.button-Google:focus {
+            background-color: #dd4b39;
+            border: 1px solid #A5382B;
+        }
+
+        &.button-Google:hover {
+            box-shadow: 0 2px 1px 0 #8D3024;
+        }
+
+        &.button-Facebook:hover,
+        &.button-Facebook:focus {
+            background-color: #3b5998;
+            border: 1px solid #263A62;
+        }
+
+        &.button-Facebook:hover {
+            box-shadow: 0 2px 1px 0 #30487C;
+        }
+
+        &.button-LinkedIn:hover,
+        &.button-LinkedIn:focus {
+            background-color: #0077b5;
+            border: 1px solid #06527D;
+        }
+
+        &.button-LinkedIn:hover {
+            box-shadow: 0 2px 1px 0 #005D8E;
+        }
 
     }
 
@@ -269,6 +283,7 @@
 
         .message-title {
             @extend %heading-4;
+            font-family: $sans-serif;
             margin: 0 0 ($baseline/4) 0;
             font-size: em(14);
             font-weight: 600;
@@ -276,6 +291,7 @@
 
         .message-copy {
             @extend %body-text;
+            font-family: $sans-serif;
             margin: 0 !important;
             padding: 0;
             list-style: none;
@@ -361,8 +377,9 @@
         .headline,
         .tagline,
         .form-type {
-            @include span-columns(6);
-            @include shift(3);
+            width: 600px;
+            margin-left: calc( 50% - 300px );
+            margin-right: calc( 50% - 300px );
         }
 
         .form-toggle {
@@ -388,18 +405,13 @@
             }
         }
 
-        // TODO: Update so actually using the grid
         .login-provider {
             @include span-columns(6);
-            /*width: calc( 50% - 12px );
 
-            &:nth-child(odd) {
-                margin-left: 10px;
+            /* Node uses last-child which is not specific enough */
+            &:nth-of-type(2n) {
+                margin-right: 0;
             }
-
-            &:nth-child(even) {
-                margin-right: 10px;
-            }*/
         }
     }
 }

lms/templates/student_account/form_field.underscore

@@ -27,9 +27,11 @@
             aria-describedby="<%= form %>-<%= name %>-desc"
             <% if ( restrictions.min_length ) { %> minlength="<%= restrictions.min_length %>"<% } %>
             <% if ( restrictions.max_length ) { %> maxlength="<%= restrictions.max_length %>"<% } %>
-            <% if ( typeof errorMessages !== 'undefined' ) { _.each(errorMessages, function(msg, type) {%>
-                data-errormsg-<%= type %>="<%= msg %>"
-            <% }); } %>
+            <% if ( typeof errorMessages !== 'undefined' ) {
+                _.each(errorMessages, function( msg, type ) {%>
+                    data-errormsg-<%= type %>="<%= msg %>"
+            <%  });
+            } %>
             <% if ( required ) { %> required<% } %> >
         </textarea>
     <% } else { %>
@@ -41,9 +43,11 @@
             <% if ( restrictions.min_length ) { %> minlength="<%= restrictions.min_length %>"<% } %>
             <% if ( restrictions.max_length ) { %> maxlength="<%= restrictions.max_length %>"<% } %>
             <% if ( required ) { %> required<% } %>
-            <% if ( typeof errorMessages !== 'undefined' ) { _.each(errorMessages, function(msg, type) {%>
-                data-errormsg-<%= type %>="<%= msg %>"
-            <% }); } %>
+            <% if ( typeof errorMessages !== 'undefined' ) {
+                _.each(errorMessages, function( msg, type ) {%>
+                    data-errormsg-<%= type %>="<%= msg %>"
+            <%  });
+            } %>
             value="<%- defaultValue %>"
         />
     <% } %>
@@ -51,7 +55,7 @@
     <% if ( type === 'checkbox' ) { %>
         <label for="<%= form %>-<%= name %>" class="inline">
             <%= label %>
-            <% if ( required && requiredStr ) { %> <%= requiredStr %></label><% } %>
+            <% if ( required && requiredStr ) { %> <%= requiredStr %><% } %>
         </label>
     <% } %>
 

lms/templates/student_account/login.underscore

-<form id="login">
+<form id="login" class="login-form">
     <div class="status already-authenticated-msg hidden" aria-hidden="true">
         <% if (currentProvider) { %>
-            <p class="message-copy">You've successfully logged into <%- currentProvider %>, but you need to link your account.  Please click "I am a returning user" to create an EdX account.</p>
+            <p class="message-copy">You've successfully logged into <%- currentProvider %>, but you need to link your account.  Please click "I am a new user" to create an edX account.</p>
         <% } %>
     </div>
 

lms/templates/student_account/register.underscore

 <% if (currentProvider) { %>
     <div class="status" aria-hidden="false">
-        <h4 class="message-title">You've successfully signed in with <strong><%- currentProvider %></strong>.</h4>
-        <p class="message-copy">You've successfully signed in with <strong><%- currentProvider %></strong>. We just need a little more information before you start learning with edX.</p>
+        <p class="message-copy">You've successfully signed in with <%- currentProvider %>. We just need a little more information before you start learning with edX.</p>
     </div>
 <% } else {
     _.each( providers, function( provider) { %>
@@ -18,4 +17,4 @@
     </div>
     <%= fields %>
     <button class="action action-primary action-update js-register">Create My edX Account</button>
-</form>
\ No newline at end of file
+</form>