Merge pull request #630 from dod-ccpo/update-ko-review-message

Update KO Review Message

styles/atat.scss

@@ -24,6 +24,7 @@
 @import 'elements/menu';
 
 @import 'components/topbar';
+@import 'components/top_message';
 @import 'components/global_layout';
 @import 'components/global_navigation';
 @import 'components/portfolio_layout';

styles/components/_top_message.scss

@@ -0,0 +1,35 @@
+.top-message {
+    padding: $gap * 2;
+
+    @include panel-margin;
+    @include media($medium-screen) {
+        padding: $gap * 4;
+    }
+
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+    border-top-style: solid;
+    border-bottom-style: solid;
+    border-bottom-color: $color-gray-light;
+
+    .title {
+        padding-top: $gap * 2;
+        padding-bottom: $gap * 2;
+        padding-left: 0;
+        padding-right:0;
+    }
+
+    .list-title {
+        padding-top: $gap * 4;
+        font-weight: bold;
+    }
+
+    .list {
+        padding-left: $gap * 2.5;
+        margin-top: 0.5rem;
+    }
+
+    .list-item {
+        margin-bottom: 0.5rem;
+    }
+}

templates/fragments/ko_review_alert.html

@@ -1,7 +0,0 @@
-<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/fragments/ko_review_message.html

@@ -0,0 +1,7 @@
+{{ "task_orders.ko_review.message" | translate }}
+<div class="list-title">{{ "fragments.ko_review_message.title" | translate }}:</div>
+<ul class="list">
+    <li class="list-item">{{ "fragments.ko_review_message.bullet_1" | translate }}</li>
+    <li class="list-item">{{ "fragments.ko_review_message.bullet_2" | translate }}</li>
+    <li class="list-item">{{ "fragments.ko_review_message.bullet_3" | translate }}</li>
+</ul>

templates/portfolios/task_orders/review.html

@@ -25,16 +25,18 @@
 
   {% block form %}
 
-    {% 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="top-message">
+      <h1 class="subheading title">
+        {{ "task_orders.ko_review.title" | translate }}
+      </h1>
+      {% include "fragments/ko_review_message.html" %}
+    </div>
 
     <div class="panel">
 
       <div class="panel__heading">
         <h1 class="task-order-form__heading subheading">
-          <div class="h2">{{ "task_orders.ko_review.title" | translate }}</div>
+          <div class="h2">{{ "task_orders.ko_review.review_title" | translate }}</div>
           {{ "task_orders.new.review.section_title"| translate }}
         </h1>
       </div>

translations.yaml

@@ -276,11 +276,11 @@ fragments:
     learn_more_link_text: Learn more about the JEDI Cloud Task Order and the Financial Verification process.
     paragraph_1: 'The next step is to create a Task Order associated with JEDI Cloud.  Please contact a Contracting Officer (KO), Contracting Officer Representative (COR), or a Financial Manager to help with this step.'
     paragraph_2: 'Once the Task Order has been created, you will be asked to provide details about the task order in the Financial Verification step.'
-  ko_review_alert:
-    make_sure: Make sure to take a moment to
-    bullet_1: Verify that all information is accurate and up-to-date
+  ko_review_message:
+    title: Steps
+    bullet_1: Make sure the information below matches the final task order and is accurate and up-to-date
     bullet_2: Upload your Task Order (TO) document
-    bullet_3: Add both the Task Order (TO) and Lines of Accounting (LOA)
+    bullet_3: Add both the Task Order (TO) and Line(s) of Accounting (LOA) numbers
 login:
   ccpo_logo_alt_text: Cloud Computing Program Office Logo
   certificate_selection:
@@ -485,9 +485,9 @@ task_orders:
       invite_button_text: Invite Security Officer
       edit_title: Edit SO
   ko_review:
-    alert_title: Verify Your Info
-    title: Task Order Builder
-    submitted_by: Below is an overview of the projected portfolio submitted by {name}
+    title: Verify Task Order Information
+    message: Grant your team access to the cloud by verifying the Task Order info below.
+    review_title: Task Order Builder
     task_order_information: Task Order Information
 portfolios:
   index: