Add label macro

templates/applications/fragments/environments.html

@@ -1,4 +1,5 @@
 {% from "components/icon.html" import Icon %}
+{% from "components/label.html" import Label %}
 {% from 'components/save_button.html' import SaveButton %}
 {% from "components/text_input.html" import TextInput %}
 {% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
@@ -51,7 +52,7 @@
                       }}
                       <br>
                       {% if env['pending'] -%}
-                        <span class='usa-label label--below'>{{Icon('exchange')}} CHANGES PENDING</span>
+                        {{ Label('exchange', 'Changes Pending', classes='label--below')}}
                       {% else %}
                         <a href='{{ url_for("applications.access_environment", environment_id=env.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link'>
                           <span>{{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }}</span>

templates/applications/fragments/members.html

@@ -1,5 +1,6 @@
 {% from "components/alert.html" import Alert %}
 {% from "components/icon.html" import Icon %}
+{% from "components/label.html" import Label %}
 {% import "applications/fragments/new_member_modal_content.html" as member_steps %}
 {% import "applications/fragments/member_form_fields.html" as member_fields %}
 {% from "components/modal.html" import Modal %}
@@ -131,7 +132,7 @@
                   </a>
                   <br>
                   {% if member.role_status == 'pending' %}
-                    <span class='label label--purple'>INVITE PENDING</span>
+                    {{ Label('envelope', 'invite pending', 'success', classes='label--below') }}
                   {% endif %}
 
                 </td>

templates/components/label.html

@@ -0,0 +1,8 @@
+{% from "components/icon.html" import Icon %}
+
+{% macro Label(icon_name, text, type=None, classes="") -%}
+
+  <span class='label {% if type %}label--{{ type }}{% endif %} {{ classes }}'>
+    {{ Icon(icon_name) }} {{ text }}
+  </span>
+{%- endmacro %}