Resolve "Closed issue label in todo's styling is difficult to read"

7 files changed, 25 insertions, 13 deletions

diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js
index e26bf437efc..bedd50de1bb 100644
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -1,6 +1,7 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, quotes, no-underscore-dangle, one-var, one-var-declaration-per-line, consistent-return, dot-notation, quote-props, comma-dangle, object-shorthand, max-len, prefer-arrow-callback */
 
 import 'vendor/jquery.waitforimages';
+import { __ } from '~/locale';
 import TaskList from './task_list';
 import MergeRequestTabs from './merge_request_tabs';
 import IssuablesHelper from './helpers/issuables_helper';
@@ -110,12 +111,12 @@ MergeRequest.prototype.initCommitMessageListeners = function() {
   });
 };
 
-MergeRequest.updateStatusText = function(classToRemove, classToAdd, newStatusText) {
+MergeRequest.setStatusBoxToMerged = function() {
   $('.detail-page-header .status-box')
-    .removeClass(classToRemove)
-    .addClass(classToAdd)
+    .removeClass('status-box-open')
+    .addClass('status-box-mr-merged')
     .find('span')
-    .text(newStatusText);
+    .text(__('Merged'));
 };
 
 MergeRequest.decreaseCounter = function(by = 1) {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
index 60f42c46ffe..f16414ad5c0 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -166,7 +166,7 @@ export default {
             // If state is merged we should update the widget and stop the polling
             eventHub.$emit('MRWidgetUpdateRequested');
             eventHub.$emit('FetchActionsContent');
-            MergeRequest.updateStatusText('status-box-open', 'status-box-merged', 'Merged');
+            MergeRequest.setStatusBoxToMerged();
             MergeRequest.hideCloseButton();
             MergeRequest.decreaseCounter();
             stopPolling();
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
index 1d8bd26cf1a..d8c57a0e2d9 100644
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ b/app/assets/stylesheets/framework/issue_box.scss
@@ -24,15 +24,13 @@
   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 {
+  &.status-box-issue-closed,
+  &.status-box-mr-merged {
     background-color: $gl-primary;
   }
 
diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb
index 0f110bd25c5..64cd3032780 100644
--- a/app/helpers/issues_helper.rb
+++ b/app/helpers/issues_helper.rb
@@ -72,7 +72,7 @@ module IssuesHelper
     if item.try(:expired?)
       'status-box-expired'
     elsif item.try(:merged?)
-      'status-box-merged'
+      'status-box-mr-merged'
     elsif item.closed?
       'status-box-mr-closed'
     elsif item.try(:upcoming?)
diff --git a/app/helpers/todos_helper.rb b/app/helpers/todos_helper.rb
index e7c953e749e..ddb48371c79 100644
--- a/app/helpers/todos_helper.rb
+++ b/app/helpers/todos_helper.rb
@@ -54,8 +54,16 @@ module TodosHelper
   def todo_target_state_pill(todo)
     return unless show_todo_state?(todo)
 
+    type =
+      case todo.target
+      when MergeRequest
+        'mr'
+      when Issue
+        'issue'
+      end
+
     content_tag(:span, nil, class: 'target-status') do
-      content_tag(:span, nil, class: "status-box status-box-#{todo.target.state.dasherize}") do
+      content_tag(:span, nil, class: "status-box status-box-#{type}-#{todo.target.state.dasherize}") do
         todo.target.state.capitalize
       end
     end
diff --git a/changelogs/unreleased/41874-closed-todo.yml b/changelogs/unreleased/41874-closed-todo.yml
new file mode 100644
index 00000000000..615bd011579
--- /dev/null
+++ b/changelogs/unreleased/41874-closed-todo.yml
@@ -0,0 +1,5 @@
+---
+title: Fix closed text for issues on Todos page
+merge_request:
+author:
+type: fixed
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
index 11858e45386..9230b5874df 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
@@ -404,7 +404,7 @@ describe('MRWidgetReadyToMerge', () => {
 
         setTimeout(() => {
           const statusBox = document.querySelector('.status-box');
-          expect(statusBox.classList.contains('status-box-merged')).toBeTruthy();
+          expect(statusBox.classList.contains('status-box-mr-merged')).toBeTruthy();
           expect(statusBox.textContent).toContain('Merged');
 
           done();