diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue')
-rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue | 30 |
1 files changed, 20 insertions, 10 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue index dc748ba44f2..f9d0986d60d 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue @@ -49,18 +49,28 @@ export default { <div :class="[ $options.EXTENSION_ICON_CLASS[iconName], - { 'mr-widget-extension-icon gl-w-6': !isLoading && level === 1 }, + { 'gl-w-6': !isLoading && level === 1 }, { 'gl-p-2': isLoading || level === 1 }, ]" - class="gl-rounded-full gl-mr-3 gl-relative gl-p-2" + class="gl-mr-3 gl-p-2" > - <gl-loading-icon v-if="isLoading" size="sm" inline class="gl-display-block" /> - <gl-icon - v-else - :name="$options.EXTENSION_ICON_NAMES[iconName]" - :size="size" - :aria-label="iconAriaLabel" - class="gl-display-block" - /> + <div + class="gl-rounded-full gl-relative gl-display-flex" + :class="{ 'mr-widget-extension-icon': !isLoading && level === 1 }" + > + <div class="gl-absolute gl-top-half gl-left-50p gl-translate-x-n50 gl-display-flex gl-m-auto"> + <div class="gl-display-flex gl-m-auto gl-translate-y-n50"> + <gl-loading-icon v-if="isLoading" size="md" inline /> + <gl-icon + v-else + :name="$options.EXTENSION_ICON_NAMES[iconName]" + :size="size" + :aria-label="iconAriaLabel" + :data-qa-selector="`status_${iconName}_icon`" + class="gl-display-block" + /> + </div> + </div> + </div> </div> </template> |