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, 23 insertions, 20 deletions

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,