From 52a31746d830b6e02a0c3c48b7f19e5637f63cd7 Mon Sep 17 00:00:00 2001
From: Montana <montana-ctr@friends.dds.mil>
Date: Mon, 10 Jun 2019 16:22:54 -0400
Subject: [PATCH] Modal styling

---
 atst/forms/task_order.py                      |  3 +--
 styles/components/_alerts.scss                |  4 ++++
 styles/components/_modal.scss                 | 10 +++++++++-
 styles/elements/_inputs.scss                  |  5 +----
 styles/elements/_typography.scss              |  5 +++++
 templates/components/submit_confirmation.html | 13 ++++++-------
 6 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/atst/forms/task_order.py b/atst/forms/task_order.py
index c418899b..1d622458 100644
--- a/atst/forms/task_order.py
+++ b/atst/forms/task_order.py
@@ -59,7 +59,6 @@ class TaskOrderForm(BaseForm):
 
 class SignatureForm(BaseForm):
     signature = BooleanField(
-        translate("task_orders.sign.digital_signature_label"),
-        description=translate("task_orders.sign.digital_signature_description"),
+        translate("task_orders.sign.digital_signature_description"),
         validators=[Required()],
     )
diff --git a/styles/components/_alerts.scss b/styles/components/_alerts.scss
index 6c368667..be326807 100644
--- a/styles/components/_alerts.scss
+++ b/styles/components/_alerts.scss
@@ -9,6 +9,10 @@
   margin-bottom: $gap;
 }
 
+.usa-alert {
+  padding-bottom: 2.4rem;
+}
+
 @mixin alert {
   padding: $gap * 2;
   border-left-width: $gap / 2;
diff --git a/styles/components/_modal.scss b/styles/components/_modal.scss
index c6e163b5..8ae46015 100644
--- a/styles/components/_modal.scss
+++ b/styles/components/_modal.scss
@@ -52,7 +52,7 @@ body {
       }
 
       @include media($medium-screen) {
-        padding: $gap * 5;
+        padding: $gap * 2.5 $gap * 5;
       }
 
       h1,
@@ -216,4 +216,12 @@ body {
       }
     }
   }
+
+  .usa-button {
+    min-width: 17rem;
+  }
+
+  .usa-input .checkbox {
+    margin-left: 3rem;
+  }
 }
diff --git a/styles/elements/_inputs.scss b/styles/elements/_inputs.scss
index b90e0559..7346d59e 100644
--- a/styles/elements/_inputs.scss
+++ b/styles/elements/_inputs.scss
@@ -51,6 +51,7 @@
     input[type="checkbox"] {
       + label::before {
         box-shadow: 0 0 0 2px $state-color;
+        margin-left: -3rem;
       }
     }
   }
@@ -164,10 +165,6 @@
         margin-top: 0;
         margin-bottom: 0;
       }
-
-      label {
-        font-weight: $font-bold;
-      }
     }
 
     select {
diff --git a/styles/elements/_typography.scss b/styles/elements/_typography.scss
index f45197b6..1ae28d9f 100644
--- a/styles/elements/_typography.scss
+++ b/styles/elements/_typography.scss
@@ -36,6 +36,11 @@ h6 {
   * {
     margin-top: 0;
   }
+
+  em {
+    font-style: normal;
+    font-weight: 400;
+  }
 }
 
 .h1 {
diff --git a/templates/components/submit_confirmation.html b/templates/components/submit_confirmation.html
index 8a1127ae..023afe5e 100644
--- a/templates/components/submit_confirmation.html
+++ b/templates/components/submit_confirmation.html
@@ -6,16 +6,16 @@
     <div>
       <div class="usa-input">
         <label for="{{ modal_id }}-deleted-text">
-          <span class="usa-input__help">
-            Signature confirmation: Task Order #{{task_order.number}}
-          </span>
+          <div class="modal__form--header">
+            <h1>Signature confirmation: <em>Task Order #{{task_order.number}}</em></h1>
+          </div>
           {{ Alert('',
             message="All task orders require a Contracting Officer signature."
           ) }}
         </label>
-        <span v-on:change="toggleValid">
+        <div v-on:change="toggleValid" class="checkbox">
           {{ CheckboxInput(field=form.signature) }}
-        </span>
+        </div>
       </div>
       <div class="action-group">
         <form method="POST" action="{{ submit_action }}">
@@ -23,9 +23,8 @@
           <button class="usa-button usa-button-primary" v-bind:disabled="!valid">
             {{ submit_text }}
           </button>
-          <button v-on:click="deleteText = ''; $root.closeModal('{{ modal_id }}')" class="usa-button usa-button-secondary">{{ "common.cancel" | translate }}</button>
         </form>
-
+        <button v-on:click="$root.closeModal('{{ modal_id }}')" class="usa-button usa-button-secondary">{{ "common.cancel" | translate }}</button>
       </div>
     </div>
   </submit-confirmation>