Merge branch '32595-fix-vertical-misalignment-mr-widget' into 'master'

Refine MR widget styling for buttons and info text

Closes #32595

See merge request !11548

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js

@@ -56,7 +56,7 @@ export default {
         <div class="ci-widget">
           <div class="ci-status-icon ci-status-icon-success">
             <span class="js-icon-link icon-link">
-              <span
+              <span class="ci-status-icon"
                 v-html="svg"
                 aria-hidden="true"></span>
             </span>

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js

@@ -33,7 +33,7 @@ export default {
       return this.useCommitMessageWithDescription ? withoutDesc : withDesc;
     },
     mergeButtonClass() {
-      const defaultClass = 'btn btn-success accept-merge-request';
+      const defaultClass = 'btn btn-small btn-success accept-merge-request';
       const failedClass = `${defaultClass} btn-danger`;
       const inActionClass = `${defaultClass} btn-info`;
       const { pipeline, isPipelineActive, isPipelineFailed, hasCI, ciStatus } = this.mr;

app/assets/stylesheets/pages/merge_requests.scss

@@ -216,6 +216,16 @@
     }
   }
 
+  .mr-widget-body {
+    .btn {
+      font-size: 15px;
+    }
+
+    .btn-group .btn {
+      padding: 5px 10px;
+    }
+  }
+
   .mr-widget-body {
     h4 {
       font-weight: 600;
@@ -248,6 +258,7 @@
     .bold {
       margin-left: 5px;
       font-weight: bold;
+      font-size: 15px;
       color: $gl-gray-light;
     }
 
@@ -271,6 +282,11 @@
       margin-bottom: 24px;
     }
 
+    .spacing,
+    .bold {
+      vertical-align: middle;
+    }
+
     .dropdown-menu {
       li a {
         padding: 5px;

spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js

@@ -80,7 +80,7 @@ describe('MRWidgetReadyToMerge', () => {
     });
 
     describe('mergeButtonClass', () => {
-      const defaultClass = 'btn btn-success accept-merge-request';
+      const defaultClass = 'btn btn-small btn-success accept-merge-request';
       const failedClass = `${defaultClass} btn-danger`;
       const inActionClass = `${defaultClass} btn-info`;