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