Move application form contents to one panel

styles/components/_portfolio_layout.scss

@@ -85,10 +85,6 @@
   }
 }
 
-.portfolio-content {
-  margin: 6 * $gap $gap 0 $gap;
-}
-
 @mixin subheading {
   color: $color-gray-dark;
   padding: $gap 0;
@@ -98,6 +94,23 @@
   font-weight: bold;
 }
 
+.portfolio-content {
+  margin: 6 * $gap $gap 0 $gap;
+
+  .application-content {
+    .subheading {
+      @include subheading;
+    }
+
+    .panel {
+      padding: $gap / 2 0;
+      box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
+      border-top: none;
+      border-bottom: none;
+    }
+  }
+}
+
 .portfolio-applications {
   .portfolio-applications__header {
     margin-bottom: 4 * $gap;

templates/fragments/edit_application_form.html

@@ -1,12 +1,8 @@
 {% from "components/text_input.html" import TextInput %}
 
 {{ form.csrf_token }}
-<div class="panel">
-  <div class="panel__content">
 <p>
   {{ "fragments.edit_application_form.explain" | translate }}
 </p>
 {{ TextInput(form.name) }}
 {{ TextInput(form.description, paragraph=True) }}
-  </div>
-</div>

templates/portfolios/applications/edit.html

@@ -6,6 +6,10 @@
 
 {% block application_content %}
 
+  <div class='subheading'>Application Settings</div>
+
+  <div class="panel">
+    <div class="panel__content">
       <form method="POST" action="{{ url_for('portfolios.edit_application', portfolio_id=portfolio.id, application_id=application.id) }}">
 
         {% include "fragments/edit_application_form.html" %}
@@ -34,5 +38,7 @@
           <button class="usa-button usa-button-primary" tabindex="0" type="submit">Update Application</button>
         </div>
       </form>
+    </div>
+  </div>
 
 {% endblock %}

templates/portfolios/applications/new.html

@@ -12,6 +12,9 @@
   {% set modalName = "newApplicationConfirmation" %}
   {% include "fragments/flash.html" %}
 
+  <div class="panel">
+    <div class="panel__content">
+
       <new-application inline-template v-bind:initial-data='{{ form.data|tojson }}' modal-name='{{ modalName }}'>
         <form method="POST" action="{{ url_for('portfolios.create_application', portfolio_id=portfolio.id) }}" v-on:submit="handleSubmit">
 
@@ -73,4 +76,7 @@
         </form>
       </new-application>
 
+    </div>
+  </div>
+
 {% endblock %}

translations.yaml

@@ -173,7 +173,7 @@ forms:
     environment_names_label: Environment Name
     environment_names_required_validation_message: Provide at least one environment name.
     environment_names_unique_validation_message: Environment names must be unique.
-    name_label: Application Name
+    name_label: Name
   task_order:
     portfolio_name_label: Organization Portfolio Name
     portfolio_name_description: The name of your office or organization. You can add multiple applications to your portfolio. Your task orders are used to pay for these applications and their environments.
@@ -258,7 +258,7 @@ forms:
 fragments:
   edit_application_form:
     existing_application_title: 'Edit {application_name} application'
-    explain: 'AT-AT allows you to organize your portfolio into multiple applications, each of which may have environments.'
+    explain: 'AT-AT allows you to create multiple applications within a portfolio. Each application can then be broken down into its own customizable environments.'
     new_application_title: Add a new application
   edit_user_form:
     date_last_training_tooltip: When was the last time you completed the IA training? <br> Information Assurance (IA) training is an important step in cyber awareness.