Align merge request icons and text

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
Update summary_row.vue

4 files changed, 19 insertions, 10 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..1caf52431e2 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">