Re-Add demographics prompt to edx.org theme (#24231)

- Add bootstrap utility function to lms-base-v1 CSS
- Moved coaching sass to edx.org theme
- Banner feature flag and MB program gated
- Fixes previous issue of changes specificity in button selector by
  resetting the style inside the component's class

common/djangoapps/student/views/dashboard.py

@@ -785,6 +785,14 @@ def student_dashboard(request):
             enr for enr in course_enrollments if entitlement.enrollment_course_run.course_id != enr.course_id
         ]
 
+    # Collect all program types the user is enrolled in
+    enrolled_program_types = []
+    if getattr(settings, 'ENABLE_DEMOGRAPHICS_COLLECTION', False):
+        enrolled_program_types = {
+            _program.get('type_attrs', {}).get('slug')
+            for _program in meter.engaged_programs
+            if _program.get('type_attrs', {}).get('slug') is not None
+        }
     context = {
         'urls': urls,
         'programs_data': programs_data,
@@ -834,6 +842,7 @@ def student_dashboard(request):
         'recovery_email_message': recovery_email_message,
         'recovery_email_activation_message': recovery_email_activation_message,
         'show_load_all_courses_link': show_load_all_courses_link(user, course_limit, course_enrollments),
+        'enrolled_program_types': enrolled_program_types,
         # TODO START: clean up as part of REVEM-199 (START)
         'course_info': get_dashboard_course_info(user, course_enrollments),
         # TODO START: clean up as part of REVEM-199 (END)

lms/static/sass/base/_build.scss

@@ -7,10 +7,20 @@
 @import 'bootstrap/variables';
 @import 'bootstrap/scss/functions';
 @import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins/background-variant';
 @import 'bootstrap/scss/mixins/box-shadow';
 @import 'bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/float';
 @import 'bootstrap/scss/mixins/grid';
+@import 'bootstrap/scss/mixins/hover';
 @import 'bootstrap/scss/mixins/reset-text';
+@import 'bootstrap/scss/mixins/screen-reader';
+@import 'bootstrap/scss/mixins/text-truncate';
+@import 'bootstrap/scss/mixins/text-emphasis';
+@import 'bootstrap/scss/mixins/text-hide';
+@import 'bootstrap/scss/mixins/visibility';
+@import 'bootstrap/scss/utilities';
+
 
 // Bootstrap components
 @import 'bootstrap/scss/popover';

lms/static/sass/elements/_system-feedback.scss

@@ -120,7 +120,7 @@
       box-shadow: none;
       border-top: 1px solid #579cc5;
       padding: 20px 20px 20px 40px;
-      margin: -16px 0 5px 0;
+      margin: -16px 0 10px 0;
     }
 
     .fa-close {

lms/static/sass/multicourse/_dashboard.scss

@@ -525,6 +525,8 @@
     order: 2;
 
     .wrapper-find-courses {
+      margin-bottom: $baseline * 0.5;
+
       .course-advertise {
         @include clearfix();
 
@@ -576,31 +578,9 @@
       }
     }
 
-    .wrapper-coaching {
-      border: 1px solid $border-color-l3;
-      margin: 20px 0;
-
-      .coaching-signup {
-        padding: 20px;
-
-        .coaching-prompt {
-          font-size: 20px;
-          line-height: 28px;
-          font-weight: bold;
-        }
-
-        .coaching-link .btn-neutral {
-          display: block;
-          text-align: center;
-          margin: 20px 20px 0;
-          border-radius: 20px;
-          padding: 10px;
-          border: 1px solid theme-color('primary');
-        }
-      }
-    }
-
     .profile-sidebar {
+      margin-bottom: $baseline * 0.5;
+
       ul {
         padding: 0;
         border: 1px solid theme-color("light");
@@ -609,7 +589,6 @@
 
     // Responsive behavior
     @include media-breakpoint-down(md) {
-      margin: 0 $baseline $baseline*2;
       padding: 0;
       max-width: 100%;
     }

themes/edx.org/lms/static/sass/partials/lms/theme/_dashboard.scss

@@ -0,0 +1,58 @@
+.dashboard {
+  .demographics-banner {
+    background-color: #23419f;
+    border-radius: 12px;
+    @media (min-width: 1200px) {
+      height: 64px;
+    }
+    .demographics-banner-icon {
+      height: 140px;
+    }
+    .demographics-banner-prompt {
+      font-size: 24px;
+      line-height: 24px;
+    }
+    .demographics-banner-btn {
+      color: #23419f;
+      border-radius: 20px;
+      font-size: 14px;
+      min-width: 150px;
+      /* Below are to override the overly-broad `button` selectors in lms/static/sass/shared/_forms.scss */
+      box-shadow: unset;
+      text-shadow: unset;
+      font: unset;
+      letter-spacing: unset;
+      background-image: unset;
+
+      .fa-thumbs-up {
+        font-size: 24px;
+      }
+    }
+  }
+  .side-container {
+    .wrapper-coaching {
+      border: 1px solid $gray-500;
+      margin-bottom: $baseline * 0.5;
+
+      .coaching-signup {
+        padding: 20px;
+
+        .coaching-prompt {
+          font-size: 20px;
+          line-height: 28px;
+          font-weight: bold;
+        }
+
+
+        .coaching-link .btn-neutral {
+          display: block;
+          text-align: center;
+          margin: 20px 20px 0;
+          border-radius: 20px;
+          padding: 10px;
+          border: 1px solid theme-color('primary');
+        }
+      }
+    }
+  }
+}

themes/edx.org/lms/static/sass/partials/lms/theme/_extras.scss

@@ -7,6 +7,7 @@
 // rules into modular pieces.
 
 @import 'certificates';
+@import 'dashboard';
 
 
 // Ensure the header matches the edx.org marketing site header

themes/edx.org/lms/templates/dashboard.html

@@ -140,6 +140,26 @@ from student.models import CourseEnrollment
 
 <section class="dashboard" id="dashboard-main">
 <main class="main-container" id="main" aria-label="Content" tabindex="-1">
+  <%
+    MB_SLUG = "microbachelors"
+    enrolled_in_mb_program = MB_SLUG in enrolled_program_types
+    account_mfe_url = getattr(settings, 'ACCOUNT_MICROFRONTEND_URL', '') or ''
+  %>
+  % if getattr(settings, 'ENABLE_DEMOGRAPHICS_COLLECTION', False) and enrolled_in_mb_program:
+    <a href="${account_mfe_url}#demographics">
+      <div
+        class="demographics-banner d-flex justify-content-left align-items-center flex-column flex-lg-row py-1 px-4 mb-2 mb-lg-4">
+        <img class="demographics-banner-icon d-none d-lg-inline-block" src="${static.url('edx.org/images/quote_prompt.png')}" alt="" aria-hidden="true">
+        <div class="demographics-banner-prompt d-inline-block font-weight-bold text-white py-4 px-2 px-lg-3">
+          ${_("Want to make edX better for everyone?")}
+        </div>
+        <button class="demographics-banner-btn d-flex align-items-center bg-white font-weight-bold border-0 py-2 px-3 mx-2 mb-3 m-lg-0 shadow">
+          <span class="fa fa-thumbs-up px-2" aria-hidden="true"></span>
+          ${_("Get started")}
+        </button>
+      </div>
+    </a>
+  % endif
   <section class="my-courses" id="my-courses">
     <header class="wrapper-header-courses">
       <h2 class="header-courses">${_("My Courses")}</h2>