WS-1515: Add color indicator for when staff are assigned or not

apps/web/src/app/workspaces/components/active-capability-requests/active-capability-requests.component.html

@@ -193,18 +193,18 @@
       >
         Processing has not started
       </td>
-      <td>
+      <td
+        [ngClass]="{
+        'staff-assigned' : request.assigned_da,
+        'staff-unassigned' : !request.assigned_da
+        }"
+      >
         <span *ngIf="qaStaff.DA">
           Assigned DA:
           <div ngbDropdown #daDrop="ngbDropdown" (openChange)="pausePolling($event)">
             <form>
               <mat-form-field>
-                <mat-label
-                  [ngClass]="{
-                  'staff-assigned' : request.assigned_da,
-                  'staff-unassigned' : !request.assigned_da
-                  }"
-                >
+                <mat-label>
                   {{ request.assigned_da ? request.assigned_da : "Assign DA" }}
                 </mat-label>
                 <input type="text"
@@ -240,17 +240,18 @@
           </div>
         </span>
       </td>
-      <td>
+      <td
+        [ngClass]="{
+        'staff-assigned' : request.assigned_aod,
+        'staff-unassigned' : !request.assigned_aod
+        }"
+      >
         <span *ngIf="qaStaff.AOD">
           Assigned AOD:
           <div ngbDropdown #aodDrop="ngbDropdown" (openChange)="pausePolling($event)">
             <form>
               <mat-form-field>
                 <mat-label
-                  [ngClass]="{
-                  'staff-assigned' : request.assigned_aod,
-                  'staff-unassigned' : !request.assigned_aod
-                  }"
                 >
                   {{ request.assigned_aod ? request.assigned_aod : "Assign AOD" }}
                 </mat-label>

apps/web/src/app/workspaces/components/active-capability-requests/active-capability-requests.component.scss

 .staff-assigned {
-  color: black;
-  opacity: 1 !important;
+  mat-label {
+    color: black;
+    opacity: 1 !important;
+  }
 }
 
 .staff-unassigned {
-  opacity: 1 !important;
+  background-color: #bfbfbf;
+
+  mat-label {
+    opacity: 1 !important;
+  }
 }
 
 mat-option:last-child:before {