Issue #2412949 by kyuubi: Rewrite the system status report component inline with our CSS standards

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

@@ -187,37 +187,33 @@ small .admin-link:after {
   background: url(../../../misc/icons/787878/cog.svg) 0 50% no-repeat;
 }
 
-/**
- * Status report.
- */
+/* Status report. */
 .system-status-report td {
-  padding: 6px;
   vertical-align: top;
 }
-.system-status-report td:nth-child(-n+2) {
-  background-color: rgba(0, 0, 0, 0.04);
-}
-.system-status-report .status-icon {
+.system-status-report__status-icon {
   width: 16px;
   padding-right: 0; /* LTR */
 }
-[dir="rtl"] .system-status-report .status-icon {
+[dir="rtl"] .system-status-report__status-icon {
   padding-left: 0;
   padding-right: 6px;
 }
-.system-status-report .status-icon div {
+.system-status-report__status-icon:before {
+  content: "";
   background-repeat: no-repeat;
   height: 16px;
   width: 16px;
   margin-top: 2px;
+  display: block;
 }
-.system-status-report .status-icon--error div {
+.system-status-report__status-icon--error:before {
   background-image: url(../../../misc/icons/ea2800/error.svg);
 }
-.system-status-report .status-icon--warning div {
+.system-status-report__status-icon--warning:before {
   background-image: url(../../../misc/icons/e29700/warning.svg);
 }
-.system-status-report .status-title {
+.system-status-report__status-title {
   width: 25%;
 }
 

core/modules/system/templates/status-report.html.twig

@@ -26,17 +26,17 @@
   <tbody>
   {% for requirement in requirements %}
     {% if requirement.severity_status in ['warning', 'error'] %}
-      <tr class="color-{{ requirement.severity_status }}">
+      <tr class="system-status-report__entry color-{{ requirement.severity_status }}">
     {% else %}
-      <tr>
+      <tr class="system-status-report__entry">
     {% endif %}
-        <td class="status-icon status-icon--{{ requirement.severity_status }}">
+        <td class="system-status-report__status-icon system-status-report__status-icon--{{ requirement.severity_status }}">
           <div title="{{ requirement.severity_title }}">
             <span class="visually-hidden">{{ requirement.severity_title }}</span>
           </div>
         </td>
-        <td class="status-title">{{ requirement.title }}</td>
-        <td class="status-value">
+        <td class="system-status-report__status-title">{{ requirement.title }}</td>
+        <td>
           {{ requirement.value }}
           {% if requirement.description %}
             <div class="description">{{ requirement.description }}</div>

core/themes/seven/css/components/system-status-report.css

+/**
+ * @file
+ * Seven styles for the System Status Report.
+ */
+
+.system-status-report__entry {
+  border-top: 1px solid #ccc;
+  border-bottom: inherit;
+}
+.system-status-report__entry:first-child {
+  border-top: 1px solid #bebfb9;
+}
+.system-status-report__entry:last-child {
+  border-bottom: 1px solid #bebfb9;
+}

core/themes/seven/css/components/tables.css

 /**
- * Tables.
+ * @file
+ * Seven styles for Tables.
  */
+
 table {
   width: 100%;
   margin: 0 0 10px;
@@ -123,26 +125,6 @@ th.select-all {
   margin-bottom: 1.2em;
 }
 
-/**
- * Status report table.
- */
-table.system-status-report tr {
-  border-top: 1px solid #ccc;
-  border-bottom: inherit;
-}
-table.system-status-report tr:first-child {
-  border-top: 1px solid #bebfb9;
-}
-table.system-status-report tr:last-child {
-  border-bottom: 1px solid #bebfb9;
-}
-table.system-status-report td {
-  padding: 12px;
-}
-table.system-status-report td:nth-child(-n+2) {
- background-color: transparent;
-}
-
 /**
  * Responsive tables.
  */

core/themes/seven/seven.libraries.yml

@@ -26,6 +26,7 @@ global-styling:
       css/components/panel.css: {}
       css/components/skip-link.css: {}
       css/components/tables.css: {}
+      css/components/system-status-report.css: {}
       css/components/tabs.css: {}
       css/components/tour.theme.css: {}
       css/components/update-status.css: {}