From 4bd4b4d48877ab40205735de8208fbc4e39b1672 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Thu, 7 Feb 2019 15:39:36 -0500
Subject: [PATCH] Add description text to officer edit forms and update styling

---
 styles/sections/_task_order.scss              | 26 +++++++++
 .../portfolios/task_orders/invitations.html   | 56 +++++++++----------
 translations.yaml                             |  4 ++
 3 files changed, 58 insertions(+), 28 deletions(-)

diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index c9bb769b..a40f5c1d 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -361,6 +361,32 @@
     }
 
     .officer__form {
+        padding: 1.5rem;
+        background-color: $color-aqua-lightest;
+        border-left-color: $color-blue;
+        border-left-style: solid;
+        border-left-width: $gap / 2;
+
+      .edit-officer {
+        h4 {
+          color: $color-gray;
+          margin-bottom: 0.5rem;
+        }
+
+        p {
+          font-size: 1.5rem;
+        }
+      }
+
+      .usa-input__title {
+        font-weight: normal;
+      }
+
+      .form-row {
+        margin-bottom: 0rem;
+        margin-top: 0rem;
+      }
+
       .officer__form--actions {
         display: flex;
         flex-direction: row;
diff --git a/templates/portfolios/task_orders/invitations.html b/templates/portfolios/task_orders/invitations.html
index 14a3d389..b41261ea 100644
--- a/templates/portfolios/task_orders/invitations.html
+++ b/templates/portfolios/task_orders/invitations.html
@@ -14,43 +14,43 @@
 {% endmacro %}
 
 {% macro EditOfficerInfo(form, officer_type) -%}
-<div class='officer__form'>
   <template v-if="editing">
-    <div class='alert'>
-      <div class='alert__content'>
-        <div class='form-row'>
-          <div class='form-col form-col--half'>
-            {{ TextInput(form.first_name) }}
-          </div>
-
-          <div class='form-col form-col--half'>
-            {{ TextInput(form.last_name) }}
-          </div>
+    <div class='officer__form'>
+      <div class="edit-officer">
+        <h4>{{ ("task_orders.invitations." + officer_type + ".edit_title")  | translate}}</h4>
+        <p>{{ "task_orders.invitations.edit_text"  | translate}}</p>
+      </div>
+      <div class='form-row'>
+        <div class='form-col form-col--half'>
+          {{ TextInput(form.first_name) }}
         </div>
 
-        <div class='form-row'>
-          <div class='form-col form-col--half'>
-            {{ TextInput(form.email, placeholder='name@mail.mil', validation='email') }}
-          </div>
+        <div class='form-col form-col--half'>
+          {{ TextInput(form.last_name) }}
+        </div>
+      </div>
 
-          <div class='form-col form-col--half'>
-            {{ TextInput(form.phone_number, placeholder='(123) 456-7890', validation='usPhone') }}
-          </div>
+      <div class='form-row'>
+        <div class='form-col form-col--half'>
+          {{ TextInput(form.email, placeholder='name@mail.mil', validation='email') }}
         </div>
-        {% if form.dod_id.data %}
-          {{ TextInput(form.dod_id, validation='dodId', disabled=True)}}
-        {% endif %}
-        <div class='alert__actions officer__form--actions'>
-          <a href="#{{ officer_type }}" v-on:click="cancel" class="icon-link">
-            {{ Icon("x") }}
-            <span>Cancel</span>
-          </a>
-          <input type='submit' class='usa-button usa-button-primary' value='Save Changes' />
+
+        <div class='form-col form-col--half'>
+          {{ TextInput(form.phone_number, placeholder='(123) 456-7890', validation='usPhone') }}
         </div>
       </div>
+      {% if form.dod_id.data %}
+        {{ TextInput(form.dod_id, validation='dodId', disabled=True)}}
+      {% endif %}
+      <div class='alert__actions officer__form--actions'>
+        <a href="#{{ officer_type }}" v-on:click="cancel" class="icon-link">
+          {{ Icon("x") }}
+          <span>Cancel</span>
+        </a>
+        <input type='submit' class='usa-button usa-button-primary' value='Save Changes' />
+      </div>
     </div>
   </template>
-</div>
 {% endmacro %}
 
 {% macro OfficerInfo(task_order, officer_type, form) %}
diff --git a/translations.yaml b/translations.yaml
index 983db1b9..6e52024a 100644
--- a/translations.yaml
+++ b/translations.yaml
@@ -461,21 +461,25 @@ task_orders:
       pending_to: Pending TO Completion
   invitations:
     dod_id_label: DoD ID
+    edit_text: A new invitation e-mail will be sent when new information is saved.
     contracting_officer:
       title: Contracting Officer (KO) Information
       description: You'll need a signature from your KO. You might want to work with your program Financial Manager to get your TO documents moving in the right direction.
       add_button_text: Add / Invite KO
       invite_button_text: Invite KO
+      edit_title: Edit KO
     contracting_officer_representative:
       title: Contracting Officer Representative (COR) Information
       description: Your COR may assist in submitting the Task Order documents within their official system of record.
       add_button_text: Add / Invite COR
       invite_button_text: Invite COR
+      edit_title: Edit COR
     security_officer:
       title: IA Security Officer Information
       description: Your Security Officer will need to answer some security configuration questions in order to generate a DD-254 document, then digitally sign.
       add_button_text: Add / Invite Security Officer
       invite_button_text: Invite Security Officer
+      edit_title: Edit SO
   ko_review:
     alert_title: Verify Your Info
     title: Task Order Builder