Issue #2213583 by lauriii, sqndr, Crisz, herom, jamesquinton, esod, Rajendar Reddy, zserno, er.pushpinderrana, cs_shadow, amitgoyal | JayeshSolanki: Fixed Misaligned Icons in Drupal 8.x.

core/modules/system/css/system.admin.css

@@ -180,6 +180,7 @@ table.system-status-report td.status-icon div {
   background-repeat: no-repeat;
   height: 16px;
   width: 16px;
+  margin-top: 2px;
 }
 table.system-status-report tr.error td.status-icon div {
   background-image: url(../../../misc/icons/ea2800/error.svg);

core/modules/system/css/system.theme.css

@@ -490,7 +490,7 @@ ul.tabs {
  * Styles for system messages.
  */
 .messages {
-  background: no-repeat 10px 18px;  /* LTR */
+  background: no-repeat 10px 17px;  /* LTR */
   border: 1px solid;
   border-width: 1px 1px 1px 0;  /* LTR */
   border-radius: 2px;
@@ -500,7 +500,7 @@ ul.tabs {
 }
 [dir="rtl"] .messages {
   border-width: 1px 0 1px 1px;
-  background-position: right 10px top 18px;
+  background-position: right 10px top 17px;
   padding-left: 20px;
   padding-right: 35px;
   text-align: right;
@@ -521,15 +521,11 @@ ul.tabs {
 .messages--status {
   border-color: #c9e1bd #c9e1bd #c9e1bd transparent;  /* LTR */
   background-image: url(../../../misc/icons/73b355/check.svg);
-  background-position: 12px 19px;  /* LTR */
   box-shadow: -8px 0 0 #77b259; /* LTR */
-  margin-left: 8px; /* LTR */
 }
 [dir="rtl"] .messages--status {
-  background-position: right 12px top 19px;
   border-color: #c9e1bd transparent #c9e1bd #c9e1bd;
   box-shadow: 8px 0 0 #77b259;
-  margin-right: 8px;
   margin-left: 0;
 }
 .messages--status,
@@ -566,7 +562,7 @@ table tr.warning {
 }
 [dir="rtl"] .messages--error {
   border-color: #f9c9bf transparent #f9c9bf #f9c9bf;
-  box-shadow: -8px 0 0 #e62600;
+  box-shadow: 8px 0 0 #e62600;
 }
 .messages--error,
 .error {

core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php

@@ -177,7 +177,7 @@ class ThemeHandlerTest extends UnitTestCase {
         'css/components/buttons.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/buttons.css',
         'css/components/buttons.theme.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/buttons.theme.css',
         'css/components/comments.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/comments.css',
-        'css/components/console.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/console.css',
+        'css/components/messages.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/messages.css',
         'css/components/dropbutton.component.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/dropbutton.component.css',
         'css/components/entity-meta.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/entity-meta.css',
         'css/components/field-ui.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/field-ui.css',

core/themes/seven/css/components/console.css

@@ -1,6 +0,0 @@
-/**
- * Console.
- */
-#console {
-  margin: 9px 0 10px;
-}

core/themes/seven/css/components/messages.css

@@ -0,0 +1,13 @@
+/**
+ * Messages.
+ */
+.messages {
+  margin: 9px 0 10px 8px; /* LTR */
+}
+[dir="rtl"] .messages {
+  margin: 9px 8px 10px 0;
+}
+.messages pre {
+  margin: 0;
+}
+

core/themes/seven/seven.info.yml

@@ -18,7 +18,7 @@ stylesheets:
     - css/components/buttons.css
     - css/components/buttons.theme.css
     - css/components/comments.css
-    - css/components/console.css
+    - css/components/messages.css
     - css/components/dropbutton.component.css
     - css/components/entity-meta.css
     - css/components/field-ui.css

core/themes/seven/templates/page.html.twig

@@ -85,9 +85,7 @@
 
     <main id="content" class="clearfix" role="main">
       <div class="visually-hidden"><a id="main-content" tabindex="-1"></a></div>
-      {% if messages %}
+      {{ messages }}
-        <div id="console" class="clearfix">{{ messages }}</div>
-      {% endif %}
       {% if page.help %}
         <div id="help">
           {{ page.help }}