Merge pull request #28462 from edx/mikix/banner-style

fix: modernize look of in-xblock shift-dates banner

common/lib/xmodule/xmodule/vertical_block.py

@@ -101,7 +101,7 @@ class VerticalBlock(SequenceFields, XModuleFields, StudioEditableBlock, XmlParse
         completed = self.is_block_complete_for_assignments(completion_service)
         past_due = completed is False and self.due and self.due < datetime.now(pytz.UTC)
         cta_service = self.runtime.service(self, 'call_to_action')
-        vertical_banner_ctas = (cta_service and cta_service.get_ctas(self, 'vertical_banner', completed)) or []  # lint-amnesty, pylint: disable=consider-using-ternary
+        vertical_banner_ctas = cta_service.get_ctas(self, 'vertical_banner', completed) if cta_service else []
 
         fragment_context = {
             'items': contents,

lms/static/sass/course/layout/_banner_cta.scss

@@ -25,8 +25,8 @@
 
 .banner-cta {
     border-radius: 4px;
-    border: solid 1px #9cd2e6;
-    background-color: #eff8fa;
+    border: solid 1px $state-warning-border;
+    background-color: $state-warning-bg;
     margin-top: 20px;
     margin-bottom: 20px;
     padding: 24px;
@@ -34,11 +34,12 @@
     flex-wrap: wrap;
     justify-content: space-between;
     max-width: $text-width-readability-max;
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15), 0px 1px 4px rgba(0, 0, 0, 0.15);
 
     .banner-cta-text {
       font-size: 16px;
       line-height: 24px;
-      color: #414141;
+      color: $state-warning-text;
 
       a.mobile-dates-link {
         color: #0075b4;

openedx/core/lib/xblock_services/call_to_action.py

@@ -19,7 +19,7 @@ class CallToActionService(PluginManager):
         See the CallToActionService class constants for a list of recognized categories.
 
         Returns: list of dictionaries, describing the calls to action, with the following keys:
-                 link, link_name, form_values, and description.
+                 link, link_name, form_values, and description (which can include html tags).
                  If the category is not recognized, an empty list is returned.
 
         An example of a returned list:
@@ -32,7 +32,7 @@ class CallToActionService(PluginManager):
             # A long-form description to be associated with the CTA
             'description': "If you don't want to do this problem, just skip it!",
             # A data set we include if the CTA is being rendered within an iframe. For example,
-            # we do this in Learning MFE. This dictionary is passed to its's parent container via
+            # we do this in Learning MFE. This dictionary is passed to its parent container via
             # parent.postMessage.  Parent containers should use window.onmessage event handler to
             # catch this dataset.
             'event_data': {

openedx/features/personalized_learner_schedules/call_to_action.py

@@ -11,6 +11,7 @@ from django.urls import reverse
 from django.utils.translation import ngettext, gettext as _
 
 from xmodule.util.misc import is_xblock_an_assignment
+from openedx.core.djangolib.markup import HTML, Text
 from openedx.core.lib.mobile_utils import is_request_from_mobile_app
 from openedx.features.course_experience.url_helpers import is_request_from_learning_mfe
 from openedx.features.course_experience.utils import dates_banner_should_display
@@ -119,9 +120,14 @@ class PersonalizedLearnerScheduleCallToAction:
             'form_values': {
                 'course_id': course_key,
             },
-            'description': _('To participate in this assignment, the suggested schedule for your course needs '
-                             'updating. Don’t worry, we’ll shift all the due dates for you and you won’t lose '
-                             'any of your progress.'),
+            'description': Text('{b_open}{header}{b_close} {explanation}').format(
+                b_open=HTML('<b>'),
+                b_close=HTML('</b>'),
+                header=_('It looks like you missed some important deadlines based on our suggested schedule.'),
+                explanation=_('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.'),
+            ),
         }
 
         has_attempts = hasattr(xblock, 'attempts') and hasattr(xblock, 'max_attempts')