LMS: adding in basic is-deprecated visual styling

lms/static/sass/base/_base.scss

@@ -315,6 +315,11 @@ mark {
   display: none;
 }
 
+// UI - is deprecated
+.is-deprecated {
+  @extend %ui-deprecated;
+}
+
 // UI - semantically hide text
 .sr {
   @extend %text-sr;

lms/static/sass/base/_extends.scss

@@ -113,3 +113,10 @@
     padding: 0;
   }
 }
+
+%ui-deprecated {
+  @extend %t-weight4;
+  background: tint($warning-color, 85%);
+  padding: ($baseline/5) ($baseline/2);
+  color: shade($warning-color, 45%);
+}

lms/static/sass/course/instructor/_instructor.scss

@@ -2,11 +2,6 @@
   display: table;
   position: relative;
 
-  // deprecated content
-  .deprecated {
-    font-style: italic;
-  }
-
   .beta-button-wrapper {
     position: absolute;
     top: 2em;

lms/templates/courseware/legacy_instructor_dashboard.html

@@ -201,7 +201,7 @@ function goto( mode)
     </div>
     % endif
 
-    <p class="deprecated">
+    <p class="is-deprecated">
       ${_("To view the Gradebook (small courses only), please visit the 'Student Admin' section of the instructor dashboard.")}
     </p>
     <p>
@@ -225,7 +225,7 @@ function goto( mode)
   %if not settings.FEATURES.get('ENABLE_ASYNC_ANSWER_DISTRIBUTION'):
     <input type="submit" name="action" value="Download CSV of answer distributions" class="${'is-disabled' if disable_buttons else ''}">
   %endif
-    <p  class="deprecated">
+    <p  class="is-deprecated">
       ${_("To view the graded assignments configuration, please visit the 'Data Download' section of the instructor dashboard.")}
     </p>
     </p>
@@ -267,13 +267,13 @@ function goto( mode)
   %if settings.FEATURES.get('ENABLE_INSTRUCTOR_BACKGROUND_TASKS'):
     <H2>${_("Course-specific grade adjustment")}</h2>
 
-    <p class="deprecated">${_("To perform these actions, please visit the 'Student Admin' section of the instructor dashboard.")}</p>
+    <p class="is-deprecated">${_("To perform these actions, please visit the 'Student Admin' section of the instructor dashboard.")}</p>
 
   %endif
 
     <h2>${_("Student-specific grade inspection and adjustment")}</h2>
 
-    <p class="deprecated">${_("To perform these actions, please visit the 'Student Admin' section of the instructor dashboard.")}</p>
+    <p class="is-deprecated">${_("To perform these actions, please visit the 'Student Admin' section of the instructor dashboard.")}</p>
 
  %endif
 
@@ -302,11 +302,11 @@ function goto( mode)
 %if modeflag.get('Admin'):
 
   %if instructor_access:
-    <p class="deprecated">${_("To add or remove course staff, please visit the 'Membership' section of the instructor dashboard.")}</p>
+    <p class="is-deprecated">${_("To add or remove course staff, please visit the 'Membership' section of the instructor dashboard.")}</p>
   %endif
 
   %if admin_access:
-    <p class="deprecated">${_("To add or remove course instructors, please visit the 'Membership' section of the instructor dashboard.")}</p>
+    <p class="is-deprecated">${_("To add or remove course instructors, please visit the 'Membership' section of the instructor dashboard.")}</p>
   %endif
 
   %if settings.FEATURES['ENABLE_MANUAL_GIT_RELOAD'] and admin_access:
@@ -318,7 +318,7 @@ function goto( mode)
 
 ##-----------------------------------------------------------------------------
 %if modeflag.get('Forum Admin'):
-    <p class="deprecated">${_("To manage forum roles, please visit the 'Membership' section of the instructor dashboard.")}</p>
+    <p class="is-deprecated">${_("To manage forum roles, please visit the 'Membership' section of the instructor dashboard.")}</p>
 %endif
 
 ##-----------------------------------------------------------------------------
@@ -369,7 +369,7 @@ function goto( mode)
 
 %if modeflag.get('Data'):
     <hr width="40%" style="align:left">
-    <p class="deprecated">
+    <p class="is-deprecated">
       ${_("To download student profile data, please visit the 'Data Download' section of the instructor dashboard.")}
     </p>
 
@@ -378,7 +378,7 @@ function goto( mode)
         <input type="submit" name="action" value="Download CSV of all responses to problem">
     </p>
 
-    <p class="deprecated">
+    <p class="is-deprecated">
       ${_("To download student anonymized IDs, please visit the 'Data Download' section of the instructor dashboard.")}
     </p>
     <hr width="40%" style="align:left">
@@ -388,10 +388,10 @@ function goto( mode)
 
 %if modeflag.get('Manage Groups'):
   %if instructor_access:
-    <p class="deprecated">${_("To manage beta tester roles, please visit the 'Membership' section of the instructor dashboard.")}</p>
+    <p class="is-deprecated">${_("To manage beta tester roles, please visit the 'Membership' section of the instructor dashboard.")}</p>
 
     %if course.is_cohorted:
-    <p class="deprecated">${_("To manage course cohorts, please visit the 'Membership' section of the instructor dashboard.")}</p>
+    <p class="is-deprecated">${_("To manage course cohorts, please visit the 'Membership' section of the instructor dashboard.")}</p>
     %endif
 
   %endif
@@ -400,7 +400,7 @@ function goto( mode)
 ##-----------------------------------------------------------------------------
 
 %if modeflag.get('Email'):
-    <p class="deprecated">${_("To send email, please visit the 'Email' section of the instructor dashboard.")}</p>
+    <p class="is-deprecated">${_("To send email, please visit the 'Email' section of the instructor dashboard.")}</p>
 %endif
 
     </form>
@@ -697,7 +697,7 @@ function goto( mode)
     <br/>
     <br/>
     <h2>${_("Course Statistics At A Glance")}</h2>
-    <p class="deprecated">
+    <p class="is-deprecated">
       ${_("These statistics can be viewed under the 'Admin' tab of the legacy instructor dashboard.")}
     </p>
 %endif