1 files changed, 15 insertions, 18 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
index b1fbe150fcf..d149f5208fc 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue
@@ -1,19 +1,17 @@
 <script>
 import { GlButton } from '@gitlab/ui';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { I18N_SHA_MISMATCH } from '../../i18n';
-import statusIcon from '../mr_widget_status_icon.vue';
+import StateContainer from '../state_container.vue';
 
 export default {
   name: 'ShaMismatch',
   components: {
-    statusIcon,
     GlButton,
+    StateContainer,
   },
   i18n: {
     I18N_SHA_MISMATCH,
   },
-  mixins: [glFeatureFlagMixin()],
   props: {
     mr: {
       type: Object,
@@ -24,25 +22,24 @@ export default {
 </script>
 
 <template>
-  <div class="mr-widget-body media">
-    <status-icon :show-disabled-button="false" status="warning" />
-    <div class="media-body">
-      <span
-        :class="{ 'gl-ml-0! gl-text-body!': glFeatures.restructuredMrWidget }"
-        class="gl-font-weight-bold"
-        data-qa-selector="head_mismatch_content"
-      >
-        {{ $options.i18n.I18N_SHA_MISMATCH.warningMessage }}
-      </span>
+  <state-container status="warning">
+    <span
+      class="gl-font-weight-bold gl-md-mr-3 gl-flex-grow-1 gl-ml-0! gl-text-body!"
+      data-qa-selector="head_mismatch_content"
+    >
+      {{ $options.i18n.I18N_SHA_MISMATCH.warningMessage }}
+    </span>
+    <template #actions>
       <gl-button
-        class="gl-ml-3"
         data-testid="action-button"
         size="small"
         category="primary"
         variant="confirm"
+        class="gl-align-self-start"
         :href="mr.mergeRequestDiffsPath"
-        >{{ $options.i18n.I18N_SHA_MISMATCH.actionButtonLabel }}</gl-button
       >
-    </div>
-  </div>
+        {{ $options.i18n.I18N_SHA_MISMATCH.actionButtonLabel }}
+      </gl-button>
+    </template>
+  </state-container>
 </template>