1 files changed, 10 insertions, 15 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
index 61f7d26f51e..806f8f939a6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
@@ -1,16 +1,14 @@
 <script>
 import MrWidgetAuthorTime from '../mr_widget_author_time.vue';
-import statusIcon from '../mr_widget_status_icon.vue';
+import StateContainer from '../state_container.vue';
 
 export default {
   name: 'MRWidgetClosed',
   components: {
     MrWidgetAuthorTime,
-    statusIcon,
+    StateContainer,
   },
   props: {
-    /* TODO: This is providing all store and service down when it
-      only needs metrics and targetBranch */
     mr: {
       type: Object,
       required: true,
@@ -19,15 +17,12 @@ export default {
 };
 </script>
 <template>
-  <div class="mr-widget-body media">
-    <status-icon status="warning" />
-    <div class="media-body">
-      <mr-widget-author-time
-        :action-text="s__('mrWidget|Closed by')"
-        :author="mr.metrics.closedBy"
-        :date-title="mr.metrics.closedAt"
-        :date-readable="mr.metrics.readableClosedAt"
-      />
-    </div>
-  </div>
+  <state-container :mr="mr" status="closed">
+    <mr-widget-author-time
+      :action-text="s__('mrWidget|Closed by')"
+      :author="mr.metrics.closedBy"
+      :date-title="mr.metrics.closedAt"
+      :date-readable="mr.metrics.readableClosedAt"
+    />
+  </state-container>
 </template>