From f16a674a398149bf8b822addbe368b1d05dd2cfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <joasoe@gmail.com>
Date: Sat, 2 May 2020 14:42:12 +0200
Subject: [PATCH] Supervisor style changes (#5706)

---
 hassio/src/addon-store/hassio-addon-store.ts          |  3 +++
 .../src/addon-view/config/hassio-addon-config-tab.ts  | 11 ++++-------
 hassio/src/addon-view/config/hassio-addon-config.ts   |  3 ++-
 .../documentation/hassio-addon-documentation-tab.ts   | 10 ++++------
 hassio/src/addon-view/info/hassio-addon-info-tab.ts   | 11 ++++-------
 hassio/src/addon-view/log/hassio-addon-log-tab.ts     | 11 ++++-------
 hassio/src/addon-view/log/hassio-addon-logs.ts        |  6 +++---
 hassio/src/resources/hassio-style.ts                  |  6 +++++-
 8 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts
index 5d9093c90c..fd78be112f 100644
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/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);
+      }
     `;
   }
 }
diff --git a/hassio/src/addon-view/config/hassio-addon-config-tab.ts b/hassio/src/addon-view/config/hassio-addon-config-tab.ts
index 4440ce1588..adc1f0b17c 100644
--- a/hassio/src/addon-view/config/hassio-addon-config-tab.ts
+++ b/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,
diff --git a/hassio/src/addon-view/config/hassio-addon-config.ts b/hassio/src/addon-view/config/hassio-addon-config.ts
index 0699b4654e..0ec5e97d94 100644
--- a/hassio/src/addon-view/config/hassio-addon-config.ts
+++ b/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}
diff --git a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts b/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
index 430565c16c..683de1da34 100644
--- a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
+++ b/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;
         }
       `,
     ];
diff --git a/hassio/src/addon-view/info/hassio-addon-info-tab.ts b/hassio/src/addon-view/info/hassio-addon-info-tab.ts
index ce86c69b2d..959b53caf8 100644
--- a/hassio/src/addon-view/info/hassio-addon-info-tab.ts
+++ b/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;
         }
       `,
     ];
diff --git a/hassio/src/addon-view/log/hassio-addon-log-tab.ts b/hassio/src/addon-view/log/hassio-addon-log-tab.ts
index 3eddbba05c..c23df1b92b 100644
--- a/hassio/src/addon-view/log/hassio-addon-log-tab.ts
+++ b/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;
         }
       `,
     ];
diff --git a/hassio/src/addon-view/log/hassio-addon-logs.ts b/hassio/src/addon-view/log/hassio-addon-logs.ts
index 090f4464da..a958c9b449 100644
--- a/hassio/src/addon-view/log/hassio-addon-logs.ts
+++ b/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>
diff --git a/hassio/src/resources/hassio-style.ts b/hassio/src/resources/hassio-style.ts
index 7c51b469fa..99329ee08f 100644
--- a/hassio/src/resources/hassio-style.ts
+++ b/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);