Update styling for empty state and the app environments panel

styles/components/_empty_state.scss

@@ -1,30 +1,18 @@
 .empty-state {
   text-align: center;
-  padding: 6rem ($gap * 2) 0;
+  padding: 5rem ($gap * 2) 2rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   max-width: 100%;
 
-  @include media($medium-screen) {
-    padding: 8rem ($gap * 4) 0;
-  }
-
   > .icon {
     @include icon-size(50);
     @include icon-color($color-gray-light);
   }
 
   &__message {
-    @include h2;
-
-    line-height: 1.2;
-    max-width: 15em;
-    color: $color-gray;
-
-    @include media($large-screen) {
-      @include h1;
-    }
+    font-weight: $font-bold;
   }
 
   &__sub-message {

styles/components/_portfolio_layout.scss

@@ -239,7 +239,7 @@
 
     .panel {
       @include shadow-panel;
-      padding-bottom: 0;
+      padding-bottom: 2rem;
     }
 
     .application-list-item {

styles/elements/_labels.scss

@@ -44,8 +44,6 @@
   }
 
   .icon {
-    @include icon-color($color-white)
-    @include icon-size(12)
-    margin: 0;
+    @include icon-color($color-white) @include icon-size(12) margin: 0;
   }
 }

templates/fragments/environments.html

@@ -3,12 +3,25 @@
 {% from "components/text_input.html" import TextInput %}
 {% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
 
-{% macro EnvironmentManagementTemplate(application, environments_obj, new_env_form, user_can_create_environment) %}
-  <h3>{{ 'common.resource_names.environments' | translate }}</h3>
+{% macro EnvironmentManagementTemplate(
+  application,
+  environments_obj,
+  new_env_form,
+  user_can_create_environment
+) %}
+
+  <h3>{{ "portfolios.applications.settings.environments" | translate }}</h3>
   <section class="panel" id="application-environments">
-    {% if g.matchesPath("application-environments") %}
+    {% if g.matchesPath("application-environments") -%}
       {% include "fragments/flash.html" %}
-    {% endif %}
+    {%- endif %}
+    {% if 0 == environments_obj | length -%}
+      <div class="empty-state panel__content">
+        <p class="empty-state__message">
+          This Application has no environments
+        </p>
+      </div>
+    {% else %}
       <div class="panel__content">
         <div class="accordion-table accordion-table-list">
           <ul class="accordion-table__items">
@@ -80,8 +93,9 @@
           </ul>
         </div>
       </div>
-    {% if user_can_create_environment %}
+    {%- endif %}
+    {% if user_can_create_environment -%}
       {% include "applications/fragments/add_new_environment.html" %}
-    {% endif %}
+    {%- endif %}
   </section>
 {% endmacro %}

translations.yaml

@@ -377,6 +377,7 @@ portfolios:
     settings:
       name_description: Application name and description
       team_members: Team Members
+      environments: Application Environments
     team_settings:
       blank_slate:
         action_label: Invite a new team member