Update cloud promo styling in network settings (#30246)

Update cloud promo styling

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

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

@@ -184,14 +184,22 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
           ${hasCloud || !isComponentLoaded(this.hass, "cloud")
             ? nothing
             : html`
-                <div class="row">
-                  <div class="flex"></div>
-                  <a href="/config/cloud"
-                    >${this.hass.localize(
-                      "ui.panel.config.url.external_get_ha_cloud"
-                    )}</a
+                <ha-alert alert-type="info">
+                  ${this.hass.localize(
+                    "ui.panel.config.url.external_get_ha_cloud"
+                  )}
+                  <ha-button
+                    size="small"
+                    href="/config/cloud/register"
+                    slot="action"
                   >
-                </div>
+                    <span class="no-wrap"
+                      >${this.hass.localize(
+                        "ui.panel.config.cloud.register.start_trial"
+                      )}</span
+                    >
+                  </ha-button>
+                </ha-alert>
               `}
           ${!this._showCustomExternalUrl && hasCloud
             ? html`
@@ -430,7 +438,7 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
 
     ha-alert {
       display: block;
-      margin: 16px 0;
+      margin: 16px calc(var(--ha-space-4) * -1);
     }
 
     .card-actions {
@@ -475,6 +483,10 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
       --md-list-item-trailing-space: 0;
       --md-list-item-two-line-container-height: 48px;
     }
+
+    .no-wrap {
+      white-space: nowrap;
+    }
   `;
 }
 

src/translations/en.json

@@ -4174,7 +4174,7 @@
           "external_url_label": "Internet",
           "external_use_ha_cloud": "Use Home Assistant Cloud",
           "manage_ha_cloud": "Manage Home Assistant Cloud",
-          "external_get_ha_cloud": "Access from anywhere, add Google & Alexa easily",
+          "external_get_ha_cloud": "If you're looking for a fast and secure way to connect to Home Assistant no matter where you are, start a trial for Home Assistant Cloud today. Every purchase supports the development of Home Assistant.",
           "ha_cloud_remote_not_enabled": "Your Home Assistant Cloud remote connection is currently not enabled.",
           "enable_remote": "[%key:ui::common::enable%]",
           "internal_url_automatic": "Automatic",