LMS: abstracts consistent message/copy color styling from Instructor Dashboard view

LMS: adds message styling to the separate instructor_2 Sass file

lms/static/sass/base/_variables.scss

@@ -219,6 +219,11 @@ $action-secondary-disabled-fg: $white;
 $header-graphic-super-color: $m-blue-d1;
 $header-graphic-sub-color: $m-gray-d2;
 
+// State-based colors
+$error-color: $error-red;
+$warning-color: $m-pink;
+$confirm-color: $m-green;
+
 // ====================
 
 // MISC: visual horizontal rules

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

@@ -40,6 +40,8 @@
     }
   }
 
+  // ====================
+
   // system feedback - messages
   .msg {
     border-radius: 1px;
@@ -51,15 +53,51 @@
     }
   }
 
+  // TYPE: warning
+  .msg-warning {
+    border-top: 2px solid $warning-color;
+    background: tint($warning-color,95%);
+
+    .copy {
+      color: $warning-color;
+    }
+  }
+
+  // TYPE: confirm
   .msg-confirm {
-    border-top: 2px solid green;
-    background: tint(green,90%);
+    border-top: 2px solid $confirm-color;
+    background: tint($confirm-color,95%);
+
+    .copy {
+      color: $confirm-color;
+    }
+  }
+
+  // TYPE: confirm
+  .msg-error {
+    border-top: 2px solid $error-color;
+    background: tint($error-color,95%);
 
     .copy {
-      color: green;
+      color: $error-color;
     }
   }
 
+  // ====================
+
+  // inline copy
+  .copy-confirm {
+    color: $confirm-color;
+  }
+
+  .copy-warning {
+    color: $warning-color;
+  }
+
+  .copy-error {
+    color: $error-color;
+  }
+
   .list-advice {
     list-style: none;
     padding: 0;

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

@@ -18,6 +18,77 @@
     right: 15px;
     font-size: 11pt;
   }
+
+  // system feedback - messages
+  .msg {
+    border-radius: 1px;
+    padding: 10px 15px;
+    margin-bottom: 20px;
+
+    .copy {
+      font-weight: 600;
+    }
+  }
+
+  // TYPE: warning
+  .msg-warning {
+    border-top: 2px solid $warning-color;
+    background: tint($warning-color,95%);
+
+    .copy {
+      color: $warning-color;
+    }
+  }
+
+  // TYPE: confirm
+  .msg-confirm {
+    border-top: 2px solid $confirm-color;
+    background: tint($confirm-color,95%);
+
+    .copy {
+      color: $confirm-color;
+    }
+  }
+
+  // TYPE: confirm
+  .msg-error {
+    border-top: 2px solid $error-color;
+    background: tint($error-color,95%);
+
+    .copy {
+      color: $error-color;
+    }
+  }
+
+  // ====================
+
+  // inline copy
+  .copy-confirm {
+    color: $confirm-color;
+  }
+
+  .copy-warning {
+    color: $warning-color;
+  }
+
+  .copy-error {
+    color: $error-color;
+  }
+
+  .list-advice {
+    list-style: none;
+    padding: 0;
+    margin: 20px 0;
+
+    .item {
+      font-weight: 600;
+      margin-bottom: 10px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
 }
 
 section.instructor-dashboard-content-2 {

lms/templates/courseware/instructor_dashboard.html

@@ -146,23 +146,32 @@ function goto( mode)
 %if modeflag.get('Grades'):
 
     %if offline_grade_log:
-      <p><font color='orange'>Pre-computed grades ${offline_grade_log} available: Use?
-          <input type='checkbox' name='use_offline_grades' value='${_("yes")}'></font> </p>
+      <p>
+        <span class="copy-warning">Pre-computed grades ${offline_grade_log} available: Use?
+          <input type='checkbox' name='use_offline_grades' value='${_("yes")}'>
+        </span>
+      </p>
     %endif
 
 
     <hr width="40%" style="align:left">
     <h2>${_("Grade Downloads")}</h2>
     % if disable_buttons:
-      <p><font color="red">
-        ${_("Note: some of these buttons are known to time out for larger "
-            "courses. We have temporarily disabled those features for courses "
-            "with more than {max_enrollment} students. We are urgently working on "
-            "fixing this issue. Thank you for your patience as we continue "
-            "working to improve the platform!").format(
-            max_enrollment=settings.MITX_FEATURES['MAX_ENROLLMENT_INSTR_BUTTONS']
-          )}
-      </font></p>
+
+    <div class="msg msg-warning">
+
+      <div class="copy">
+        <p>
+          ${_("Note: some of these buttons are known to time out for larger "
+              "courses. We have temporarily disabled those features for courses "
+              "with more than {max_enrollment} students. We are urgently working on "
+              "fixing this issue. Thank you for your patience as we continue "
+              "working to improve the platform!").format(
+              max_enrollment=settings.MITX_FEATURES['MAX_ENROLLMENT_INSTR_BUTTONS']
+            )}
+        </p>
+      </div>
+    </div>
     % endif
 
     <p>
@@ -203,7 +212,7 @@ function goto( mode)
     <p>${_("The assignments defined for this course should match the ones stored in the gradebook, for this to work properly!")}</p>
 
     <ul>
-    <li>${_("Gradebook name:")} <font color="green">${rg.get('name','None defined!')}</font>
+    <li>${_("Gradebook name:")} <span class="copy-confirm">${rg.get('name','None defined!')}</span>
     <br/>
     <br/>
     <input type="submit" name="action" value="List assignments available in remote gradebook">
@@ -386,16 +395,20 @@ function goto( mode)
     <hr width="40%" style="align:left">
     <h2>${_("Enrollment Data")}</h2>
     % if disable_buttons:
-    <p><font color="red">
-        ${_("Note: some of these buttons are known to time out for larger "
-            "courses. We have temporarily disabled those features for courses "
-            "with more than {max_enrollment} students. We are urgently working on "
-            "fixing this issue. Thank you for your patience as we continue "
-            "working to improve the platform!").format(
-            max_enrollment=settings.MITX_FEATURES['MAX_ENROLLMENT_INSTR_BUTTONS']
-          )}
-      </font></p>
-      <br>
+
+    <div class="msg msg-warning">
+      <div class="copy">
+        <p>
+          ${_("Note: some of these buttons are known to time out for larger "
+              "courses. We have temporarily disabled those features for courses "
+              "with more than {max_enrollment} students. We are urgently working on "
+              "fixing this issue. Thank you for your patience as we continue "
+              "working to improve the platform!").format(
+              max_enrollment=settings.MITX_FEATURES['MAX_ENROLLMENT_INSTR_BUTTONS']
+            )}
+        </p>
+      </div>
+    </div>
     % endif
 
     <input type="submit" name="action" value="List enrolled students" class="${'is-disabled' if disable_buttons else ''}">
@@ -410,7 +423,7 @@ function goto( mode)
 
     <p>${_("Pull enrollment from remote gradebook")}</p>
     <ul>
-    <li>${_("Gradebook name:")} <font color="green">${rg.get('name','None defined!')}</font>
+    <li>${_("Gradebook name:")} <span class="copy-confirm">${rg.get('name','None defined!')}</span>
     <li>${_("Section:")} <input type="text" name="gradebook_section" size=40 value="${rg.get('section','')}"></li>
     </ul>
     <input type="submit" name="action" value="List sections available in remote gradebook">

lms/templates/instructor/instructor_dashboard_2/data_download.html

@@ -4,7 +4,9 @@
 
 <h2>${_("Data Download")}</h2>
 % if disable_buttons:
-	<p><font color="red">
+<div class="msg msg-warning">
+	<div class="copy">
+		<p>
 	    ${_("Note: some of these buttons are known to time out for larger "
 			"courses. We have temporarily disabled those features for courses "
 			"with more than {max_enrollment} students. We are urgently working on "
@@ -12,7 +14,9 @@
 			"working to improve the platform!").format(
 	        max_enrollment=settings.MITX_FEATURES['MAX_ENROLLMENT_INSTR_BUTTONS']
 	      )}
-	</font></p>
+		</p>
+	</div>
+</div>
 	<br>
 % endif