fix naming for convention

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

@@ -145,9 +145,9 @@
           <app-status-badge [capabilityRequest]="request"></app-status-badge>
         </a>
       </td>
-      <td [ngClass]="{'stage1_status': getExecutionStatusName(request) === 'Awaiting QA',
-       'exec_status': getExecutionStatusName(request) === 'Executing',
-       'stage2_status': getExecutionStatusName(request) === 'Stage 2 Review'}">{{ getExecutionStatusName(request) }}</td>
+      <td [ngClass]="{'stage1-status': getExecutionStatusName(request) === 'Awaiting QA',
+       'execution-status': getExecutionStatusName(request) === 'Executing',
+       'stage2-status': getExecutionStatusName(request) === 'Stage 2 Review'}">{{ getExecutionStatusName(request) }}</td>
       <td>{{ getMetadata(request).sdm_id }}</td>
       <td>{{ getMetadata(request).bands ? getMetadata(request).bands.split(' ').join(', ') : "" }}</td>
       <td>{{ getMetadata(request).array_config }}</td>

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

@@ -13,21 +13,21 @@
   }
 }
 
-.exec_status {
+.execution-status {
   background-color: #FFC0CB;
   mat-label {
     opacity: 1 !important;
   }
 }
 
-.stage1_status {
+.stage1-status {
   background-color: #99FFFF;
   mat-label {
     opacity: 1 !important;
   }
 }
 
-.stage2_status {
+.stage2-status {
   background-color: #FF7F50;
   mat-label {
     opacity: 1;