From 274fa4470c011cebc63389359434b6f24e250e19 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Tue, 3 Sep 2019 10:53:14 -0400
Subject: [PATCH 01/10] Update text on clin card and reorder fields

---
 atst/forms/task_order.py          |   5 +-
 styles/elements/_card.scss        |   5 +
 styles/sections/_task_order.scss  |   6 +-
 templates/task_orders/step_3.html | 433 ++++++++++++++++--------------
 translations.yaml                 |  20 +-
 5 files changed, 258 insertions(+), 211 deletions(-)

diff --git a/atst/forms/task_order.py b/atst/forms/task_order.py
index e511d53f..4a234701 100644
--- a/atst/forms/task_order.py
+++ b/atst/forms/task_order.py
@@ -34,12 +34,13 @@ class CLINForm(FlaskForm):
         label=translate("task_orders.form.clin_number_label"), validators=[Optional()]
     )
     start_date = DateField(
-        translate("forms.task_order.start_date_label"),
+        translate("task_orders.form.pop_start"),
+        description="For example: 07 04 1776",
         format="%m/%d/%Y",
         validators=[Optional()],
     )
     end_date = DateField(
-        translate("forms.task_order.end_date_label"),
+        translate("task_orders.form.pop_end"),
         format="%m/%d/%Y",
         validators=[Optional()],
     )
diff --git a/styles/elements/_card.scss b/styles/elements/_card.scss
index 410a6882..36505dd2 100644
--- a/styles/elements/_card.scss
+++ b/styles/elements/_card.scss
@@ -16,6 +16,11 @@
     }
   }
 
+  &__title {
+    padding: $gap * 2;
+    background-color: $color-gray-lightest;
+  }
+
   &__header h3 {
     margin-top: 0;
   }
diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index d874abd6..a1d1c395 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -100,7 +100,7 @@
     }
 
     .form-row {
-      margin: 0;
+      margin-top: 0;
     }
 
     select {
@@ -243,3 +243,7 @@
   display: flex;
   justify-content: center;
 }
+
+.clin-card {
+  width: 65rem;
+}
diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html
index daeee6b1..59adf536 100644
--- a/templates/task_orders/step_3.html
+++ b/templates/task_orders/step_3.html
@@ -24,154 +24,172 @@
       v-bind:initial-clin-type="'JEDI_CLIN_1'"
     {% endif %}
     inline-template>
-    <div class="card">
-      <div class="h3">
+    <div class="clin-card">
+      <div class="card__title h4">
         {{ 'task_orders.form.base_clin_title' | translate }}
       </div>
-      <div class="form-row">
-        <div class="form-col form-col--two-thirds">
-          {% if fields %}
-            {{ OptionsInput(fields.jedi_clin_type, watch=True, show_validation=False) }}
-          {% else %}
-            <optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' :optional='false' inline-template>
-              <div class="usa-input">
-                <fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
-                    <legend>
-                      <div class="usa-input__title">
-                        {{ 'task_orders.form.clin_type_label' | translate }}
-                      </div>
-                    </legend>
-                    <select :id='name' :name='name'>
-                      <option value="JEDI_CLIN_1">{{ "forms.task_order.clin_01_label" | translate }}</option>
-                      <option value="JEDI_CLIN_2">{{ "forms.task_order.clin_02_label" | translate }}</option>
-                      <option value="JEDI_CLIN_3">{{ "forms.task_order.clin_03_label" | translate }}</option>
-                      <option value="JEDI_CLIN_4">{{ "forms.task_order.clin_04_label" | translate }}</option>
-                    </select>
-                </fieldset>
-              </div>
-            </optionsinput>
-          {% endif %}
-        </div>
-        <div class="form-col form-col--third">
-          {% if fields %}
-            {{ TextInput(fields.number, watch=True) }}
-          {% else %}
-            <textinput :name="'clins-' + clinIndex + '-number'" :watch='true' inline-template>
-              <div class="usa-input">
-                <label :for="name">
-                  <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
-                  <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
-                  <div class="usa-input__title">{{ 'task_orders.form.clin_number_label' | translate }}</div>
-                </label>
-
-                <masked-input
-                  v-on:input='onInput'
-                  v-on:blur='onBlur'
-                  v-on:change='onChange'
-                  v-bind:value='value'
-                  v-bind:mask='mask'
-                  v-bind:pipe='pipe'
-                  v-bind:keep-char-positions='keepCharPositions'
-                  v-bind:aria-invalid='showError'
-                  type='text'
-                  :id='name'
-                  ref='input'>
-                </masked-input>
-
-                <input type='hidden' v-bind:value='rawValue' :name='name' />
-
-                <template v-if='showError'>
-                  <span class='usa-input__message' v-html='validationError'></span>
-                </template>
-                <template v-else>
-                  <span class='usa-input__message'></span>
-                </template>
-              </div>
-            </textinput>
-          {% endif %}
-        </div>
-      </div>
-
-      <div class="form-row">
-        {% if fields %}
-          <div class="form-col form-col--half">
-            {{ DatePicker(fields.start_date, watch=True, optional=False) }}
-          </div>
-          <div class="form-col form-col--half">
-            {{ DatePicker(fields.end_date, watch=True, optional=False) }}
+      <div class="card">
+        <div class="form-row">
+          <div class="form-col">
+            <div class="h4">
+              CLIN Details
+            </div>
           </div>
+        </div>
+        <div class="form-row">
+          <div class="form-col">
+            {% if fields %}
+              {{ TextInput(fields.number, watch=True) }}
+            {% else %}
+              <textinput :name="'clins-' + clinIndex + '-number'" :watch='true' inline-template>
+                <div class="usa-input">
+                  <label :for="name">
+                    <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
+                    <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
+                    <div class="usa-input__title">{{ 'task_orders.form.clin_number_label' | translate }}</div>
+                  </label>
 
-        {% else %}
-          <div class="form-col form-col--half">
-            <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :watch='true' :optional='false' inline-template>
-              <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
-                <legend>
-                  <div class="usa-input__title">
-                    {{ 'task_orders.form.pop_start' | translate }}
-                  </div>
-                </legend>
+                  <masked-input
+                    v-on:input='onInput'
+                    v-on:blur='onBlur'
+                    v-on:change='onChange'
+                    v-bind:value='value'
+                    v-bind:mask='mask'
+                    v-bind:pipe='pipe'
+                    v-bind:keep-char-positions='keepCharPositions'
+                    v-bind:aria-invalid='showError'
+                    type='text'
+                    :id='name'
+                    ref='input'>
+                  </masked-input>
 
-                <div class="date-picker-component">
-                  <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
+                  <input type='hidden' v-bind:value='rawValue' :name='name' />
 
-                  <div class="usa-form-group usa-form-group-month">
-                    <label>{{ 'components.date_selector.month' | translate }}</label>
-                    <input
-                      name="date-month"
-                      max="12"
-                      maxlength="2"
-                      min="1"
-                      type="number"
-                      v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
-                      v-model="month"
-                      v-on:change="onInput"
-                      />
-                  </div>
-
-                  <div class="usa-form-group usa-form-group-day">
-                    <label>{{ 'components.date_selector.day' | translate }}</label>
-                    <input
-                      name="date-day"
-                      maxlength="2"
-                      min="1"
-                      type="number"
-                      v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
-                      v-bind:max="daysMaxCalculation"
-                      v-model="day"
-                      v-on:change="onInput"
-                      />
-                  </div>
-
-                  <div class="usa-form-group usa-form-group-year">
-                    <label>{{ 'components.date_selector.year' | translate }}</label>
-                    <input
-                      name="date-year"
-                      maxlength="4"
-                      type="number"
-                      v-model="year"
-                      v-on:change="onInput"
-                      />
-                  </div>
-
-                  <div class="usa-form-group-date-ok" v-if="isDateValid">
-                    {{ Icon("ok", classes="icon--green") }}
-                  </div>
+                  <template v-if='showError'>
+                    <span class='usa-input__message' v-html='validationError'></span>
+                  </template>
+                  <template v-else>
+                    <span class='usa-input__message'></span>
+                  </template>
                 </div>
-              </fieldset>
-            </date-selector>
+              </textinput>
+            {% endif %}
           </div>
+        </div>
+        <div class="form-row">
+          <div class="form-col">
+            {% if fields %}
+              {{ OptionsInput(fields.jedi_clin_type, watch=True, show_validation=False) }}
+            {% else %}
+              <optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' :optional='false' inline-template>
+                <div class="usa-input">
+                  <fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
+                      <legend>
+                        <div class="usa-input__title">
+                          {{ 'task_orders.form.clin_type_label' | translate }}
+                        </div>
+                      </legend>
+                      <select :id='name' :name='name'>
+                        <option value="JEDI_CLIN_1">{{ "forms.task_order.clin_01_label" | translate }}</option>
+                        <option value="JEDI_CLIN_2">{{ "forms.task_order.clin_02_label" | translate }}</option>
+                        <option value="JEDI_CLIN_3">{{ "forms.task_order.clin_03_label" | translate }}</option>
+                        <option value="JEDI_CLIN_4">{{ "forms.task_order.clin_04_label" | translate }}</option>
+                      </select>
+                  </fieldset>
+                </div>
+              </optionsinput>
+            {% endif %}
+          </div>
+        </div>
+        <hr>
+        <div class="form-row">
+          <div class="h4">
+              CLIN Funding
+          </div>
+        </div>
+        {% if fields %}
+          <div class="form-row">
+            <div class="form-column">
+              {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
+            </div>
+          </div>
+        {% else %}
+          <div class="form-row">
+            <div class="form-column">
+              <textinput
+                v-cloak
+                inline-template
+                :name="'clins-' + clinIndex + '-obligated_amount'"
+                validation="dollars"
+                :watch='true'>
+                <div class="usa-input usa-input--validation--dollars">
+                  <label :for="name">
+                    <div class="usa-input__title">{{ 'task_orders.form.obligated_funds_label' | translate }}</div>
+                    <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
+                    <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
+                  </label>
 
-          <div class="form-col form-col--half">
-            <date-selector :name-tag="'clins-' + clinIndex + '-end_date'" :watch='true' :optional='false' inline-template>
-              <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
-                <legend>
-                  <div class="usa-input__title">
-                    {{ 'task_orders.form.pop_end' | translate }}
-                  </div>
-                </legend>
+                  <masked-input
+                    v-on:input='onInput'
+                    v-on:blur='onBlur'
+                    v-on:change='onChange'
+                    v-bind:value='value'
+                    v-bind:mask='mask'
+                    v-bind:pipe='pipe'
+                    v-bind:keep-char-positions='keepCharPositions'
+                    v-bind:aria-invalid='showError'
+                    v-bind:show-mask='false'
+                    type='text'
+                    :id='name'
+                    ref='input'>
+                  </masked-input>
 
-                <div class="date-picker-component">
-                  <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
+                  <input type='hidden' v-bind:value='rawValue' :name='name' />
+
+                  <template v-if='showError'>
+                    <span class='usa-input__message' v-html='validationError'></span>
+                  </template>
+                  <template v-else>
+                    <span class='usa-input__message'></span>
+                  </template>
+                </div>
+              </textinput>
+            </div>
+          </div>
+        {% endif %}
+        <hr>
+        <div class="form-row">
+          <div class="h4">
+            Period of Performance
+          </div>
+        </div>
+        {% if fields %}
+          <div class="form-row">
+            <div class="form-col">
+              {{ DatePicker(fields.start_date, watch=True, optional=False) }}
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-col">
+              {{ DatePicker(fields.end_date, watch=True, optional=False) }}
+            </div>
+          </div>
+        {% else %}
+          <div class="form-row">
+            <div class="form-col">
+              <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :watch='true' :optional='false' inline-template>
+                <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
+                  <legend>
+                    <div class="usa-input__title">
+                      {{ 'task_orders.form.pop_start' | translate }}
+                    </div>
+                    <p class='usa-input__help'>
+                      For example: 07 04 1776
+                    </p>
+                  </legend>
+
+                  <div class="date-picker-component">
+                    <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
 
                     <div class="usa-form-group usa-form-group-month">
                       <label>{{ 'components.date_selector.month' | translate }}</label>
@@ -212,69 +230,90 @@
                         />
                     </div>
 
-                  <div class="usa-form-group-date-ok" v-if="isDateValid">
-                    {{ Icon("ok", classes="icon--green") }}
+                    <div class="usa-form-group-date-ok" v-if="isDateValid">
+                      {{ Icon("ok", classes="icon--green") }}
+                    </div>
                   </div>
-                </div>
-              </fieldset>
-            </date-selector>
+                </fieldset>
+              </date-selector>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-col">
+              <date-selector :name-tag="'clins-' + clinIndex + '-end_date'" :watch='true' :optional='false' inline-template>
+                <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
+                  <legend>
+                    <div class="usa-input__title">
+                      {{ 'task_orders.form.pop_end' | translate }}
+                    </div>
+                    <p class='usa-input__help'>
+                      For example: 07 04 1776
+                    </p>
+                  </legend>
+
+                  <div class="date-picker-component">
+                    <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
+
+                      <div class="usa-form-group usa-form-group-month">
+                        <label>{{ 'components.date_selector.month' | translate }}</label>
+                        <input
+                          name="date-month"
+                          max="12"
+                          maxlength="2"
+                          min="1"
+                          type="number"
+                          v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
+                          v-model="month"
+                          v-on:change="onInput"
+                          />
+                      </div>
+
+                      <div class="usa-form-group usa-form-group-day">
+                        <label>{{ 'components.date_selector.day' | translate }}</label>
+                        <input
+                          name="date-day"
+                          maxlength="2"
+                          min="1"
+                          type="number"
+                          v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
+                          v-bind:max="daysMaxCalculation"
+                          v-model="day"
+                          v-on:change="onInput"
+                          />
+                      </div>
+
+                      <div class="usa-form-group usa-form-group-year">
+                        <label>{{ 'components.date_selector.year' | translate }}</label>
+                        <input
+                          name="date-year"
+                          maxlength="4"
+                          type="number"
+                          v-model="year"
+                          v-on:change="onInput"
+                          />
+                      </div>
+
+                    <div class="usa-form-group-date-ok" v-if="isDateValid">
+                      {{ Icon("ok", classes="icon--green") }}
+                    </div>
+                  </div>
+                </fieldset>
+              </date-selector>
+            </div>
           </div>
         {% endif %}
-      </div>
-      <div class="form-row">
-        <p class="usa-input-error-message form-has-errors">
-          <template v-if='showPopError'>
-            {% if fields and fields.start_date.errors %}
-              {{ fields.start_date.errors[0] }}
-            {% else %}
-              {{ "forms.task_order.start_date_error" | translate }}
-            {% endif %}
-          </template>
-        </p>
-      </div>
-
-      {% if fields %}
-        {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
-      {% else %}
-        <textinput
-          v-cloak
-          inline-template
-          :name="'clins-' + clinIndex + '-obligated_amount'"
-          validation="dollars"
-          :watch='true'>
-          <div class="usa-input usa-input--validation--dollars">
-            <label :for="name">
-              <div class="usa-input__title">{{ 'task_orders.form.obligated_funds_label' | translate }}</div>
-              <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
-              <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
-            </label>
-
-            <masked-input
-              v-on:input='onInput'
-              v-on:blur='onBlur'
-              v-on:change='onChange'
-              v-bind:value='value'
-              v-bind:mask='mask'
-              v-bind:pipe='pipe'
-              v-bind:keep-char-positions='keepCharPositions'
-              v-bind:aria-invalid='showError'
-              v-bind:show-mask='false'
-              type='text'
-              :id='name'
-              ref='input'>
-            </masked-input>
-
-            <input type='hidden' v-bind:value='rawValue' :name='name' />
-
-            <template v-if='showError'>
-              <span class='usa-input__message' v-html='validationError'></span>
+        <div class="form-row">
+          <p class="usa-input-error-message form-has-errors">
+            <template v-if='showPopError'>
+              {% if fields and fields.start_date.errors %}
+                {{ fields.start_date.errors[0] }}
+              {% else %}
+                {{ "forms.task_order.start_date_error" | translate }}
+              {% endif %}
             </template>
-            <template v-else>
-              <span class='usa-input__message'></span>
-            </template>
-          </div>
-        </textinput>
-      {% endif %}
+          </p>
+        </div>
+      </div>
     </div>
   </clin-fields>
 {% endmacro %}
diff --git a/translations.yaml b/translations.yaml
index a6b8debe..abd14edf 100644
--- a/translations.yaml
+++ b/translations.yaml
@@ -189,7 +189,6 @@ forms:
       military: Military
       other: Other <em class='description'>(E.g. University or other partner)</em>
     dev_team_other_label: Development Team Other
-    end_date_label: End of period of performance (PoP)
     file_format_not_allowed: Only PDF or PNG files can be uploaded.
     native_apps:
       description: Do you plan to develop any applications in the cloud?
@@ -201,7 +200,6 @@ forms:
     scope_description: 'What do you plan to do on the cloud? Some examples might include migrating an existing application or creating a prototype. You don’t need to include a detailed plan of execution, but should list key requirements. This section will be reviewed by your contracting officer, but won’t be sent to the CCPO. <p>Not sure how to describe your scope? <a href="#">Read some examples</a> to get some inspiration.</p>'
     scope_label: Cloud project scope
     start_date_error: PoP start date must be before end date.
-    start_date_label: Start of period of performance (PoP)
     team_experience:
       built_1: Built, migrated, or consulted on 1-2 applications
       built_3: Built, migrated, or consulted on 3-5 applications
@@ -362,21 +360,21 @@ task_orders:
       pop_start: PoP Start
       pop_end: PoP End
   form:
-    add_clin: Enter another CLIN
+    add_clin: Add another CLIN
     add_to_header: Add your task order
     add_to_description: Now, refer to your document to find the 13-digit task order number. It should be located at lorem ipsum dolar. From now on we'll refer to this portion of funding by the recorded task order number.
-    clin_title: Enter CLINs
-    clin_description: "Continue to refer to your TO to locate your Contract Line Item Numbers (CLINs). You must add CLINs one at a time, and select a corresponding ID/IQ description for each."
-    base_clin_title: Base CLIN Information
-    clin_number_label: Enter task order CLIN
-    clin_type_label: "Select ID/IQ CLIN description"
+    clin_title: Enter Contract Line Items
+    clin_description: "Refer to your task order to locate your Contract Line Item Numbers (CLINs)."
+    base_clin_title: CLIN
+    clin_number_label: CLIN Number
+    clin_type_label: Corresponding IDIQ CLIN
     cloud_funding_header: Add the summary of cloud funding
     cloud_funding_text: Data must match with what is in your uploaded document.
     draft_alert_title: Your information has been saved
     draft_alert_message: You can return to the Task Order Builder to enter missing information. Once you are finished, you’ll be ready to submit this request.
-    obligated_funds_label: Enter obligated funds for Base CLIN
-    pop_end: 'Period of Performance (PoP) end date'
-    pop_start: 'Period of Performance (PoP) start date'
+    obligated_funds_label: Obligated Funds
+    pop_end: End Date
+    pop_start: Start Date
     review_button: Review task order
     supporting_docs_header: Upload your supporting documentation
     supporting_docs_size_limit: Your file may not exceed 64MB

From 2b9899548887e5d8e7ca38cce1da9f862156b070 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Tue, 3 Sep 2019 11:31:36 -0400
Subject: [PATCH 02/10] Styling for CLIN Details section add in validation
 styling for inputs use solid checkmark as ok validation across site

---
 js/components/clin_fields.js                  | 21 ++++++++++++++++++
 .../upload_input_error_template.html          |  2 +-
 js/test_templates/upload_input_template.html  |  2 +-
 static/icons/check-circle-solid.svg           |  1 -
 static/icons/ok.svg                           |  2 +-
 styles/sections/_task_order.scss              |  9 ++++++--
 templates/components/upload_input.html        |  2 +-
 templates/fragments/task_order_review.html    |  2 +-
 templates/task_orders/step_3.html             | 22 +++++++++----------
 translations.yaml                             |  8 +++----
 10 files changed, 47 insertions(+), 24 deletions(-)
 delete mode 100644 static/icons/check-circle-solid.svg

diff --git a/js/components/clin_fields.js b/js/components/clin_fields.js
index 6b948922..0284a433 100644
--- a/js/components/clin_fields.js
+++ b/js/components/clin_fields.js
@@ -8,6 +8,7 @@ const OBLIGATED_AMOUNT = 'obligated_amount'
 const START_DATE = 'start_date'
 const END_DATE = 'end_date'
 const POP = 'period_of_performance'
+const NUMBER = 'number'
 
 export default {
   name: 'clin-fields',
@@ -33,6 +34,10 @@ export default {
       type: String,
       default: null,
     },
+    initialClinNumber: {
+      type: String,
+      default: null,
+    },
   },
 
   data: function() {
@@ -44,6 +49,9 @@ export default {
       : undefined
     const popValidation = !this.initialStartDate ? false : start < end
     const showPopValidation = !this.initialStartDate ? false : !popValidation
+    const clinNumber = !!this.initialClinNumber
+      ? this.initialClinNumber
+      : undefined
 
     return {
       clinIndex: this.initialClinIndex,
@@ -53,6 +61,7 @@ export default {
       endDate: end,
       popValid: popValidation,
       showPopError: showPopValidation,
+      clinNumber: clinNumber,
     }
   },
 
@@ -113,8 +122,20 @@ export default {
         } else if (event.name.includes(END_DATE)) {
           if (!!event.value) this.endDate = new Date(event.value)
           this.validatePop()
+        } else if (event.name.includes(NUMBER)) {
+          if (!!event.value) this.clinNumber = event.value
         }
       }
     },
   },
+
+  computed: {
+    clinTitle: function() {
+      if (!!this.clinNumber) {
+        return `CLIN ${this.clinNumber}`
+      } else {
+        return `CLIN`
+      }
+    },
+  },
 }
diff --git a/js/test_templates/upload_input_error_template.html b/js/test_templates/upload_input_error_template.html
index ff3676ab..1420fe17 100644
--- a/js/test_templates/upload_input_error_template.html
+++ b/js/test_templates/upload_input_error_template.html
@@ -11,7 +11,7 @@
   <div>
     <div v-show="hasAttachment" class="uploaded-file">
       
-      <span class="icon icon--check-circle-solid " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
+      <span class="icon icon--ok " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
   
       <a class="uploaded-file__name" v-html="baseName" v-bind:href="downloadLink"></a>
       <a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>
diff --git a/js/test_templates/upload_input_template.html b/js/test_templates/upload_input_template.html
index 07fbb194..1eeaa1c7 100644
--- a/js/test_templates/upload_input_template.html
+++ b/js/test_templates/upload_input_template.html
@@ -12,7 +12,7 @@
   <div>
     <div v-show="hasAttachment" class="uploaded-file">
       
-      <span class="icon icon--check-circle-solid " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
+      <span class="icon icon--ok " aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
   
       <a class="uploaded-file__name" v-html="baseName" v-bind:href="downloadLink"></a>
       <a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>
diff --git a/static/icons/check-circle-solid.svg b/static/icons/check-circle-solid.svg
deleted file mode 100644
index 6aaa9742..00000000
--- a/static/icons/check-circle-solid.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg>
\ No newline at end of file
diff --git a/static/icons/ok.svg b/static/icons/ok.svg
index d4f61f78..6aaa9742 100644
--- a/static/icons/ok.svg
+++ b/static/icons/ok.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 12c-.266 0-.522-.106-.71-.296L3.915 8.297c-.389-.392-.386-1.025.006-1.414.392-.387 1.026-.386 1.414.007l2.574 2.597 6.302-8.101c.339-.435.967-.514 1.403-.176.436.339.515.968.175 1.403l-7 9c-.177.227-.442.367-.729.384L8 12zm0 4c-4.411 0-8-3.589-8-8s3.589-8 8-8c.964 0 1.906.17 2.803.505.517.193.779.77.586 1.287s-.765.783-1.287.586C9.431 2.127 8.724 2 8 2 4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6c0-.552.447-1 1-1s1 .448 1 1c0 4.411-3.589 8-8 8z"/></svg>
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg>
\ No newline at end of file
diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index a1d1c395..c554fe1d 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -84,7 +84,7 @@
   }
 
   .card {
-    padding: ($gap * 5);
+    padding: ($gap * 4) ($gap * 5);
 
     .usa-input {
       margin: 0 $gap 0 0;
@@ -100,7 +100,7 @@
     }
 
     .form-row {
-      margin-top: 0;
+      margin: 0;
     }
 
     select {
@@ -246,4 +246,9 @@
 
 .clin-card {
   width: 65rem;
+
+  &__title.h4 {
+    margin-top: 0;
+    padding-bottom: $gap * 2.5;
+  }
 }
diff --git a/templates/components/upload_input.html b/templates/components/upload_input.html
index 5d2bf737..8f5cec3c 100644
--- a/templates/components/upload_input.html
+++ b/templates/components/upload_input.html
@@ -16,7 +16,7 @@
   >
   <div>
     <div v-show="hasAttachment" class="uploaded-file">
-      {{ Icon("check-circle-solid") }}
+      {{ Icon("ok") }}
       <a class="uploaded-file__name" v-html="baseName" v-bind:href="downloadLink"></a>
       <a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>
     </div>
diff --git a/templates/fragments/task_order_review.html b/templates/fragments/task_order_review.html
index 9b938106..9e926783 100644
--- a/templates/fragments/task_order_review.html
+++ b/templates/fragments/task_order_review.html
@@ -14,7 +14,7 @@
         {{ 'task_orders.review.pdf_title' | translate }}
       </div>
       <a class="icon-link icon-link--download" href="{{ pdf_download_url }}">
-        {{ Icon('check-circle-solid') }}
+        {{ Icon('ok') }}
         {{ task_order.pdf.filename }}
       </a>
 
diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html
index 59adf536..a1dc2c44 100644
--- a/templates/task_orders/step_3.html
+++ b/templates/task_orders/step_3.html
@@ -19,21 +19,18 @@
       v-bind:initial-amount='{{ fields.obligated_amount.data or 0 }}'
       v-bind:initial-start-date="'{{ fields.start_date.data | string }}'"
       v-bind:initial-end-date="'{{ fields.end_date.data | string }}'"
+      v-bind:initial-clin-number="'{{ fields.number.data | string }}'"
     {% else %}
       v-bind:initial-clin-index='clinIndex'
       v-bind:initial-clin-type="'JEDI_CLIN_1'"
     {% endif %}
     inline-template>
     <div class="clin-card">
-      <div class="card__title h4">
-        {{ 'task_orders.form.base_clin_title' | translate }}
-      </div>
+      <div class="card__title h4" v-html='clinTitle'></div>
       <div class="card">
         <div class="form-row">
-          <div class="form-col">
-            <div class="h4">
-              CLIN Details
-            </div>
+          <div class="h4 clin-card__title">
+            CLIN Details
           </div>
         </div>
         <div class="form-row">
@@ -41,8 +38,9 @@
             {% if fields %}
               {{ TextInput(fields.number, watch=True) }}
             {% else %}
-              <textinput :name="'clins-' + clinIndex + '-number'" :watch='true' inline-template>
-                <div class="usa-input">
+              <textinput :name="'clins-' + clinIndex + '-number'" :watch='true'
+              inline-template>
+                <div v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph, 'no-max-width': noMaxWidth }]">
                   <label :for="name">
                     <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
                     <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
@@ -82,7 +80,7 @@
               {{ OptionsInput(fields.jedi_clin_type, watch=True, show_validation=False) }}
             {% else %}
               <optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' :optional='false' inline-template>
-                <div class="usa-input">
+                <div v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
                   <fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
                       <legend>
                         <div class="usa-input__title">
@@ -103,7 +101,7 @@
         </div>
         <hr>
         <div class="form-row">
-          <div class="h4">
+          <div class="h4 clin-card__title">
               CLIN Funding
           </div>
         </div>
@@ -159,7 +157,7 @@
         {% endif %}
         <hr>
         <div class="form-row">
-          <div class="h4">
+          <div class="h4 clin-card__title">
             Period of Performance
           </div>
         </div>
diff --git a/translations.yaml b/translations.yaml
index abd14edf..31f2478e 100644
--- a/translations.yaml
+++ b/translations.yaml
@@ -165,10 +165,10 @@ forms:
       none: Not planning to migrate any applications
       not_sure: Not sure
       on_premise: 'Yes, migrating from an on-premise data center'
-    clin_01_label: '0001: Unclassified IaaS and PaaS'
-    clin_02_label: '0002'
-    clin_03_label: '0003'
-    clin_04_label: '0004'
+    clin_01_label: 'IaaS/PaaS (IDIQ CLIN 0001)'
+    clin_02_label: 'IDIQ CLIN 0002'
+    clin_03_label: 'IDIQ CLIN 0003'
+    clin_04_label: 'IDIQ CLIN 0004'
     complexity:
       conus: CONUS access
       data_analytics: Data analytics

From 8a16b61e80bb727d20ce4f7c43952c0af54dd73e Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Tue, 3 Sep 2019 11:43:01 -0400
Subject: [PATCH 03/10] Styling for CLIN Funding section

---
 styles/sections/_task_order.scss  | 5 -----
 templates/task_orders/step_3.html | 6 +++---
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index c554fe1d..af82325e 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -94,11 +94,6 @@
       }
     }
 
-    .usa-input--validation--dollars label span.icon {
-      left: auto;
-      right: -$gap * 9;
-    }
-
     .form-row {
       margin: 0;
     }
diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html
index a1dc2c44..603ac7bf 100644
--- a/templates/task_orders/step_3.html
+++ b/templates/task_orders/step_3.html
@@ -107,20 +107,20 @@
         </div>
         {% if fields %}
           <div class="form-row">
-            <div class="form-column">
+            <div class="form-col">
               {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
             </div>
           </div>
         {% else %}
           <div class="form-row">
-            <div class="form-column">
+            <div class="form-col">
               <textinput
                 v-cloak
                 inline-template
                 :name="'clins-' + clinIndex + '-obligated_amount'"
                 validation="dollars"
                 :watch='true'>
-                <div class="usa-input usa-input--validation--dollars">
+                <div v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph, 'no-max-width': noMaxWidth }]">
                   <label :for="name">
                     <div class="usa-input__title">{{ 'task_orders.form.obligated_funds_label' | translate }}</div>
                     <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>

From f08088c73668f926af2d8ac98719f11ecd98e6a8 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Tue, 3 Sep 2019 11:56:20 -0400
Subject: [PATCH 04/10] Styling for Period of Performance Section

---
 atst/forms/task_order.py          |  1 +
 styles/sections/_task_order.scss  | 17 ++++++++++++++++-
 templates/task_orders/step_3.html |  4 ++--
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/atst/forms/task_order.py b/atst/forms/task_order.py
index 4a234701..dc6907c9 100644
--- a/atst/forms/task_order.py
+++ b/atst/forms/task_order.py
@@ -41,6 +41,7 @@ class CLINForm(FlaskForm):
     )
     end_date = DateField(
         translate("task_orders.form.pop_end"),
+        description="For example: 07 04 1776",
         format="%m/%d/%Y",
         validators=[Optional()],
     )
diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index af82325e..2a5c99a9 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -84,7 +84,7 @@
   }
 
   .card {
-    padding: ($gap * 4) ($gap * 5);
+    padding: ($gap * 4) ($gap * 5) 0;
 
     .usa-input {
       margin: 0 $gap 0 0;
@@ -106,6 +106,21 @@
     button {
       margin-bottom: $gap * 3;
     }
+
+    .date-picker {
+      padding-bottom: $gap * 3;
+
+      .usa-input__title {
+        padding-bottom: $gap;
+        font-weight: $font-bold;
+      }
+
+      .usa-input__help {
+        font-style: italic;
+        color: $color-gray;
+        margin-bottom: 1rem;
+      }
+    }
   }
 
   .usa-input__title,
diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html
index 603ac7bf..b3a7cf19 100644
--- a/templates/task_orders/step_3.html
+++ b/templates/task_orders/step_3.html
@@ -176,7 +176,7 @@
           <div class="form-row">
             <div class="form-col">
               <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :watch='true' :optional='false' inline-template>
-                <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
+                <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation }">
                   <legend>
                     <div class="usa-input__title">
                       {{ 'task_orders.form.pop_start' | translate }}
@@ -239,7 +239,7 @@
           <div class="form-row">
             <div class="form-col">
               <date-selector :name-tag="'clins-' + clinIndex + '-end_date'" :watch='true' :optional='false' inline-template>
-                <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
+                <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation }">
                   <legend>
                     <div class="usa-input__title">
                       {{ 'task_orders.form.pop_end' | translate }}

From 68cd90a7a4fcb73d7be177a55db40c801ad12929 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Tue, 3 Sep 2019 13:07:43 -0400
Subject: [PATCH 05/10] Style PoP Section

---
 styles/sections/_task_order.scss      | 20 +++++++++++++++++++-
 templates/components/date_picker.html |  8 +++++++-
 templates/task_orders/step_3.html     |  6 +++++-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index 2a5c99a9..69aa992f 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -120,6 +120,24 @@
         color: $color-gray;
         margin-bottom: 1rem;
       }
+
+      .usa-alert {
+        padding: $gap * 0.5;
+        margin: 0 0 $gap;
+        background-size: 3rem;
+        background-position-x: 1.5rem;
+        background-position-y: 1.25rem;
+
+        &-body {
+          padding-left: 5rem;
+          padding-right: $gap * 2;
+        }
+
+        &-text {
+          font-weight: 550;
+          margin-bottom: 0.5rem;
+        }
+      }
     }
   }
 
@@ -255,7 +273,7 @@
 }
 
 .clin-card {
-  width: 65rem;
+  width: 70rem;
 
   &__title.h4 {
     margin-top: 0;
diff --git a/templates/components/date_picker.html b/templates/components/date_picker.html
index 16588800..9da411f0 100644
--- a/templates/components/date_picker.html
+++ b/templates/components/date_picker.html
@@ -1,3 +1,4 @@
+{% from "components/alert.html" import Alert %}
 {% from "components/icon.html" import Icon %}
 
 {% macro DatePicker(
@@ -7,7 +8,8 @@
   mindate=None,
   maxdate=None,
   watch=False,
-  optional=True) -%}
+  optional=True,
+  date_alert=False) -%}
 
 <date-selector
   {% if maxdate %}maxdate="{{ maxdate.strftime("%Y-%m-%d") }}"{% endif %}
@@ -26,6 +28,10 @@
           {{ label }}
         </div>
 
+        {% if date_alert %}
+          {{ Alert(message="A CLIN's period of performance must end before September 14, 2022.") }}
+        {% endif %}
+
         {% if description %}
           <p class='usa-input__help'>
             {{ description | safe }}
diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html
index b3a7cf19..8d958b3c 100644
--- a/templates/task_orders/step_3.html
+++ b/templates/task_orders/step_3.html
@@ -1,5 +1,6 @@
 {% extends "task_orders/builder_base.html" %}
 
+{% from 'components/alert.html' import Alert %}
 {% from 'components/date_picker.html' import DatePicker %}
 {% from 'components/icon.html' import Icon %}
 {% from 'components/options_input.html' import OptionsInput %}
@@ -169,7 +170,7 @@
           </div>
           <div class="form-row">
             <div class="form-col">
-              {{ DatePicker(fields.end_date, watch=True, optional=False) }}
+              {{ DatePicker(fields.end_date, watch=True, optional=False, date_alert=True) }}
             </div>
           </div>
         {% else %}
@@ -244,6 +245,9 @@
                     <div class="usa-input__title">
                       {{ 'task_orders.form.pop_end' | translate }}
                     </div>
+
+                    {{ Alert(message="A CLIN's period of performance must end before September 14, 2022.") }}
+
                     <p class='usa-input__help'>
                       For example: 07 04 1776
                     </p>

From 90b84a1ffe08da18408546555330cd166908e208 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Tue, 3 Sep 2019 13:38:05 -0400
Subject: [PATCH 06/10] move text to translations file

---
 atst/forms/task_order.py              |  4 ++--
 templates/components/date_picker.html |  6 +++---
 templates/task_orders/step_3.html     | 14 +++++++-------
 translations.yaml                     |  9 ++++++++-
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/atst/forms/task_order.py b/atst/forms/task_order.py
index dc6907c9..bd2a8f77 100644
--- a/atst/forms/task_order.py
+++ b/atst/forms/task_order.py
@@ -35,13 +35,13 @@ class CLINForm(FlaskForm):
     )
     start_date = DateField(
         translate("task_orders.form.pop_start"),
-        description="For example: 07 04 1776",
+        description=translate("task_orders.form.pop_example"),
         format="%m/%d/%Y",
         validators=[Optional()],
     )
     end_date = DateField(
         translate("task_orders.form.pop_end"),
-        description="For example: 07 04 1776",
+        description=translate("task_orders.form.pop_example"),
         format="%m/%d/%Y",
         validators=[Optional()],
     )
diff --git a/templates/components/date_picker.html b/templates/components/date_picker.html
index 9da411f0..0222c33e 100644
--- a/templates/components/date_picker.html
+++ b/templates/components/date_picker.html
@@ -9,7 +9,7 @@
   maxdate=None,
   watch=False,
   optional=True,
-  date_alert=False) -%}
+  pop_end_alert=False) -%}
 
 <date-selector
   {% if maxdate %}maxdate="{{ maxdate.strftime("%Y-%m-%d") }}"{% endif %}
@@ -28,8 +28,8 @@
           {{ label }}
         </div>
 
-        {% if date_alert %}
-          {{ Alert(message="A CLIN's period of performance must end before September 14, 2022.") }}
+        {% if pop_end_alert %}
+          {{ Alert(message="task_orders.form.pop_end_alert" | translate) }}
         {% endif %}
 
         {% if description %}
diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html
index 8d958b3c..cd41eb1e 100644
--- a/templates/task_orders/step_3.html
+++ b/templates/task_orders/step_3.html
@@ -8,7 +8,7 @@
 {% from 'task_orders/form_header.html' import TOFormStepHeader %}
 
 {% set action = url_for("task_orders.submit_form_step_three_add_clins", task_order_id=task_order_id) %}
-{% set next_button_text = "Next: Review Funding" %}
+{% set next_button_text = "task_orders.form.step_3.next_button" | translate %}
 {% set previous_button_link = url_for("task_orders.form_step_two_add_number", task_order_id=task_order_id) %}
 {% set step = "3" %}
 
@@ -31,7 +31,7 @@
       <div class="card">
         <div class="form-row">
           <div class="h4 clin-card__title">
-            CLIN Details
+            {{ 'task_orders.form.clin_details' | translate }}
           </div>
         </div>
         <div class="form-row">
@@ -103,7 +103,7 @@
         <hr>
         <div class="form-row">
           <div class="h4 clin-card__title">
-              CLIN Funding
+              {{ 'task_orders.form.clin_funding' | translate }}
           </div>
         </div>
         {% if fields %}
@@ -159,7 +159,7 @@
         <hr>
         <div class="form-row">
           <div class="h4 clin-card__title">
-            Period of Performance
+            {{ 'task_orders.form.pop' | translate }}
           </div>
         </div>
         {% if fields %}
@@ -170,7 +170,7 @@
           </div>
           <div class="form-row">
             <div class="form-col">
-              {{ DatePicker(fields.end_date, watch=True, optional=False, date_alert=True) }}
+              {{ DatePicker(fields.end_date, watch=True, optional=False, pop_end_alert=True) }}
             </div>
           </div>
         {% else %}
@@ -183,7 +183,7 @@
                       {{ 'task_orders.form.pop_start' | translate }}
                     </div>
                     <p class='usa-input__help'>
-                      For example: 07 04 1776
+                      {{ 'task_orders.form.pop_example' | translate }}
                     </p>
                   </legend>
 
@@ -249,7 +249,7 @@
                     {{ Alert(message="A CLIN's period of performance must end before September 14, 2022.") }}
 
                     <p class='usa-input__help'>
-                      For example: 07 04 1776
+                      {{ 'task_orders.form.pop_example' | translate }}
                     </p>
                   </legend>
 
diff --git a/translations.yaml b/translations.yaml
index 31f2478e..2c86575e 100644
--- a/translations.yaml
+++ b/translations.yaml
@@ -363,9 +363,11 @@ task_orders:
     add_clin: Add another CLIN
     add_to_header: Add your task order
     add_to_description: Now, refer to your document to find the 13-digit task order number. It should be located at lorem ipsum dolar. From now on we'll refer to this portion of funding by the recorded task order number.
+    base_clin_title: CLIN
     clin_title: Enter Contract Line Items
     clin_description: "Refer to your task order to locate your Contract Line Item Numbers (CLINs)."
-    base_clin_title: CLIN
+    clin_details: CLIN Details
+    clin_funding: CLIN Funding
     clin_number_label: CLIN Number
     clin_type_label: Corresponding IDIQ CLIN
     cloud_funding_header: Add the summary of cloud funding
@@ -373,12 +375,17 @@ task_orders:
     draft_alert_title: Your information has been saved
     draft_alert_message: You can return to the Task Order Builder to enter missing information. Once you are finished, you’ll be ready to submit this request.
     obligated_funds_label: Obligated Funds
+    pop: Period of Performance
     pop_end: End Date
+    pop_end_alert: "A CLIN's period of performance must end before September 14, 2022."
+    pop_example: "For example: 07 04 1776"
     pop_start: Start Date
     review_button: Review task order
     supporting_docs_header: Upload your supporting documentation
     supporting_docs_size_limit: Your file may not exceed 64MB
     supporting_docs_text: Upload a single PDF containing all relevant information.
+    step_3:
+      next_button: 'Next: Review Task Order'
     step_5:
       title: Confirm Signature
       description: Finally, plase confirm that your uploaded document representing the information you've entered contains the required signature from your Contracting Officer. You will be informed as soon as CCPO completes their review.

From 1b6a3ca6448b0b80b34675ccc87df12dea892f07 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Tue, 3 Sep 2019 13:45:03 -0400
Subject: [PATCH 07/10] Fix header layout

---
 styles/sections/_task_order.scss       |  7 +++++++
 templates/task_orders/form_header.html | 24 +++++++++---------------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index 69aa992f..f257f764 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -50,6 +50,13 @@
     }
   }
 
+  &__header {
+    .h2,
+    p {
+      margin-bottom: $gap * 0.5;
+    }
+  }
+
   .col {
     flex-grow: 1;
   }
diff --git a/templates/task_orders/form_header.html b/templates/task_orders/form_header.html
index 749a5d30..79821bf7 100644
--- a/templates/task_orders/form_header.html
+++ b/templates/task_orders/form_header.html
@@ -1,21 +1,15 @@
 {% macro TOFormStepHeader(title, description, to_number=None) %}
-  <div class="column">
-    <div class="form-row">
-      <div class="form-col form-col--two-thirds">
-        <div class="h2">
-          {{ title }}
-        </div>
-      </div>
-      <div class="form-col form-col--third task-order__number">
-        {% if to_number %}
-          <strong>Task Order Number:</strong> {{ to_number }}
-        {% endif %}
-      </div>
+  <div class="task-order__header">
+    <div class="h2">
+      {{ title }}
     </div>
-    <div class="form-row">
+    {% if to_number %}
       <p>
-        {{ description }}
+        <strong>Task Order Number:</strong> {{ to_number }}
       </p>
-    </div>
+    {% endif %}
+    <p>
+      {{ description }}
+    </p>
   </div>
 {% endmacro %}

From 08b45137973a60622d33f3b255d29829dfe615fb Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 4 Sep 2019 11:04:05 -0400
Subject: [PATCH 08/10] Remove conditional before assigning clinNumber because
 an empty string was returning false

---
 js/components/clin_fields.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/components/clin_fields.js b/js/components/clin_fields.js
index 0284a433..4516b31f 100644
--- a/js/components/clin_fields.js
+++ b/js/components/clin_fields.js
@@ -123,7 +123,7 @@ export default {
           if (!!event.value) this.endDate = new Date(event.value)
           this.validatePop()
         } else if (event.name.includes(NUMBER)) {
-          if (!!event.value) this.clinNumber = event.value
+          this.clinNumber = event.value
         }
       }
     },

From 659bd131b3133f480c828ce540ca9b1d17b3258b Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 4 Sep 2019 11:14:31 -0400
Subject: [PATCH 09/10] Fix card and input widths

---
 styles/sections/_task_order.scss | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index f257f764..d3c1b3bb 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -95,10 +95,7 @@
 
     .usa-input {
       margin: 0 $gap 0 0;
-
-      input {
-        max-width: none;
-      }
+      width: 45rem;
     }
 
     .form-row {
@@ -280,7 +277,7 @@
 }
 
 .clin-card {
-  width: 70rem;
+  width: 62rem;
 
   &__title.h4 {
     margin-top: 0;

From e39d2fe191386f2e78271c2e00e9877af32525ab Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 4 Sep 2019 11:21:12 -0400
Subject: [PATCH 10/10] Use caller for date picker to show alert message

---
 styles/sections/_task_order.scss      | 4 ++++
 templates/components/date_picker.html | 7 +++----
 templates/task_orders/step_3.html     | 4 +++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index d3c1b3bb..5ab6c814 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -98,6 +98,10 @@
       width: 45rem;
     }
 
+    fieldset.date-picker {
+      width: auto;
+    }
+
     .form-row {
       margin: 0;
     }
diff --git a/templates/components/date_picker.html b/templates/components/date_picker.html
index 0222c33e..9461f301 100644
--- a/templates/components/date_picker.html
+++ b/templates/components/date_picker.html
@@ -8,8 +8,7 @@
   mindate=None,
   maxdate=None,
   watch=False,
-  optional=True,
-  pop_end_alert=False) -%}
+  optional=True) -%}
 
 <date-selector
   {% if maxdate %}maxdate="{{ maxdate.strftime("%Y-%m-%d") }}"{% endif %}
@@ -28,8 +27,8 @@
           {{ label }}
         </div>
 
-        {% if pop_end_alert %}
-          {{ Alert(message="task_orders.form.pop_end_alert" | translate) }}
+        {% if caller %}
+          {{ caller() }}
         {% endif %}
 
         {% if description %}
diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html
index cd41eb1e..464c098a 100644
--- a/templates/task_orders/step_3.html
+++ b/templates/task_orders/step_3.html
@@ -170,7 +170,9 @@
           </div>
           <div class="form-row">
             <div class="form-col">
-              {{ DatePicker(fields.end_date, watch=True, optional=False, pop_end_alert=True) }}
+              {% call DatePicker(fields.end_date, watch=True, optional=False) %}
+                {{ Alert(message="task_orders.form.pop_end_alert" | translate) }}
+              {% endcall %}
             </div>
           </div>
         {% else %}