Add new icons for every CI status

app/assets/stylesheets/pages/issues.scss

@@ -78,6 +78,14 @@ form.edit-issue {
   }
 }
 
+.merge-request-ci-status {
+  svg {
+    margin-right: 4px;
+    position: relative;
+    top: 1px;
+  }
+}
+
 @media (max-width: $screen-xs-max) {
   .issue-btn-group {
     width: 100%;

app/assets/stylesheets/pages/merge_requests.scss

@@ -60,8 +60,10 @@
   .ci_widget {
     border-bottom: 1px solid #eef0f2;
 
-    i {
+    svg {
       margin-right: 4px;
+      position: relative;
+      top: 1px;
     }
 
     &.ci-success {
@@ -196,6 +198,16 @@
 
     .merge-request-title {
       margin-bottom: 2px;
+
+      .ci-status-link {
+
+        svg {
+          height: 16px;
+          width: 16px;
+          position: relative;
+          top: 3px;
+        }
+      }
     }
   }
 

app/assets/stylesheets/pages/pipelines.scss

@@ -49,7 +49,7 @@
 
   .commit-link {
 
-    .ci-running {
+    .ci-status {
 
       svg {
         top: 1px;
@@ -135,9 +135,8 @@
   .stage-cell {
 
     svg {
-      height: 13px;
-      width: 13px;
-      margin-left: 3px;
+      height: 18px;
+      width: 18px;
     }
   }
 

app/assets/stylesheets/pages/status.scss

@@ -41,6 +41,14 @@
       color: $blue-normal;
       border-color: $blue-normal;
     }
+
+    svg {
+      height: 13px;
+      width: 13px;
+      position: relative;
+      top: 1px;
+      margin: 0 3px;
+    }
   }
 
   .ci-status-icon-success {
@@ -62,18 +70,3 @@
     color: $gl-gray;
   }
 }
-
-.ci-running,
-.ci-status-icon-running {
-  svg {
-    height: 13px;
-    width: 13px;
-    position: relative;
-    top: 2px;
-    margin: 0 3px;
-  }
-
-  &:hover {
-    text-decoration: none;
-  }
-}

app/helpers/ci_status_helper.rb

@@ -26,18 +26,20 @@ module CiStatusHelper
     icon_name =
       case status
       when 'success'
-        'check'
+        'icon_status_success'
+      when 'success_with_warnings'
+        'icon_status_warning'
       when 'failed'
-        'close'
+        'icon_status_failed'
       when 'pending'
-        'clock-o'
+        'icon_status_pending'
       when 'running'
-        'icon_running'
+        'icon_status_running'
       else
-        'circle'
+        'icon_status_cancel'
       end
 
-    status == 'running' ? custom_icon(icon_name) : icon(icon_name + ' fw')
+    custom_icon(icon_name)
   end
 
   def render_commit_status(commit, tooltip_placement: 'auto left', cssclass: '')

app/views/projects/ci/pipelines/_pipeline.html.haml

@@ -35,7 +35,7 @@
 
     - stages_status = pipeline.statuses.latest.stages_status
     - stages.each do |stage|
-      %td
+      %td.stage-cell
         - status = stages_status[stage]
         - tooltip = "#{stage.titleize}: #{status || 'not found'}"
         - if status

app/views/shared/icons/_icon_running.svg → app/views/shared/icons/_icon_status_running.svg

@@ -6,7 +6,7 @@
     </mask>
   </defs>
   <g fill="none" fill-rule="evenodd">
-    <use stroke="#2D9FD8" stroke-width="4" mask="url(#b)" xlink:href="#a"/>
+    <use stroke="#2D9FD8" stroke-width="2" mask="url(#b)" xlink:href="#a"/>
     <path fill="#2D9FD8" d="M7,3.00800862 C9.09023405,3.13960661 10.7448145,4.87657932 10.7448145,7 C10.7448145,9.209139 8.95395346,11 6.74481446,11 C5.4560962,11 4.30972054,10.3905589 3.57817301,9.44416214 L7,7 L7,3.00800862 Z"/>
   </g>
 </svg>