Style PoP Section

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;

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

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>