Move hidden class to graph itself; remove background color from play node & align icon

app/assets/javascripts/pipeline.js.es6

@@ -31,7 +31,7 @@
           if ($('.build', $this).length === 1) $this.addClass('no-margin');
         });
       }
-      $('.pipeline-graph-container').removeClass('hidden');
+      $('.pipeline-graph').removeClass('hidden');
     }
   }
 

app/assets/stylesheets/pages/pipelines.scss

@@ -359,11 +359,10 @@
     }
 
     &.playable {
-      background-color: $gray-light;
 
       svg {
-        height: 12px;
-        width: 12px;
+        height: 13px;
+        width: 20px;
         position: relative;
         top: 1px;
 

app/views/projects/commit/_pipeline.html.haml

-.pipeline-graph-container.hidden
+.pipeline-graph-container
   .row-content-block.build-content.middle-block.pipeline-actions
     .pull-right
       .btn.btn-grouped.btn-white.toggle-pipeline-btn
@@ -28,7 +28,7 @@
           in
           = time_interval_in_words pipeline.duration
 
-  .row-content-block.build-content.middle-block.pipeline-graph
+  .row-content-block.build-content.middle-block.pipeline-graph.hidden
     .pipeline-visualization
       %ul.stage-column-list
         - stages = pipeline.stages_with_latest_statuses