WS-561: Capability definition UI simplification

Things done in the MR

• Removed icons from the capability step sequence and adjusted the way the font is displayed slightly and the proportions
• Updated capability definition to be more in line with the design of the other components on the page and to reduce confusion
• Removed icons from status badges

Screenshots

Old design

New design

Tickets completed by this MR: WS-461

apps/web/src/app/workspaces/components/capability-request/components/status-badges/status-badge.component.html

@@ -2,35 +2,23 @@
   id="request-status-badge-complete"
   class="badge badge-pill badge-success py-2"
   *ngIf="capabilityRequest.state === 'Complete'"
-  ><span class="fas fa-check"></span
-  ><span id="request-status-badge-txt-complete" class="pl-2">{{
-    capabilityRequest.state.toUpperCase()
-  }}</span>
+  ><span id="request-status-badge-txt-complete">{{ capabilityRequest.state.toUpperCase() }}</span>
 </span>
 <span
   id="request-status-badge-running"
   class="badge badge-pill badge-primary py-2"
   *ngIf="capabilityRequest.state === 'Submitted'"
-  ><span class="fas fa-play"></span
-  ><span id="request-status-badge-txt-running" class="pl-2">{{
-    capabilityRequest.state.toUpperCase()
-  }}</span>
+  ><span id="request-status-badge-txt-running">{{ capabilityRequest.state.toUpperCase() }}</span>
 </span>
 <span
   id="request-status-badge-ready"
   class="badge badge-pill badge-secondary py-2"
   *ngIf="capabilityRequest.state === 'Created'"
-  ><span class="fas fa-dot-circle"></span
-  ><span id="request-status-badge-txt-ready" class="pl-2">{{
-    capabilityRequest.state.toUpperCase()
-  }}</span>
+  ><span id="request-status-badge-txt-ready">{{ capabilityRequest.state.toUpperCase() }}</span>
 </span>
 <span
   id="request-status-badge-failed"
   class="badge badge-pill badge-danger py-2"
   *ngIf="capabilityRequest.state === 'Failed'"
-  ><span class="fas fa-times"></span
-  ><span id="request-status-badge-txt-failed" class="pl-2">{{
-    capabilityRequest.state.toUpperCase()
-  }}</span>
+  ><span id="request-status-badge-txt-failed">{{ capabilityRequest.state.toUpperCase() }}</span>
 </span>