From 8736404729f8893e3b118a381377e3b23d2c605c Mon Sep 17 00:00:00 2001
From: Dave Pisek <dpisek@gitlab.com>
Date: Tue, 6 Aug 2019 13:34:34 +1000
Subject: Adjust size and align MR-widget loading icon

A recent change within gitlab-ui introduced a new size (24x24)
and changed also some of the existing sizes.

This commit uses the loading-icon's new size (24x24) to bring it to the
same dimensions as the status-icon and applies some styling to
vertically align them.
---
 .../vue_merge_request_widget/components/mr_widget_status_icon.vue     | 4 ++--
 app/assets/stylesheets/pages/merge_requests.scss                      | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

(limited to 'app')

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
index 13e4b061fda..d0df8309dc7 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
@@ -34,8 +34,8 @@ export default {
 <template>
   <div class="d-flex align-self-start">
     <div class="square s24 h-auto d-flex-center append-right-default">
-      <div v-if="isLoading" class="mr-widget-icon">
-        <gl-loading-icon size="sm" />
+      <div v-if="isLoading" class="mr-widget-icon d-inline-flex">
+        <gl-loading-icon size="md" class="mr-loading-icon d-inline-flex" />
       </div>
       <ci-icon v-else :status="statusObj" :size="24" />
     </div>
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index cb7913ee54e..3c1e384d6ed 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -208,6 +208,10 @@
     font-size: 22px;
   }
 
+  .mr-loading-icon {
+    margin: 3px 0;
+  }
+
   .ci-status-icon svg {
     margin: 3px 0;
     position: relative;
-- 
cgit v1.2.1