Improve background settings and fix save button (#24978)

src/components/ha-selector/ha-selector-background.ts

@@ -83,6 +83,10 @@ export class HaBackgroundSelector extends LitElement {
       display: block;
       position: relative;
     }
+    ha-picture-upload {
+      background-color: var(--primary-background-color);
+      border-radius: var(--file-upload-image-border-radius);
+    }
     div {
       display: flex;
       flex-direction: column;

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -303,6 +303,7 @@ export class HuiDialogEditView extends LitElement {
             `
           : nothing}
         <ha-button
+          class="save"
           slot="primaryAction"
           ?disabled=${!this._config ||
           this._saving ||
@@ -665,6 +666,15 @@ export class HuiDialogEditView extends LitElement {
         ha-alert ha-button {
           display: block;
         }
+        ha-button.save {
+          position: relative;
+        }
+        .save ha-spinner {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
 
         @media all and (min-width: 600px) {
           ha-dialog {

src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts

@@ -1,11 +1,9 @@
-import "@material/mwc-list/mwc-list-item";
 import memoizeOne from "memoize-one";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../components/ha-form/types";
-import "../../../../components/ha-selector/ha-selector-background";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
 
@@ -38,7 +36,7 @@ export class HuiViewBackgroundEditor extends LitElement {
               {
                 name: "opacity",
                 selector: {
-                  number: { min: 0, max: 100, mode: "slider" },
+                  number: { min: 0, max: 100, mode: "slider", step: 10 },
                 },
               },
               {