converting instructor dashboard message UI to use .is-hidden vs.is-shown stateful CSS classes

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

@@ -51,10 +51,6 @@
     .copy {
       font-weight: 600;
     }
-
-    &.is-shown {
-      display: block;
-    }
   }
 
   // TYPE: warning
@@ -63,10 +59,6 @@
     background: tint($warning-color,95%);
     display: none;
     color: $warning-color;
-
-    &.is-shown {
-      display: block;
-    }
   }
 
   // TYPE: confirm
@@ -75,10 +67,6 @@
     background: tint($confirm-color,95%);
     display: none;
     color: $confirm-color;
-
-    &.is-shown {
-      display: block;
-    }
   }
 
   // TYPE: confirm
@@ -89,10 +77,6 @@
     .copy {
       color: $error-color;
     }
-
-    &.is-shown {
-      display: block;
-    }
   }
 
   // inline copy
@@ -224,12 +208,13 @@ section.instructor-dashboard-content-2 {
   // messages
   .message {
     margin-bottom: $baseline;
-    display: none;
+    display: block;
     border-radius: 1px;
     padding: ($baseline*0.75) $baseline;
 
-    &.is-shown {
-      display: block;
+    // CASE: is hidden
+    &.is-hidden {
+      display: none;
     }
   }
 

lms/templates/instructor/instructor_dashboard_2/notification.underscore

@@ -1,4 +1,4 @@
-<div class="message message-<%= type %> is-shown">
+<div class="message message-<%= type %>">
     <h3 class="message-title">
         <%- title %>
     </h3>

lms/templates/ux/reference/instructor_dashboard/membership.html

@@ -285,7 +285,7 @@
             </div>
 
             <!-- message - error - bad configuration -->
-            <div class="message message-error is-shown">
+            <div class="message message-error">
                 <h3 class="message-title">There's currently an error with your cohorts configuration within this course.</h3>
 
                 <div class="message-copy">
@@ -352,11 +352,11 @@
             </div>
 
             <!-- create/edit cohort group messages -->
-            <div class="message message-confirmation is-shown">
+            <div class="message message-confirmation">
                 <h3 class="message-title">New Cohort Name has been created. You can manually add students to this group below.</h3>
             </div>
 
-            <div class="message message-error is-shown">
+            <div class="message message-error">
                 <h3 class="message-title">Special characters are not allowed in cohort group names</h3>
             </div>
 
@@ -406,7 +406,7 @@
                         </div>
 
                         <!-- individual group - form message - confirmation -->
-                        <div class="message message-confirmation is-shown">
+                        <div class="message message-confirmation">
                             <h3 class="message-title">2,546 students have been added to this cohort group</h3>
 
                             <div class="message-copy">
@@ -419,7 +419,7 @@
                         </div>
 
                         <!-- individual group - form message - error (collapsed) -->
-                        <div class="message message-error is-shown">
+                        <div class="message message-error">
                             <h3 class="message-title">There were 25 errors when trying to add students:</h3>
 
                             <div class="message-copy">