From 30e4b43700898939c145d0c8459910b0e588efa8 Mon Sep 17 00:00:00 2001
From: JJ <34042537+jhan217@users.noreply.github.com>
Date: Thu, 6 May 2021 11:59:19 -0400
Subject: [PATCH] refactor: update verified upgrade sections on course dasboard
 [REV-2129] (#27435)

Update the styling and verbiage used in the course upgrade sections of the course dashboard cards.
---
 lms/static/sass/multicourse/_dashboard.scss   | 63 +++++++++++++++++--
 .../dashboard/_dashboard_course_listing.html  | 36 +++++------
 2 files changed, 76 insertions(+), 23 deletions(-)

diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index 7d2161d196..d63f9a9f08 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -778,6 +778,11 @@
 
     // TYPE: upsell
     &.message-upsell {
+      padding-left: $baseline;
+      padding-top: $baseline;
+      padding-bottom: $baseline;
+      background-color: #F2F0EF;
+
       .wrapper-tip {
         @include clearfix();
 
@@ -801,13 +806,61 @@
       }
 
       .wrapper-extended {
-        padding: ($baseline/4) 0;
+        display: flex;
+        flex-flow: column wrap;
+        color: #00262B;
 
-        .message-copy {
-          display: inline-block;
+        .wrapper-icon-message {
+          width: 100%;
+          display: inline-flex;
+          flex-wrap: wrap;
 
-          .message-copy-bold {
-            font-weight: 600;
+          svg {
+            flex-shrink: 0;
+            width: 43px;
+            height: 43px;
+            margin-left: -5px;
+          }
+
+          .message-copy {
+            margin-left: $baseline/2;
+            min-width: 15rem;
+            flex: 2;
+
+            .message-copy-bold {
+              font-weight: $font-weight-bold;
+            }
+          }
+
+          a.verified-info {
+            color: #00262B;
+            text-decoration: underline;
+          }
+        }
+
+        .action-upgrade-container {
+          flex-shrink: 0;
+          flex-grow: 1;
+          align-self: flex-end;
+        }
+
+        @include media-breakpoint-down(xs) {
+          .action-upgrade-container {
+            width: 100%;
+            margin-top: $baseline;
+          }
+
+          .action-upgrade {
+            width: 100%;
+            flex: 2 100%;
+          }
+        }
+
+        @include media-breakpoint-up(xl) {
+          flex-flow: nowrap;
+
+          .action-upgrade-container {
+            margin-left: 16px;
           }
         }
       }
diff --git a/lms/templates/dashboard/_dashboard_course_listing.html b/lms/templates/dashboard/_dashboard_course_listing.html
index 6e97c65616..1a0e733822 100644
--- a/lms/templates/dashboard/_dashboard_course_listing.html
+++ b/lms/templates/dashboard/_dashboard_course_listing.html
@@ -405,31 +405,31 @@ from lms.djangoapps.experiments.utils import UPSELL_TRACKING_FLAG
         % if course_mode_info and course_mode_info['show_upsell'] and not entitlement:
           <div class="message message-upsell has-actions is-shown">
             <div class="wrapper-extended">
-              <p class="message-copy" align="auto">
-                <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>
-                  ${Text(_("It's official. It's easily shareable. "
-                      "It's a proven motivator to complete the course. {line_break}"
-                      "{link_start}Learn more about the verified {cert_name_long}{link_end}.")).format(
-                        line_break=HTML('<br>'),
-                        link_start=HTML('<a href="{}" class="verified-info" data-course-key="{}">').format(
-                          marketing_link('WHAT_IS_VERIFIED_CERT'),
-                          enrollment.course_id
-                        ),
-                        link_end=HTML('</a>'),
-                        cert_name_long=cert_name_long
-                      )}
-              </p>
+              <div class="wrapper-icon-message">
+                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="" aria-hidden="true" focusable="false">
+                  <path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94A5.01 5.01 0 0011 15.9V19H7v2h10v-2h-4v-3.1a5.01 5.01 0 003.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z" fill="currentColor"></path>
+                </svg>
+                <div class="message-copy" align="auto">
+                  ${Text(_("{start_bold}Get the most out of your course!{end_bold} Upgrade to get full access to the course material, unlock both graded and non-graded assignments, and earn a {link_start}verified certificate{link_end} to showcase on your resume.")).format(
+                          start_bold=HTML('<strong class="message-copy-bold">'),
+                          end_bold=HTML('</strong>'),
+                          link_start=HTML('<a href="{}" class="verified-info" data-course-key="{}">').format(
+                            marketing_link('WHAT_IS_VERIFIED_CERT'),
+                            enrollment.course_id
+                          ),
+                          link_end=HTML('</a>'),
+                          cert_name_long=cert_name_long
+                        )}
+                </div>
+              </div>
               <div class="action-upgrade-container">
                 % if use_ecommerce_payment_flow and course_mode_info['verified_sku']:
                   <a class="action action-upgrade track_course_dashboard_green_button" href="${ecommerce_payment_page}?sku=${course_mode_info['verified_sku']}">
                 % else:
                   <a class="action action-upgrade track_course_dashboard_green_button" href="${IDVerificationService.get_verify_location(course_id=course_overview.id)}" data-course-id="${course_overview.id}" data-user="${user.username}">
                 % endif
-                    <span class="action-upgrade-icon" aria-hidden="true"></span>
                   <span class="wrapper-copy">
-                    <span class="copy" id="upgrade-to-verified">${_("Upgrade to Verified")}</span>
+                    <span class="copy" id="upgrade-to-verified">${_("Upgrade")}</span>
                       <span class="sr">&nbsp;${_(course_overview.display_name_with_default)}</span>
                   </span>
                 </a>