From f4f3e3dee3e25496eb9a8b57a1b8e74ad16276bf Mon Sep 17 00:00:00 2001
From: graham-dds <graham.beckley-ctr@friends.dds.mil>
Date: Wed, 11 Dec 2019 15:49:56 -0500
Subject: [PATCH] Add horizontal breaks to form

---
 styles/components/_forms.scss        |  3 +++
 templates/portfolios/new/step_1.html | 27 +++++++++++++++++----------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/styles/components/_forms.scss b/styles/components/_forms.scss
index 19ca2fb5..a6e0709a 100644
--- a/styles/components/_forms.scss
+++ b/styles/components/_forms.scss
@@ -1,6 +1,9 @@
 // Form Grid
 .form-row {
   margin: ($gap * 4) 0;
+  &--separated {
+    border-bottom: $color-gray-lighter 1px solid;
+  }
 
   .form-col {
     flex-grow: 1;
diff --git a/templates/portfolios/new/step_1.html b/templates/portfolios/new/step_1.html
index fe968b9c..4613b063 100644
--- a/templates/portfolios/new/step_1.html
+++ b/templates/portfolios/new/step_1.html
@@ -14,21 +14,28 @@
     <p>{{ "portfolios.header" | translate }}</p>
     <h1>{{ "New Portfolio" }}</h1>
   </div>
-  {{ StickyCTA(text="Name and Describe Portfolio", context="Step 1 of 2") }}
+  {{ StickyCTA(text="Create New Portfolio") }}
   <base-form inline-template>
     <form id="portfolio-create" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">
       {{ form.csrf_token }}
-      {{ TextInput(form.name, optional=False) }}
-      {{"forms.portfolio.name.help_text" | translate | safe }}
-        <div>
-          {{ TextInput(form.description, paragraph=True) }}
-          {{"forms.portfolio.description.help_text" | translate | safe }}
+      <div class="form-row form-row--separated">
+        <div class="form-col">
+        {{ TextInput(form.name, optional=False) }}
+        {{"forms.portfolio.name.help_text" | translate | safe }}
         </div>
-        <div>
-          <strong class="h4">{{ "forms.portfolio.defense_component.label" | translate }}</strong>
-          {{ "forms.portfolio.defense_component.help_text" | translate | safe }}
-          {{ MultiCheckboxInput(form.defense_component, optional=False) }}
+      </div>
+      <div class="form-row form-row--separated">
+        <div class="form-col">
+        {{ TextInput(form.description, paragraph=True) }}
+        {{"forms.portfolio.description.help_text" | translate | safe }}
         </div>
+      </div>
+      <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 class='action-group'>
         {{
           SaveButton(