Add sticky header to App settings page

styles/components/_sticky_cta.scss

@@ -4,7 +4,6 @@
   z-index: 10;
 
   @include media($medium-screen) {
-    margin-left: -$gap * 5;
     margin-right: -$gap * 5;
   }
 
@@ -53,4 +52,10 @@
       }
     }
   }
+
+  &-return-link {
+    padding-top: 1.6rem;
+    font-size: $small-font-size;
+    font-weight: $font-bold;
+  }
 }

templates/components/sticky_cta.html

@@ -1,12 +1,23 @@
-{% macro StickyCTA(text) -%}
+{% from 'components/icon.html' import Icon %}
+
+{% macro StickyCTA(text, return_link_url=None, return_link_text=None) -%}
     <div class="sticky-cta" v-sticky='{ "stickyBitStickyOffset": 76 }'>
         <div class="sticky-cta-container">
             <div class="sticky-cta-text">
+                {% if return_link_url and return_link_text %}
+                  <div class="sticky-cta-return-link">
+                    <a href="{{ return_link_url }}">
+                      {{ Icon('caret_left', classes="icon--tiny icon--blue") }} {{ return_link_text}}
+                    </a>
+                  </div>
+                {% endif %}
                 <h3>{{ text }}</h3>
             </div>
+            {% if caller %}
               <div class="sticky-cta-buttons">
                   {{ caller() }}
               </div>
+            {% endif %}
         </div>
     </div>
 {%- endmacro %}

templates/portfolios/applications/base.html

@@ -1,11 +1,11 @@
 {% extends "portfolios/base.html" %}
 
+{% from "components/sticky_cta.html" import StickyCTA %}
+
 {% block portfolio_header %}
-<div class='portfolio-header'>
-  <div class='portfolio-header__name'>
-    {{ secondary_breadcrumb }}
-  </div>
-</div>
+  {% if application %}
+    {{ StickyCTA(text=application.name, return_link_url=url_for('applications.portfolio_applications', portfolio_id=application.portfolio_id), return_link_text="BACK TO APPLICATIONS") }}
+  {% endif %}
 {% endblock %}
 
 {% block portfolio_content %}