Update issuable status icons33926-update-issuable-icons

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/33926

Changed file icons already addressed in
https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/15367

9 files changed, 32 insertions, 15 deletions

diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js
index 91b5ef1c10a..411c820cc43 100644
--- a/app/assets/javascripts/issue.js
+++ b/app/assets/javascripts/issue.js
@@ -48,7 +48,7 @@ export default class Issue {
       })
       .fail(() => new Flash(issueFailMessage))
       .done((data) => {
-        const isClosedBadge = $('div.status-box-closed');
+        const isClosedBadge = $('div.status-box-issue-closed');
         const isOpenBadge = $('div.status-box-open');
         const projectIssuesCounter = $('.issue_counter');
 
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
index 1537b0744cc..1d8bd26cf1a 100644
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ b/app/assets/stylesheets/framework/issue_box.scss
@@ -24,10 +24,14 @@
   font-size: $gl-font-size;
   line-height: 25px;
 
-  &.status-box-closed {
+  &.status-box-mr-closed {
     background-color: $gl-danger;
   }
 
+  &.status-box-issue-closed {
+    background-color: $gl-primary;
+  }
+
   &.status-box-merged {
     background-color: $gl-primary;
   }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 8f8f11e3857..e19196e0c41 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -610,11 +610,19 @@
 }
 
 .issuable-status-box {
-  float: none;
-  display: inline-block;
+  align-self: stretch;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin-top: 0;
-  height: auto;
-  align-self: center;
+  padding-left: 9px;
+  padding-right: 9px;
+
+  @media (min-width: $screen-sm-min) {
+    display: inline-block;
+    height: auto;
+    align-self: center;
+  }
 }
 
 .issuable-gutter-toggle {
diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb
index 212cdbb8157..0f110bd25c5 100644
--- a/app/helpers/issues_helper.rb
+++ b/app/helpers/issues_helper.rb
@@ -74,7 +74,7 @@ module IssuesHelper
     elsif item.try(:merged?)
       'status-box-merged'
     elsif item.closed?
-      'status-box-closed'
+      'status-box-mr-closed'
     elsif item.try(:upcoming?)
       'status-box-upcoming'
     else
diff --git a/app/models/merge_request.rb b/app/models/merge_request.rb
index 26a3388602a..86d7bdad574 100644
--- a/app/models/merge_request.rb
+++ b/app/models/merge_request.rb
@@ -879,11 +879,11 @@ class MergeRequest < ActiveRecord::Base
 
   def state_icon_name
     if merged?
-      "check"
+      "git-merge"
     elsif closed?
-      "times"
+      "close"
     else
-      "circle-o"
+      "issue-open-m"
     end
   end
 
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index d260aaee2d3..eab7879c7bf 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -14,12 +14,12 @@
 
 .detail-page-header
   .detail-page-header-body
-    .issuable-status-box.status-box.status-box-closed{ class: issue_button_visibility(@issue, false) }
-      = icon('check', class: "hidden-sm hidden-md hidden-lg")
+    .issuable-status-box.status-box.status-box-issue-closed{ class: issue_button_visibility(@issue, false) }
+      = sprite_icon('mobile-issue-close', size: 16, css_class: 'hidden-sm hidden-md hidden-lg')
       %span.hidden-xs
         Closed
     .issuable-status-box.status-box.status-box-open{ class: issue_button_visibility(@issue, true) }
-      = icon('circle-o', class: "hidden-sm hidden-md hidden-lg")
+      = sprite_icon('issue-open-m', size: 16, css_class: 'hidden-sm hidden-md hidden-lg')
       %span.hidden-xs Open
 
     .issuable-meta
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index bc91758110e..22c8b6b513d 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -7,7 +7,7 @@
 .detail-page-header
   .detail-page-header-body
     .issuable-status-box.status-box{ class: status_box_class(@merge_request) }
-      = icon(@merge_request.state_icon_name, class: "hidden-sm hidden-md hidden-lg")
+      = sprite_icon(@merge_request.state_icon_name, size: 16, css_class: 'hidden-sm hidden-md hidden-lg')
       %span.hidden-xs
         = @merge_request.state_human_name
 
diff --git a/changelogs/unreleased/33926-update-issuable-icons.yml b/changelogs/unreleased/33926-update-issuable-icons.yml
new file mode 100644
index 00000000000..87076dde545
--- /dev/null
+++ b/changelogs/unreleased/33926-update-issuable-icons.yml
@@ -0,0 +1,5 @@
+---
+title: Update issuable status icons
+merge_request: 15898
+author:
+type: changed
diff --git a/spec/javascripts/issue_spec.js b/spec/javascripts/issue_spec.js
index 3636aac79a0..2cd2e63b15d 100644
--- a/spec/javascripts/issue_spec.js
+++ b/spec/javascripts/issue_spec.js
@@ -55,7 +55,7 @@ describe('Issue', function() {
   }
 
   function findElements(isIssueInitiallyOpen) {
-    $boxClosed = $('div.status-box-closed');
+    $boxClosed = $('div.status-box-issue-closed');
     expect($boxClosed).toExist();
     expect($boxClosed).toHaveText('Closed');