Styling

templates/components/date_picker.html

@@ -1,6 +1,11 @@
 {% from "components/icon.html" import Icon %}
 
-{% macro DatePicker(field, mindate=None, maxdate=None) -%}
+{% macro DatePicker(
+  field,
+  label=field.label | striptags,
+  description=field.description,
+  mindate=None,
+  maxdate=None) -%}
 
 <date-selector
   {% if maxdate %}maxdate="{{ maxdate.strftime("%Y-%m-%d") }}"{% endif %}
@@ -10,7 +15,16 @@
   initialyear="{{ field.data.year }}"
   inline-template>
 
-    <div 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 }">
+      <legend>
+        <div class="usa-input__title">
+          {{ label }}
+        </div>
+
+        {% if description %}
+          <span class='usa-input__help'>{{ description | safe }}</span>
+        {% endif %}
+      </legend>
 
       <div class="date-picker-component">
         <input name="{{ field.name }}" v-bind:value="formattedDate" type="hidden" />
@@ -63,7 +77,7 @@
         {% if maxdate and not mindate %}Date must be before or on {{maxdate.strftime("%m/%d/%Y")}}{% endif %}
         {% if mindate and not maxdate %}Date must be after or on {{mindate.strftime("%m/%d/%Y")}}{% endif %}
       </p>
-    </div>
+    </fieldset>
   </date-selector>
 
 {%- endmacro %}

templates/fragments/ko_review_alert.html

@@ -0,0 +1,7 @@
+<br>
+<p>{{ "fragments.ko_review_alert.make_sure" | translate }}:</p>
+<ul>
+<li>{{ "fragments.ko_review_alert.bullet_1" | translate }}</li>
+<li>{{ "fragments.ko_review_alert.bullet_2" | translate }}</li>
+<li>{{ "fragments.ko_review_alert.bullet_3" | translate }}</li>
+</ul>

templates/portfolios/task_orders/review.html

@@ -5,6 +5,7 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/date_picker.html" import DatePicker %}
 {% from "components/text_input.html" import TextInput %}
+{% from "components/alert.html" import Alert %}
 
 
 {% block content %}
@@ -56,6 +57,11 @@
     </div>
   {% endmacro %}
 
+    {% set message = "task_orders.ko_review.submitted_by" | translate({"name": task_order.creator.full_name}) %}
+
+    {{ Alert(("task_orders.ko_review.alert_title" | translate), message, level='warning',
+    fragment="fragments/ko_review_alert.html") }}
+
     <div class="panel">
 
       <div class="panel__heading">
@@ -191,8 +197,10 @@
           </div>
         </div>
 
-        {{ DatePicker(form.start_date) }}
-        {{ DatePicker(form.end_date) }}
+        <div class="form__sub-fields">
+          {{ DatePicker(form.start_date) }}
+          {{ DatePicker(form.end_date) }}
+        </div>
 
         <hr>
 
@@ -210,13 +218,16 @@
 
         <div class="h2">{{ "task_orders.ko_review.task_order_information"| translate }}</div>
 
-        {{ form.pdf.label }}
-        {{ form.pdf.description }}
-        {{ form.pdf }}
-        {{ TextInput(form.number) }}
-
-        {{ TextInput(form.loa) }}
-        {{ TextInput(form.custom_clauses, paragraph=True) }}
+        <div class="form__sub-fields">
+          <div class="usa-input">
+            <div class="usa-input__title">{{ form.pdf.label }}</div>
+            {{ form.pdf.description }}
+            {{ form.pdf }}
+          </div>
+          {{ TextInput(form.number) }}
+          {{ TextInput(form.loa) }}
+          {{ TextInput(form.custom_clauses, paragraph=True) }}
+        </div>
 
       </div>
     </div>