single mr-widget-body class33651-lines

20 files changed, 37 insertions, 43 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js
index c7f25a1697c..0b67bb6af55 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.js
@@ -1,7 +1,7 @@
 export default {
   name: 'MRWidgetArchived',
   template: `
-    <div class="mr-widget-body">
+    <div>
       <button
         type="button"
         class="btn btn-success btn-small"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js
index 4063859d5d0..e18f60c4d94 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.js
@@ -19,7 +19,7 @@ export default {
     },
   },
   template: `
-    <div class="mr-widget-body">
+    <div>
       <button
         class="btn btn-success btn-small"
         disabled="true"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js
index 8515b54e62d..f44ba07fe04 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.js
@@ -1,7 +1,7 @@
 export default {
   name: 'MRWidgetChecking',
   template: `
-    <div class="mr-widget-body">
+    <div>
       <button
         type="button"
         class="btn btn-success btn-small"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
index fc2e42c6821..7faa44af295 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.js
@@ -9,7 +9,7 @@ export default {
     'mr-widget-author-and-time': mrWidgetAuthorTime,
   },
   template: `
-    <div class="mr-widget-body">
+    <div>
       <mr-widget-author-and-time
         actionText="Closed by"
         :author="mr.closedBy"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
index 36596c6f37e..99322a9d510 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.js
@@ -4,7 +4,7 @@ export default {
     mr: { type: Object, required: true },
   },
   template: `
-    <div class="mr-widget-body">
+    <div>
       <button
         type="button"
         class="btn btn-success btn-small"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js
index 600b4d42e3d..f1d1b8e2e73 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js
@@ -39,7 +39,7 @@ export default {
     },
   },
   template: `
-    <div class="mr-widget-body">
+    <div>
       <button
         class="btn btn-success btn-small"
         disabled="true"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js
index 02245d82a5d..1b693d856b1 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_locked.js
@@ -4,7 +4,7 @@ export default {
     mr: { type: Object, required: true },
   },
   template: `
-    <div class="mr-widget-body mr-state-locked">
+    <div class="mr-state-locked">
       <span class="state-label">Locked</span>
       This merge request is in the process of being merged, during which time it is locked and cannot be closed.
       <i
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
index 46c76f21a8a..a10cbf28d8d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
@@ -61,7 +61,7 @@ export default {
     },
   },
   template: `
-    <div class="mr-widget-body">
+    <div>
       <h4>
         Set by
         <mr-widget-author :author="mr.setToMWPSBy" />
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
index 980cce57300..7af643ecea7 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
@@ -61,7 +61,7 @@ export default {
     },
   },
   template: `
-    <div class="mr-widget-body">
+    <div>
       <mr-widget-author-and-time
         actionText="Merged by"
         :author="mr.mergedBy"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js
index 328382485f6..76f744dfcd1 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js
@@ -14,7 +14,7 @@ export default {
     },
   },
   template: `
-    <div class="mr-widget-body">
+    <div>
       <button
         type="button"
         class="btn btn-success btn-small"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.js
index 07169b349be..6d80684fdd7 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.js
@@ -1,7 +1,7 @@
 export default {
   name: 'MRWidgetNotAllowed',
   template: `
-    <div class="mr-widget-body">
+    <div>
       <button
         type="button"
         class="btn btn-success btn-small"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js
index 375a382615a..6e7cdc925ce 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_nothing_to_merge.js
@@ -12,7 +12,7 @@ export default {
     return { emptyStateSVG };
   },
   template: `
-    <div class="mr-widget-body empty-state">
+    <div class="empty-state">
       <div class="row">
         <div class="artwork col-sm-5 col-sm-push-7 col-xs-12 text-center">
           <span v-html="emptyStateSVG"></span>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.js
index 31c53b679ed..b1f320ed13c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.js
@@ -1,7 +1,7 @@
 export default {
   name: 'MRWidgetPipelineBlocked',
   template: `
-    <div class="mr-widget-body">
+    <div>
       <button
         type="button"
         class="btn btn-success btn-small"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js
index 002820123ca..3dd9bc5c540 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js
@@ -1,7 +1,7 @@
 export default {
   name: 'MRWidgetPipelineBlocked',
   template: `
-    <div class="mr-widget-body">
+    <div>
       <button
         class="btn btn-success btn-small"
         disabled="true"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
index fcd4fdaf09f..6b0167abd5f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -196,7 +196,7 @@ export default {
     },
   },
   template: `
-    <div class="mr-widget-body">
+    <div>
       <span class="btn-group">
         <button
           @click="handleMergeButtonClick()"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js
index 79f8ef408e6..96ff98d277f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js
@@ -1,7 +1,7 @@
 export default {
   name: 'MRWidgetSHAMismatch',
   template: `
-    <div class="mr-widget-body">
+    <div>
       <button
         type="button"
         class="btn btn-success btn-small"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions.js
index f4ab2d9fa58..dc813cfe389 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions.js
@@ -4,7 +4,7 @@ export default {
     mr: { type: Object, required: true },
   },
   template: `
-    <div class="mr-widget-body">
+    <div>
       <button
         type="button"
         class="btn btn-success btn-small"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
index cb02ffe93bd..80adf92d74c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
@@ -29,7 +29,7 @@ export default {
     },
   },
   template: `
-    <div class="mr-widget-body">
+    <div>
       <button
         type="button"
         class="btn btn-success btn-small"
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
index 222d0b7f79e..b37d1c9087d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
@@ -234,18 +234,19 @@ export default {
         v-if="shouldRenderDeployments"
         :mr="mr"
         :service="service" />
-      <component
-        :is="componentName"
-        :mr="mr"
-        :service="service" />
-      <section
-        v-if="shouldRenderRelatedLinks"
-        class="mr-info-list mr-links">
-        <div class="legend"></div>
-        <mr-widget-related-links
-          :is-merged="mr.isMerged"
-          :related-links="mr.relatedLinks" />
-      </section>
+      <div class="mr-widget-body">
+        <component
+          :is="componentName"
+          :mr="mr"
+          :service="service" />
+        <section
+          v-if="shouldRenderRelatedLinks"
+          class="mr-info-list mr-links">
+          <mr-widget-related-links
+            :is-merged="mr.isMerged"
+            :related-links="mr.relatedLinks" />
+        </section>
+      </div>
       <mr-widget-merge-help v-if="shouldRenderMergeHelp" />
     </div>
   `,
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 1f9be4f4901..7a6f1e07253 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -199,11 +199,6 @@
   }
 
   .mr-info-list {
-
-    &.mr-links {
-      margin-left: 28px;
-    }
-
     &.mr-memory-usage {
       margin: 5px 0 10px 25px;
     }
@@ -227,9 +222,7 @@
         padding: 5px 7px;
       }
     }
-  }
 
-  .mr-widget-body {
     h4 {
       font-weight: bold;
       font-size: 15px;
@@ -367,13 +360,13 @@
       }
     }
 
-    &.mr-state-locked .mr-info-list {
-      margin-top: 10px;
-      margin-left: 12px;
-    }
-
-    &.mr-state-locked + .mr-info-list.mr-links {
+    .mr-state-locked + .mr-info-list.mr-links {
       margin-top: -16px;
+
+      p::before {
+        height: 100%;
+        top: -50%;
+      }
     }
 
     &.empty-state {