From 4c43ae7b2f78baae524c36dea75ff62368034b22 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 14 May 2020 16:03:52 +0200
Subject: [PATCH] Beta fixes (#5878)

---
 src/components/data-table/ha-data-table.ts           |  7 ++++++-
 src/components/ha-combo-box.js                       |  3 +--
 src/components/ha-icon-button.ts                     |  1 +
 .../config/integrations/ha-integration-card.ts       |  2 +-
 src/panels/lovelace/cards/hui-media-control-card.ts  | 12 ++++--------
 .../editor/view-editor/hui-dialog-edit-view.ts       |  2 +-
 src/resources/ha-style.ts                            |  1 +
 src/translations/en.json                             |  6 +++---
 8 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index fff8ab1bd0..be9b5c246c 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/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 {
diff --git a/src/components/ha-combo-box.js b/src/components/ha-combo-box.js
index 711ad35e6f..62d66b4511 100644
--- a/src/components/ha-combo-box.js
+++ b/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;
-          height: 24px;
+          --mdc-icon-button-size: 24px;
           padding: 2px;
           color: var(--secondary-text-color);
         }
diff --git a/src/components/ha-icon-button.ts b/src/components/ha-icon-button.ts
index eb0cb4a77b..ba8e55a143 100644
--- a/src/components/ha-icon-button.ts
+++ b/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;
diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts
index b0af490a74..f3c88c20da 100644
--- a/src/panels/config/integrations/ha-integration-card.ts
+++ b/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%;
         }
       `,
diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts
index 9e66390f5b..f1e070ff65 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.ts
+++ b/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) {
diff --git a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
index 8bdbbd67a9..0adbc6ca02 100644
--- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
+++ b/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",
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index 8d79a090ad..2fd3023518 100644
--- a/src/resources/ha-style.ts
+++ b/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};`)
diff --git a/src/translations/en.json b/src/translations/en.json
index 2186d88d5f..0abbc5a1b5 100755
--- a/src/translations/en.json
+++ b/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",