Supervisor style changes (#5706)

hassio/src/addon-store/hassio-addon-store.ts

@@ -123,6 +123,9 @@ class HassioAddonStore extends LitElement {
       hassio-addon-repository {
         margin-top: 24px;
       }
+      hassio-search-input {
+        --iron-icon-fill-color: var(--primary-text-color);
+      }
     `;
   }
 }

hassio/src/addon-view/config/hassio-addon-config-tab.ts

@@ -59,13 +59,10 @@ class HassioAddonConfigDashboard extends LitElement {
       haStyle,
       hassioStyle,
       css`
-        @media screen and (min-width: 1024px) {
-          .content {
-            width: 50%;
-            margin: auto;
-            margin-top: 8px;
-            max-width: 1024px;
-          }
+        .content {
+          margin: auto;
+          padding: 8px;
+          max-width: 1024px;
         }
         hassio-addon-network,
         hassio-addon-audio,

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -43,7 +43,8 @@ class HassioAddonConfig extends LitElement {
     const valid = editor ? editor.isValid : true;
 
     return html`
-      <paper-card heading="Config">
+      <h1>${this.addon.name}</h1>
+      <paper-card heading="Configuration">
         <div class="card-content">
           <ha-yaml-editor
             @value-changed=${this._configChanged}

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -56,12 +56,10 @@ class HassioAddonDocumentationDashboard extends LitElement {
       haStyle,
       hassioStyle,
       css`
-        @media screen and (min-width: 1024px) {
-          .content {
-            width: 50%;
-            margin: auto;
-            max-width: 1024px;
-          }
+        .content {
+          margin: auto;
+          padding: 8px;
+          max-width: 1024px;
         }
       `,
     ];

hassio/src/addon-view/info/hassio-addon-info-tab.ts

@@ -45,13 +45,10 @@ class HassioAddonInfoDashboard extends LitElement {
       haStyle,
       hassioStyle,
       css`
-        @media screen and (min-width: 1024px) {
-          .content {
-            width: 50%;
-            margin: auto;
-            margin-top: 8px;
-            max-width: 1024px;
-          }
+        .content {
+          margin: auto;
+          padding: 8px;
+          max-width: 1024px;
         }
       `,
     ];

hassio/src/addon-view/log/hassio-addon-log-tab.ts

@@ -42,13 +42,10 @@ class HassioAddonLogDashboard extends LitElement {
       haStyle,
       hassioStyle,
       css`
-        @media screen and (min-width: 1024px) {
-          .content {
-            width: 50%;
-            margin: auto;
-            margin-top: 8px;
-            max-width: 1024px;
-          }
+        .content {
+          margin: auto;
+          padding: 8px;
+          max-width: 1024px;
         }
       `,
     ];

hassio/src/addon-view/log/hassio-addon-logs.ts

@@ -13,7 +13,6 @@ import {
   fetchHassioAddonLogs,
   HassioAddonDetails,
 } from "../../../../src/data/hassio/addon";
-import "../../../../src/layouts/loading-screen";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import "../../components/hassio-ansi-to-html";
@@ -36,14 +35,15 @@ class HassioAddonLogs extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <paper-card heading="Log">
+      <h1>${this.addon.name}</h1>
+      <paper-card>
         ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
         <div class="card-content">
           ${this._content
             ? html`<hassio-ansi-to-html
                 .content=${this._content}
               ></hassio-ansi-to-html>`
-            : html`<loading-screen></loading-screen>`}
+            : ""}
         </div>
         <div class="card-actions">
           <mwc-button @click=${this._refresh}>Refresh</mwc-button>

hassio/src/resources/hassio-style.ts

@@ -4,8 +4,12 @@ export const hassioStyle = css`
   .content {
     margin: 8px;
   }
-  h1 {
+  h1,
+  .description,
+  .card-content {
     color: var(--primary-text-color);
+  }
+  h1 {
     font-size: 2em;
     margin-bottom: 8px;
     font-family: var(--paper-font-headline_-_font-family);