Merge pull request #23858 from edx/mikix/less-upselling

Reduce upselling on Dates tab

lms/static/sass/course/_dates.scss

@@ -5,10 +5,39 @@
 
   .date-title {
     color: #414141;
-    font-weight: 500;
+    font-size: 24px;
     border-bottom: 0;
   }
 
+  .upgrade-banner {
+    border-radius: 4px;
+    border: solid 1px #9cd2e6;
+    background-color: #eff8fa;
+    margin-top: 20px;
+    margin-bottom: 40px;
+    padding: 24px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+    max-width: $text-width-readability-max;
+
+    .upgrade-banner-text {
+      font-size: 16px;
+      line-height: 24px;
+      color: #414141;
+      flex: 1 1 20em;
+    }
+
+    .upgrade-button {
+      align-self: start;
+      flex: none;
+
+      button {
+        @include white-button-flat-outline;
+      }
+    }
+  }
+
   .timeline-item {
     border-left: solid 1px #2d323e;
     color: #2d323e;
@@ -55,6 +84,13 @@
     }
   }
 
+  .no-access {
+    // This is too low-contrast for a11y purposes. But since it only applies to pieces of the page that are
+    // inaccessible to users, and we have a banner explaining the parts that are inaccessible at the top,
+    // we're OK from an accessibility point of view.
+    color: #d1d2d4;
+  }
+
   .timeline-date-content {
     @include font-size(16);
 

lms/static/sass/course/base/_mixins.scss

@@ -45,6 +45,21 @@
   }
 }
 
+@mixin white-button-flat-outline {
+  display: block;
+  border-radius: 2px;
+  border: solid 1px #0175b4;
+  background: white;
+  color: #2d323e;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 24px;
+
+  &:hover, &:focus, &:active {
+    box-shadow: 0 2px 1px $shadow;
+  }
+}
+
 @mixin dark-grey-button {
   display: block;
   height: 35px;

lms/templates/courseware/dates.html

@@ -26,9 +26,29 @@ from openedx.core.djangolib.markup import HTML, Text
                 <h2 class="hd hd-2 date-title">
                     ${_("Important Dates")}
                 </h2>
+                <% has_locked_assignments = any(hasattr(block, 'requires_full_access') and block.requires_full_access 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">
+                            <strong>${_('You are auditing this course.')}</strong>
+                            ${_('This means that you are unable to participate in graded assignments.')}
+                            ${_('To complete graded assignments as part of this course, you can upgrade today.')}
+                        </div>
+                        <div class="upgrade-button">
+                            <a href="${verified_upgrade_link}">
+                                <button type="button">
+                                    ${_('Upgrade now')}
+                                </button>
+                            </a>
+                        </div>
+                    </div>
+                % endif
+
                 % for block in course_date_blocks:
                     <% active = 'active' if block.date and (block.date.strftime(block.date_format) == block.current_time.strftime(block.date_format)) else '' %>
                     <% block_is_verified = (hasattr(block, 'requires_full_access') and block.requires_full_access) or isinstance(block, VerificationDeadlineDate) %>
+                    <% learner_has_access = not block_is_verified or learner_is_verified %>
+                    <% access_class = '' if learner_has_access else 'no-access' %>
                     <% is_assignment = isinstance(block, CourseAssignmentDate) %>
                     % if not (learner_is_verified and isinstance(block, VerifiedUpgradeDeadlineDate)):
                         <div class="timeline-item ${active}">
@@ -42,27 +62,20 @@ from openedx.core.djangolib.markup import HTML, Text
                                             % if active:
                                                 <div class="pill due">${_('Due Today')}</div>
                                             % endif
-                                            % if block_is_verified and not learner_is_verified:
+                                            % if not learner_has_access:
                                                 <div class="pill verified"><span class="fa fa-lock verified-icon" aria-hidden="true"></span>${_('Verified Only')}</div>
                                             % endif
                                         % endif
                                 </div>
-                                <div class="timeline-title ">
-                                    % if block.title_html and is_assignment:
+                                <div class="timeline-title ${access_class}">
+                                    % if block.title_html and is_assignment and learner_has_access:
                                         ${block.title_html}
                                     % else:
                                         ${block.title}
                                     % endif
                                 </div>
-                                <div class="timeline-description">
+                                <div class="timeline-description ${access_class}">
                                     ${block.description}
-                                    % if block_is_verified and verified_upgrade_link and not learner_is_verified:
-                                        ${Text(_('{a_start}Upgrade{a_end}{space}to a Verified Certificate for full access.')).format(
-                                            a_start=HTML('<a href={link}>').format(link=verified_upgrade_link),
-                                            a_end=HTML('</a>'),
-                                            space=HTML('&nbsp'),
-                                        )}
-                                    % endif
                                 </div>
                             </div>
                         </div>