Convert project graph page to use utility classes for styling

app/assets/stylesheets/_page_specific_files.scss

@@ -19,7 +19,6 @@
 @import './pages/events';
 @import './pages/experience_level';
 @import './pages/experimental_separate_sign_up';
-@import './pages/graph';
 @import './pages/groups';
 @import './pages/help';
 @import './pages/import';

app/assets/stylesheets/framework/variables.scss

@@ -780,7 +780,6 @@ $login-brand-holder-color: #888;
 * Projects
 */
 $project-option-descr-color: #54565b;
-$project-network-controls-color: #888;
 
 /*
  * Monitor Charts

app/assets/stylesheets/pages/graph.scss

-.project-network {
-  border: 1px solid $border-color;
-
-  .controls {
-    color: $project-network-controls-color;
-    font-size: 14px;
-    padding: 5px;
-    border-bottom: 1px solid $border-color;
-    background: $gray-darker;
-  }
-
-  .network-graph {
-    background: $white;
-    height: 500px;
-    overflow-y: scroll;
-    overflow-x: hidden;
-  }
-}
-
-.svg-graph-container {
-  width: 100%;
-
-  .axis-tick {
-    opacity: 0.4;
-  }
-
-  .tick-text {
-    fill: $gl-text-color-secondary;
-  }
-
-  .x-axis-text {
-    fill: $gray-900;
-  }
-
-  .bar-rect {
-    fill: rgba($blue-500, 0.1);
-    stroke: $blue-500;
-  }
-
-  .bar-rect:hover {
-    fill: rgba($blue-700, 0.3);
-  }
-
-  .y-axis-label {
-    line {
-      stroke: $gray-300;
-    }
-
-    text {
-      font-weight: bold;
-      font-size: 12px;
-      fill: $gray-700;
-    }
-  }
-}
-
-.svg-graph-container-with-grab {
-  cursor: grab;
-}
-
-.svg-graph-container-grabbed {
-  cursor: grabbing;
-}
-
-@keyframes flickerAnimation {
-  0% { opacity: 1; }
-  50% { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-.animate-flicker {
-  animation: flickerAnimation 1.5s infinite;
-  fill: $gray-300;
-}

app/views/projects/network/show.html.haml

@@ -2,8 +2,8 @@
 - page_title _("Graph"), @ref
 = render "head"
 %div{ class: container_class }
-  .project-network
-    .controls
+  .project-network.gl-border-1.gl-border-solid.gl-border-gray-300
+    .controls.gl-bg-gray-50.gl-p-2.gl-font-base.gl-text-gray-400.gl-border-b-1.gl-border-b-solid.gl-border-b-gray-300
       = form_tag project_network_path(@project, @id), method: :get, class: 'form-inline network-form' do |f|
         = text_field_tag :extended_sha1, @options[:extended_sha1], placeholder: _("Git revision"), class: 'search-input form-control input-mx-250 search-sha'
         = button_tag class: 'btn btn-success' do
@@ -15,6 +15,6 @@
               %span= _("Begin with the selected commit")
 
     - if @commit
-      .network-graph{ data: { url: @url, commit_url: @commit_url, ref: @ref, commit_id: @commit.id } }
+      .network-graph.gl-bg-white.gl-overflow-scroll.gl-overflow-x-hidden{ data: { url: @url, commit_url: @commit_url, ref: @ref, commit_id: @commit.id } }
         .text-center.gl-mt-3
           .spinner.spinner-md