Refine MR widget styling for buttons and info text

4 files changed, 19 insertions, 3 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
index 8b59e018836..e8e22ad93a5 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
+++ b/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>
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 ebcc03e531b..74613a1089e 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
@@ -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;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index e5adca658ba..1ac9d5af21d 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -217,6 +217,16 @@
   }
 
   .mr-widget-body {
+    .btn {
+      font-size: 15px;
+    }
+
+    .btn-group .btn {
+      padding: 5px 10px;
+    }
+  }
+
+  .mr-widget-body {
     h4 {
       font-weight: 600;
       font-size: 16px;
@@ -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;
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
index 74df99415c9..d043ad38b8b 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
+++ b/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`;