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/capability-definition/capability-definition.component.html

-<div id="definition-container">
-  <h5 id="capability-name">{{ capability.name }}</h5>
+<div id="definition-container" class="container-fluid rounded-top rounded-3 py-2">
+  <!--  <h5 id="capability-name"><strong>{{ capability.name.toUpperCase() }}</strong></h5>-->
 
   <div id="step-sequence">
-    <div class="container-fluid">
-      <div
-        class="row bg-primary rounded rounded-lg mb-1 text-white py-2 align-items-center"
-        *ngFor="let step of capabilityStepList"
+    <div
+      class="capability-step row rounded rounded-lg my-2 mx-1 py-2 align-items-center"
+      *ngFor="let step of capabilityStepList"
+    >
+      <span class="col text-left px-3"
+        >{{ step[0].toUpperCase() }}
+        <strong class="pl-2" *ngIf="step[1] !== undefined">{{
+          step[1].toUpperCase()
+        }}</strong></span
       >
-        <div class="col">{{ step[0].toUpperCase() }} {{ step[1] }}</div>
-        <div class="col-auto">
-          <span class="fas fa-play-circle fa-2x"></span>
-        </div>
-      </div>
     </div>
   </div>
 </div>