replaced learner analytics alert views with pattern library

analytics_dashboard/static/apps/learners/common/templates/alert.underscore

 <div class="row">
-    <div class="col col-12 sm-col-12">
-        <div class="col col-12 sm-col-12 <%- containerClass %>" role="alert">
-            <div class="col col-1 sm-col-1">
-                <span data-placement="top" class="fa <%- iconClass %> fa-3 alert" aria-hidden="true"></span>
-            </div>
-            <div class="col col-11 sm-col-11">
-                <div class="short-message">
-                    <%- title %>
-                </div>
+    <div class="alert <%- containerClass %>" role="alert" aria-labelledby="alert-title-information" tabindex="-1">
+        <span class="icon alert-icon fa <%- iconClass %>" aria-hidden="true"></span>
+
+        <div class="alert-message">
+            <h3 class="alert-title" id="alert-title-information">
+                <%- title %>
+            </h3>
+            <p class="alert-copy-with-title">
                 <% if (body) { %>
-                    <div class="alert-body">
-                        <%- body %>
-                    </div>
+                    <%- body %>
                 <% } %>
                 <% if (suggestions.length) { %>
-                    <div>
-                        <ul class="suggestions">
-                            <% suggestions.map(function (suggestion) { %>
-                                <li><%- suggestion %></li>
-                            <% }); %>
-                        </ul>
-                    </div>
+                    <ul class="suggestions">
+                        <% suggestions.map(function (suggestion) { %>
+                            <li><%- suggestion %></li>
+                        <% }); %>
+                    </ul>
                 <% } %>
                 <% if (link) { %>
                     <div class="link">
                         <a href="<%- link.url %>"><%- link.text %></a>
                     </div>
                 <% } %>
-            </div>
+            </p>
         </div>
     </div>
 </div>

analytics_dashboard/static/apps/learners/common/views/alert-view.js

@@ -19,11 +19,11 @@ define(function(require) {
         alertTypes: {
             error: {
                 iconClass: 'fa-exclamation-triangle',
-                containerClass: 'alert-error-container'
+                containerClass: 'alert-error'
             },
             info: {
                 iconClass: 'fa-bullhorn',
-                containerClass: 'alert-info-container'
+                containerClass: 'alert-information'
             }
         },
 

analytics_dashboard/static/sass/_config-variables.scss

@@ -249,10 +249,5 @@ $footer-sock-height: $footer-height + $sock-height;
 $description-border-color: $edx-gray-l1;
 $description-border: 1px solid $description-border-color;
 
-// alerts
-$alert-background-color: rgb(242, 242, 242);
-$alert-error-color: rgb(195, 53, 59);
-$alert-info-color: rgb(111, 160, 186);
-
 // FontAwesome font directory
 $fa-font-path: "/static/bower_components/font-awesome/fonts";

analytics_dashboard/static/sass/_developer.scss

@@ -103,14 +103,6 @@ button.chart-info {
   }
 }
 
-.alert-error-container {
-  // @include alert-container($alert-error-color);
-}
-
-.alert-info-container {
-  // @include alert-container($alert-info-color);
-}
-
 .white-background {
   background-color: white;
 }

analytics_dashboard/static/sass/_mixins.scss

@@ -35,39 +35,3 @@
     background-color: $navbar-default-link-disabled-bg;
   }
 }
-
-@mixin alert-container($alert-color) {
-  padding: $padding-large-horizontal $padding-large-vertical;
-  padding-bottom: ($padding-large-horizontal * 2) - $padding-small-horizontal;
-  margin-bottom: $padding-large-horizontal * 2;
-  background-color: $alert-background-color;
-  border-top: 4px solid $alert-color;
-
-  i.alert {
-    color: $alert-color;
-    font-size: $font-size-large * 2;
-    padding: 0;
-  }
-
-  .short-message {
-    font-size: $font-size-large;
-    font-weight: 700;
-    padding-bottom: $padding-small-horizontal;
-  }
-
-  .alert-body, .link {
-    padding-bottom: $padding-small-horizontal;
-  }
-
-  // this keeps the gray borders from touching the top band at a 45 degree angle
-  &:before {
-    border: $description-border;
-    border-top: none;
-    content: "";
-    position: absolute;
-    bottom: 0;
-    top: 0;
-    left: 0;
-    right: 0;
-  }
-}