Updated capability definition to be more in line with the design of the

other components on the page and to reduce confusion

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

@@ -5,7 +5,10 @@
   <div id="definition-parameters-and-versions" class="container-fluid">
     <div class="row">
       <div id="capability-definition-container" class="col-5">
-        <span id="capability-label">Capability</span>
+        <span id="capability-label"
+          >Capability:
+          <strong class="pl-1">{{ capabilityRequest.capability_name.toUpperCase() }}</strong></span
+        >
         <app-capability-definition
           *ngIf="capability !== undefined"
           id="capability-definition"

apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.html

-<div id="definition-container">
-  <h5 id="capability-name"><strong>{{ capability.name.toUpperCase() }}</strong></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" class="container-fluid">
+  <div id="step-sequence">
     <div
-      class="capability-step row rounded rounded-lg mb-1 py-2 align-items-center"
+      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 *ngIf="step[1] !== undefined">{{ step[1].toUpperCase() }}</strong></span>
+      <span class="col text-left px-3"
+        >{{ step[0].toUpperCase() }}
+        <strong class="pl-2" *ngIf="step[1] !== undefined">{{
+          step[1].toUpperCase()
+        }}</strong></span
+      >
     </div>
   </div>
 </div>

apps/web/src/app/workspaces/components/capability-request/components/capability-definition/capability-definition.component.scss

@@ -6,8 +6,6 @@
 
 #definition-container {
   background-color: white;
-  border-radius: 10px;
-  border-top: 4px $container-shadow-color solid;
 
-  padding: 0.25rem 0.5rem;
+  //padding: 0.25rem 0.5rem;
 }