Merge pull request #10103 from edx/ahsan/ECOM-2435-Updated-Styling-for-Courses-Existing-Messaging

Updated Styling for Courses and Existing Messaging

lms/static/sass/elements/_controls.scss

@@ -314,6 +314,12 @@
   color: $action-primary-fg;
 }
 
+%btn-pl-white-base{
+  @extend %btn-pl-default-base;
+  background-color: $action-primary-fg;
+  color: $action-primary-bg;
+}
+
 %btn-pl-green-base {
   @extend %btn-pl-default-base;
   background-color: darken($green-d1,10%);

lms/static/sass/multicourse/_dashboard.scss

@@ -251,6 +251,10 @@
         border-bottom: 4px solid $border-color-l4;
         padding-bottom: $baseline;
 
+        .course-container{
+          border: 1px solid $border-color-l4;
+          border-radius: 3px;
+        }
         &:last-child {
           margin-bottom: 0;
           border-bottom: none;
@@ -528,7 +532,7 @@
       }
 
       .enter-course {
-        @extend %btn-pl-primary-base;
+        @extend %btn-pl-white-base;
         @include float(right);
 
         &.archived {
@@ -672,20 +676,43 @@
           }
 
           .wrapper-extended {
-            padding: ($baseline/2) 0;
+            padding: ($baseline/4) 0;
 
             .message-copy {
-              margin-bottom: $baseline;
+              width: flex-grid(9, 12);
+              display: inline-block;
+
+              .message-copy-bold{
+                font-weight: 600;
+              }
             }
           }
 
+          .action-upgrade-container{
+            @include float(right);
+            display: inline-block;
+            margin-top: ($baseline/2);
+          }
           .action-upgrade {
             @extend %btn-primary-green;
             @include clearfix();
             position: relative;
             left: ($baseline/2);
-            padding: 8px $baseline 8px ($baseline*2);
+            padding: ($baseline * 0.4) 0 ($baseline * 0.4) ($baseline * 0.75);
+
+            .action-upgrade-icon{
+              @include float(left);
+              display: inline;
+
+              @include margin-right($baseline*0.4);
+              margin-top: ($baseline/4);
+              background: url('#{$static-path}/images/icon-sm-verified.png') no-repeat;
+              background-position: -($baseline*0.3);
+              background-color: white;
 
+              width: ($baseline*0.8);
+              height: ($baseline*0.7);
+            }
             .deco-graphic {
               position: absolute;
               top: -($baseline/4);

lms/templates/dashboard/_dashboard_course_listing.html

@@ -42,7 +42,7 @@ from student.helpers import (
   % else:
     <% mode_class = '' %>
   % endif
-
+<div class="course-container">
 <article class="course${mode_class}">
   <% course_target = reverse('info', args=[unicode(course_overview.id)]) %>
   <section class="details">
@@ -319,26 +319,22 @@ from student.helpers import (
 
         % if course_mode_info['show_upsell'] and not is_course_blocked:
           <div class="message message-upsell has-actions is-shown">
-            <div class="wrapper-tip">
-              <h4 class="message-title">
-                <span class="value">${_("Challenge Yourself!")}</span>
-              </h4>
-              <p class="message-copy">${_("Take this course as an ID-verified student.")}</p>
-            </div>
 
             <div class="wrapper-extended">
-                <p class="message-copy">${_("You can still sign up for an ID verified {cert_name_long} for this course. If you plan to complete the whole course, it is a great way to recognize your achievement. {link_start}Learn more about the verified {cert_name_long}{link_end}.").format(link_start='<a href="{}">'.format(marketing_link('WHAT_IS_VERIFIED_CERT')), link_end="</a>", cert_name_long=cert_name_long)}</p>
-
-              <ul class="actions message-actions">
-                <li class="action-item">
+                <p class="message-copy" align="justify">
+                  <b class="message-copy-bold">
+                    ${_("Pursue a {cert_name_long} to highlight the knowledge and skills you gain in this course.").format(cert_name_long=cert_name_long)}
+                  </b><br>
+                    ${_("It's official. It's easily shareable. It's a proven motivator to complete the course. <br>{link_start}Learn more about the verified {cert_name_long}{link_end}.").format(link_start='<a href="{}">'.format(marketing_link('WHAT_IS_VERIFIED_CERT')), link_end="</a>", cert_name_long=cert_name_long)}
+                </p>
+                <div class="action-upgrade-container">
                   <a class="action action-upgrade" href="${reverse('verify_student_upgrade_and_verify', kwargs={'course_id': unicode(course_overview.id)})}" data-course-id="${course_overview.id | h}" data-user="${user.username | h}">
-                    <img class="deco-graphic" src="${static.url('images/vcert-ribbon-s.png')}" alt="${_("ID Verified Ribbon/Badge")}">
+                      <i class="action-upgrade-icon"></i>
                     <span class="wrapper-copy">
-                      <span class="copy" id="upgrade-to-verified">${_("Upgrade to Verified Track")}</span>
+                      <span class="copy" id="upgrade-to-verified">${_("Upgrade to Verified")}</span>
                     </span>
                   </a>
-                </li>
-              </ul>
+                </div>
             </div>
           </div>
         %endif
@@ -383,6 +379,7 @@ from student.helpers import (
     </ul>
   </footer>
 </article>
+</div>
 </li>
 <script>
            $( document ).ready(function() {