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] 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 }}