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,9 +16,14 @@
 
   {% set modalName = "newApplicationConfirmation" %}
   {% include "fragments/flash.html" %}
-
+  <div class="panel__content">
+    <p>
+      {{ 'portfolios.applications.new.step_2_description' | translate }}
+    </p>
+    <hr class="panel__break">
     <application-environments inline-template v-bind:initial-data='{{ form.data|tojson }}'>
       <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 class="subheading">{{ 'portfolios.applications.environments_heading' | translate }}</div>
         <div class="panel">
           <div class="panel__content">
             {{ form.csrf_token }}
@@ -29,13 +34,6 @@
             </div>
   
             <div class="application-list-item">
-            <header>
-              <h2 class="block-list__title">{{ 'portfolios.applications.environments_heading' | translate }}</h2>
-              <p>
-                {{ 'portfolios.applications.environments_description' | translate }}
-              </p>
-            </header>
-
               <ul>
                 <li v-for="(environment, i) in environments" class="application-edit__env-list-item">
                   <div class="usa-input">
@@ -69,8 +67,15 @@
           {% block next_button %}
             {{ SaveButton(text=('portfolios.applications.new.step_2_button_text' | translate)) }}
           {% endblock %}
+          <a class="usa-button usa-button-secondary" href="{{ url_for('applications.view_new_application_step_1', application_id=application.id) }}">
+            Previous
+          </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