Update pipeline graph styles to match mockup

app/assets/javascripts/pipeline.js.es6

 (function() {
+
+  function addMarginToBuild () {
+    const $secondChild = $('.build:nth-child(2)');
+    if ($secondChild.length) {
+      $secondChild.closest('.stage-column').addClass('left-margin');
+    }
+  }
+
   function toggleGraph() {
     const $pipelineBtn = $(this).closest('.toggle-pipeline-btn');
     const $pipelineGraph = $(this).closest('.row-content-block').next('.pipeline-graph');
@@ -21,4 +29,5 @@
   }
 
   $(document).on('click', '.toggle-pipeline-btn', toggleGraph);
+  $(document).on('ready', addMarginToBuild);
 })();

app/assets/stylesheets/pages/pipelines.scss

@@ -303,7 +303,13 @@
 .stage-column {
   display: inline-block;
   vertical-align: top;
-  margin-right: 65px;
+  margin-right: 48px;
+
+  &.left-margin {
+    &:not(:first-child) {
+      margin-left: 48px;
+    }
+  }
 
   li {
     list-style: none;
@@ -321,9 +327,9 @@
   .build {
     border: 1px solid $border-color;
     position: relative;
-    padding: 6px 10px;
+    padding: 8px 10px;
     border-radius: 30px;
-    width: 150px;
+    width: 186px;
     margin-bottom: 10px;
 
     &.playable {
@@ -443,9 +449,9 @@
         content: '';
         position: absolute;
         top: 50%;
-        right: -69px;
+        right: -48px;
         border-top: 2px solid $border-color;
-        width: 69px;
+        width: 48px;
         height: 1px;
       }
     }
@@ -457,22 +463,22 @@
         top: -47px;
         position: absolute;
         border-bottom: 2px solid $border-color;
-        width: 20px;
+        width: 25px;
         height: 65px;
       }
 
       // Right connecting curves
       &::after {
-        right: -20px;
+        right: -25px;
         border-right: 2px solid $border-color;
-        border-radius: 0 0 15px;
+        border-radius: 0 0 20px;
       }
 
       // Left connecting curves
       &::before {
-        left: -20px;
+        left: -25px;
         border-left: 2px solid $border-color;
-        border-radius: 0 0 0 15px;
+        border-radius: 0 0 0 20px;
       }
     }
 
@@ -538,20 +544,20 @@
       width: 21px;
       height: 25px;
       position: absolute;
-      top: -29px;
+      top: -30px;
       border-top: 2px solid $border-color;
     }
 
     &::after {
-      left: -39px;
+      left: -44px;
       border-right: 2px solid $border-color;
-      border-radius: 0 15px;
+      border-radius: 0 20px;
     }
 
     &::before {
-      right: -39px;
+      right: -44px;
       border-left: 2px solid $border-color;
-      border-radius: 15px 0 0;
+      border-radius: 20px 0 0;
     }
   }
 }