From 7a796c76c2357411e6f3a564cda92031550cb989 Mon Sep 17 00:00:00 2001
From: Jarek Ostrowski <jostrowski@gitlab.com>
Date: Tue, 16 Jul 2019 17:31:12 +0000
Subject: 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
---
 app/assets/stylesheets/framework/icons.scss      |  3 ---
 app/assets/stylesheets/pages/merge_requests.scss | 27 ++++++++++++++++--------
 app/assets/stylesheets/pages/pipelines.scss      |  4 ++--
 app/assets/stylesheets/pages/reports.scss        |  9 +++-----
 4 files changed, 23 insertions(+), 20 deletions(-)

(limited to 'app/assets/stylesheets')

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,
-- 
cgit v1.2.1