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:
-

- - ${_("Pursue a {cert_name_long} to highlight the knowledge and skills you gain in this course.").format(cert_name_long=cert_name_long)} -
- ${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('
'), - link_start=HTML('').format( - marketing_link('WHAT_IS_VERIFIED_CERT'), - enrollment.course_id - ), - link_end=HTML(''), - cert_name_long=cert_name_long - )} -

+
+ +
+ ${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(''), + end_bold=HTML(''), + link_start=HTML('').format( + marketing_link('WHAT_IS_VERIFIED_CERT'), + enrollment.course_id + ), + link_end=HTML(''), + cert_name_long=cert_name_long + )} +
+