From 069aea8f4042fb47994ab763fbb7f8552b1f7911 Mon Sep 17 00:00:00 2001
From: Carla Duarte <cduarte@edx.org>
Date: Wed, 13 May 2020 13:18:35 -0400
Subject: [PATCH] Dates Intro Messaging

Added a banner to introduce learners to the Dates Tab.
The banner is hidden when the learner has missed deadlines.

Refactored naming conventions in the dates sass file to better
reflect the function of our banners.

AA-156
---
 lms/static/sass/course/_dates.scss  | 11 +++++++----
 lms/static/sass/course/_info.scss   |  2 +-
 lms/templates/courseware/dates.html | 17 +++++++++++++----
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/lms/static/sass/course/_dates.scss b/lms/static/sass/course/_dates.scss
index 743bcd18ac..4207a44e9f 100644
--- a/lms/static/sass/course/_dates.scss
+++ b/lms/static/sass/course/_dates.scss
@@ -9,7 +9,7 @@
     border-bottom: 0;
   }
 
-  .upgrade-banner {
+  .dates-banner {
     border-radius: 4px;
     border: solid 1px #9cd2e6;
     background-color: #eff8fa;
@@ -21,14 +21,17 @@
     justify-content: space-between;
     max-width: $text-width-readability-max;
 
-    .upgrade-banner-text {
+    .dates-banner-text {
       font-size: 16px;
       line-height: 24px;
       color: #414141;
-      flex: 1 1 20em;
-      max-width: 70%;
     }
 
+      .banner-has-button {
+          flex: 1 1 20em;
+          max-width: 70%;
+      }
+
     .upgrade-button {
       align-self: start;
       flex: none;
diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss
index 4cacfa3316..ab6f6a4f17 100644
--- a/lms/static/sass/course/_info.scss
+++ b/lms/static/sass/course/_info.scss
@@ -58,7 +58,7 @@ div.info-wrapper {
     width: 100%;
     display: block;
 
-    div.upgrade-banner {
+    div.dates-banner {
       // This banner uses the Pattern Library's defined variables
       @include border-left(0);
 
diff --git a/lms/templates/courseware/dates.html b/lms/templates/courseware/dates.html
index 127e2a147d..6b13518f95 100644
--- a/lms/templates/courseware/dates.html
+++ b/lms/templates/courseware/dates.html
@@ -26,10 +26,19 @@ from openedx.core.djangolib.markup import HTML, Text
                 <h2 class="hd hd-2 date-title">
                     ${_("Important Dates")}
                 </h2>
+                % if not display_reset_dates_text:
+                    <div class="dates-banner">
+                        <div class="dates-banner-text">
+                            <strong>${_("We've built a suggested schedule to help you stay on track.")}</strong>
+                            ${_("But don't worry—it's flexible so you can learn at your own pace.")}
+                            ${_("If you happen to fall behind on our suggested dates, you'll be able to adjust them to keep yourself on track.")}
+                        </div>
+                    </div>
+                % endif
                 <% has_locked_assignments = any(hasattr(block, 'contains_gated_content') and block.contains_gated_content for block in course_date_blocks if isinstance(block, CourseAssignmentDate)) %>
                 % if has_locked_assignments and verified_upgrade_link:
-                    <div class="upgrade-banner">
-                        <div class="upgrade-banner-text">
+                    <div class="dates-banner">
+                        <div class="dates-banner-text banner-has-button">
                             <strong>${_('You are auditing this course,')}</strong>
                             ${_(' which means that you are unable to participate in graded assignments.')}
                             % if display_reset_dates_text:
@@ -52,8 +61,8 @@ from openedx.core.djangolib.markup import HTML, Text
                     </div>
                 % endif
                 % if display_reset_dates_text and learner_is_verified:
-                    <div class="upgrade-banner">
-                        <div class="upgrade-banner-text">
+                    <div class="dates-banner">
+                        <div class="dates-banner-text banner-has-button">
                             <strong>${_('It looks like you missed some important deadlines based on our suggested schedule.')}</strong>
                             ${_('To keep yourself on track, you can update this schedule and shift the past due assignments into the future. Don’t worry—you won’t lose any of the progress you’ve made when you shift your due dates. ')}
                         </div>