From 02e67d114692cf4458491226f6c5bfac6bce3cc4 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 3 May 2022 13:22:48 +0200
Subject: [PATCH] Use ha-tip for yaml move tip (#12559)

---
 .../config/core/ha-config-system-navigation.ts     | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/panels/config/core/ha-config-system-navigation.ts b/src/panels/config/core/ha-config-system-navigation.ts
index 3af90288dc..a71e398685 100644
--- a/src/panels/config/core/ha-config-system-navigation.ts
+++ b/src/panels/config/core/ha-config-system-navigation.ts
@@ -2,6 +2,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { canShowPage } from "../../../common/config/can_show_page";
 import "../../../components/ha-card";
+import "../../../components/ha-tip";
 import "../../../components/ha-navigation-list";
 import { CloudStatus } from "../../../data/cloud";
 import {
@@ -61,7 +62,12 @@ class HaConfigSystemNavigation extends LitElement {
               .pages=${pages}
             ></ha-navigation-list>
           </ha-card>
-          <div class="yaml-config">Looking for YAML Configuration? It has moved to <a href="/developer-tools/yaml">Developer Tools</a></a></div>
+          ${this.hass.userData?.showAdvanced
+            ? html`<ha-tip>
+                Looking for YAML Configuration? It has moved to
+                <a href="/developer-tools/yaml">Developer Tools</a>
+              </ha-tip>`
+            : ""}
         </ha-config-section>
       </hass-subpage>
     `;
@@ -137,10 +143,8 @@ class HaConfigSystemNavigation extends LitElement {
           --navigation-list-item-title-font-size: 16px;
           --navigation-list-item-padding: 4px;
         }
-        .yaml-config {
-          margin-bottom: max(env(safe-area-inset-bottom), 24px);
-          text-align: center;
-          font-style: italic;
+        ha-tip {
+          margin-bottom: max(env(safe-area-inset-bottom), 8px);
         }
       `,
     ];