Highlight task order status on task order view page

styles/sections/_task_order.scss

@@ -60,6 +60,18 @@
     }
   }
 
+  .label--pending {
+    background-color: $color-gold;
+  }
+
+  .label--active {
+    background-color: $color-green;
+  }
+
+  .label--expired {
+    background-color: $color-red;
+  }
+
   .task-order-heading {
     align-items: center;
     justify-content: space-between;

templates/portfolios/task_orders/show.html

@@ -63,7 +63,7 @@
   <div class="panel task-order-heading row">
     <div class="panel__content task-order-heading__name row">
       <h2>New Task Order</h2>
-      <span class="label label--{{ 'warning' if task_order.is_pending }}">{{ task_order.status.value }}</span>
+      <span class="label label--{{ task_order.status.value.lower() }}">{{ task_order.status.value }}</span>
     </div>
     <div class="task_order-heading__details row">
       <div class="task-order-heading__value col">