Improve message for yaml core settings (#22936)

src/panels/config/core/ha-config-section-general.ts

@@ -1,6 +1,6 @@
 import "@material/mwc-list/mwc-list-item";
 import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { UNIT_C } from "../../../common/const";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
@@ -77,13 +77,13 @@ class HaConfigSectionGeneral extends LitElement {
             <div class="card-content">
               ${!canEdit
                 ? html`
-                    <p>
+                    <ha-alert>
                       ${this.hass.localize(
                         "ui.panel.config.core.section.core.core_config.edit_requires_storage"
                       )}
-                    </p>
+                    </ha-alert>
                   `
-                : ""}
+                : nothing}
               <ha-textfield
                 name="name"
                 .label=${this.hass.localize(

src/panels/config/network/ha-config-url-form.ts

@@ -96,14 +96,16 @@ class ConfigUrlForm extends LitElement {
         <div class="card-content">
           ${!canEdit
             ? html`
-                <p>
+                <ha-alert>
                   ${this.hass.localize(
                     "ui.panel.config.core.section.core.core_config.edit_requires_storage"
                   )}
-                </p>
+                </ha-alert>
               `
             : ""}
-          ${this._error ? html`<div class="error">${this._error}</div>` : ""}
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : ""}
 
           <div class="description">
             ${this.hass.localize("ui.panel.config.url.description")}
@@ -406,8 +408,10 @@ class ConfigUrlForm extends LitElement {
       .row > * {
         margin: 0 8px;
       }
-      .error {
-        color: var(--error-color);
+
+      ha-alert {
+        display: block;
+        margin: 16px 0;
       }
 
       .card-actions {

src/translations/en.json

@@ -2435,7 +2435,7 @@
               "header": "General configuration",
               "introduction": "Manage your location, network, and analytics.",
               "core_config": {
-                "edit_requires_storage": "Editor disabled because config stored in configuration.yaml.",
+                "edit_requires_storage": "You can not change these settings in the UI, as you have config stored in 'configuration.yaml' under the 'homeassistant' key.",
                 "location_name": "Name",
                 "latitude": "Latitude",
                 "longitude": "Longitude",