Modal styling

atst/forms/task_order.py

@@ -59,7 +59,6 @@ class TaskOrderForm(BaseForm):
 
 class SignatureForm(BaseForm):
     signature = BooleanField(
-        translate("task_orders.sign.digital_signature_label"),
+        translate("task_orders.sign.digital_signature_description"),
-        description=translate("task_orders.sign.digital_signature_description"),
         validators=[Required()],
     )

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;

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;
+  }
 }

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 {

styles/elements/_typography.scss

@@ -36,6 +36,11 @@ h6 {
   * {
     margin-top: 0;
   }
+
+  em {
+    font-style: normal;
+    font-weight: 400;
+  }
 }
 
 .h1 {

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">
+          <div class="modal__form--header">
-            Signature confirmation: Task Order #{{task_order.number}}
+            <h1>Signature confirmation: <em>Task Order #{{task_order.number}}</em></h1>
-          </span>
+          </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>