Device info page fixes

src/components/ha-chips.ts

@@ -55,6 +55,10 @@ export class HaChips extends LitElement {
   static get styles(): CSSResult {
     return css`
       ${unsafeCSS(chipStyles)}
+      .mdc-chip {
+        background-color: rgba(var(--rgb-primary-text-color), 0.15);
+        color: var(--primary-text-color);
+      }
     `;
   }
 }

src/panels/config/devices/device-detail/ha-device-automation-card.ts

@@ -1,4 +1,11 @@
-import { LitElement, TemplateResult, html, property } from "lit-element";
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  property,
+  CSSResult,
+  css,
+} from "lit-element";
 import { HomeAssistant } from "../../../../types";
 import { DeviceAutomation } from "../../../../data/device_automation";
 
@@ -76,4 +83,12 @@ export abstract class HaDeviceAutomationCard<
     data[this.type] = [automation];
     showAutomationEditor(this, data);
   }
+
+  static get styles(): CSSResult {
+    return css`
+      h3 {
+        color: var(--primary-text-color);
+      }
+    `;
+  }
 }

src/panels/config/devices/device-detail/ha-device-automation-dialog.ts

@@ -113,7 +113,9 @@ export class DialogDeviceAutomation extends LitElement {
                     `
                   : ""}
               `
-            : html``}
+            : this.hass.localize(
+                "ui.panel.config.devices.automation.no_device_automations"
+              )}
         </div>
         <mwc-button slot="primaryAction" @click="${this._close}">
           Close
@@ -126,54 +128,17 @@ export class DialogDeviceAutomation extends LitElement {
     this._params = undefined;
   }
 
-  static get styles(): CSSResult[] {
-    return [
-      css`
+  static get styles(): CSSResult {
+    return css`
+      ha-dialog {
+        --mdc-dialog-title-ink-color: var(--primary-text-color);
+      }
+      @media only screen and (min-width: 600px) {
         ha-dialog {
-          --mdc-dialog-title-ink-color: var(--primary-text-color);
-          --justify-action-buttons: space-between;
+          --mdc-dialog-min-width: 600px;
         }
-        @media only screen and (min-width: 600px) {
-          ha-dialog {
-            --mdc-dialog-min-width: 600px;
-          }
-        }
-        .form {
-          padding-bottom: 24px;
-        }
-        .location {
-          display: flex;
-        }
-        .location > * {
-          flex-grow: 1;
-          min-width: 0;
-        }
-        .location > *:first-child {
-          margin-right: 4px;
-        }
-        .location > *:last-child {
-          margin-left: 4px;
-        }
-        ha-location-editor {
-          margin-top: 16px;
-        }
-        ha-user-picker {
-          margin-top: 16px;
-        }
-        mwc-button.warning {
-          --mdc-theme-primary: var(--google-red-500);
-        }
-        .error {
-          color: var(--google-red-500);
-        }
-        a {
-          color: var(--primary-color);
-        }
-        p {
-          color: var(--primary-text-color);
-        }
-      `,
-    ];
+      }
+    `;
   }
 }