diff --git a/lms/static/images/icon-sm-verified.png b/lms/static/images/icon-sm-verified.png new file mode 100644 index 0000000000..b394da6041 Binary files /dev/null and b/lms/static/images/icon-sm-verified.png differ diff --git a/lms/static/sass/elements/_controls.scss b/lms/static/sass/elements/_controls.scss index b5fc942284..0400d9d15d 100644 --- a/lms/static/sass/elements/_controls.scss +++ b/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%); diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index d4d7a351f2..52c87bb66d 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/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); diff --git a/lms/templates/dashboard/_dashboard_course_listing.html b/lms/templates/dashboard/_dashboard_course_listing.html index 0798c9d920..10f66f91ad 100644 --- a/lms/templates/dashboard/_dashboard_course_listing.html +++ b/lms/templates/dashboard/_dashboard_course_listing.html @@ -42,7 +42,7 @@ from student.helpers import ( % else: <% mode_class = '' %> % endif - +
<% course_target = reverse('info', args=[unicode(course_overview.id)]) %>
@@ -319,26 +319,22 @@ from student.helpers import ( % if course_mode_info['show_upsell'] and not is_course_blocked:
-
-

- ${_("Challenge Yourself!")} -

-

${_("Take this course as an ID-verified student.")}

-
-

${_("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=''.format(marketing_link('WHAT_IS_VERIFIED_CERT')), link_end="", cert_name_long=cert_name_long)}

- - +
%endif @@ -383,6 +379,7 @@ from student.helpers import ( +