Move Sign out back to Account Card for Cloud (#13094)

src/panels/config/cloud/account/cloud-account.ts

@@ -1,7 +1,5 @@
 import "@material/mwc-button";
-import type { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
-import { mdiDotsVertical } from "@mdi/js";
 import "@polymer/paper-item/paper-item-body";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -11,9 +9,7 @@ import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import { debounce } from "../../../../common/util/debounce";
 import "../../../../components/buttons/ha-call-api-button";
 import "../../../../components/ha-alert";
-import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
-import "../../../../components/ha-icon-button";
 import {
   cloudLogout,
   CloudStatusLoggedIn,
@@ -23,6 +19,7 @@ import {
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import "../../../../layouts/hass-subpage";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
+import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import "../../ha-config-section";
 import "./cloud-alexa-pref";
@@ -52,23 +49,6 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
         .narrow=${this.narrow}
         header="Home Assistant Cloud"
       >
-        <ha-button-menu
-          slot="toolbar-icon"
-          corner="BOTTOM_START"
-          @action=${this._handleMenuAction}
-          activatable
-        >
-          <ha-icon-button
-            slot="trigger"
-            .label=${this.hass.localize("ui.common.menu")}
-            .path=${mdiDotsVertical}
-          ></ha-icon-button>
-
-          <mwc-list-item>
-            ${this.hass.localize("ui.panel.config.cloud.account.sign_out")}
-          </mwc-list-item>
-        </ha-button-menu>
-
         <div class="content">
           <ha-config-section .isWide=${this.isWide}>
             <span slot="header">Home Assistant Cloud</span>
@@ -156,6 +136,11 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
                     )}
                   </mwc-button>
                 </a>
+                <mwc-button @click=${this._signOut} class="warning">
+                  ${this.hass.localize(
+                    "ui.panel.config.cloud.account.sign_out"
+                  )}
+                </mwc-button>
               </div>
             </ha-card>
           </ha-config-section>
@@ -279,9 +264,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
     }
   }
 
-  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
+  private async _signOut() {
-    switch (ev.detail.index) {
-      case 0:
     showConfirmationDialog(this, {
       text: this.hass.localize(
         "ui.panel.config.cloud.account.sign_out_confirm"
@@ -291,7 +274,6 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
       confirm: () => this._logoutFromCloud(),
     });
   }
-  }
 
   private async _logoutFromCloud() {
     await cloudLogout(this.hass);
@@ -303,7 +285,9 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
   }
 
   static get styles() {
-    return css`
+    return [
+      haStyle,
+      css`
         [slot="introduction"] {
           margin: -1em 0;
         }
@@ -320,9 +304,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
         .card-actions {
           display: flex;
           flex-direction: row-reverse;
-      }
+          justify-content: space-between;
-      .card-actions a {
-        text-decoration: none;
         }
         mwc-button {
           align-self: center;
@@ -334,10 +316,8 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
           text-transform: capitalize;
           padding: 16px;
         }
-      a {
+      `,
-        color: var(--primary-color);
+    ];
-      }
-    `;
   }
 }
 

src/panels/config/cloud/account/cloud-tts-pref.ts

@@ -185,6 +185,10 @@ export class CloudTTSPref extends LitElement {
         right: auto;
         left: 24px;
       }
+      .card-actions {
+        display: flex;
+        flex-direction: row-reverse;
+      }
     `;
   }
 }