Merge pull request #982 from dod-ccpo/to-form-step-4-styling

TO form review styling

styles/elements/_icon_link.scss

@@ -83,7 +83,9 @@
   }
 
   &.icon-link--download {
-    @include icon-link-color($color-black) .icon {
+    font-weight: $font-normal;
+    padding-left: 0;
+    .icon {
       @include icon-color($color-green);
     }
   }

styles/sections/_task_order.scss

@@ -24,7 +24,7 @@
 
   hr {
     border: 0;
-    border-bottom: 1px solid $color-gray-light;
+    border-bottom: 1px solid $color-gray-lighter;
     margin-top: $gap * 4;
     margin-bottom: $gap * 4;
   }
@@ -53,8 +53,9 @@
     margin-top: $gap * 2;
   }
 
-  .task-order__details {
-    max-width: 65%;
+  .task-order__review {
+    .h2 {
+      margin-bottom: $gap * 4;
     }
 
     .totals-box {
@@ -62,10 +63,10 @@
       padding-top: $gap * 2;
       flex-grow: unset;
       margin-left: $gap * 6;
-    margin-top: $gap * 3;
-    width: 35%;
       display: table;
       background-color: $color-gray-lightest;
+      min-width: 350px;
+    }
   }
 
   .usa-input__title,

templates/components/totals_box.html

@@ -1,6 +1,6 @@
 {% macro TotalsBox(task_order=None, obligated_funds=0, contract_amount=0) -%}
 
-  <div class="col totals-box">
+  <div class="totals-box">
     {% if task_order %}
       {% set obligated_funds = task_order.total_obligated_funds %}
       {% set contract_amount = task_order.total_contract_amount %}

templates/fragments/task_order_review.html

@@ -3,20 +3,25 @@
 {% from "components/totals_box.html" import TotalsBox %}
 
 
-<div class="task-order">
-  {{ SemiCollapsibleText() }}
+<div class="task-order__review">
+  <div class="form-row">
+    <div class="form-col">
+      <div class="h2">
+        {{ "task_orders.review.review_your_task_order" | translate }}
+      </div>
+
+      <div class="h3">
+        {{ 'task_orders.review.pdf_title' | translate }}
+      </div>
+      <a class="icon-link icon-link--download" href="{{ url_for('task_orders.download_task_order_pdf', task_order_id=task_order.id) }}">
+        {{ Icon('check-circle-solid') }}
+        {{ task_order.pdf.filename }}
+      </a>
 
       <hr>
 
-  <div class="h1">
-    {{ "task_orders.review.review_your_task_order" | translate }}
-  </div>
-  <p>
-    {{ "task_orders.review.check_paragraph" | translate }}
-  </p>
-  <div class="row">
       <div class="col task-order__details">
-      <div class="h4">
+        <div class="h3">
           {{ "task_orders.review.task_order_number" | translate }}
         </div>
         <div>{{task_order.number}}</div>
@@ -66,20 +71,10 @@
             </tbody>
           </table>
         {% endfor %}
-
-      <hr>
-
-      <div class="h3">
-        {{ "task_orders.review.supporting_document.title" | translate }}
-      </div>
-      <div class="h4">
-        <a class="icon-link icon-link--download" href="{{ url_for('task_orders.download_task_order_pdf', task_order_id=task_order.id) }}">
-          {{ Icon('check-circle-solid') }}
-          {{ task_order.pdf.filename }}
-        </a>
       </div>
     </div>
+    <div class="form-col">
       {{ TotalsBox(task_order=task_order) }}
-
+    </div>
   </div>
 </div>

translations.yaml

@@ -323,9 +323,10 @@ portfolios:
       reporting: Reporting
 task_orders:
   review:
+    pdf_title: Approved Task Order
     review_your_task_order: Review your task order
-    funding_summary: Funding summary
-    task_order_number: Task order number - 10 digit found in your system of record
+    funding_summary: Task Order Summary
+    task_order_number: Task Order Number
     check_paragraph: Check to make sure the information you entered is correct. After submission, you will confirm this task order was signed by a contracting officer. Thereafter, you will be informed as soon as CCPO completes their review.
     supporting_document:
       title: Supporting document
@@ -366,7 +367,7 @@ task_orders:
   sign:
     digital_signature_description: 'I acknowledge that I have read and fully understand the DoD CCPO JEDI agreements and completed all the necessary steps, as detailed in the Federal Acquisition Regulation (FAR).'
 JEDICLINType:
-  JEDI_CLIN_1: 'CLIN 1:'
+  JEDI_CLIN_1: 'Base CLIN 0001: Unclassified IaaS and PaaS'
   JEDI_CLIN_2: 'CLIN 2: Classified Cloud Services - 0002'
   JEDI_CLIN_3: 'CLIN 3:'
   JEDI_CLIN_4: 'CLIN 4:'