Update portfolio styling and move DoD component help text

atst/forms/portfolio.py

@@ -33,6 +33,7 @@ class PortfolioForm(BaseForm):
 class PortfolioCreationForm(PortfolioForm):
     defense_component = SelectMultipleField(
         translate("forms.portfolio.defense_component.title"),
+        description=translate("forms.portfolio.defense_component.help_text"),
         choices=SERVICE_BRANCHES,
         widget=ListWidget(prefix_label=False),
         option_widget=CheckboxInput(),

styles/components/_forms.scss

@@ -2,10 +2,6 @@
 .form-row {
   margin: ($gap * 4) 0;
 
-  &--bordered {
-    border-bottom: $color-gray-lighter 1px solid;
-  }
-
   .form-col {
     flex-grow: 1;
 

styles/components/_portfolio_layout.scss

@@ -519,3 +519,15 @@
     }
   }
 }
+
+#portfolio-create {
+  .usa-input__choices {
+    .usa-input__title {
+      font-weight: $font-bold;
+    }
+
+    label {
+      font-size: $base-font-size;
+    }
+  }
+}

styles/elements/_inputs.scss

@@ -179,6 +179,10 @@
           left: -3rem;
         }
       }
+
+      .usa-input__title {
+        margin-bottom: $gap;
+      }
     }
 
     select {

templates/portfolios/new/step_1.html

@@ -21,22 +21,23 @@
     <div class="row">
       <form id="portfolio-create" class="col form-container" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
         {{ form.csrf_token }}
-        <div class="form-row form-row--bordered">
+        <div class="form-row">
           <div class="form-col">
             {{ TextInput(form.name, validation="portfolioName", optional=False, classes="form-col") }}
             {{"forms.portfolio.name.help_text" | translate | safe }}
           </div>
         </div>
-        <div class="form-row form-row--bordered">
+        <hr>
+        <div class="form-row">
           <div class="form-col">
             {{ TextInput(form.description, validation="defaultTextAreaField", paragraph=True) }}
             {{"forms.portfolio.description.help_text" | translate | safe }}
           </div>
         </div>
+        <hr>
         <div class="form-row">
           <div class="form-col">
             {{ MultiCheckboxInput(form.defense_component, optional=False) }}
-            {{ "forms.portfolio.defense_component.help_text" | translate | safe }}
           </div>
         </div>
         <div

translations.yaml

@@ -271,7 +271,7 @@ forms:
       label: Portfolio Name
       length_validation_message: Portfolio names can be between 4-100 characters
       help_text: |
-        <div>
+        <div class="usa-input__help">
           <p>
             Naming can be difficult. Choose a name that is descriptive enough for users to identify the Portfolio. You may consider naming based on your organization.
           </p>
@@ -285,7 +285,7 @@ forms:
     description:
       label: Portfolio Description
       help_text: |
-        <div>
+        <div class="usa-input__help">
           <p>
             Add a brief one to two sentence description of your Portfolio. Consider this your statement of work.
           </p>
@@ -310,11 +310,9 @@ forms:
       title: Select DoD component(s) funding your Portfolio
       validation_message: You must select at least one defense component.
       help_text: |
-        <p>
           Select the DOD component(s) that will fund all Applications within this Portfolio.
           In JEDI, multiple DoD organizations can fund the same Portfolio.<br/>
-          Select all that apply.<br/>
+          Select all that apply.
-        </p>
   attachment:
     object_name:
       length_error: Object name may be no longer than 40 characters.