Align new application Step 1 with design mockups

- remove unneeded variables and markup
- add a cancel button
- add form input descriptions
- add a class selector for the default panel <hr>, and change apperance

styles/elements/_panels.scss

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

templates/applications/new/step_1.html

@@ -7,14 +7,14 @@
 {% set secondary_breadcrumb = 'portfolios.applications.new_application_title' | translate %}
 
   {% if application_id %}
-    {% set action = url_for('applications.update_new_application_step_1', portfolio_id=portfolio.id, application_id=application_id) %}
+    {% set action = url_for('applications.update_new_application_step_1', application_id=application_id) %}
   {% else %}
     {% set action = url_for('applications.create_new_application_step_1', portfolio_id=portfolio.id, application_id=application_id) %}
   {% endif %}
 
 {% block portfolio_header %}
   {% include "portfolios/header.html" %}
-  {{ StickyCTA(text="Name and Describe New Application", context="Step 1 of 3") }}
+  {{ StickyCTA(text=('portfolios.applications.new.step_1_header' | translate | safe), context="Step 1 of 3") }}
 {% endblock %}
   
 {% block application_content %}
@@ -23,30 +23,31 @@
 
   <application-name-and-description inline-template v-bind:initial-data='{{ form.data|tojson }}'>
     <form method="POST" action="{{ action }}" v-on:submit="handleSubmit">
-      <div class="panel">
         <div class="panel__content">
           {{ form.csrf_token }}
-          <p>
-            {{ "fragments.edit_application_form.explain" | translate }}
-          </p>
           <div class="form-row">
             <div class="form-col form-col--two-thirds">
               {{ TextInput(form.name, optional=False) }}
+              {{ ('portfolios.applications.new.step_1_form_help_text.description' | translate | safe) }}
             </div>
           </div>
+          <hr class="panel__break">
           <div class="form-row">
             <div class="form-col form-col--two-thirds">
               {{ TextInput(form.description, paragraph=True, optional=True) }}
+              {{ ('portfolios.applications.new.step_1_form_help_text.description' | translate | safe) }}
             </div>
           </div>
         </div>
-        </div>
+      
-      </div>
 
       <span class="action-group">
         {% block next_button %}
           {{ SaveButton(text=('portfolios.applications.new.step_1_button_text' | translate)) }}
         {% endblock %}
+        <a class="usa-button usa-button-secondary" href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
+          Cancel
+        </a>
       </span>
     </form>
   </application-name-and-description>

translations.yaml

@@ -309,8 +309,33 @@ portfolios:
     add_another_environment: Add another environment
     app_settings_text: App settings
     new:
-      step_1_header: "Name and Describe New Application"
+      step_1_header: Name and Describe New Project
       step_1_button_text: "Save and Add Environments"
+      step_1_form_help_text:
+        name: |
+          <div style="margin-top: -3rem;">
+            <p>
+              The name of your project should be intuitive and easily recognizable for all of your team members.
+            </p>
+            <p>
+              <strong>Writer's Block? A naming example includes:</strong>
+              <ul>
+                <li>Army Security Infrastructure Application</li>
+              </ul>
+            </p>
+          </div>
+        description: |
+          <div style="margin-top: -3rem;">
+            <p>
+              Add a brief one to two sentence description of your project. You should be able to reference your TO Description of Work.
+            </p>
+            <p>
+              <strong>Writer's Block? A naming example includes:</strong>
+              <ul>
+                <li>Build security applications for FOB Clark</li>
+              </ul>
+            </p>
+          </div>
       step_2_header: Add Environments to {application_name}
       step_2_button_text: "Save and Add Members"
       step_3_header: Invite Members to {application_name}