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;
+    font-weight: $font-bold;
-
-    line-height: 1.2;
-    max-width: 15em;
-    color: $color-gray;
-
-    @include media($large-screen) {
-      @include h1;
-    }
   }
 
   &__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-color($color-white) @include icon-size(12) margin: 0;
-    @include icon-size(12)
-    margin: 0;
   }
 }

templates/fragments/environments.html

@@ -3,85 +3,99 @@
 {% 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) %}
+{% macro EnvironmentManagementTemplate(
-  <h3>{{ 'common.resource_names.environments' | translate }}</h3>
+  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 %}
-    <div class="panel__content">
+    {% if 0 == environments_obj | length -%}
-      <div class="accordion-table accordion-table-list">
+      <div class="empty-state panel__content">
-        <ul class="accordion-table__items">
+        <p class="empty-state__message">
-          {% for env in environments_obj %}
+          This Application has no environments
-            {% set edit_form = env['edit_form'] %}
+        </p>
-            <toggler inline-template>
-              <li class="accordion-table__item">
-                <div class="accordion-table__item-content">
-                  <div class="environment-list__item">
-                    <span>
-                      {{ env['name'] }}
-                    </span>
-                    {% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %}
-                    {{
-                      ToggleButton(
-                        open_html=members_button,
-                        close_html=members_button,
-                        section_name="members",
-                        classes="environment-list__item__members"
-                      )
-                    }}
-                    {% set edit_environment_button = "Edit" %}
-                    {{
-                    ToggleButton(
-                      open_html=edit_environment_button,
-                      close_html=edit_environment_button,
-                      section_name="edit"
-                      )
-                    }}
-                    <br>
-                    {% if env['pending'] -%}
-                      <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>
-                      </a>
-                    {%- endif %}
-                  </div>
-                </div>
-
-                {% call ToggleSection(section_name="members") %}
-                  <ul>
-                    {% for member in env['members'] %}
-                    <li class="accordion-table__item-toggle-content__expanded">
-                      {{ member }}
-                    </li>
-                    {% endfor %}
-                  </ul>
-                {% endcall %}
-
-                {% call ToggleSection(section_name="edit") %}
-                  <ul>
-                    <li class="accordion-table__item-toggle-content__expanded">
-                      <form action="{{ url_for('applications.update_environment', environment_id=env['id']) }}" method="post" v-on:submit="handleSubmit">
-                        {{ edit_form.csrf_token }}
-                        {{ TextInput(edit_form.name, validation='requiredField') }}
-                        {{
-                          SaveButton(
-                            text=("common.save" | translate)
-                          )
-                        }}
-                      </form>
-                    </li>
-                  </ul>
-                {% endcall %}
-              </li>
-            </toggler>
-          {% endfor %}
-        </ul>
       </div>
-    </div>
+    {% else %}
-    {% if user_can_create_environment %}
+      <div class="panel__content">
+        <div class="accordion-table accordion-table-list">
+          <ul class="accordion-table__items">
+            {% for env in environments_obj %}
+              {% set edit_form = env['edit_form'] %}
+              <toggler inline-template>
+                <li class="accordion-table__item">
+                  <div class="accordion-table__item-content">
+                    <div class="environment-list__item">
+                      <span>
+                        {{ env['name'] }}
+                      </span>
+                      {% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %}
+                      {{
+                        ToggleButton(
+                          open_html=members_button,
+                          close_html=members_button,
+                          section_name="members",
+                          classes="environment-list__item__members"
+                        )
+                      }}
+                      {% set edit_environment_button = "Edit" %}
+                      {{
+                      ToggleButton(
+                        open_html=edit_environment_button,
+                        close_html=edit_environment_button,
+                        section_name="edit"
+                        )
+                      }}
+                      <br>
+                      {% if env['pending'] -%}
+                        <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>
+                        </a>
+                      {%- endif %}
+                    </div>
+                  </div>
+
+                  {% call ToggleSection(section_name="members") %}
+                    <ul>
+                      {% for member in env['members'] %}
+                      <li class="accordion-table__item-toggle-content__expanded">
+                        {{ member }}
+                      </li>
+                      {% endfor %}
+                    </ul>
+                  {% endcall %}
+
+                  {% call ToggleSection(section_name="edit") %}
+                    <ul>
+                      <li class="accordion-table__item-toggle-content__expanded">
+                        <form action="{{ url_for('applications.update_environment', environment_id=env['id']) }}" method="post" v-on:submit="handleSubmit">
+                          {{ edit_form.csrf_token }}
+                          {{ TextInput(edit_form.name, validation='requiredField') }}
+                          {{
+                            SaveButton(
+                              text=("common.save" | translate)
+                            )
+                          }}
+                        </form>
+                      </li>
+                    </ul>
+                  {% endcall %}
+                </li>
+              </toggler>
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+    {%- 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