Style merge request CI widget to match MR/Issue box

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

4 files changed, 50 insertions, 17 deletions

diff --git a/app/assets/javascripts/merge_request.js.coffee b/app/assets/javascripts/merge_request.js.coffee
index 203c721c30c..c0460a7ec4e 100644
--- a/app/assets/javascripts/merge_request.js.coffee
+++ b/app/assets/javascripts/merge_request.js.coffee
@@ -119,14 +119,6 @@ class MergeRequest
     else
       $('.ci_widget.ci-error').show()
 
-    switch state
-      when "success"
-        $('.mr-state-widget').addClass("panel-success")
-      when "failed"
-        $('.mr-state-widget').addClass("panel-danger")
-      when "running", "pending"
-        $('.mr-state-widget').addClass("panel-warning")
-
   showCiCoverage: (coverage) ->
     cov_html = $('<span>')
     cov_html.addClass('ci-coverage')
diff --git a/app/assets/stylesheets/sections/merge_requests.scss b/app/assets/stylesheets/sections/merge_requests.scss
index acaad519778..46e3884b302 100644
--- a/app/assets/stylesheets/sections/merge_requests.scss
+++ b/app/assets/stylesheets/sections/merge_requests.scss
@@ -104,7 +104,44 @@
 }
 
 .mr-state-widget {
-  .panel-body {
+  background: #f9f9f9;
+  margin-bottom: 20px;
+  @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.09));
+
+  .ci_widget {
+    padding: 10px 15px;
+    font-size: 15px;
+    border-bottom: 1px dashed #AAA;
+
+    &.ci-success {
+      color: $bg_success;
+      border-color: $border_success;
+    }
+
+    &.ci-pending {
+      color: #548;
+      border-color: #548;
+    }
+
+    &.ci-running {
+      color: $bg_warning;
+      border-color: $border_warning;
+    }
+
+    &.ci-failed {
+      color: $bg_danger;
+      border-color: $border_danger;
+    }
+
+    &.ci-error {
+      color: $bg_danger;
+      border-color: $border_danger;
+    }
+  }
+
+  .mr-widget-body {
+    padding: 10px 15px;
+
     h4 {
       margin-top: 0px;
     }
@@ -114,6 +151,11 @@
     }
   }
 
+  .mr-widget-footer {
+    padding: 10px 15px;
+    border-top: 1px solid #EEE;
+  }
+
   .ci-coverage {
     float: right;
   }
diff --git a/app/views/projects/merge_requests/show/_mr_ci.html.haml b/app/views/projects/merge_requests/show/_mr_ci.html.haml
index dc64c096edc..941b15d3b32 100644
--- a/app/views/projects/merge_requests/show/_mr_ci.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_ci.html.haml
@@ -20,9 +20,8 @@
       = link_to "Build page", ci_build_details_path(@merge_request)
 
   .ci_widget
-    %strong
-      %i.fa.fa-spinner
-      Checking for CI status for #{@merge_request.last_commit_short_sha}
+    %i.fa.fa-spinner
+    Checking for CI status for #{@merge_request.last_commit_short_sha}
 
   .ci_widget.ci-error{style: "display:none"}
     %i.fa.fa-times
diff --git a/app/views/projects/merge_requests/show/_state_widget.html.haml b/app/views/projects/merge_requests/show/_state_widget.html.haml
index 5db77ab2754..2b58c865b2e 100644
--- a/app/views/projects/merge_requests/show/_state_widget.html.haml
+++ b/app/views/projects/merge_requests/show/_state_widget.html.haml
@@ -1,8 +1,8 @@
-.panel.mr-state-widget.panel-default
+.mr-state-widget
   - if @merge_request.source_project.ci_service && @commits.any?
-    .panel-heading
+    .mr-widget-heading
       = render "projects/merge_requests/show/mr_ci"
-  .panel-body
+  .mr-widget-body
     - if @merge_request.open?
       - if @merge_request.source_branch_exists? && @merge_request.target_branch_exists?
         = render "projects/merge_requests/show/mr_accept"
@@ -31,8 +31,8 @@
         %br
         Try to use different branches or push new code.
 
-  - if !@closes_issues.empty? && @merge_request.open?
-    .panel-footer
+  - if @closes_issues.present? && @merge_request.open?
+    .mr-widget-footer
       %span
         %i.fa.fa-check
         Accepting this merge request will close #{@closes_issues.size == 1 ? 'issue' : 'issues'}