From abeaa63005c7c361dc968fad77a2b0d37fb1e58d Mon Sep 17 00:00:00 2001
From: Zack Barett <arnett.zackary@gmail.com>
Date: Mon, 24 Jan 2022 03:14:32 -0600
Subject: [PATCH] Lovelace Menu Edits (#11323)

---
 src/panels/lovelace/hui-root.ts | 66 ++++++++++++++++++---------------
 src/translations/en.json        |  2 +-
 2 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index fa572585cb..5e39088b1a 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -2,9 +2,7 @@ import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
 import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import {
-  mdiClose,
   mdiCodeBraces,
-  mdiCog,
   mdiDotsVertical,
   mdiFileMultiple,
   mdiFormatListBulletedTriangle,
@@ -119,13 +117,6 @@ class HUIRoot extends LitElement {
           ${this._editMode
             ? html`
                 <app-toolbar class="edit-mode">
-                  <ha-icon-button
-                    .label=${this.hass!.localize(
-                      "ui.panel.lovelace.menu.exit_edit_mode"
-                    )}
-                    .path=${mdiClose}
-                    @click=${this._editModeDisable}
-                  ></ha-icon-button>
                   <div main-title>
                     ${this.config.title ||
                     this.hass!.localize("ui.panel.lovelace.editor.header")}
@@ -138,6 +129,13 @@ class HUIRoot extends LitElement {
                       @click=${this._editLovelace}
                     ></ha-icon-button>
                   </div>
+                  <mwc-button
+                    class="exit-edit-mode"
+                    .label=${this.hass!.localize(
+                      "ui.panel.lovelace.menu.exit_edit_mode"
+                    )}
+                    @click=${this._editModeDisable}
+                  ></mwc-button>
                   <a
                     href=${documentationUrl(this.hass, "/lovelace/")}
                     rel="noreferrer"
@@ -377,30 +375,36 @@ class HUIRoot extends LitElement {
                             )}
                             <ha-svg-icon
                               slot="graphic"
-                              .path=${mdiCog}
+                              .path=${mdiPencil}
                             ></ha-svg-icon>
                           </mwc-list-item>
                         `
                       : ""}
-                    <a
-                      href=${documentationUrl(this.hass, "/lovelace/")}
-                      rel="noreferrer"
-                      class="menu-link"
-                      target="_blank"
-                    >
-                      <mwc-list-item
-                        graphic="icon"
-                        aria-label=${this.hass!.localize(
-                          "ui.panel.lovelace.menu.help"
-                        )}
-                      >
-                        ${this.hass!.localize("ui.panel.lovelace.menu.help")}
-                        <ha-svg-icon
-                          slot="graphic"
-                          .path=${mdiHelp}
-                        ></ha-svg-icon>
-                      </mwc-list-item>
-                    </a>
+                    ${this._editMode
+                      ? html`
+                          <a
+                            href=${documentationUrl(this.hass, "/lovelace/")}
+                            rel="noreferrer"
+                            class="menu-link"
+                            target="_blank"
+                          >
+                            <mwc-list-item
+                              graphic="icon"
+                              aria-label=${this.hass!.localize(
+                                "ui.panel.lovelace.menu.help"
+                              )}
+                            >
+                              ${this.hass!.localize(
+                                "ui.panel.lovelace.menu.help"
+                              )}
+                              <ha-svg-icon
+                                slot="graphic"
+                                .path=${mdiHelp}
+                              ></ha-svg-icon>
+                            </mwc-list-item>
+                          </a>
+                        `
+                      : ""}
                   </ha-button-menu>
                 </app-toolbar>
               `}
@@ -933,6 +937,10 @@ class HUIRoot extends LitElement {
             var(--primary-background-color)
           );
         }
+        .exit-edit-mode {
+          --mdc-theme-primary: var(--primary-text-color);
+          --mdc-typography-button-font-size: 14px;
+        }
       `,
     ];
   }
diff --git a/src/translations/en.json b/src/translations/en.json
index 6b9078057c..2be6d3253a 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -3184,7 +3184,7 @@
           "help": "Help",
           "start_conversation": "Start conversation",
           "reload_resources": "Reload resources",
-          "exit_edit_mode": "Exit UI edit mode",
+          "exit_edit_mode": "Done",
           "close": "Close"
         },
         "reload_resources": {