Align merge request icons and text61613-spacing-mr-widgets

Align icons left
Align text left
Adjust padding to be consistent
Make icons same 24 size
Add changelog mr number
Add right margin to widget status container
Add left margin inside widget icon container
Prepend left padding for error message
Only give button left margin, some have buttons
Prettify
Adjust test summary icons
Prettify
Fix empty line before lint
Remove author
Switch to use gl-padding
Use utility classes instead
Prettify
Change loading icon size to md

14 files changed, 58 insertions, 41 deletions

diff --git a/app/assets/javascripts/reports/components/issue_status_icon.vue b/app/assets/javascripts/reports/components/issue_status_icon.vue
index 04fba43b2f3..386653b9444 100644
--- a/app/assets/javascripts/reports/components/issue_status_icon.vue
+++ b/app/assets/javascripts/reports/components/issue_status_icon.vue
@@ -16,7 +16,7 @@ export default {
     statusIconSize: {
       type: Number,
       required: false,
-      default: 32,
+      default: 24,
     },
   },
   computed: {
diff --git a/app/assets/javascripts/reports/components/report_item.vue b/app/assets/javascripts/reports/components/report_item.vue
index 2be9c37b00a..d477fafd3f5 100644
--- a/app/assets/javascripts/reports/components/report_item.vue
+++ b/app/assets/javascripts/reports/components/report_item.vue
@@ -27,7 +27,7 @@ export default {
     statusIconSize: {
       type: Number,
       required: false,
-      default: 32,
+      default: 24,
     },
     isNew: {
       type: Boolean,
@@ -43,12 +43,15 @@ export default {
 };
 </script>
 <template>
-  <li :class="{ 'is-dismissed': issue.isDismissed }" class="report-block-list-issue">
+  <li
+    :class="{ 'is-dismissed': issue.isDismissed }"
+    class="report-block-list-issue justify-content-center align-items-center"
+  >
     <issue-status-icon
       v-if="showReportSectionStatusIcon"
       :status="status"
       :status-icon-size="statusIconSize"
-      class="append-right-5"
+      class="append-right-default"
     />
 
     <component :is="component" v-if="component" :issue="issue" :status="status" :is-new="isNew" />
diff --git a/app/assets/javascripts/reports/components/report_section.vue b/app/assets/javascripts/reports/components/report_section.vue
index 3d576caaf8f..9bc3e6388e3 100644
--- a/app/assets/javascripts/reports/components/report_section.vue
+++ b/app/assets/javascripts/reports/components/report_section.vue
@@ -165,8 +165,8 @@ export default {
 <template>
   <section class="media-section">
     <div class="media">
-      <status-icon :status="statusIconName" />
-      <div class="media-body d-flex flex-align-self-center">
+      <status-icon :status="statusIconName" :size="24" />
+      <div class="media-body d-flex flex-align-self-center prepend-left-default">
         <span class="js-code-text code-text">
           {{ headerText }}
           <slot :name="slotName"></slot>
diff --git a/app/assets/javascripts/reports/components/summary_row.vue b/app/assets/javascripts/reports/components/summary_row.vue
index 97a68531d29..3728b98c5fa 100644
--- a/app/assets/javascripts/reports/components/summary_row.vue
+++ b/app/assets/javascripts/reports/components/summary_row.vue
@@ -44,10 +44,16 @@ export default {
 };
 </script>
 <template>
-  <div class="report-block-list-issue report-block-list-issue-parent">
-    <div class="report-block-list-icon append-right-10 prepend-left-5">
-      <gl-loading-icon v-if="statusIcon === 'loading'" css-class="report-block-list-loading-icon" />
-      <ci-icon v-else :status="iconStatus" />
+  <div
+    class="report-block-list-issue report-block-list-issue-parent justify-content-center align-items-center"
+  >
+    <div class="report-block-list-icon append-right-default">
+      <gl-loading-icon
+        v-if="statusIcon === 'loading'"
+        css-class="report-block-list-loading-icon"
+        :size="md"
+      />
+      <ci-icon v-else :status="iconStatus" :size="24" />
     </div>
 
     <div class="report-block-list-issue-description">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue
index 4b57693e8f1..57d4d8b7ae6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue
@@ -14,6 +14,6 @@ export default {
 
 <template>
   <div class="circle-icon-container append-right-default align-self-start align-self-lg-center">
-    <icon :name="name" />
+    <icon :name="name" :size="24" />
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
index f5fa68308bc..40c095aa954 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
@@ -96,16 +96,14 @@ export default {
 <template>
   <div class="ci-widget media js-ci-widget">
     <template v-if="!hasPipeline || hasCIError">
-      <div
-        class="add-border ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-default"
-      >
-        <icon :size="32" name="status_failed_borderless" />
+      <div class="add-border ci-status-icon ci-status-icon-failed ci-error js-ci-error">
+        <icon :size="24" name="status_failed_borderless" />
       </div>
-      <div class="media-body" v-html="errorText"></div>
+      <div class="media-body prepend-left-default" v-html="errorText"></div>
     </template>
     <template v-else-if="hasPipeline">
       <a :href="status.details_path" class="align-self-start append-right-default">
-        <ci-icon :status="status" :size="32" :borderless="true" class="add-border" />
+        <ci-icon :status="status" :size="24" :borderless="true" class="add-border" />
       </a>
       <div class="ci-widget-container d-flex">
         <div class="ci-widget-content">
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 392eb6fb425..8dbd9e52cfe 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
@@ -32,8 +32,8 @@ export default {
 };
 </script>
 <template>
-  <div class="space-children d-flex append-right-10 widget-status-icon">
-    <div v-if="isLoading" class="mr-widget-icon"><gl-loading-icon size="md" /></div>
+  <div class="d-flex widget-status-icon">
+    <div v-if="isLoading" class="mr-widget-icon"><gl-loading-icon size="sm" /></div>
 
     <ci-icon v-else :status="statusObj" :size="24" />
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
index 0312b147b62..01524f4b650 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
@@ -83,7 +83,7 @@ export default {
       <gl-button
         :aria-label="ariaLabel"
         variant="blank"
-        class="commit-edit-toggle square s24 mr-2"
+        class="commit-edit-toggle square s24 append-right-default"
         @click.stop="toggle()"
       >
         <icon :name="collapseIcon" :size="16" />
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
index 7312b31c01c..4d7d49398eb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
@@ -18,7 +18,9 @@ export default {
 <template>
   <div class="mr-widget-body mr-widget-empty-state">
     <div class="row">
-      <div class="artwork col-md-5 order-md-last col-12 text-center">
+      <div
+        class="artwork col-md-5 order-md-last col-12 text-center d-flex justify-content-center align-items-center"
+      >
         <span v-html="emptyStateSVG"></span>
       </div>
       <div class="text col-md-7 order-md-first col-12">
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index 1be5ef276fd..7332c4981d2 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -88,8 +88,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: $border-size solid $gray-400;
-  border-radius: 50%;
-  padding: $gl-padding-8 - $border-size;
   color: $gray-700;
 }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 3917937f4af..2780afa11fa 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -10,8 +10,8 @@
     float: left;
   }
 
-  > *:not(:last-child) {
-    margin-right: 10px;
+  > *:not(:first-child) {
+    margin-left: 10px;
   }
 }
 
@@ -69,7 +69,7 @@
     content: '';
     border-left: 1px solid $gray-200;
     position: absolute;
-    left: 32px;
+    left: 28px;
     top: -17px;
     height: 16px;
   }
@@ -114,7 +114,7 @@
       padding: $gl-padding;
 
       @include media-breakpoint-up(md) {
-        padding-left: $gl-padding-50;
+        padding-left: $gl-padding-8 * 7;
       }
     }
   }
@@ -264,6 +264,10 @@
 
   .widget-status-icon {
     align-self: flex-start;
+
+    button {
+      margin-left: $gl-padding;
+    }
   }
 
   .mr-widget-body {
@@ -271,8 +275,8 @@
 
     @include clearfix;
 
-    &.media > *:first-child {
-      margin-right: 10px;
+    button {
+      margin-left: $gl-padding;
     }
 
     .approve-btn {
@@ -312,6 +316,7 @@
     .bold {
       font-weight: $gl-font-weight-bold;
       color: $gl-gray-light;
+      margin-left: 10px;
     }
 
     .state-label {
@@ -377,9 +382,13 @@
 
     &.mr-widget-empty-state {
       line-height: 20px;
+      padding: $gl-padding;
 
       .artwork {
-        margin-bottom: $gl-padding;
+
+        @include media-breakpoint-down(md) {
+          margin-bottom: $gl-padding;
+        }
       }
 
       .text {
@@ -395,7 +404,7 @@
   }
 
   .mr-widget-help {
-    padding: 10px 16px 10px $gl-padding-50;
+    padding: 10px 16px 10px ($gl-padding-8 * 7);
     font-style: italic;
   }
 
@@ -913,7 +922,7 @@
   .media-body {
     min-width: 0;
     font-size: 12px;
-    margin-left: 48px;
+    margin-left: 40px;
   }
 
   &:not(:last-child) {
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index aa6bbc8e473..ff4fa8aacdc 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -588,8 +588,8 @@
     }
 
     .ci-status-icon svg {
-      height: 20px;
-      width: 20px;
+      height: 24px;
+      width: 24px;
     }
 
     .dropdown-menu-toggle {
diff --git a/app/assets/stylesheets/pages/reports.scss b/app/assets/stylesheets/pages/reports.scss
index 94da72622af..85e9f303dde 100644
--- a/app/assets/stylesheets/pages/reports.scss
+++ b/app/assets/stylesheets/pages/reports.scss
@@ -57,7 +57,7 @@
 
 .report-block-container {
   border-top: 1px solid $border-color;
-  padding: $gl-padding-top;
+  padding: $gl-padding - 2;
   background-color: $gray-light;
 
   // Clean MR widget CSS
@@ -96,17 +96,14 @@
 
   .ci-status-icon {
     svg {
-      width: 16px;
-      height: 16px;
-      left: -2px;
+      width: 24px;
+      height: 24px;
     }
   }
 }
 
 .report-block-list-issue {
   display: flex;
-  align-items: flex-start;
-  align-content: flex-start;
 }
 
 .is-dismissed .report-block-list-issue-description,
diff --git a/changelogs/unreleased/61613-spacing-mr-widgets.yml b/changelogs/unreleased/61613-spacing-mr-widgets.yml
new file mode 100644
index 00000000000..7d37ef8da2e
--- /dev/null
+++ b/changelogs/unreleased/61613-spacing-mr-widgets.yml
@@ -0,0 +1,5 @@
+---
+title: Left align mr widget icons and text
+merge_request: 28561
+author: 
+type: fixed