Fix spacing throught form and move all TO form related styling to task order stylesheet

styles/elements/_icon_link.scss

@@ -68,4 +68,8 @@
     opacity: 0.3;
     pointer-events: none;
   }
+
+  &.icon-link--left {
+    padding-left: 0;
+  }
 }

styles/elements/_icons.scss

@@ -55,11 +55,19 @@
     @include icon-size(24);
   }
 
-  &.icon--remove, &.icon--error {
+  &.icon--remove, &.icon--red {
     @include icon-color($color-red);
   }
 
-  &.icon--ok {
+  &.icon--green {
-    @include icon-color($color-green)
+    @include icon-color($color-green);
+  }
+
+  &.icon--gray {
+    @include icon-color($color-gray);
+  }
+
+  &.icon--medium {
+    @include icon-size(12);
   }
 }

styles/elements/_panels.scss

@@ -59,27 +59,6 @@
       margin: ($gap * 4) 0;
       padding: 0 ($gap * 4);
     }
-
-    h1, h2, h3, h4, h5, h6 {
-
-      &.subheading {
-        color: $color-gray;
-      }
-
-      &.inactive {
-        color: $color-gray-light;
-      }
-    }
-
-    .error {
-      color: $color-red;
-      font-weight: $font-bold;
-    }
-
-    .ok {
-      color: $color-green;
-      font-weight: $font-bold;
-    }
   }
 
   .panel__heading {
@@ -101,7 +80,7 @@
       margin: 0;
       display: inline-block;
 
-      .subtitle, &.gray {
+      .subtitle {
         color: $color-gray;
       }
     }

styles/elements/_tables.scss

@@ -76,14 +76,6 @@
     &:last-child {
       margin-bottom: 0;
     }
-
-    &.funding-summary {
-      tr td {
-        margin: 0;
-        padding: 0;
-        border-bottom: 0;
-      }
-    }
   }
 }
 

styles/sections/_task_order.scss

@@ -162,3 +162,40 @@
     }
   }
 }
+
+.task-order-form {
+  .task-order-form__heading {
+    margin-bottom: 0;
+
+    &.inactive {
+      color: $color-gray-light;
+    }
+
+    &.subheading {
+      color: $color-gray;
+    }
+  }
+
+  .funding-summary__table {
+    tr td {
+      border-bottom: 0;
+      padding: 0.5rem 1.5rem;
+
+      .funding-summary__td {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .task-order-invite-message {
+    &.not-sent {
+      color: $color-red;
+      font-weight: $font-bold;
+    }
+
+    &.sent {
+      color: $color-green;
+      font-weight: $font-bold;
+    }
+  }
+}

templates/task_orders/_new.html

@@ -2,7 +2,7 @@
 
 {% block content %}
 
-<div class="col">
+<div class="col task-order-form">
 
   {% include 'task_orders/new/menu.html' %}
 
@@ -19,7 +19,7 @@
     <div class="panel">
 
       <div class="panel__heading">
-        <h1 class="gray">
+        <h1 class="task-order-form__heading subheading">
           <div class="h2">Task Order Builder</div>
           {% block heading %}{% endblock %}
         </h1>

templates/task_orders/new/app_info.html

@@ -12,7 +12,7 @@
 {% block form %}
 
 <!-- App Info Section -->
-<h3 class="subheading">{{ "task_orders.new.app_info.basic_info_title"| translate }}</h3>
+<h3 class="task-order-form__heading subheading">{{ "task_orders.new.app_info.basic_info_title"| translate }}</h3>
 {{ TextInput(form.portfolio_name, placeholder="The name of your office or organization") }}
 {{ TextInput(form.scope, paragraph=True) }}
 <p><i>{{ "task_orders.new.app_info.sample_scope" | translate | safe }}</i></p>

templates/task_orders/new/funding.html

@@ -39,12 +39,12 @@
     <h3 class="subheading">{{ "task_orders.new.funding.cloud_calculations_title" | translate }}</h3>
     <p>{{ "task_orders.new.funding.cloud_calculations_paragraph" | translate }}</p>
 
-    <h4>{{ "task_orders.new.funding.cloud_offerings_title" | translate }}</h4>
+    <h4 class="task-order-form__heading">{{ "task_orders.new.funding.cloud_offerings_title" | translate }}</h4>
     <p>{{ "task_orders.new.funding.cloud_offerings_paragraph" | translate }}</p>
     {{ TextInput(form.clin_01, validation='dollars', placeholder="$0.00") }}
     {{ TextInput(form.clin_02, validation='dollars', disabled=(not config.CLASSIFIED)) }}
 
-    <h4>{{ "task_orders.new.funding.support_assistance_title" | translate }}</h4>
+    <h4 class="task-order-form__heading">{{ "task_orders.new.funding.support_assistance_title" | translate }}</h4>
     <p>{{ "task_orders.new.funding.support_assistance_paragraph" | translate }}</p>
     {{ TextInput(form.clin_03, validation='dollars', tooltip='The cloud support and assistance packages cannot be used as a primary development resource.', placeholder="$0.00") }}
     {{ TextInput(form.clin_04, validation='dollars', tooltip='The cloud support and assistance packages cannot be used as a primary development resource.', disabled=(not config.CLASSIFIED)) }}
@@ -56,7 +56,7 @@
 {% block next %}
 <div class="row">
   <div class="col col--grow">
-    <p>{{ "task_orders.new.funding.total" | translate }}<br><span id="to-target"></span></p>
+    <p><strong><span  class="task-order-form__heading subheading">{{ "task_orders.new.funding.total" | translate }}</span><br><span id="to-target"></span></strong></p>
   </div>
   <div class="col col--grow">
     {{ super() }}

templates/task_orders/new/review.html

@@ -22,17 +22,17 @@
 
 <div class="row">
   <div class="col col--grow">
-    <h4>{{ "task_orders.new.review.portfolio"| translate }}</h4>
+    <h4 class='task-order-form__heading'>{{ "task_orders.new.review.portfolio"| translate }}</h4>
     <p>{{ task_order.portfolio_name or RequiredLabel() }}</p>
   </div>
 
   <div class="col col--grow">
-    <h4>{{ "task_orders.new.review.dod"| translate }}</h4>
+    <h4 class='task-order-form__heading'>{{ "task_orders.new.review.dod"| translate }}</h4>
     <p>{{ task_order.defense_component_description or RequiredLabel() }}</p>
   </div>
 </div>
 
-<h4>{{ "task_orders.new.review.scope"| translate }}</h4>
+<h4 class='task-order-form__heading'>{{ "task_orders.new.review.scope"| translate }}</h4>
 <p>
 {{ task_order.scope or RequiredLabel() }}
 </p>
@@ -43,17 +43,17 @@
 
 <div class="row">
   <div class="col col--grow">
-    <h4>{{ "task_orders.new.review.migration"| translate }}</h4>
+    <h4 class='task-order-form__heading'>{{ "task_orders.new.review.migration"| translate }}</h4>
     <p>{{ task_order.app_migration_description or RequiredLabel() }}</p>
   </div>
 
   <div class="col col--grow">
-    <h4>{{ "task_orders.new.review.native_apps"| translate }}</h4>
+    <h4 class='task-order-form__heading'>{{ "task_orders.new.review.native_apps"| translate }}</h4>
     <p>{{ task_order.native_apps_description or RequiredLabel() }}</p>
   </div>
 </div>
 
-<h4>{{ "task_orders.new.review.complexity"| translate }}</h4>
+<h4 class='task-order-form__heading'>{{ "task_orders.new.review.complexity"| translate }}</h4>
 {% if task_order.complexity %}
   <ul class="checklist">
   {% for item in task_order.complexity %}
@@ -68,7 +68,7 @@
 
 <div class="row">
   <div class="col col--grow">
-    <h4>{{ "task_orders.new.review.team"| translate }}</h4>
+    <h4 class='task-order-form__heading'>{{ "task_orders.new.review.team"| translate }}</h4>
     {% if task_order.dev_team %}
       <ul class="checklist">
       {% for item in task_order.dev_team %}
@@ -83,7 +83,7 @@
   </div>
 
   <div class="col col--grow">
-    <h4>{{ "task_orders.new.review.experience"| translate }}</h4>
+    <h4 class='task-order-form__heading'>{{ "task_orders.new.review.experience"| translate }}</h4>
     <p>{{ task_order.team_experience_description or RequiredLabel() }}</p>
   </div>
 </div>
@@ -94,24 +94,24 @@
 
 <div class="row">
   <div class="col col--grow">
-    <h4>{{ "task_orders.new.review.performance_period"| translate }}</h4>
+    <h4 class='task-order-form__heading'>{{ "task_orders.new.review.performance_period"| translate }}</h4>
     {{ task_order.performance_length_description or RequiredLabel() }}
-    <p><a href="#" class='icon-link' download>{{ Icon('download') }} {{ "task_orders.new.review.usage_est_link"| translate }}</a></p>
+    <p><a href="#" class='icon-link icon-link--left' download>{{ Icon('download') }} {{ "task_orders.new.review.usage_est_link"| translate }}</a></p>
   </div>
 
   <div class="col col--grow">
-    <table class="funding-summary">
+    <table class="funding-summary__table">
       <tbody>
         <tr>
           <td><h4>{{ "task_orders.new.review.to_value"| translate }}</h4></td>
           <td class="table-cell--align-right">{{ '${:,.2f}'.format(task_order.budget) }}</td>
         </tr>
         <tr>
-          <td><h4>{{ "task_orders.new.review.clin_1"| translate }}</h4></td>
+          <td><h4 class='task-order-form__heading funding-summary__td'>{{ "task_orders.new.review.clin_1"| translate }}</h4></td>
           <td class="table-cell--align-right">{{ '${:,.2f}'.format(task_order.clin_01) }}</td>
         </tr>
         <tr>
-          <td><h4 {% if not config.CLASSIFIED %} class="inactive" {% endif %}>
+          <td><h4 class="task-order-form__heading funding-summary__td{% if not config.CLASSIFIED %} inactive{% endif %}">
             {{ "task_orders.new.review.clin_2"| translate }}
             {% if not config.CLASSIFIED %}
               <div>{{ "task_orders.new.review.classified_inactive"| translate }}</div>
@@ -124,11 +124,11 @@
           </td>
         </tr>
         <tr>
-          <td><h4>{{ "task_orders.new.review.clin_3"| translate }}</h4></td>
+          <td><h4 class='task-order-form__heading funding-summary__td'>{{ "task_orders.new.review.clin_3"| translate }}</h4></td>
           <td class="table-cell--align-right">{{ '${:,.2f}'.format(task_order.clin_03) }}</td>
         </tr>
         <tr>
-            <td><h4 {% if not config.CLASSIFIED %} class="inactive" {% endif %}>
+            <td><h4 class="task-order-form__heading funding-summary__td{% if not config.CLASSIFIED %} inactive{% endif %}">
               {{ "task_orders.new.review.clin_4"| translate }}
               {% if not config.CLASSIFIED %}
                 <div>{{ "task_orders.new.review.classified_inactive"| translate }}</div>
@@ -151,42 +151,42 @@
 
 <div class="row">
   <div class="col col--grow">
-    <h4>{{ "task_orders.new.review.ko"| translate }}</h4>
+    <h4 class='task-order-form__heading'>{{ "task_orders.new.review.ko"| translate }}</h4>
     {{ task_order.ko_first_name }} {{ task_order.ko_last_name }}<br>
     {{ task_order.ko_email }}<br>
     {{ task_order.ko_phone }}<br>
     {{ "task_orders.new.review.dod_id"| translate }} {{ task_order.ko_dod_id}}<br>
     {% if task_order.ko_invite %}
-      <span class="ok">{{ Icon('ok', classes='icon--ok') }} {{ "task_orders.new.review.invited"| translate }}</span>
+      {{ Icon('ok', classes='icon--green') }} <span class="task-order-invite-message sent">{{ "task_orders.new.review.invited"| translate }}</<span>
     {% else %}
-      <span class="error">{{ Icon('alert', classes='icon--error') }} {{ "task_orders.new.review.not_invited"| translate }}</span>
+      {{ Icon('alert', classes='icon--red') }} <span class="task-order-invite-message not-sent">{{ "task_orders.new.review.not_invited"| translate }}</span>
     {% endif %}
   </div>
 
   <div class="col col--grow">
-    <h4>{{ "task_orders.new.review.cor"| translate }}</h4>
+    <h4 class='task-order-form__heading'>{{ "task_orders.new.review.cor"| translate }}</h4>
     {{ task_order.cor_first_name }} {{ task_order.cor_last_name }}<br>
     {{ task_order.cor_email }}<br>
     {{ task_order.cor_phone }}<br>
     {{ "task_orders.new.review.dod_id"| translate }} {{ task_order.cor_dod_id}}<br>
     {% if task_order.cor_invite %}
-      <span class="ok">{{ Icon('ok', classes='icon--ok') }} {{ "task_orders.new.review.invited"| translate }}</span>
+      {{ Icon('ok', classes='icon--green') }} <span class="task-order-invite-message sent">{{ "task_orders.new.review.invited"| translate }}</<span>
     {% else %}
-      <span class="error">{{ Icon('alert', classes='icon--error') }} {{ "task_orders.new.review.not_invited"| translate }}</span>
+      {{ Icon('alert', classes='icon--red') }} <span class="task-order-invite-message not-sent">{{ "task_orders.new.review.not_invited"| translate }}</span>
     {% endif %}
   </div>
 </div>
 <div class="row">
   <div class="col col--grow">
-    <h4>{{ "task_orders.new.review.so"| translate }}</h4>
+    <h4 class='task-order-form__heading'>{{ "task_orders.new.review.so"| translate }}</h4>
     {{ task_order.so_first_name }} {{ task_order.so_last_name }}<br>
     {{ task_order.so_email }}<br>
     {{ task_order.so_phone }}<br>
     {{ "task_orders.new.review.dod_id"| translate }} {{ task_order.so_dod_id}}<br>
     {% if task_order.so_invite %}
-      <span class="ok">{{ Icon('ok', classes='icon--ok') }} {{ "task_orders.new.review.invited"| translate }}</span>
+      {{ Icon('ok', classes='icon--green') }} <span class="task-order-invite-message sent">{{ "task_orders.new.review.invited"| translate }}</<span>
     {% else %}
-      <span class="error">{{ Icon('alert', classes='icon--error') }} {{ "task_orders.new.review.not_invited"| translate }}</span>
+      {{ Icon('alert', classes='icon--red') }} <span class="task-order-invite-message not-sent">{{ "task_orders.new.review.not_invited"| translate }}</span>
     {% endif %}
   </div>
 </div>
@@ -195,7 +195,7 @@
 
 {% block next %}
   <div class='action-group'>
-    <input type='submit' class='usa-button usa-button-primary' value='Send Invitations' />
+    <input type='submit' class='usa-button usa-button-primary' value='Done' />
   </div>
 {% endblock %}