Beta fixes (#5878)

src/components/data-table/ha-data-table.ts

@@ -646,6 +646,11 @@ export class HaDataTable extends LitElement {
         padding: 8px;
       }
 
+      .mdc-data-table__cell--icon-button {
+        color: var(--secondary-text-color);
+        text-overflow: clip;
+      }
+
       .mdc-data-table__header-cell--icon-button:first-child,
       .mdc-data-table__cell--icon-button:first-child {
         width: 64px;
@@ -659,7 +664,7 @@ export class HaDataTable extends LitElement {
       }
 
       .mdc-data-table__cell--icon-button a {
-        color: var(--primary-text-color);
+        color: var(--secondary-text-color);
       }
 
       .mdc-data-table__header-cell {

src/components/ha-combo-box.js

@@ -12,8 +12,7 @@ class HaComboBox extends EventsMixin(PolymerElement) {
     return html`
       <style>
         paper-input > ha-icon-button {
-          width: 24px;
+          --mdc-icon-button-size: 24px;
-          height: 24px;
           padding: 2px;
           color: var(--secondary-text-color);
         }

src/components/ha-icon-button.ts

@@ -48,6 +48,7 @@ export class HaIconButton extends LitElement {
       }
       mwc-icon-button {
         --mdc-theme-on-primary: currentColor;
+        --mdc-theme-text-disabled-on-light: var(--disabled-text-color);
       }
       ha-icon {
         --ha-icon-display: inline;

src/panels/config/integrations/ha-integration-card.ts

@@ -395,7 +395,7 @@ export class HaIntegrationCard extends LitElement {
         }
         .back-btn {
           position: absolute;
-          background: #ffffffe0;
+          background: rgba(var(--rgb-card-background-color), 0.6);
           border-radius: 50%;
         }
       `,

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -808,10 +808,6 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
         transition-duration: 0.4s;
       }
 
-      .icon {
-        width: 18px;
-      }
-
       .controls {
         padding: 8px 8px 8px 0;
         display: flex;
@@ -829,7 +825,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
 
       .controls ha-icon-button {
         --mdc-icon-button-size: 44px;
-        --mdc-icon-size: 22px;
+        --mdc-icon-size: 30px;
       }
 
       ha-icon-button[action="media_play"],
@@ -837,7 +833,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
       ha-icon-button[action="turn_on"],
       ha-icon-button[action="turn_off"] {
         --mdc-icon-button-size: 56px;
-        --mdc-icon-size: 28px;
+        --mdc-icon-size: 40px;
       }
 
       .top-info {
@@ -899,14 +895,14 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
 
       .narrow ha-icon-button {
         --mdc-icon-button-size: 40px;
-        --mdc-icon-size: 20px;
+        --mdc-icon-size: 28px;
       }
 
       .narrow ha-icon-button[action="media_play"],
       .narrow ha-icon-button[action="media_play_pause"],
       .narrow ha-icon-button[action="turn_on"] {
         --mdc-icon-button-size: 50px;
-        --mdc-icon-size: 25px;
+        --mdc-icon-size: 36px;
       }
 
       .no-progress.player:not(.no-controls) {

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -236,7 +236,7 @@ export class HuiDialogEditView extends LitElement {
       ),
       text: this.hass!.localize(
         `ui.panel.lovelace.views.confirm_delete${
-          this._cards?.length ? `_existing_cards` : ""
+          this._cards?.length ? "_existing_cards" : ""
         }_text`,
         "name",
         this._config?.title || "Unnamed view",

src/resources/ha-style.ts

@@ -92,6 +92,7 @@ documentContainer.innerHTML = `<custom-style>
       --rgb-primary-text-color: 33, 33, 33;
       --rgb-secondary-text-color: 114, 114, 114;
       --rgb-text-primary-color: 255, 255, 255;
+      --rgb-card-background-color: 255, 255, 255;
 
       ${Object.entries(derivedStyles)
         .map(([key, value]) => `--${key}: ${value};`)

src/translations/en.json

@@ -380,7 +380,7 @@
         }
       },
       "helper_settings": {
-        "platform_not_loaded": "The {platform} integration is not loaded. Please add it your configuration either by adding 'default_config:' or '{platform}:'.",
+        "platform_not_loaded": "The {platform} integration is not loaded. Please add it your configuration either by adding 'default_config:' or ''{platform}:''.",
         "yaml_not_editable": "The settings of this entity cannot be edited from the UI. Only entities set up from the UI are configurable from the UI.",
         "required_error_msg": "This field is required",
         "generic": {
@@ -1650,9 +1650,9 @@
         },
         "views": {
           "confirm_delete": "Delete view?",
-          "confirm_delete_text": "Are you sure you want to delete your '{name}' view?",
+          "confirm_delete_text": "Are you sure you want to delete your ''{name}'' view?",
           "confirm_delete_existing_cards": "Deleting this view will also remove the cards",
-          "confirm_delete_existing_cards_text": "Are you sure you want to delete your '{name}' view? The view contains {number} cards that will be deleted. This action cannot be undone."
+          "confirm_delete_existing_cards_text": "Are you sure you want to delete your ''{name}'' view? The view contains {number} cards that will be deleted. This action cannot be undone."
         },
         "menu": {
           "configure_ui": "Configure UI",