Update pending label

static/icons/exchange.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exchange-alt" class="svg-inline--fa fa-exchange-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M0 168v-16c0-13.255 10.745-24 24-24h360V80c0-21.367 25.899-32.042 40.971-16.971l80 80c9.372 9.373 9.372 24.569 0 33.941l-80 80C409.956 271.982 384 261.456 384 240v-48H24c-13.255 0-24-10.745-24-24zm488 152H128v-48c0-21.314-25.862-32.08-40.971-16.971l-80 80c-9.372 9.373-9.372 24.569 0 33.941l80 80C102.057 463.997 128 453.437 128 432v-48h360c13.255 0 24-10.745 24-24v-16c0-13.255-10.745-24-24-24z"></path></svg>

static/icons/link.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.321 10.68c-.256 0-.512-.098-.707-.293-1.953-1.954-1.953-5.132 0-7.085L7.465 1.45C8.411.504 9.67-.017 11.008-.017s2.596.521 3.542 1.467 1.468 2.205 1.468 3.543-.521 2.596-1.468 3.542c-.391.391-1.023.391-1.414 0s-.391-1.024 0-1.414c.568-.569.882-1.325.882-2.128 0-.804-.313-1.56-.882-2.129-1.137-1.137-3.12-1.137-4.257 0L7.028 4.715c-1.173 1.174-1.173 3.083 0 4.257.391.391.391 1.023 0 1.414-.195.196-.451.294-.707.294zm-1.293 5.302c-1.338 0-2.596-.521-3.542-1.468C.54 13.569.018 12.31.018 10.972S.539 8.376 1.485 7.43c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414c-.569.568-.882 1.325-.882 2.129s.313 1.56.882 2.128c1.138 1.137 3.119 1.137 4.257 0l1.699-1.699c.568-.568.882-1.324.882-2.128s-.313-1.56-.882-2.129c-.391-.39-.391-1.023 0-1.414s1.023-.391 1.414 0c.946.946 1.468 2.204 1.468 3.543 0 1.338-.521 2.597-1.468 3.542L8.57 14.515c-.946.946-2.204 1.467-3.542 1.467z"/></svg>
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="external-link-alt" class="svg-inline--fa fa-external-link-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path></svg>

styles/elements/_labels.scss

@@ -4,7 +4,8 @@
  * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_labels.scss
  */
 
-.label {
+.label,
+.usa-label {
   @include h5;
 
   display: inline-block;
@@ -15,7 +16,7 @@
   vertical-align: middle;
   margin: 0 $gap;
   padding: 0 $gap;
-  border-radius: $gap / 2;
+  border-radius: $gap / 3;
   white-space: nowrap;
 
   &--info {
@@ -37,4 +38,14 @@
   &--purple {
     background-color: $color-purple;
   }
+
+  &--below {
+    margin-left: 0;
+  }
+
+  .icon {
+    @include icon-color($color-white)
+    @include icon-size(12)
+    margin: 0;
+  }
 }

templates/applications/settings.html

@@ -100,7 +100,7 @@
                     }}
                     <br>
                     {% if env['pending'] -%}
-                      <span class='usa-label'>PROCESSING</span>
+                      <span class='usa-label label--below'>{{Icon('exchange')}} CHANGES PENDING</span>
                     {% 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>