Merge branch 'mr-button-color' into 'master'

Change merge request button color based on CI status

Green button looks confusing when CI fails

Screenshots:

![ci-warn](https://gitlab.com/gitlab-org/gitlab-ce/uploads/f8166c9acf35f9d886f37f52f975acfb/ci-warn.png)
![ci-can](https://gitlab.com/gitlab-org/gitlab-ce/uploads/d7319c4c567c42a47d79953191384f96/ci-can.png)

See merge request !448

2 files changed, 12 insertions, 18 deletions

diff --git a/app/assets/javascripts/merge_request.js.coffee b/app/assets/javascripts/merge_request.js.coffee
index 09c202e42a5..6127d2bb480 100644
--- a/app/assets/javascripts/merge_request.js.coffee
+++ b/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'
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index d8fe339b7b3..8abd4207beb 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/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;