Merge pull request #4453 from edx/marco/dashboard-styling-tweaks

Visual styling adjustments to profile area on Course Dashboard

lms/static/sass/multicourse/_dashboard.scss

@@ -3,7 +3,7 @@
 
 .dashboard {
   @include clearfix;
-  padding: 60px 0 0 0;
+  padding: ($baseline*2) 0 0 0;
 
   .dashboard-banner {
     background: $yellow;
@@ -27,46 +27,44 @@
   }
 
   .profile-sidebar {
-    background: transparent;
     float: left;
     margin-right: flex-gutter();
     width: flex-grid(3);
+    background: transparent;
+    box-shadow: 0 0 1px $shadow-l1;
 
     header.profile {
-      @include background-image($dashboard-profile-header-image);
-      background-color: $dashboard-profile-header-color;
-      border: 1px solid $border-color-2;
-      border-radius: 4px;
       @include box-sizing(border-box);
+      border: 1px solid $border-color-2;
+      border-radius: ($baseline/4) ($baseline/4) 0 0;
       width: flex-grid(12);
+      background: $dashboard-profile-color;
 
       h1.user-name {
-        color: $base-font-color;
-        font: 700 1.2em/1.2em $sans-serif;
-        margin: 0px;
         overflow: hidden;
-        padding: 15px 10px 17px;
+        margin: 0px;
+        padding: ($baseline*.75) ($baseline/2);
+        color: $base-font-color;
+        text-transform: none;
         text-wrap: nowrap;
         text-overflow: ellipsis;
-        text-transform: none;
+        font: 700 1.2em/1.2em $sans-serif;
       }
     }
 
     .user-info {
       @include clearfix;
-      padding: 0px 10px;
 
       > ul {
-        background: $dashboard-profile-color;
-        border: 1px solid $border-color-2;
-        border-top: none;
-        //@include border-bottom-radius(4px);
         @include box-sizing(border-box);
-        box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15);
         @include clearfix;
         margin: 0px;
-        padding: 20px 10px 10px;
+        border: 1px solid $border-color-2;
+        border-top: none;
+        border-radius: 0 0 ($baseline/4) ($baseline/4);
+        padding: $baseline;
         width: flex-grid(12);
+        background: $white;
 
         li {
           @include clearfix;
@@ -92,41 +90,19 @@
           }
 
           span.title {
-            color: $lighter-base-font-color;
+            color: $gray;
             font-family: $sans-serif;
             font-size: 13px;
+            text-transform: uppercase;
 
-            .icon {
-              background-size: cover;
-              float: left;
-              height: 19px;
-              margin: 0 6px 0 0;
-              opacity: 0.6;
-              @include transition(all 0.15s linear 0s);
-              width: 19px;
-
-              &.email-icon {
-                @include background-image(url('../images/portal-icons/email-icon.png'));
-              }
-
-              &.name-icon {
-                @include background-image(url('../images/portal-icons/course-info-icon.png'));
-              }
-
-              &.location-icon {
-                @include background-image(url('../images/portal-icons/home-icon.png'));
-              }
-
-              &.language-icon {
-                @include background-image(url('../images/portal-icons/language-icon.png'));
-              }
+            a {
+              text-transform: none;
             }
           }
 
           span.data {
-            color: $lighter-base-font-color;
-            font-weight: 700;
-            margin-left: 26px;
+            color: $base-font-color;
+            font-weight: 600;
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;

lms/templates/dashboard.html

@@ -209,10 +209,10 @@
     <section class="user-info">
       <ul>
         <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>
+          <span class="title">${_("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 class="info--email">
-          <span class="title"><div class="icon email-icon"></div>${_("Email")}
+          <span class="title">${_("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>)
             % endif
@@ -272,7 +272,7 @@
 
         % if external_auth_map is None or 'shib' not in external_auth_map.external_domain:
         <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>
+          <span class="title"><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')}" /> -->

lms/templates/dashboard/_dashboard_info_language.html

@@ -4,7 +4,6 @@
 
 <li class="status status-language">
   <span class="title status-title">
-    <i class="icon icon-flag-alt"></i>
     ${_("Preferred Language")}
     (<a href="#change_language" rel="leanModal" class="edit-language">${_("edit")}</a>)
   </span>