Add "Applications" header on applications page

styles/components/_portfolio_layout.scss

@@ -89,6 +89,30 @@
   margin-top: 6 * $gap;
 }
 
+.portfolio-applications {
+  .portfolio-applications__header {
+    margin-bottom: 4 * $gap;
+
+    .portfolio-applications__header--title {
+      color: $color-gray-dark;
+      padding: $gap 0;
+      text-transform: uppercase;
+      opacity: 0.54;
+      font-size: $small-font-size;
+      font-weight: bold;
+    }
+
+    .portfolio-applications__header--actions {
+      color: $color-blue;
+      font-size: $small-font-size;
+      .icon {
+        @include icon-color($color-blue);
+        @include icon-size(14);
+      }
+    }
+  }
+}
+
 .portfolio-funding {
   .portfolio-funding__header {
     padding: 0;

templates/portfolios/applications/index.html

@@ -3,11 +3,24 @@
 
 {% extends "portfolios/base.html" %}
 
+{% set can_create_applications = user_can(permissions.ADD_APPLICATION_IN_PORTFOLIO) %}
+
 {% block portfolio_content %}
 
-{% if not portfolio.applications %}
+<div class='portfolio-applications'>
+  <div class='portfolio-applications__header row'>
+    <div class='portfolio-applications__header--title col col--grow'>Applications</div>
+    <div class='portfolio-applications__header--actions col'>
+      {% if can_create_applications %}
+        <a class='icon-link' href='{{ url_for('portfolios.new_application', portfolio_id=portfolio.id) }}'>
+          Add A New Application
+          {{ Icon("plus", classes="sidenav__link-icon") }}
+        </a>
+      {% endif %}
+    </div>
+  </div>
 
-  {% set can_create_applications = user_can(permissions.ADD_APPLICATION_IN_PORTFOLIO) %}
+  {% if not portfolio.applications %}
 
     {{ EmptyState(
       'This portfolio doesn’t have any applications yet.',
@@ -50,5 +63,6 @@
 
   {% endif %}
 
-{% endblock %}
+</div>
 
+{% endblock %}