Remove alert on reports page

styles/components/_portfolio_layout.scss

@@ -89,17 +89,21 @@
   margin: 6 * $gap $gap 0 $gap;
 }
 
-.portfolio-applications {
-  .portfolio-applications__header {
-    margin-bottom: 4 * $gap;
-
-    .portfolio-applications__header--title {
+@mixin subheading {
   color: $color-gray-dark;
   padding: $gap 0;
   text-transform: uppercase;
   opacity: 0.54;
   font-size: $small-font-size;
   font-weight: bold;
+}
+
+.portfolio-applications {
+  .portfolio-applications__header {
+    margin-bottom: 4 * $gap;
+
+    .portfolio-applications__header--title {
+      @include subheading;
     }
 
     .portfolio-applications__header--actions {
@@ -281,3 +285,13 @@
     }
   }
 }
+
+.portfolio-reports {
+  .portfolio-reports__header {
+    margin-bottom: 4 * $gap;
+
+    .portfolio-reports__header--title {
+      @include subheading;
+    }
+  }
+}

templates/portfolios/reports/index.html

@@ -1,6 +1,5 @@
 {% extends "portfolios/base.html" %}
 
-{% from "components/alert.html" import Alert %}
 {% from "components/icon.html" import Icon %}
 {% from "components/empty_state.html" import EmptyState %}
 
@@ -8,13 +7,7 @@
 
 {% block portfolio_content %}
 
-  {{ Alert("Budget Report for Portfolio " + portfolio.name,
-    message="<p>Track your monthly and cumulative expenditures for your portfolio, applications, and environments below.</p>\
-      <p>Please note that the projected spend is based on the <em>average expense over the last three completed months</em> and therefore does not account for future changes that might be made in scale or configuration of your cloud services.</p>",
-    actions=[
-      {"label": "Learn More", "href": url_for('atst.helpdocs'), "icon": "info"}
-    ]  ) }}
-
+<div class='portfolio-reports'>
   <div v-cloak class='funding-summary-row'>
 
     <div class='funding-summary-row__col'>
@@ -442,7 +435,7 @@
         </table>
       </spend-table>
     </div>
-
   {% endif %}
+</div>
 
 {% endblock %}