Change merge request button color based on CI status

app/assets/javascripts/merge_request.js.coffee

@@ -113,8 +113,14 @@ class @MergeRequest
     allowed_states = ["failed", "canceled", "running", "pending", "success"]
     if state in allowed_states
       $('.ci_widget.ci-' + state).show()
+      switch state
+        when "failed", "canceled"
+          @setMergeButtonClass('btn-danger')
+        when "running", "pending"
+          @setMergeButtonClass('btn-warning')
     else
       $('.ci_widget.ci-error').show()
+      @setMergeButtonClass('btn-danger')
 
   showCiCoverage: (coverage) ->
     cov_html = $('<span>')
@@ -144,6 +150,9 @@ class @MergeRequest
     this.$('.merge-in-progress').hide()
     this.$('.automerge_widget.already_cannot_be_merged').show()
 
+  setMergeButtonClass: (css_class) ->
+    $('.accept_merge_request').removeClass("btn-create").addClass(css_class)
+
   mergeInProgress: ->
     $.ajax
       type: 'GET'

app/assets/stylesheets/pages/merge_requests.scss

@@ -137,30 +137,15 @@
       background-color: #F1FAF1;
     }
 
-    &.ci-pending {
-      color: #548;
-      border-color: #548;
-      background-color: #F4F1FA;
-    }
-
+    &.ci-pending,
     &.ci-running {
       color: $gl-warning;
       border-color: $gl-warning;
       background-color: #FAF5F1;
     }
 
-    &.ci-failed {
-      color: $gl-danger;
-      border-color: $gl-danger;
-      background-color: #FAF1F1;
-    }
-
-    &.ci-canceled {
-      color: $gl-warning;
-      border-color: $gl-danger;
-      background-color: #FAF5F1;
-    }
-
+    &.ci-failed,
+    &.ci-canceled,
     &.ci-error {
       color: $gl-danger;
       border-color: $gl-danger;