Adjust Pipeline Details Tooltip for Clarity

openshift · May 4, 2020 · 7c6224c · 7c6224c
1 parent 6ae5639
commit 7c6224c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/...components/pipelines/detail-page-tabs/pipeline-details/PipelineVisualizationStepList.scss b/...components/pipelines/detail-page-tabs/pipeline-details/PipelineVisualizationStepList.scss
@@ -20,13 +20,21 @@
 
   &__step {
     display: flex;
-    margin-bottom: 10px;
+    margin-bottom: var(--pf-global--spacer--xs);
+
+    &.--task-run {
+      margin-bottom: var(--pf-global--spacer--sm);
+    }
 
     &:last-child {
       margin-bottom: 0;
     }
   }
 
+  &__bullet {
+    font-size: 1rem;
+  }
+
   &__icon {
     flex: 0 0 18px;
   }

diff --git a/.../components/pipelines/detail-page-tabs/pipeline-details/PipelineVisualizationStepList.tsx b/.../components/pipelines/detail-page-tabs/pipeline-details/PipelineVisualizationStepList.tsx
@@ -51,19 +51,20 @@ export const PipelineVisualizationStepList: React.FC<PipelineVisualizationStepLi
     <div className="odc-pipeline-vis-steps-list__task-name">{taskName}</div>
     {steps.map(({ duration, name, runStatus: status }) => {
       return (
-        <div className="odc-pipeline-vis-steps-list__step" key={name}>
-          {!isSpecOverview && (
+        <div
+          className={classNames('odc-pipeline-vis-steps-list__step', {
+            '--task-run': !isSpecOverview,
+          })}
+          key={name}
+        >
+          {!isSpecOverview ? (
             <div className="odc-pipeline-vis-steps-list__icon">
               <TooltipColoredStatusIcon status={status} />
             </div>
+          ) : (
+            <span className="odc-pipeline-vis-steps-list__bullet">&bull;</span>
           )}
-          <div
-            className={classNames('odc-pipeline-vis-steps-list__name', {
-              'is-main-focus': isSpecOverview,
-            })}
-          >
-            {name}
-          </div>
+          <div className="odc-pipeline-vis-steps-list__name">{name}</div>
           {!isSpecOverview && (
             <div className="odc-pipeline-vis-steps-list__duration">{duration}</div>
           )}