Move log item level position + color in detail popup header (#8270)

src/panels/config/logs/dialog-system-log-detail.ts

@@ -72,11 +72,7 @@ class DialogSystemLogDetail extends LitElement {
             <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
           </mwc-icon-button>
           <span slot="title">
-            ${this.hass.localize(
+            ${this.hass.localize("ui.panel.config.logs.details", "level", html`<span class="${item.level.toLowerCase()}">${item.level}</span>`)}
-              "ui.panel.config.logs.details",
-              "level",
-              item.level
-            )}
           </span>
           <mwc-icon-button id="copy" @click=${this._copyLog} slot="actionItems">
             <ha-svg-icon .path=${mdiContentCopy}></ha-svg-icon>
@@ -176,6 +172,12 @@ class DialogSystemLogDetail extends LitElement {
           margin-bottom: 0;
           font-family: var(--code-font-family, monospace);
         }
+        .error {
+          color: var(--error-color);
+        }
+        .warning {
+          color: var(--warning-color);
+        }
 
         ha-header-bar {
           --mdc-theme-on-primary: var(--primary-text-color);

src/panels/config/logs/system-log-card.ts

@@ -71,15 +71,15 @@ export class SystemLogCard extends LitElement {
                                 this.hass!.language
                               )}
                               –
+                              ${html`(<span class="${item.level.toLowerCase()}"
+                                  >${item.level}</span
+                                >) `}
                               ${integrations[idx]
                                 ? domainToName(
                                     this.hass!.localize,
                                     integrations[idx]!
                                   )
                                 : item.source[0]}
-                              ${html`(<span class="${item.level.toLowerCase()}"
-                                  >${item.level}</span
-                                >)`}
                               ${item.count > 1
                                 ? html`
                                     -