Proper colors for TO statuses

atst/models/task_order.py

@@ -15,7 +15,7 @@ class Status(Enum):
     ACTIVE = "Active"
     UPCOMING = "Upcoming"
     EXPIRED = "Expired"
-    UNSIGNED = "Unsigned"
+    UNSIGNED = "Not signed"
 
 
 SORT_ORDERING = {

atst/routes/task_orders/index.py

@@ -4,6 +4,7 @@ from . import task_orders_bp
 from atst.domain.authz.decorator import user_can_access_decorator as user_can
 from atst.domain.portfolios import Portfolios
 from atst.domain.task_orders import TaskOrders
+from atst.models.task_order import Status
 from atst.models import Permissions
 
 
@@ -32,4 +33,11 @@ def review_task_order(task_order_id):
 def portfolio_funding(portfolio_id):
     portfolio = Portfolios.get(g.current_user, portfolio_id)
     task_orders = TaskOrders.sort(portfolio.task_orders)
-    return render_template("portfolios/task_orders/index.html", task_orders=task_orders)
+    label_colors = {
+        Status.DRAFT: "warning",
+        Status.ACTIVE: "success",
+        Status.UPCOMING: "info",
+        Status.EXPIRED: "error",
+        Status.UNSIGNED: "purple"
+    }
+    return render_template("portfolios/task_orders/index.html", task_orders=task_orders, label_colors=label_colors)

styles/elements/_labels.scss

@@ -33,4 +33,8 @@
   &.label--success {
     background-color: $color-green;
   }
+
+  &.label--purple {
+    background-color: $color-purple;
+  }
 }

styles/sections/_task_order.scss

@@ -73,6 +73,9 @@
 .task-order-card .label {
   font-size: $small-font-size;
   margin-right: 2 * $gap;
+  min-width: 7rem;
+  display: flex;
+  justify-content: space-around;
 }
 
 .task-order-card__buttons .usa-button {

templates/portfolios/task_orders/index.html

@@ -45,7 +45,7 @@
     {% for task_order in task_orders %}
       <div class="card task-order-card">
         <div class="card__status">
-          <span class='label label--{{ label }}'>{{ task_order.display_status }}</span>
+          <span class='label label--{{ label_colors[task_order.status] }}'>{{ task_order.display_status }}</span>
           {{ TaskOrderDate(task_order) }}
           <span class="card__status-spacer"></span>
           <span class="card__button">