Merge branch 'related-mr-labels' into 'master'

Added colored labels to related MR list.

## What does this MR do?
Added colored labels to related MR list.

## Are there points in the code the reviewer needs to double check?
Yes, I think haml can be better.

## Why was this MR needed?
There was an issue for this #21200 

## Screenshots (if relevant)
![Screen_Shot_2016-11-15_at_21.04.24](/uploads/b601f33f23cdc3318d01279e17deb096/Screen_Shot_2016-11-15_at_21.04.24.png)

## Does this MR meet the acceptance criteria?

- [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
Fixes !21200

See merge request !7486

3 files changed, 37 insertions, 8 deletions

diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 3e7fc3fa52c..eb171195309 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -55,9 +55,28 @@ ul.related-merge-requests > li {
 }
 
 .merge-request-status {
-  color: $gl-gray;
-  font-size: 15px;
-  font-weight: bold;
+  font-size: 13px;
+  padding: 0 5px;
+  color: $white-light;
+  height: 20px;
+  border-radius: 3px;
+  line-height: 18px;
+  border: 1px solid;
+
+  &.merged {
+    border-color: darken($blue-normal, 10%);
+    background: $blue-normal;
+  }
+
+  &.closed {
+    border-color: darken($red-normal, 10%);
+    background: $red-normal;
+  }
+
+  &.open {
+    border: 1px solid darken($green-normal, 10%);
+    background: $green-normal;
+  }
 }
 
 .merge-request,
diff --git a/app/views/projects/issues/_merge_requests.html.haml b/app/views/projects/issues/_merge_requests.html.haml
index 31d3ec23276..747bfa554cb 100644
--- a/app/views/projects/issues/_merge_requests.html.haml
+++ b/app/views/projects/issues/_merge_requests.html.haml
@@ -19,11 +19,17 @@
             in
             - project = merge_request.target_project
             = link_to project.name_with_namespace, namespace_project_path(project.namespace, project)
-        %span.merge-request-status.prepend-left-10
-          - if merge_request.merged?
-            MERGED
-          - elsif merge_request.closed?
-            CLOSED
+
+        - if merge_request.merged?
+          %span.merge-request-status.prepend-left-10.merged
+            Merged
+        - elsif merge_request.closed?
+          %span.merge-request-status.prepend-left-10.closed
+            Closed
+        - else
+          %span.merge-request-status.prepend-left-10.open
+            Open
+
     - if @closed_by_merge_requests.present?
       %li
         = render partial: 'projects/issues/closed_by_box', locals: {merge_request_count: @merge_requests.count}
diff --git a/changelogs/unreleased/related-mr-labels.yml b/changelogs/unreleased/related-mr-labels.yml
new file mode 100644
index 00000000000..268e0eab870
--- /dev/null
+++ b/changelogs/unreleased/related-mr-labels.yml
@@ -0,0 +1,4 @@
+---
+title: Added colored labels to related MR list.
+merge_request: 7486
+author: Didem Acet