Beta fixes (#189)

Author: balloob

src/adopt/adopt-dialog.ts

@@ -8,6 +8,7 @@ import { fireEvent } from "../util/fire-event";
 import { ImportableDevice, importDevice } from "../api/devices";
 import { checkHasWifiSecrets, storeWifiSecrets } from "../api/wifi";
 import { openInstallChooseDialog } from "../install-choose";
+import { esphomeDialogStyles } from "../styles";
 
 @customElement("esphome-adopt-dialog")
 class ESPHomeAdoptDialog extends LitElement {
@@ -51,8 +52,8 @@ class ESPHomeAdoptDialog extends LitElement {
           : html`
               <div>
                 Adopting ${this.device.name} will create an ESPHome
-                configuration for this device allowing you to install updates
-                and customize the original firmware.
+                configuration for this device. This allows you to install
+                updates and customize the original firmware.
               </div>
 
               ${this._error
@@ -103,6 +104,7 @@ class ESPHomeAdoptDialog extends LitElement {
                 ? ""
                 : html`
                     <mwc-button
+                      no-attention
                       slot="secondaryAction"
                       label="Cancel"
                       dialogAction="cancel"
@@ -163,22 +165,18 @@ class ESPHomeAdoptDialog extends LitElement {
     }
   }
 
-  static styles = css`
-    :host {
-      --mdc-dialog-max-width: 390px;
-    }
-    mwc-textfield {
-      display: block;
-      margin-top: 16px;
-    }
-    div + div {
-      margin-top: 16px;
-    }
-    .error {
-      color: #db4437;
-      margin-bottom: 16px;
-    }
-  `;
+  static styles = [
+    esphomeDialogStyles,
+    css`
+      :host {
+        --mdc-dialog-max-width: 390px;
+      }
+      .error {
+        color: var(--alert-error-color);
+        margin-bottom: 16px;
+      }
+    `,
+  ];
 }
 
 declare global {

src/components/process-dialog.ts

@@ -58,7 +58,7 @@ export class ESPHomeProcessDialog extends LitElement {
     }
 
     esphome-remote-process {
-      --remote-process-height: calc(90vh - 128px);
+      height: calc(90vh - 128px);
     }
   `;
 }

src/components/remote-process.ts

@@ -19,7 +19,12 @@ class ESPHomeRemoteProcess extends HTMLElement {
     const shadowRoot = this.attachShadow({ mode: "open" });
 
     shadowRoot.innerHTML = `
-      <style>${coloredConsoleStyles}</style>
+      <style>
+        :host {
+          display: flex;
+        }
+        ${coloredConsoleStyles}
+      </style>
       <div class="log"></div>
     `;
 

src/const.ts

@@ -27,6 +27,3 @@ export interface Logger {
   error(msg: string, ...args: any[]): void;
   debug(msg: string, ...args: any[]): void;
 }
-
-export const DOCS_WEBSERIAL =
-  "https://esphome.io/guides/getting_started_hassio.html#webserial";

src/devices/configured-device-card.ts

@@ -17,6 +17,7 @@ import { openInstallChooseDialog } from "../install-choose";
 import { openLogsTargetDialog } from "../logs-target";
 import { fireEvent } from "../util/fire-event";
 import { openDeleteDeviceDialog } from "../delete-device";
+import { esphomeCardStyles } from "../styles";
 
 const UPDATE_TO_ICON = "➡️";
 const STATUS_COLORS = {
@@ -29,7 +30,7 @@ const STATUS_COLORS = {
 @customElement("esphome-configured-device-card")
 class ESPHomeConfiguredDeviceCard extends LitElement {
   @property() public device!: ConfiguredDevice;
-  @property() public onlineStatus = false;
+  @property() public onlineStatus?: boolean;
   @property() public highlightOnAdd = false;
   @state() private _highlight = false;
 
@@ -69,7 +70,9 @@ class ESPHomeConfiguredDeviceCard extends LitElement {
       ? "OFFLINE"
       : updateAvailable
       ? "UPDATE AVAILABLE"
-      : "ONLINE";
+      : this.onlineStatus === true
+      ? "ONLINE"
+      : undefined;
     return html`
       <esphome-card
         .status=${status}
@@ -143,56 +146,34 @@ class ESPHomeConfiguredDeviceCard extends LitElement {
     }
   }
 
-  static styles = css`
-    :host {
-      --update-available-color: #2e3dd4;
-    }
-    esphome-card {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-    .device-config-path {
-      margin-bottom: 8px;
-      font-size: 14px;
-    }
-    .inlinecode {
-      box-sizing: border-box;
-      padding: 0.2em 0.4em;
-      margin: 0;
-      font-size: 85%;
-      background-color: rgba(27, 31, 35, 0.05);
-      border-radius: 3px;
-      font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
-        monospace;
-    }
-    .card-actions {
-      display: flex;
-      padding: 4px;
-    }
-    .flex {
-      flex: 1;
-    }
-    .card-actions a {
-      text-decoration: none;
-    }
-    mwc-button {
-      --mdc-theme-primary: rgba(0, 0, 0, 0.88);
-    }
-    esphome-button-menu {
-      cursor: pointer;
-    }
-    mwc-icon-button {
-      --mdc-icon-button-size: 32px;
-    }
-    .update-available {
-      --mdc-theme-primary: var(--update-available-color);
-    }
-
-    .tooltip-container {
-      display: inline-block;
-    }
-  `;
+  static styles = [
+    esphomeCardStyles,
+    css`
+      :host {
+        --update-available-color: #2e3dd4;
+      }
+      .device-config-path {
+        margin-bottom: 8px;
+        font-size: 14px;
+      }
+      .inlinecode {
+        box-sizing: border-box;
+        padding: 0.2em 0.4em;
+        margin: 0;
+        font-size: 85%;
+        background-color: rgba(27, 31, 35, 0.05);
+        border-radius: 3px;
+        font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
+          Courier, monospace;
+      }
+      .card-actions mwc-button.update-available {
+        --mdc-theme-primary: var(--update-available-color);
+      }
+      .tooltip-container {
+        display: inline-block;
+      }
+    `,
+  ];
 
   private _handleOverflowAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {

src/devices/importable-device-card.ts

@@ -5,6 +5,7 @@ import "@material/mwc-button";
 import "../components/esphome-card";
 import { fireEvent } from "../util/fire-event";
 import { openAdoptDialog } from "../adopt";
+import { esphomeCardStyles } from "../styles";
 
 @customElement("esphome-importable-device-card")
 class ESPHomeImportableDeviceCard extends LitElement {
@@ -38,20 +39,17 @@ class ESPHomeImportableDeviceCard extends LitElement {
     }, 1000);
   }
 
-  static styles = css`
-    esphome-card {
-      --status-color: #4caf50;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-    .flex {
-      flex: 1;
-    }
-    mwc-button {
-      --mdc-theme-primary: #4caf50;
-    }
-  `;
+  static styles = [
+    esphomeCardStyles,
+    css`
+      esphome-card {
+        --status-color: #4caf50;
+      }
+      .card-actions mwc-button {
+        --mdc-theme-primary: #4caf50;
+      }
+    `,
+  ];
 
   private async _handleAdopt() {
     openAdoptDialog(this.device, () => fireEvent(this, "adopted"));