1 files changed, 14 insertions, 12 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
index f74826f95d3..79e878431ed 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
@@ -1,22 +1,24 @@
 <script>
-import statusIcon from '../mr_widget_status_icon.vue';
+import StateContainer from '../state_container.vue';
 
 export default {
   name: 'MRWidgetArchived',
   components: {
-    statusIcon,
+    StateContainer,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
   },
 };
 </script>
+
 <template>
-  <div class="mr-widget-body media">
-    <div class="space-children">
-      <status-icon status="warning" show-disabled-button />
-    </div>
-    <div class="media-body">
-      <span class="gl-ml-0! gl-text-body! bold">
-        {{ s__('mrWidget|Merge unavailable: merge requests are read-only on archived projects.') }}
-      </span>
-    </div>
-  </div>
+  <state-container :mr="mr" status="failed">
+    <span class="gl-font-weight-bold">
+      {{ s__('mrWidget|Merge unavailable: merge requests are read-only on archived projects.') }}
+    </span>
+  </state-container>
 </template>