Adding new styles for dashboard notifications.

Change the reverification failure message styling.

Changing templates so new styles do not appear in courseware.

Removing unused aria tag.

PR comments on cleaning up SASS

Fix signup LMS test.

Copy changes per review on PR

Updating based on PR comments

Style and HTML changes for notifications

common/djangoapps/student/views.py

@@ -480,7 +480,10 @@ def dashboard(request):
 
     message = ""
     if not user.is_active:
-        message = render_to_string('registration/activate_account_notice.html', {'email': user.email})
+        message = render_to_string(
+            'registration/activate_account_notice.html',
+            {'email': user.email, 'platform_name': settings.PLATFORM_NAME}
+        )
 
     # Global staff can see what courses errored on their dashboard
     staff_access = False

lms/djangoapps/courseware/features/signup.feature

@@ -16,4 +16,4 @@ Feature: LMS.Sign in
     And I check the checkbox named "terms_of_service"
     And I check the checkbox named "honor_code"
     And I submit the registration form
-    Then I should see "THANKS FOR REGISTERING!" in the dashboard banner
+    Then I should see "Thanks for Registering!" in the dashboard banner

lms/static/sass/elements/_system-feedback.scss

@@ -6,8 +6,6 @@
 // UI : message
 .wrapper-msg {
   display: block;
-  margin-bottom: ($baseline/4);
-  box-shadow: 0 0 5px $shadow-d1 inset;
   background: $notify-banner-bg-1;
   padding: $baseline ($baseline*1.5);
 

lms/static/sass/multicourse/_dashboard.scss

@@ -5,27 +5,6 @@
   @include clearfix;
   padding: ($baseline*2) 0 0 0;
 
-  .dashboard-banner {
-    background: $yellow;
-    border: 1px solid rgb(200,200,200);
-    box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
-    padding: 10px;
-    margin-bottom: 30px;
-
-    &:empty {
-      display: none;
-      background-color: #FFF;
-    }
-
-    h2 {
-      margin-bottom: 0;
-    }
-
-    p {
-      margin-bottom: 0;
-    }
-  }
-
   .profile-sidebar {
     float: left;
     margin-right: flex-gutter();
@@ -1166,3 +1145,31 @@
     opacity: 0.5;
   }
 
+.dashboard-banner {
+
+  &:empty {
+    display: none;
+  }
+
+  .wrapper-msg {
+    padding-bottom: 0;
+  }
+
+  .msg {
+    @include clearfix();
+    font-family: $sans-serif;
+    padding-bottom: $baseline;
+    border-bottom: thin solid $gray;
+
+    &.title {
+      @extend %t-title5;
+      @extend %t-weight4;
+      font-family: $f-sans-serif;
+
+      // Overriding Platform h2 styles
+      text-transform: none;
+      letter-spacing: 0;
+    }
+  }
+}
+

lms/templates/dashboard.html

@@ -24,6 +24,13 @@
   <script type="text/javascript">
   (function() {
 
+    // On initialization, set focus to the first notification available
+    // for screen readers.
+    var notifications = $('.dashboard-notifications');
+    if (notifications.children().length > 0) {
+        notifications.focus();
+    }
+
     $('.message.is-expandable .wrapper-tip').bind('click', toggleExpandMessage);
 
     function toggleExpandMessage(e) {
@@ -178,30 +185,34 @@
   </script>
 </%block>
 
-% if reverifications["must_reverify"] or reverifications["denied"]:
-  <section class="dashboard-banner">
-    <%include file='dashboard/_dashboard_prompt_midcourse_reverify.html' />
-  </section>
-% endif
+<div class="dashboard-notifications" tabindex="-1">
+    % if reverifications["must_reverify"] or reverifications["denied"]:
+        ## Section Element must be outside of the re-verify template. The template is re-used for courseware, and has separate styling.
+        <section class="dashboard-banner">
+            <%include file='dashboard/_dashboard_prompt_midcourse_reverify.html' />
+        </section>
+    % endif
 
-<section class="container dashboard" id="dashboard-main" aria-hidden="false">
+    %if message:
+        <section class="dashboard-banner">
+            ${message}
+        </section>
+    %endif
 
-  %if message:
-    <section class="dashboard-banner">
-      ${message}
-    </section>
-  %endif
+    % if duplicate_provider:
+        <section class="dashboard-banner third-party-auth">
+            <%include file='dashboard/_dashboard_third_party_error.html' />
+        </section>
+    % endif
 
-  %if enrollment_message:
-      ${enrollment_message}
-  %endif
+    %if enrollment_message:
+        <section class="dashboard-banner">
+            ${enrollment_message}
+        </section>
+    %endif
+</div>
 
-  % if duplicate_provider:
-    <section class="dashboard-banner third-party-auth">
-      ## Translators: this message is displayed when a user tries to link their account with a third-party authentication provider (for example, Google or LinkedIn) with a given edX account, but their third-party account is already associated with another edX account. provider_name is the name of the third-party authentication provider, and platform_name is the name of the edX deployment.
-      <p>${_("The {provider_name} account you selected is already linked to another {platform_name} account.").format(provider_name='<strong>%s</strong>' % duplicate_provider.NAME, platform_name=platform_name)}
-    </section>
-  % endif
+<section class="container dashboard" id="dashboard-main">
 
   <section class="profile-sidebar">
     <header class="profile">

lms/templates/dashboard/_dashboard_prompt_midcourse_reverify.html

@@ -1,6 +1,5 @@
 <%! from django.utils.translation import ugettext as _ %>
 <%! from django.core.urlresolvers import reverse %>
-
 % if reverifications["must_reverify"]:
   % if len(reverifications["must_reverify"]) > 1:
 
@@ -32,7 +31,6 @@
         </nav>
       </div>
     </div>
-  </div>
 
   % elif reverifications["must_reverify"]:
   <div class="wrapper-msg urgency-high">
@@ -57,13 +55,12 @@
         </nav>
       </div>
     </div>
-  </div>
   % endfor
   %endif
 %endif
 
 %if reverifications["denied"] and denied_banner:
-<div class="wrapper-msg urgency-low" id="failed-verification-banner">
+<div class="wrapper-msg urgency-high" id="failed-verification-banner">
   <div class="msg msg-reverify is-dismissable">
       <div class="msg-content">
         <h2 class="title">${_("Your re-verification failed")}</h2>
@@ -79,13 +76,12 @@
 	    )}
           </p>
         </div>
+        % endif
+        % endfor
       </div>
       <div class="action-dismiss">
         <button class="button-dismiss" id="failed-verification-button-dismiss"><i class="icon-remove-sign"></i> <span class="sr">${_('Dismiss')}</span></button>
       </div>
     </div>
   </div>
-</div>
-% endif
-% endfor
 %endif

lms/templates/dashboard/_dashboard_third_party_error.html

@@ -0,0 +1,12 @@
+<%! from django.utils.translation import ugettext as _ %>
+<div class="wrapper-msg urgency-high">
+    <div class="msg">
+        <div class="msg-content">
+            <h2 class="sr">${_("Could Not Link Accounts")}</h2>
+            <div class="copy">
+                ## Translators: this message is displayed when a user tries to link their account with a third-party authentication provider (for example, Google or LinkedIn) with a given edX account, but their third-party account is already associated with another edX account. provider_name is the name of the third-party authentication provider, and platform_name is the name of the edX deployment.
+                <p>${_("The {provider_name} account you selected is already linked to another {platform_name} account.").format(provider_name='<strong>{duplicate_provider}</strong>'.format(duplicate_provider=duplicate_provider.NAME), platform_name=platform_name)}</p>
+            </div>
+        </div>
+    </div>
+</div>

lms/templates/enrollment/course_enrollment_message.html

@@ -1,6 +1,13 @@
 <%! from django.utils.translation import ugettext as _ %>
 % for course, enrollment in recent_course_enrollment_pairs:
-    <section class="dashboard-banner">
-        <p class='activation-message'>${_("You have successfully enrolled in {enrolled_course}.").format(enrolled_course=course.display_name)}</p>
-    </section>
+    <div class="wrapper-msg urgency-high">
+        <div class="msg">
+            <div class="msg-content">
+                <h2 class="sr">${_("Enrollment Successful")}</h2>
+                <div class="copy">
+                    <p>${_("You have successfully enrolled in {enrolled_course}.").format(enrolled_course=course.display_name)}</p>
+                </div>
+            </div>
+        </div>
+    </div>
 % endfor

lms/templates/registration/activate_account_notice.html

@@ -1,3 +1,17 @@
 <%! from django.utils.translation import ugettext as _ %>
-<h2>${_("Thanks For Registering!")}</h2>
-<p class='activation-message'>${_("Your account is not active yet. An activation link has been sent to {email}, along with instructions for activating your account.").format(email="<strong>{}</strong>".format(email))}</p>
+<div class="wrapper-msg urgency-high">
+    <div class="msg">
+        <div class="msg-content">
+            <h2 class="title">${_("Thanks for Registering!")}</h2>
+            <div class="copy">
+                <p class='activation-message'>${_(
+                        "You've successfully created an account on {platform_name}. We've sent an account "
+                        "activation message to {email}. To activate your account and start enrolling in "
+                        "courses, click the link in the message."
+                        ).format(email="<strong>{}</strong>".format(email), platform_name=platform_name
+                    )}
+                </p>
+            </div>
+        </div>
+    </div>
+</div>