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

app/assets/javascripts/merge_request.js

 /* 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) {

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();

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;
   }
 

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?)

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

changelogs/unreleased/41874-closed-todo.yml

+---
+title: Fix closed text for issues on Todos page
+merge_request:
+author:
+type: fixed

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();