Fixed arrow in sub-page to use new arrows and fixed new button icon issues (#2807)

* Fixed arrow in sub-page to use new arrows and fixed new button icon placement problem

* Changed icon to text + added localization

src/layouts/hass-subpage.ts

@@ -22,10 +22,9 @@ class HassSubpage extends LitElement {
       <app-header-layout has-scrolling-region>
         <app-header slot="header" fixed>
           <app-toolbar>
-            <paper-icon-button
+            <ha-paper-icon-button-arrow-prev
-              icon="hass:arrow-left"
               @click=${this._backTapped}
-            ></paper-icon-button>
+            ></ha-paper-icon-button-arrow-prev>
             <div main-title>${this.header}</div>
             <slot name="toolbar-icon"></slot>
           </app-toolbar>

src/panels/lovelace/hui-editor.ts

@@ -53,17 +53,30 @@ class LovelaceFullConfigEditor extends LitElement {
               icon="hass:close"
               @click="${this._closeEditor}"
             ></paper-icon-button>
-            <div main-title>Edit Config</div>
+            <div main-title>
+              ${this.hass!.localize(
+                "ui.panel.lovelace.editor.raw_editor.header"
+              )}
+            </div>
+            <div
+              class="save-button
+              ${classMap({
+                saved: this._saving! === false || this._changed === true,
+              })}"
+            >
+              ${this._changed
+                ? this.hass!.localize(
+                    "ui.panel.lovelace.editor.raw_editor.unsaved_changes"
+                  )
+                : this.hass!.localize(
+                    "ui.panel.lovelace.editor.raw_editor.saved"
+                  )}
+            </div>
             <mwc-button raised @click="${this._handleSave}"
-              >Save
+              >${this.hass!.localize(
-              <ha-icon
+                "ui.panel.lovelace.editor.raw_editor.save"
-                class="save-button
+              )}</mwc-button
-            ${classMap({
+            >
-                  saved: this._saving! === false || this._changed === true,
-                })}"
-                icon="${this._changed ? "hass:circle-medium" : "hass:check"}"
-              ></ha-icon
-            ></mwc-button>
           </app-toolbar>
         </app-header>
         <div class="content">
@@ -115,13 +128,11 @@ class LovelaceFullConfigEditor extends LitElement {
 
         .save-button {
           opacity: 0;
-          margin-left: -21px;
+          font-size: 14px;
-          transition: all 1.5s;
+          padding: 0px 10px;
         }
 
         .saved {
-          margin-left: initial;
-          margin-right: -8px;
           opacity: 1;
         }
       `,

src/translations/en.json

@@ -897,6 +897,12 @@
           "menu": {
             "raw_editor": "Raw config editor"
           },
+          "raw_editor": {
+            "header": "Edit Config",
+            "save": "Save",
+            "unsaved_changes": "Unsaved changes",
+            "saved": "Saved"
+          },
           "edit_view": {
             "header": "View Configuration",
             "add": "Add view",