LMS: revises semantics and styling for dashboard messages

lms/static/sass/elements/_typography.scss

@@ -271,14 +271,18 @@
 %copy-link {
   border-bottom: 1px dotted transparent;
 
+<<<<<<< HEAD
   &:hover, &:active, &:focus {
+=======
+  &:hover, &:active {
+>>>>>>> LMS: revises semantics and styling for dashboard messages
     border-color: $link-color-d1;
   }
 }
 
 %copy-badge {
   @extend %t-title8;
-  @extend %t-weight5;
+  @extend %t-weight3;
   border-radius: ($baseline/5);
   padding: ($baseline/2) $baseline;
   text-transform: uppercase;

lms/static/sass/multicourse/_dashboard.scss

@@ -75,6 +75,12 @@
           margin-bottom: 15px;
           padding-bottom: 17px;
 
+          &:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+            padding-bottom: 0;
+          }
+
           &:hover, &:focus {
             .title .icon {
               opacity: 1.0;
@@ -760,4 +766,64 @@
       margin-right: 10px;
     }
   }
+
+  // account-related
+  .user-info {
+
+    // status
+    .status {
+
+      .list--nav {
+        margin: ($baseline/2) 0 0 0;
+        padding: 0;
+      }
+
+      .nav__item {
+        @extend %t-weight4;
+        @include font-size(13);
+        margin-left: 26px;
+      }
+    }
+  }
+
+  // status - verification
+  .status--verification {
+
+    .data {
+      white-space: normal !important;
+      text-overflow: no !important;
+      overflow: visible !important;
+    }
+
+    .list--nav {
+      margin-left: 26px;
+    }
+
+    // STATE: is denied
+    &.is-denied {
+
+      .data {
+        color: $error-color !important;
+      }
+    }
+  }
+
+  // message
+  .msg {
+    margin: ($baseline/2) 0 ($baseline/2) 26px;
+  }
+
+  .msg__title {
+    @extend %hd-lv5;
+    color: $lighter-base-font-color;
+  }
+
+  .msg__copy {
+    @extend %copy-metadata;
+    color: $lighter-base-font-color;
+
+    p {
+      @extend %t-copy;
+    }
+  }
 }

lms/templates/dashboard.html

@@ -150,10 +150,10 @@
     </header>
     <section class="user-info">
       <ul>
-        <li>
+        <li class="info--username">
           <span class="title"><div class="icon name-icon"></div>${_("Full Name")} (<a href="#apply_name_change" rel="leanModal" class="edit-name">${_("edit")}</a>)</span> <span class="data">${ user.profile.name | h }</span>
         </li>
-        <li>
+        <li class="info--email">
           <span class="title"><div class="icon email-icon"></div>${_("Email")}
             % if external_auth_map is None or 'shib' not in external_auth_map.external_domain:
             (<a href="#change_email" rel="leanModal" class="edit-email">${_("edit")}</a>)
@@ -162,8 +162,8 @@
         </li>
 
         % if external_auth_map is None or 'shib' not in external_auth_map.external_domain:
-        <li>
-          <span class="title"><a href="#password_reset_complete" rel="leanModal" id="pwd_reset_button">${_("Reset Password")}</a></span>
+        <li class="controls--account">
+          <span class="title"><div class="icon"></div><a href="#password_reset_complete" rel="leanModal" id="pwd_reset_button">${_("Reset Password")}</a></span>
           <form id="password_reset_form" method="post" data-remote="true" action="${reverse('password_reset')}">
             <input id="id_email" type="hidden" name="email" maxlength="75" value="${user.email}" />
             <!-- <input type="submit" id="pwd_reset_button" value="${_('Reset Password')}" /> -->
@@ -171,20 +171,7 @@
         </li>
         % endif
 
-        %if verification_status == 'denied':
-        <li>
-          <span class="title">${_("Photo Verification Failed")}</span>
-          <p>
-          ${verification_msg}
-          </p>  
-          <p>
-          <a href="${reverse('verify_student_reverify')}">Please submit new verification photos.</a>
-          </p>
-          <p>
-              Note: if you fail to pass a verification attempt before the course ends, you will not receive a verified certificate.
-          </p>
-        </li> 
-        %endif
+        <%include file='dashboard/_dashboard_status_verification.html' />
 
       </ul>
     </section>
@@ -203,7 +190,7 @@
             <% cert_status = cert_statuses.get(course.id) %>
             <% show_email_settings = (course.id in show_email_settings_for) %>
             <% course_mode_info = all_course_modes.get(course.id) %>
-            <%include file='dashboard/dashboard_course_listing.html' args="course=course, enrollment=enrollment, show_courseware_link=show_courseware_link, cert_status=cert_status, show_email_settings=show_email_settings, course_mode_info=course_mode_info" />
+            <%include file='dashboard/_dashboard_course_listing.html' args="course=course, enrollment=enrollment, show_courseware_link=show_courseware_link, cert_status=cert_status, show_email_settings=show_email_settings, course_mode_info=course_mode_info" />
       % endfor
 
       </ul>

lms/templates/dashboard/_dashboard_status_verification.html

@@ -0,0 +1,27 @@
+<%! from django.utils.translation import ugettext as _ %>
+<%!
+  from django.core.urlresolvers import reverse
+  from courseware.courses import course_image_url, get_course_about_section
+  import waffle
+%>
+
+<%namespace name='static' file='../static_content.html'/>
+
+%if verification_status == 'denied':
+<li class="status status--verification is-denied">
+  <span class="title"><div class="icon"></div>${_("Verification Status")}</span><span class="data">${verification_msg}</span>
+
+  <ul class="list--nav">
+    <li class="nav__item nav__item--reverify">
+      <a href="${reverse('verify_student_reverify')}" class="action">${_("Please submit new verification photos.")}</a>
+    </li>
+  </ul>
+
+  <div class="msg msg--warning">
+    <h3 class="msg__title">${_("Please Note:")}</h3>
+    <div class="msg__copy">
+      <p>${_("If you fail to pass a verification attempt before the course ends, you will not receive a verified certificate.")}</p>
+    </div>
+  </div>
+</li>
+%endif