From d000eb4f67c486d3c35d15bd82ec2b6b043bb999 Mon Sep 17 00:00:00 2001
From: Michael Terry <mterry@edx.org>
Date: Mon, 4 Jan 2021 11:43:30 -0500
Subject: [PATCH] AA-505: Some design updates for courseware "shift dates" UI

- Makes the action buttons underneath problems into link buttons
  instead of push buttons. Per UI team
- Updates some colors of status pills like "Past due" or "Completed"
---
 .../lib/xmodule/xmodule/css/capa/display.scss | 27 ++++++++++---------
 lms/static/sass/course/_dates.scss            | 12 ++++-----
 .../sass/course/courseware/_courseware.scss   | 14 +++++-----
 .../sass/course/layout/_banner_cta.scss       |  1 -
 lms/templates/dates_banner.html               |  2 +-
 lms/templates/problem.html                    | 12 ++++-----
 lms/templates/vert_module.html                |  6 ++---
 7 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index 3270c6bcde..9fb644bce9 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -970,21 +970,26 @@ div.problem .action {
   }
 
   .problem-action-button-wrapper {
-    @include border-right(1px solid $light-gray1);
+    @include border-right(1px solid $gray-300);
+    @include padding(0, 13px); // to create a 26px gap, which is an a11y recommendation
 
     display: inline-block;
 
     &:last-child {
       border: none;
+      padding-right: 0;
     }
   }
 
   .problem-action-btn {
-    @include margin-right($baseline / 5);
-
+    border: none;
     max-width: 110px;
-    text-decoration: underline;
-    text-transform: none;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: $primary !important;
+    }
 
     .icon {
       margin-bottom: $baseline / 10;
@@ -994,12 +999,13 @@ div.problem .action {
     @media print {
       display: none;
     }
-
   }
 
   .submit-attempt-container {
     padding-bottom: $baseline;
     flex-grow: 1;
+    display: flex;
+    align-items: center;
 
     @media (max-width: $bp-screen-lg) {
       max-width: 100%;
@@ -1013,19 +1019,14 @@ div.problem .action {
       white-space: nowrap;
     }
 
-    .submit-cta {
-        display: inline-block;
-    }
     .submit-cta-description {
-        color: $blue;
+        color: $primary;
         font-size: small;
         padding-right: $baseline / 2;
     }
     .submit-cta-link-button {
-        border: none;
+        color: $primary;
         padding-right: $baseline / 4;
-        text-decoration: underline;
-        text-transform: none;
     }
   }
 
diff --git a/lms/static/sass/course/_dates.scss b/lms/static/sass/course/_dates.scss
index 9fa6b3753f..e89262f25a 100644
--- a/lms/static/sass/course/_dates.scss
+++ b/lms/static/sass/course/_dates.scss
@@ -40,7 +40,7 @@
       background-color: #f5f5f5;
 
       &.past-due {
-        background-color: #d1d2d4;
+        background-color: #475b65;
       }
     }
 
@@ -147,13 +147,12 @@
     padding: 2px 8px;
     border-radius: 5px;
     margin-left: 8px;
-    font-style: italic;
-    font-weight: bold;
+    font-weight: normal;
     vertical-align: top;
 
     &.completed {
-      background-color: #f3f3f4;
-      color: #2d323e;
+      background-color: #f0f2f2;
+      color: #212529;
     }
 
     &.due-next {
@@ -170,7 +169,8 @@
     }
 
     &.past-due {
-      background-color: #d1d2d4;
+      background-color: #475b65;
+      color: #fff;
     }
 
     &.today {
diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss
index de9df3eb3d..67a5a70405 100644
--- a/lms/static/sass/course/courseware/_courseware.scss
+++ b/lms/static/sass/course/courseware/_courseware.scss
@@ -534,22 +534,22 @@ html.video-fullscreen {
 
       .pill {
         font-size: 12px;
-        max-height: 20px;
+        line-height: 14px;
+        max-height: 16px;
         padding: 2px 8px;
         border-radius: 5px;
+        margin-top: 4px;
         margin-left: 8px;
-        font-style: italic;
-        font-weight: bold;
         vertical-align: top;
 
         &.completed {
-          background-color: #f3f3f4;
-          color: #2d323e;
+          background-color: #f0f2f2;
+          color: #212529;
         }
 
         &.past-due {
-          background-color: #d1d2d4;
-          color: black;
+          background-color: #475b65;
+          color: #fff;
         }
       }
     }
diff --git a/lms/static/sass/course/layout/_banner_cta.scss b/lms/static/sass/course/layout/_banner_cta.scss
index bad337c9c2..b6ac4ca609 100644
--- a/lms/static/sass/course/layout/_banner_cta.scss
+++ b/lms/static/sass/course/layout/_banner_cta.scss
@@ -4,7 +4,6 @@
     border-radius: 2px;
     border: solid 1px #0175b4;
     font-size: 14px;
-    font-weight: bold;
     line-height: 24px;
     padding: 7px 18px;
 
diff --git a/lms/templates/dates_banner.html b/lms/templates/dates_banner.html
index 8e95f78df7..594fb7991c 100644
--- a/lms/templates/dates_banner.html
+++ b/lms/templates/dates_banner.html
@@ -30,7 +30,7 @@ additional_styling_class = 'on-mobile' if is_mobile_app else 'has-button'
                 <form method="post" action="${reset_deadlines_url}">
                     <input type="hidden" id="csrf_token" name="csrfmiddlewaretoken" value="${csrf_token}">
                     <input type="hidden" name="course_id" value="${course.id}">
-                    <button class="btn">${_("Shift due dates")}</button>
+                    <button class="btn btn-outline-primary">${_("Shift due dates")}</button>
                 </form>
             </div>
         % endif
diff --git a/lms/templates/problem.html b/lms/templates/problem.html
index 7ed8b4a16e..60d27b4ff5 100644
--- a/lms/templates/problem.html
+++ b/lms/templates/problem.html
@@ -29,12 +29,12 @@ from openedx.core.djangolib.markup import HTML
     <div class="problem-action-buttons-wrapper">
       % if demand_hint_possible:
       <span class="problem-action-button-wrapper">
-          <button type="button" class="hint-button problem-action-btn btn-default btn-small" data-value="${_('Hint')}" ${'' if should_enable_next_hint else 'disabled'}>${_('Hint')}</button>
+          <button type="button" class="hint-button problem-action-btn btn-link btn-small" data-value="${_('Hint')}" ${'' if should_enable_next_hint else 'disabled'}>${_('Hint')}</button>
       </span>
       % endif
       % if save_button:
       <span class="problem-action-button-wrapper">
-          <button type="button" class="save problem-action-btn btn-default btn-small" data-value="${_('Save')}">
+          <button type="button" class="save problem-action-btn btn-link btn-small" data-value="${_('Save')}">
               <span aria-hidden="true">${_('Save')}</span>
               <span class="sr">${_("Save your answer")}</span>
           </button>
@@ -42,12 +42,12 @@ from openedx.core.djangolib.markup import HTML
       % endif
       % if reset_button:
       <span class="problem-action-button-wrapper">
-          <button type="button" class="reset problem-action-btn btn-default btn-small" data-value="${_('Reset')}"><span aria-hidden="true">${_('Reset')}</span><span class="sr">${_("Reset your answer")}</span></button>
+          <button type="button" class="reset problem-action-btn btn-link btn-small" data-value="${_('Reset')}"><span aria-hidden="true">${_('Reset')}</span><span class="sr">${_("Reset your answer")}</span></button>
       </span>
       % endif
       % if answer_available:
       <span class="problem-action-button-wrapper">
-          <button type="button" class="show problem-action-btn btn-default btn-small" aria-describedby="${ short_id }-problem-title"><span class="show-label">${_('Show answer')}</span></button>
+          <button type="button" class="show problem-action-btn btn-link btn-small" aria-describedby="${ short_id }-problem-title"><span class="show-label">${_('Show answer')}</span></button>
       </span>
       % endif
     </div>
@@ -58,7 +58,7 @@ from openedx.core.djangolib.markup import HTML
 
       % if submit_disabled_cta:
         % if submit_disabled_cta.get('event_data'):
-          <button class="submit-cta-link-button btn-default btn-small" onclick="emit_event(${submit_disabled_cta['event_data']})">
+          <button class="submit-cta-link-button btn-link btn-small" onclick="emit_event(${submit_disabled_cta['event_data']})">
             ${submit_disabled_cta['link_name']}
           </button>
           <span class="submit-cta-description" tabindex="0" role="note" aria-label="description">
@@ -73,7 +73,7 @@ from openedx.core.djangolib.markup import HTML
               % for form_name, form_value in submit_disabled_cta['form_values'].items():
                   <input type="hidden" name="${form_name}" value="${form_value}">
               % endfor
-              <button class="submit-cta-link-button btn-default btn-small">
+              <button class="submit-cta-link-button btn-link btn-small">
                 ${submit_disabled_cta['link_name']}
               </button>
               <span class="submit-cta-description" tabindex="0" role="note" aria-label="description">
diff --git a/lms/templates/vert_module.html b/lms/templates/vert_module.html
index b1042a0ec8..131bbfc8ca 100644
--- a/lms/templates/vert_module.html
+++ b/lms/templates/vert_module.html
@@ -27,7 +27,7 @@ from openedx.core.djangolib.markup import HTML
     % if completed:
       <div class="pill completed">${_('Completed')}</div>
     % elif past_due:
-      <div class="pill past-due">${_('Past Due')}</div>
+      <div class="pill past-due">${_('Past due')}</div>
     % endif
   </div>
 % endif
@@ -42,7 +42,7 @@ from openedx.core.djangolib.markup import HTML
       <div class="banner-cta-text">${vertical_banner_cta['description']}</div>
       % if vertical_banner_cta.get('event_data'):
         <div class="banner-cta-button">
-            <button class="btn" onclick="emit_event(${vertical_banner_cta['event_data']})">${vertical_banner_cta['link_name']}</button>
+            <button class="btn btn-outline-primary" onclick="emit_event(${vertical_banner_cta['event_data']})">${vertical_banner_cta['link_name']}</button>
         </div>
       % else:
         <div class="banner-cta-button">
@@ -51,7 +51,7 @@ from openedx.core.djangolib.markup import HTML
             % for form_name, form_value in vertical_banner_cta['form_values'].items():
               <input type="hidden" name="${form_name}" value="${form_value}">
             % endfor
-            <button class="btn">${vertical_banner_cta['link_name']}</button>
+            <button class="btn btn-outline-primary">${vertical_banner_cta['link_name']}</button>
           </form>
         </div>
      % endif