Don't show due dates in red if issue is closed

app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue

@@ -146,6 +146,7 @@ export default {
             <span v-if="dueDate" class="order-md-1">
               <issue-due-date
                 :date="dueDate"
+                :closed="Boolean(closedAt)"
                 tooltip-placement="top"
                 css-class="item-due-date gl-display-flex gl-align-items-center"
               />

changelogs/unreleased/9202-dont-show-due-dates-in-red-if-issue-is-closed.yml

+title: Don't show due dates in red if the issue is closed
+merge_request: 57647
+author: Daniel Ziegenberg <daniel@ziegenberg.at>
+type: fixed

spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js

@@ -132,6 +132,35 @@ describe('RelatedIssuableItem', () => {
     it('renders due date component with correct due date', () => {
       expect(wrapper.find(IssueDueDate).props('date')).toBe(props.dueDate);
     });
+
+    it('does not render red icon for overdue issue that is closed', async () => {
+      mountComponent({
+        props: {
+          ...props,
+          closedAt: '2018-12-01T00:00:00.00Z',
+        },
+      });
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.find(IssueDueDate).props('closed')).toBe(true);
+    });
+
+    it('should not contain the `.text-danger` css class for overdue issue that is closed', async () => {
+      mountComponent({
+        props: {
+          ...props,
+          closedAt: '2018-12-01T00:00:00.00Z',
+        },
+      });
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.find(IssueDueDate).find('.board-card-info-icon').classes('text-danger')).toBe(
+        false,
+      );
+      expect(wrapper.find(IssueDueDate).find('.board-card-info-text').classes('text-danger')).toBe(
+        false,
+      );
+    });
   });
 
   describe('token assignees', () => {