Fix media browser panel title + selection header color (#6807)

src/panels/media-browser/hui-dialog-select-media-player.ts

@@ -13,6 +13,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { createCloseHeading } from "../../components/ha-dialog";
 import { BROWSER_SOURCE } from "../../data/media-player";
 import type { HomeAssistant } from "../../types";
+import { haStyleDialog } from "../../resources/styles";
 import type { SelectMediaPlayerDialogParams } from "./show-select-media-source-dialog";
 
 @customElement("hui-dialog-select-media-player")
@@ -74,15 +75,18 @@ export class HuiDialogSelectMediaPlayer extends LitElement {
     this.closeDialog();
   }
 
-  static get styles(): CSSResult {
-    return css`
-      ha-dialog {
-        --dialog-content-padding: 0 24px 20px;
-      }
-      paper-item {
-        cursor: pointer;
-      }
-    `;
+  static get styles(): CSSResult[] {
+    return [
+      haStyleDialog,
+      css`
+        ha-dialog {
+          --dialog-content-padding: 0 24px 20px;
+        }
+        paper-item {
+          cursor: pointer;
+        }
+      `,
+    ];
   }
 }
 

src/panels/media-browser/hui-dialog-web-browser-play-media.ts

@@ -11,6 +11,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-hls-player";
 import type { HomeAssistant } from "../../types";
+import { haStyleDialog } from "../../resources/styles";
 import { WebBrowserPlayMediaDialogParams } from "./show-media-player-dialog";
 
 @customElement("hui-dialog-web-browser-play-media")
@@ -92,26 +93,25 @@ export class HuiDialogWebBrowserPlayMedia extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
-    return css`
-      ha-dialog {
-        --mdc-dialog-heading-ink-color: var(--primary-text-color);
-      }
-
-      @media (min-width: 800px) {
-        ha-dialog {
-          --mdc-dialog-max-width: 800px;
-          --mdc-dialog-min-width: 400px;
+  static get styles(): CSSResult[] {
+    return [
+      haStyleDialog,
+      css`
+        @media (min-width: 800px) {
+          ha-dialog {
+            --mdc-dialog-max-width: 800px;
+            --mdc-dialog-min-width: 400px;
+          }
         }
-      }
 
-      video,
-      audio,
-      img {
-        outline: none;
-        width: 100%;
-      }
-    `;
+        video,
+        audio,
+        img {
+          outline: none;
+          width: 100%;
+        }
+      `,
+    ];
   }
 }
 

src/translations/en.json

@@ -9,6 +9,7 @@
     "mailbox": "Mailbox",
     "shopping_list": "Shopping list",
     "developer_tools": "Developer Tools",
+    "media_browser": "Media Browser",
     "profile": "Profile"
   },
   "state": {