Minor adjustments new application flow step 2

- rearrange markup
- add previous and cancel button

styles/elements/_panels.scss

@@ -120,7 +120,8 @@
     @include panel-actions;
   }
 
-  hr, &__break {
+  hr,
+  &__break {
     border: 0;
     border-bottom: 1px solid $color-gray-light;
     margin: ($gap * 4) ($site-margins * -4);

templates/applications/new/step_2.html

@@ -16,61 +16,66 @@
 
   {% set modalName = "newApplicationConfirmation" %}
   {% include "fragments/flash.html" %}
-
+  <div class="panel__content">
-  <application-environments inline-template v-bind:initial-data='{{ form.data|tojson }}'>
+    <p>
-    <form method="POST" action="{{ url_for('applications.update_new_application_step_2', portfolio_id=portfolio.id, application_id=application.id) }}" v-on:submit="handleSubmit">
+      {{ 'portfolios.applications.new.step_2_description' | translate }}
-      <div class="panel">
+    </p>
-        <div class="panel__content">
+    <hr class="panel__break">
-          {{ form.csrf_token }}
+    <application-environments inline-template v-bind:initial-data='{{ form.data|tojson }}'>
-          <div> {# this extra div prevents this bug: https://www.pivotaltracker.com/story/show/160768940 #}
+      <form method="POST" action="{{ url_for('applications.update_new_application_step_2', portfolio_id=portfolio.id, application_id=application.id) }}" v-on:submit="handleSubmit">
-            <div v-cloak v-for="title in errors" :key="title">
+        <div class="subheading">{{ 'portfolios.applications.environments_heading' | translate }}</div>
-              {{ Alert(message=None, level="error", vue_template=True) }}
+        <div class="panel">
+          <div class="panel__content">
+            {{ form.csrf_token }}
+            <div> {# this extra div prevents this bug: https://www.pivotaltracker.com/story/show/160768940 #}
+              <div v-cloak v-for="title in errors" :key="title">
+                {{ Alert(message=None, level="error", vue_template=True) }}
+              </div>
             </div>
-          </div>
   
-          <div class="application-list-item">
+            <div class="application-list-item">
-            <header>
+              <ul>
-              <h2 class="block-list__title">{{ 'portfolios.applications.environments_heading' | translate }}</h2>
+                <li v-for="(environment, i) in environments" class="application-edit__env-list-item">
-              <p>
+                  <div class="usa-input">
-                {{ 'portfolios.applications.environments_description' | translate }}
+                    <label :for="'environment_names-' + i">Environment Name</label>
-              </p>
+                    <input type="text" :id="'environment_names-' + i" v-model="environment.name" @input="onInput" placeholder="e.g. Development, Staging, Production"/> <input type="hidden" :name="'environment_names-' + i" v-model="environment.name"/>
-            </header>
+                  </div>
+                  <div class="application-edit__env-list-item-block">
+                    <button v-on:click="removeEnvironment(i)" v-if="environments.length > 1" type="button" class="application-edit__env-list-item__remover">
+                      {{ Icon('trash') }}
+                      <span>Remove</span>
+                    </button>
+                  </div>
+                </li>
+              </ul>
   
-            <ul>
+              <div class="block-list__footer">
-              <li v-for="(environment, i) in environments" class="application-edit__env-list-item">
+                <button
-                <div class="usa-input">
+                  v-on:click="addEnvironment"
-                  <label :for="'environment_names-' + i">Environment Name</label>
+                  class="icon-link"
-                  <input type="text" :id="'environment_names-' + i" v-model="environment.name" @input="onInput" placeholder="e.g. Development, Staging, Production"/> <input type="hidden" :name="'environment_names-' + i" v-model="environment.name"/>
+                  tabindex="0"
-                </div>
+                  type="button">
-                <div class="application-edit__env-list-item-block">
+                  {{ 'portfolios.applications.add_another_environment' | translate }}
-                  <button v-on:click="removeEnvironment(i)" v-if="environments.length > 1" type="button" class="application-edit__env-list-item__remover">
+                  {{ Icon("plus") }}
-                    {{ Icon('trash') }}
+                </button>
-                    <span>Remove</span>
+              </div>
-                  </button>
-                </div>
-              </li>
-            </ul>
-
-            <div class="block-list__footer">
-              <button
-                v-on:click="addEnvironment"
-                class="icon-link"
-                tabindex="0"
-                type="button">
-                {{ 'portfolios.applications.add_another_environment' | translate }}
-                {{ Icon("plus") }}
-              </button>
-            </div>
           </div>    
         </div>
       </div>    
   
-      <span class="action-group">
+        <span class="action-group">
-        {% block next_button %}
+          {% block next_button %}
-          {{ SaveButton(text=('portfolios.applications.new.step_2_button_text' | translate)) }}
+            {{ SaveButton(text=('portfolios.applications.new.step_2_button_text' | translate)) }}
-        {% endblock %}
+          {% endblock %}
-      </span>
+          <a class="usa-button usa-button-secondary" href="{{ url_for('applications.view_new_application_step_1', application_id=application.id) }}">
-    </form>
+            Previous
-  </application-environments>
+          </a>
+          <a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
+            Cancel
+          </a>
+        </span>
+      </form>
+    </application-environments>
+  </div>
 
 {% endblock %}

translations.yaml

@@ -337,6 +337,7 @@ portfolios:
             </p>
           </div>
       step_2_header: Add Environments to {application_name}
+      step_2_description: "Production, Staging, Testing, and Development environments are included by default. However, you can add, edit, and delete environments based on the needs of your Project."
       step_2_button_text: "Save and Add Members"
       step_3_header: Invite Members to {application_name}
       step_3_button_text: Save Application
@@ -362,8 +363,7 @@ portfolios:
       delete:
         button: Delete environment
       edit_name: Edit name
-    environments_description: Each environment created within an application is logically separated from one another for easier management and security.
+    environments_heading: Project Environments
-    environments_heading: Application environments
     existing_application_title: '{application_name} Application Settings'
     member_count: '{count} members'
     new_application_title: New Application