From 7edb5f7f2c4f094576c40091db5eb6cc01c50574 Mon Sep 17 00:00:00 2001 From: Wendelin Date: Mon, 26 May 2025 16:10:24 +0200 Subject: [PATCH] Migrate to ha-button --- gallery/src/pages/components/ha-form.ts | 1 - gallery/src/pages/components/ha-selector.ts | 1 - .../info/hassio-addon-system-managed.ts | 1 - hassio/src/system/hassio-supervisor-log.ts | 2 - src/components/buttons/ha-progress-button.ts | 3 -- src/components/data-table/ha-data-table.ts | 2 +- src/components/ha-alert.ts | 1 - src/components/ha-button-menu.ts | 3 +- src/components/ha-button.ts | 1 - src/components/ha-date-range-picker.ts | 2 - src/components/ha-md-button-menu.ts | 3 +- .../ha-selector/ha-selector-media.ts | 3 -- src/components/ha-target-picker.ts | 1 - src/components/ha-vacuum-state.ts | 17 +++---- .../media-player/ha-browse-media-tts.ts | 20 ++++---- .../media-player/ha-media-manage-button.ts | 17 ++----- .../media-player/ha-media-player-browse.ts | 21 ++++----- .../media-player/ha-media-upload-button.ts | 46 ++++--------------- .../dialog-config-entry-system-options.ts | 13 +++--- .../previews/entity-preview-row.ts | 17 +++++-- src/dialogs/config-flow/step-flow-external.ts | 14 +++--- src/dialogs/config-flow/step-flow-progress.ts | 1 - .../image-cropper-dialog.ts | 22 ++++++--- .../lights/light-color-rgb-picker.ts | 1 - .../controls/more-info-automation.ts | 8 ++-- .../controls/more-info-configurator.ts | 21 ++------- .../more-info/controls/more-info-counter.ts | 20 +++++--- .../controls/more-info-media_player.ts | 17 ++++--- .../more-info/controls/more-info-person.ts | 10 ++-- .../more-info/controls/more-info-script.ts | 1 - .../more-info/controls/more-info-timer.ts | 38 +++++++++++---- .../configurator-notification-item.ts | 10 ++-- .../notifications/notification-drawer.ts | 6 +-- src/dialogs/quick-bar/ha-quick-bar.ts | 10 ++-- .../voice-assistant-setup-dialog.ts | 1 - .../ha-voice-command-dialog.ts | 1 - src/layouts/ha-init-page.ts | 6 +-- src/layouts/hass-error-screen.ts | 6 +-- src/layouts/hass-tabs-subpage-data-table.ts | 7 --- src/layouts/supervisor-error-screen.ts | 1 - .../calendar/confirm-event-dialog-box.ts | 4 +- .../calendar/dialog-calendar-event-detail.ts | 13 +++--- .../calendar/dialog-calendar-event-editor.ts | 16 +++---- src/panels/calendar/ha-full-calendar.ts | 16 ++++--- .../ha-config-application-credentials.ts | 11 +++-- .../config/areas/ha-config-area-page.ts | 22 ++++----- .../dialog-automation-mode.ts | 15 +++--- .../automation/blueprint-automation-editor.ts | 11 +++-- .../config/automation/ha-automation-editor.ts | 37 ++++++++++----- .../config/automation/ha-automation-trace.ts | 5 +- .../ha-automation-trigger-conversation.ts | 5 -- .../backup/dialogs/dialog-restore-backup.ts | 2 +- .../backup/ha-config-backup-location.ts | 2 +- .../blueprint/blueprint-generic-editor.ts | 1 - .../config/category/dialog-assign-category.ts | 16 ++++--- .../dialog-category-registry-detail.ts | 16 ++++--- .../config/cloud/account/cloud-account.ts | 21 ++++----- .../config/cloud/account/cloud-tts-pref.ts | 7 ++- .../config/cloud/account/cloud-webhooks.ts | 9 +++- .../account/dialog-cloud-support-package.ts | 2 - .../mqtt/dialog-mqtt-device-debug-info.ts | 6 +-- .../components/ha-energy-battery-settings.ts | 16 +++++-- .../components/ha-energy-device-settings.ts | 13 ++++-- .../components/ha-energy-gas-settings.ts | 13 ++++-- .../components/ha-energy-solar-settings.ts | 13 ++++-- .../components/ha-energy-water-settings.ts | 13 ++++-- .../dialogs/dialog-energy-gas-settings.ts | 14 ++++-- .../dialog-energy-grid-flow-settings.ts | 14 ++++-- .../entity-registry-settings-editor.ts | 4 -- .../config/entities/ha-config-entities.ts | 1 - .../helpers/forms/ha-input_select-form.ts | 5 -- .../integrations/dialog-add-integration.ts | 2 - .../matter/dialog-matter-manage-fabrics.ts | 1 - .../mqtt/mqtt-subscribe-card.ts | 8 ++-- .../zha/zha-add-group-page.ts | 16 ++----- .../zha/zha-groups-dashboard.ts | 1 - .../zha/zha-network-visualization-page.ts | 1 - .../zwave_js/zwave_js-node-config.ts | 2 - .../zwave_js/zwave_js-node-installer.ts | 2 - src/panels/config/person/ha-config-person.ts | 11 +++-- .../repairs/dialog-integration-startup.ts | 1 - .../config/script/blueprint-script-editor.ts | 1 - src/panels/config/script/ha-script-fields.ts | 10 ++-- .../config/script/manual-script-editor.ts | 1 - .../voice-assistants/dialog-voice-settings.ts | 1 - src/panels/config/zone/ha-config-zone.ts | 5 +- .../assist/developer-tools-assist.ts | 2 +- .../cards/energy/hui-energy-compare-card.ts | 8 +--- .../lovelace/cards/hui-recovery-mode-card.ts | 1 - .../lovelace/cards/hui-starting-card.ts | 1 - .../components/hui-energy-period-selector.ts | 19 ++++---- .../card-editor/hui-dialog-delete-card.ts | 12 +++-- .../hui-conditional-card-editor.ts | 7 ++- .../hui-dialog-create-headerfooter.ts | 6 +-- .../entity-rows/hui-lock-entity-row.ts | 10 ++-- .../entity-rows/hui-scene-entity-row.ts | 10 ++-- .../entity-rows/hui-script-entity-row.ts | 18 +++++--- .../lovelace/special-rows/hui-button-row.ts | 10 ++-- .../lovelace/special-rows/hui-cast-row.ts | 9 ++-- .../media-browser/ha-panel-media-browser.ts | 1 - .../ha-long-lived-access-token-dialog.ts | 10 ++-- src/panels/profile/ha-pick-theme-row.ts | 11 +++-- src/panels/profile/ha-refresh-tokens-card.ts | 12 +++-- src/resources/styles.ts | 9 ---- src/state-summary/state-card-scene.ts | 15 +----- 105 files changed, 488 insertions(+), 465 deletions(-) diff --git a/gallery/src/pages/components/ha-form.ts b/gallery/src/pages/components/ha-form.ts index b890f571cf..9602ca288c 100644 --- a/gallery/src/pages/components/ha-form.ts +++ b/gallery/src/pages/components/ha-form.ts @@ -1,5 +1,4 @@ /* eslint-disable lit/no-template-arrow */ -import "@material/mwc-button"; import type { TemplateResult } from "lit"; import { html, LitElement } from "lit"; import { customElement, state } from "lit/decorators"; diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts index 0f50f6421f..8b55949959 100644 --- a/gallery/src/pages/components/ha-selector.ts +++ b/gallery/src/pages/components/ha-selector.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, state } from "lit/decorators"; diff --git a/hassio/src/addon-view/info/hassio-addon-system-managed.ts b/hassio/src/addon-view/info/hassio-addon-system-managed.ts index 4684e8ebe3..f4eb7e10b0 100644 --- a/hassio/src/addon-view/info/hassio-addon-system-managed.ts +++ b/hassio/src/addon-view/info/hassio-addon-system-managed.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts index 3aed53b720..13f2e6540f 100644 --- a/hassio/src/system/hassio-supervisor-log.ts +++ b/hassio/src/system/hassio-supervisor-log.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button"; - import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; diff --git a/src/components/buttons/ha-progress-button.ts b/src/components/buttons/ha-progress-button.ts index 1ae8f3cd91..46228f4acf 100644 --- a/src/components/buttons/ha-progress-button.ts +++ b/src/components/buttons/ha-progress-button.ts @@ -135,9 +135,6 @@ export class HaProgressButton extends LitElement { ha-button.error slot { visibility: hidden; } - :host([destructive]) { - --mdc-theme-primary: var(--error-color); - } `; } diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index 2c3cfc28c7..3d8dec8601 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -904,7 +904,7 @@ export class HaDataTable extends LitElement { .find((el) => [ "ha-checkbox", - "mwc-button", + "ha-button", "ha-button", "ha-icon-button", "ha-assist-chip", diff --git a/src/components/ha-alert.ts b/src/components/ha-alert.ts index 9f39af4bf2..1e5b59d606 100644 --- a/src/components/ha-alert.ts +++ b/src/components/ha-alert.ts @@ -131,7 +131,6 @@ class HaAlert extends LitElement { margin-top: 2px; font-weight: var(--ha-font-weight-bold); } - .action mwc-button, .action ha-icon-button { --mdc-theme-primary: var(--primary-text-color); --mdc-icon-button-size: 36px; diff --git a/src/components/ha-button-menu.ts b/src/components/ha-button-menu.ts index 5bb561f8c7..bac8ebc129 100644 --- a/src/components/ha-button-menu.ts +++ b/src/components/ha-button-menu.ts @@ -6,6 +6,7 @@ import { customElement, property, query } from "lit/decorators"; import { mainWindow } from "../common/dom/get_main_window"; import { FOCUS_TARGET } from "../dialogs/make-dialog-manager"; import type { HaIconButton } from "./ha-icon-button"; +import type { HaButton } from "./ha-button"; import "./ha-menu"; @customElement("ha-button-menu") @@ -94,7 +95,7 @@ export class HaButtonMenu extends LitElement { private get _triggerButton() { return this.querySelector( 'ha-icon-button[slot="trigger"], ha-button[slot="trigger"], mwc-button[slot="trigger"]' - ) as HaIconButton | Button | null; + ) as HaIconButton | Button | HaButton | null; } private _setTriggerAria() { diff --git a/src/components/ha-button.ts b/src/components/ha-button.ts index 05c1161125..caa88d28a5 100644 --- a/src/components/ha-button.ts +++ b/src/components/ha-button.ts @@ -83,7 +83,6 @@ export class HaButton extends Button { --sl-input-border-width: var(--ha-button-border-width, 0); } - :host([destructive]), /* Deprecated */ :host([variant="danger"]) { --ha-button-theme-color: #b30532; --ha-button-theme-darker-color: #64031d; diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index 01cd4390a0..00a4ef44ef 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button/mwc-button"; - import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import { mdiCalendar } from "@mdi/js"; diff --git a/src/components/ha-md-button-menu.ts b/src/components/ha-md-button-menu.ts index beb2e0bff2..8f5da9713d 100644 --- a/src/components/ha-md-button-menu.ts +++ b/src/components/ha-md-button-menu.ts @@ -4,6 +4,7 @@ import { css, html, LitElement } from "lit"; import { customElement, property, query } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; import { FOCUS_TARGET } from "../dialogs/make-dialog-manager"; +import type { HaButton } from "./ha-button"; import type { HaIconButton } from "./ha-icon-button"; import "./ha-md-menu"; import type { HaMdMenu } from "./ha-md-menu"; @@ -72,7 +73,7 @@ export class HaMdButtonMenu extends LitElement { private get _triggerButton() { return this.querySelector( 'ha-icon-button[slot="trigger"], mwc-button[slot="trigger"], ha-assist-chip[slot="trigger"]' - ) as HaIconButton | Button | null; + ) as HaIconButton | Button | HaButton | null; } private _setTriggerAria() { diff --git a/src/components/ha-selector/ha-selector-media.ts b/src/components/ha-selector/ha-selector-media.ts index 11a55d001d..f1a97466b8 100644 --- a/src/components/ha-selector/ha-selector-media.ts +++ b/src/components/ha-selector/ha-selector-media.ts @@ -213,9 +213,6 @@ export class HaMediaSelector extends LitElement { display: block; margin-bottom: 16px; } - mwc-button { - margin-top: 8px; - } ha-alert { display: block; margin-bottom: 16px; diff --git a/src/components/ha-target-picker.ts b/src/components/ha-target-picker.ts index e7a98128b7..302f0618cf 100644 --- a/src/components/ha-target-picker.ts +++ b/src/components/ha-target-picker.ts @@ -1,6 +1,5 @@ // @ts-ignore import chipStyles from "@material/chips/dist/mdc.chips.min.css"; -import "@material/mwc-button/mwc-button"; import "@material/mwc-menu/mwc-menu-surface"; import { mdiClose, diff --git a/src/components/ha-vacuum-state.ts b/src/components/ha-vacuum-state.ts index 677b27d822..dd411892f7 100644 --- a/src/components/ha-vacuum-state.ts +++ b/src/components/ha-vacuum-state.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button"; import type { CSSResultGroup, TemplateResult } from "lit"; import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators"; import type { HassEntity } from "home-assistant-js-websocket"; import { haStyle } from "../resources/styles"; import type { HomeAssistant } from "../types"; +import "./ha-button"; const STATES_INTERCEPTABLE: Record< string, @@ -56,9 +56,14 @@ export class HaVacuumState extends LitElement { this.stateObj.attributes.supported_features ); return html` - + ${this._computeLabel(this.stateObj.state, interceptable)} - + `; } @@ -92,17 +97,13 @@ export class HaVacuumState extends LitElement { return [ haStyle, css` - mwc-button { + ha-button { top: 3px; height: 37px; margin-right: -0.57em; margin-inline-end: -0.57em; margin-inline-start: initial; } - mwc-button[disabled] { - background-color: transparent; - color: var(--secondary-text-color); - } `, ]; } diff --git a/src/components/media-player/ha-browse-media-tts.ts b/src/components/media-player/ha-browse-media-tts.ts index c6b327975c..e448f4f268 100644 --- a/src/components/media-player/ha-browse-media-tts.ts +++ b/src/components/media-player/ha-browse-media-tts.ts @@ -1,10 +1,11 @@ -import "@material/mwc-button/mwc-button"; +import { mdiContentCopy } from "@mdi/js"; import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; -import { mdiContentCopy } from "@mdi/js"; import { storage } from "../../common/decorators/storage"; import { fireEvent } from "../../common/dom/fire_event"; +import { copyToClipboard } from "../../common/util/copy-clipboard"; +import { fetchCloudStatus } from "../../data/cloud"; import type { MediaPlayerBrowseAction, MediaPlayerItem, @@ -13,13 +14,12 @@ import type { TTSEngine } from "../../data/tts"; import { getProviderFromTTSMediaSource, getTTSEngine } from "../../data/tts"; import { buttonLinkStyle } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; -import "../ha-textarea"; -import "../ha-language-picker"; -import "../ha-tts-voice-picker"; -import "../ha-card"; -import { fetchCloudStatus } from "../../data/cloud"; -import { copyToClipboard } from "../../common/util/copy-clipboard"; import { showToast } from "../../util/toast"; +import "../ha-button"; +import "../ha-card"; +import "../ha-language-picker"; +import "../ha-textarea"; +import "../ha-tts-voice-picker"; export interface TtsMediaPickedEvent { item: MediaPlayerItem; @@ -92,11 +92,11 @@ class BrowseMediaTTS extends LitElement { : nothing}
- + ${this.hass.localize( `ui.components.media-browser.tts.action_${this.action}` )} - +
${this._voice diff --git a/src/components/media-player/ha-media-manage-button.ts b/src/components/media-player/ha-media-manage-button.ts index 4eec8d0217..580a004573 100644 --- a/src/components/media-player/ha-media-manage-button.ts +++ b/src/components/media-player/ha-media-manage-button.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiFolderEdit } from "@mdi/js"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -10,6 +9,7 @@ import { } from "../../data/media_source"; import type { HomeAssistant } from "../../types"; import "../ha-svg-icon"; +import "../ha-button"; import { showMediaManageDialog } from "./show-media-manage-dialog"; declare global { @@ -38,14 +38,12 @@ class MediaManageButton extends LitElement { return nothing; } return html` - + + ${this.hass.localize( "ui.components.media-browser.file_management.manage" )} - @click=${this._manage} - > - - + `; } @@ -57,11 +55,6 @@ class MediaManageButton extends LitElement { } static styles = css` - mwc-button { - /* We use icon + text to show disabled state */ - --mdc-button-disabled-ink-color: --mdc-theme-primary; - } - ha-svg-icon[slot="icon"] { vertical-align: middle; } diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index aa7e8ad8b0..76598ecb7b 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -1,6 +1,5 @@ import type { LitVirtualizer } from "@lit-labs/virtualizer"; import { grid } from "@lit-labs/virtualizer/layouts/grid"; -import "@material/mwc-button/mwc-button"; import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; @@ -42,6 +41,7 @@ import { import { documentationUrl } from "../../util/documentation-url"; import "../entity/ha-entity-picker"; import "../ha-alert"; +import "../ha-button"; import "../ha-button-menu"; import "../ha-card"; import "../ha-spinner"; @@ -402,8 +402,7 @@ export class HaMediaPlayerBrowse extends LitElement { ${currentItem.can_play && (!currentItem.thumbnail || !this.narrow) ? html` - @@ -414,11 +413,12 @@ export class HaMediaPlayerBrowse extends LitElement { .path=${this.action === "play" ? mdiPlay : mdiPlus} + slot="prefix" > ${this.hass.localize( `ui.components.media-browser.${this.action}` )} - + ` : ""} @@ -952,9 +952,8 @@ export class HaMediaPlayerBrowse extends LitElement { min-width: 0; flex: 1; } - .header-info mwc-button { + .header-info ha-button { display: block; - --mdc-theme-primary: var(--primary-color); padding-bottom: 16px; } .breadcrumb { @@ -1246,7 +1245,7 @@ export class HaMediaPlayerBrowse extends LitElement { bottom: -20px; right: 20px; } - :host([narrow]) .header-info mwc-button { + :host([narrow]) .header-info ha-button { margin-top: 16px; margin-bottom: 8px; } @@ -1265,17 +1264,17 @@ export class HaMediaPlayerBrowse extends LitElement { :host(:not([narrow])[scrolled]) .header:not(.no-img) ha-icon-button { align-self: center; } - :host([scrolled]) .header-info mwc-button, - .no-img .header-info mwc-button { + :host([scrolled]) .header-info ha-button, + .no-img .header-info ha-button { padding-right: 4px; } - :host([scrolled][narrow]) .no-img .header-info mwc-button { + :host([scrolled][narrow]) .no-img .header-info ha-button { padding-right: 16px; } :host([scrolled]) .header-info { flex-direction: row; } - :host([scrolled]) .header-info mwc-button { + :host([scrolled]) .header-info ha-button { align-self: center; margin-top: 0; margin-bottom: 0; diff --git a/src/components/media-player/ha-media-upload-button.ts b/src/components/media-player/ha-media-upload-button.ts index 8922cb4476..c0b839f16d 100644 --- a/src/components/media-player/ha-media-upload-button.ts +++ b/src/components/media-player/ha-media-upload-button.ts @@ -1,6 +1,5 @@ -import "@material/mwc-button"; import { mdiUpload } from "@mdi/js"; -import { css, html, LitElement, nothing } from "lit"; +import { html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import type { MediaPlayerItem } from "../../data/media-player"; @@ -10,7 +9,7 @@ import { } from "../../data/media_source"; import { showAlertDialog } from "../../dialogs/generic/show-dialog-box"; import type { HomeAssistant } from "../../types"; -import "../ha-spinner"; +import "../ha-button"; import "../ha-svg-icon"; declare global { @@ -36,8 +35,13 @@ class MediaUploadButton extends LitElement { return nothing; } return html` - 0 + 0} + @click=${this._startUpload} + .loading=${this._uploading > 0} + > + + ${this._uploading > 0 ? this.hass.localize( "ui.components.media-browser.file_management.uploading", { @@ -47,19 +51,7 @@ class MediaUploadButton extends LitElement { : this.hass.localize( "ui.components.media-browser.file_management.add_media" )} - .disabled=${this._uploading > 0} - @click=${this._startUpload} - > - ${this._uploading > 0 - ? html` - - ` - : html` `} - + `; } @@ -107,24 +99,6 @@ class MediaUploadButton extends LitElement { document.body.append(input); input.click(); } - - static styles = css` - mwc-button { - /* We use icon + text to show disabled state */ - --mdc-button-disabled-ink-color: --mdc-theme-primary; - } - - ha-svg-icon[slot="icon"], - ha-spinner[slot="icon"] { - vertical-align: middle; - } - - ha-svg-icon[slot="icon"] { - margin-inline-start: 0px; - margin-inline-end: 8px; - direction: var(--direction); - } - `; } declare global { diff --git a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts index 85f30279d3..0975f3edda 100644 --- a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts +++ b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -6,6 +5,7 @@ import { fireEvent } from "../../common/dom/fire_event"; import { createCloseHeading } from "../../components/ha-dialog"; import "../../components/ha-formfield"; import "../../components/ha-switch"; +import "../../components/ha-button"; import type { HaSwitch } from "../../components/ha-switch"; import type { ConfigEntryMutableParams } from "../../data/config_entries"; import { updateConfigEntry } from "../../data/config_entries"; @@ -113,20 +113,21 @@ class DialogConfigEntrySystemOptions extends LitElement { .disabled=${this._submitting} > - ${this.hass.localize("ui.common.cancel")} - - + ${this.hass.localize("ui.dialogs.config_entry_system_options.update")} - + `; } diff --git a/src/dialogs/config-flow/previews/entity-preview-row.ts b/src/dialogs/config-flow/previews/entity-preview-row.ts index 14acb8f20a..ead79ccfb1 100644 --- a/src/dialogs/config-flow/previews/entity-preview-row.ts +++ b/src/dialogs/config-flow/previews/entity-preview-row.ts @@ -7,6 +7,7 @@ import { ifDefined } from "lit/directives/if-defined"; import { computeStateName } from "../../../common/entity/compute_state_name"; import "../../../components/entity/ha-entity-toggle"; import "../../../components/entity/state-badge"; +import "../../../components/ha-button"; import "../../../components/ha-climate-state"; import "../../../components/ha-cover-controls"; import "../../../components/ha-cover-tilt-controls"; @@ -91,7 +92,7 @@ class EntityPreviewRow extends LitElement { justify-content: flex-end; width: 100%; } - mwc-button { + ha-button { margin-right: -0.57em; margin-inline-end: -0.57em; margin-inline-start: initial; @@ -107,9 +108,13 @@ class EntityPreviewRow extends LitElement { if (domain === "button") { return html` - + ${this.hass.localize("ui.card.button.press")} - + `; } @@ -232,14 +237,16 @@ class EntityPreviewRow extends LitElement { if (domain === "lock") { return html` - ${stateObj.state === "locked" ? this.hass!.localize("ui.card.lock.unlock") : this.hass!.localize("ui.card.lock.lock")} - + `; } diff --git a/src/dialogs/config-flow/step-flow-external.ts b/src/dialogs/config-flow/step-flow-external.ts index 7907dd2901..c18cfd5195 100644 --- a/src/dialogs/config-flow/step-flow-external.ts +++ b/src/dialogs/config-flow/step-flow-external.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; @@ -6,6 +5,7 @@ import type { DataEntryFlowStepExternal } from "../../data/data_entry_flow"; import type { HomeAssistant } from "../../types"; import type { FlowConfig } from "./show-dialog-data-entry-flow"; import { configFlowContentStyles } from "./styles"; +import "../../components/ha-button"; @customElement("step-flow-external") class StepFlowExternal extends LitElement { @@ -22,13 +22,11 @@ class StepFlowExternal extends LitElement {
${this.flowConfig.renderExternalStepDescription(this.hass, this.step)}
- - - ${localize( - "ui.panel.config.integrations.config_flow.external_step.open_site" - )} - - + + ${localize( + "ui.panel.config.integrations.config_flow.external_step.open_site" + )} +
`; diff --git a/src/dialogs/config-flow/step-flow-progress.ts b/src/dialogs/config-flow/step-flow-progress.ts index f92d355920..3467bba1f7 100644 --- a/src/dialogs/config-flow/step-flow-progress.ts +++ b/src/dialogs/config-flow/step-flow-progress.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; diff --git a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts index 57d6717cf0..93911e20a6 100644 --- a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts +++ b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import Cropper from "cropperjs"; // @ts-ignore import cropperCss from "cropperjs/dist/cropper.css"; @@ -7,6 +6,7 @@ import { css, html, nothing, LitElement, unsafeCSS } from "lit"; import { customElement, property, state, query } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import "../../components/ha-dialog"; +import "../../components/ha-button"; import { haStyleDialog } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; import type { HaImageCropperDialogParams } from "./show-image-cropper-dialog"; @@ -92,18 +92,26 @@ export class HaImagecropperDialog extends LitElement { > ${this.hass.localize("ui.dialogs.image_cropper.crop_image")} - + ${this.hass.localize("ui.common.cancel")} - + ${this._isTargetAspectRatio - ? html` + ? html` ${this.hass.localize("ui.dialogs.image_cropper.use_original")} - ` + ` : nothing} - + ${this.hass.localize("ui.dialogs.image_cropper.crop")} - + `; } diff --git a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts index 1cceea263b..fcb40e617f 100644 --- a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts +++ b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiEyedropper } from "@mdi/js"; import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; diff --git a/src/dialogs/more-info/controls/more-info-automation.ts b/src/dialogs/more-info/controls/more-info-automation.ts index 0f554e2fd9..586bda9c97 100644 --- a/src/dialogs/more-info/controls/more-info-automation.ts +++ b/src/dialogs/more-info/controls/more-info-automation.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; @@ -6,6 +5,7 @@ import "../../../components/ha-relative-time"; import { triggerAutomationActions } from "../../../data/automation"; import { isUnavailableState } from "../../../data/entity"; import type { HomeAssistant } from "../../../types"; +import "../../../components/ha-button"; @customElement("more-info-automation") class MoreInfoAutomation extends LitElement { @@ -30,12 +30,14 @@ class MoreInfoAutomation extends LitElement {
- ${this.hass.localize("ui.card.automation.trigger")} - +
`; } diff --git a/src/dialogs/more-info/controls/more-info-configurator.ts b/src/dialogs/more-info/controls/more-info-configurator.ts index d32e90f112..8ac51f1f78 100644 --- a/src/dialogs/more-info/controls/more-info-configurator.ts +++ b/src/dialogs/more-info/controls/more-info-configurator.ts @@ -1,9 +1,8 @@ -import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../components/ha-alert"; -import "../../../components/ha-spinner"; +import "../../../components/ha-button"; import "../../../components/ha-markdown"; import "../../../components/ha-textfield"; import type { HomeAssistant } from "../../../types"; @@ -46,19 +45,13 @@ export class MoreInfoConfigurator extends LitElement { )} ${this.stateObj.attributes.submit_caption ? html`

- - ${this._isConfiguring - ? html`` - : ""} ${this.stateObj.attributes.submit_caption} - +

` : ""} @@ -113,12 +106,6 @@ export class MoreInfoConfigurator extends LitElement { text-align: center; height: 41px; } - - ha-spinner { - --ha-spinner-indicator-color: var(--primary-text-color); - margin-right: auto; - margin-left: auto; - } `; } diff --git a/src/dialogs/more-info/controls/more-info-counter.ts b/src/dialogs/more-info/controls/more-info-counter.ts index 2eb4a9763f..a52c43c277 100644 --- a/src/dialogs/more-info/controls/more-info-counter.ts +++ b/src/dialogs/more-info/controls/more-info-counter.ts @@ -1,9 +1,9 @@ -import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { isUnavailableState } from "../../../data/entity"; import type { HomeAssistant } from "../../../types"; +import "../../../components/ha-button"; @customElement("more-info-counter") class MoreInfoCounter extends LitElement { @@ -20,29 +20,35 @@ class MoreInfoCounter extends LitElement { return html`
- ${this.hass!.localize("ui.card.counter.actions.increment")} - - + ${this.hass!.localize("ui.card.counter.actions.decrement")} - - + ${this.hass!.localize("ui.card.counter.actions.reset")} - +
`; } diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts index 1de7b7c717..3f601dcafa 100644 --- a/src/dialogs/more-info/controls/more-info-media_player.ts +++ b/src/dialogs/more-info/controls/more-info-media_player.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button/mwc-button"; - import { mdiLoginVariant, mdiMusicNote, @@ -18,6 +16,7 @@ import "../../../components/ha-icon-button"; import "../../../components/ha-list-item"; import "../../../components/ha-select"; import "../../../components/ha-slider"; +import "../../../components/ha-button"; import "../../../components/ha-svg-icon"; import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog"; import { isUnavailableState } from "../../../data/entity"; @@ -69,17 +68,17 @@ class MoreInfoMediaPlayer extends LitElement { ${!isUnavailableState(stateObj.state) && supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA) ? html` - - + ${this.hass.localize("ui.card.media_player.browse_media")} + ` : ""} @@ -262,7 +261,7 @@ class MoreInfoMediaPlayer extends LitElement { font-style: italic; } - mwc-button > ha-svg-icon { + ha-button > ha-svg-icon { vertical-align: text-bottom; } `; diff --git a/src/dialogs/more-info/controls/more-info-person.ts b/src/dialogs/more-info/controls/more-info-person.ts index c364786eb2..efebf00e85 100644 --- a/src/dialogs/more-info/controls/more-info-person.ts +++ b/src/dialogs/more-info/controls/more-info-person.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-attributes"; +import "../../../components/ha-button"; import "../../../components/map/ha-map"; import { showZoneEditor } from "../../../data/zone"; import type { HomeAssistant } from "../../../types"; @@ -38,11 +38,15 @@ class MoreInfoPerson extends LitElement { this.stateObj.attributes.longitude ? html`
- + ${this.hass.localize( "ui.dialogs.more_info_control.person.create_zone" )} - +
` : ""} diff --git a/src/dialogs/more-info/controls/more-info-script.ts b/src/dialogs/more-info/controls/more-info-script.ts index 2b24ad8646..eece6780d0 100644 --- a/src/dialogs/more-info/controls/more-info-script.ts +++ b/src/dialogs/more-info/controls/more-info-script.ts @@ -1,5 +1,4 @@ import { mdiPlay, mdiStop } from "@mdi/js"; -import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; diff --git a/src/dialogs/more-info/controls/more-info-timer.ts b/src/dialogs/more-info/controls/more-info-timer.ts index 3f5c729752..3568caf444 100644 --- a/src/dialogs/more-info/controls/more-info-timer.ts +++ b/src/dialogs/more-info/controls/more-info-timer.ts @@ -1,7 +1,7 @@ -import "@material/mwc-button"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-attributes"; +import "../../../components/ha-button"; import type { TimerEntity } from "../../../data/timer"; import type { HomeAssistant } from "../../../types"; @@ -20,26 +20,46 @@ class MoreInfoTimer extends LitElement {
${this.stateObj.state === "idle" || this.stateObj.state === "paused" ? html` - + ${this.hass!.localize("ui.card.timer.actions.start")} - + ` : ""} ${this.stateObj.state === "active" ? html` - + ${this.hass!.localize("ui.card.timer.actions.pause")} - + ` : ""} ${this.stateObj.state === "active" || this.stateObj.state === "paused" ? html` - + ${this.hass!.localize("ui.card.timer.actions.cancel")} - - + + ${this.hass!.localize("ui.card.timer.actions.finish")} - + ` : ""}
diff --git a/src/dialogs/notifications/configurator-notification-item.ts b/src/dialogs/notifications/configurator-notification-item.ts index 45e289597f..bf1cdbea29 100644 --- a/src/dialogs/notifications/configurator-notification-item.ts +++ b/src/dialogs/notifications/configurator-notification-item.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button"; import { html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import { domainToName } from "../../data/integration"; import type { PersitentNotificationEntity } from "../../data/persistent_notification"; import type { HomeAssistant } from "../../types"; +import "../../components/ha-button"; import "./notification-item-template"; @customElement("configurator-notification-item") @@ -31,9 +31,13 @@ export class HuiConfiguratorNotificationItem extends LitElement { })} - + ${this.hass.formatEntityState(this.notification)} - + `; } diff --git a/src/dialogs/notifications/notification-drawer.ts b/src/dialogs/notifications/notification-drawer.ts index bbb41039eb..e7817c4103 100644 --- a/src/dialogs/notifications/notification-drawer.ts +++ b/src/dialogs/notifications/notification-drawer.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import { LitElement, html, css, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; @@ -10,6 +9,7 @@ import { subscribeNotifications } from "../../data/persistent_notification"; import type { HomeAssistant } from "../../types"; import "./notification-item"; import "../../components/ha-header-bar"; +import "../../components/ha-button"; import "../../components/ha-drawer"; import type { HaDrawer } from "../../components/ha-drawer"; import { computeRTLDirection } from "../../common/util/compute_rtl"; @@ -122,11 +122,11 @@ export class HuiNotificationDrawer extends LitElement { )} ${this._notifications.length > 1 ? html`
- + ${this.hass.localize( "ui.notification_drawer.dismiss_all" )} - +
` : ""}` : html`
diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts index 68b2fa2a5f..68cc00cb20 100644 --- a/src/dialogs/quick-bar/ha-quick-bar.ts +++ b/src/dialogs/quick-bar/ha-quick-bar.ts @@ -37,6 +37,7 @@ import { computeRTL } from "../../common/util/compute_rtl"; import { debounce } from "../../common/util/debounce"; import "../../components/ha-icon-button"; import "../../components/ha-label"; +import "../../components/ha-button"; import "../../components/ha-list"; import "../../components/ha-md-list-item"; import "../../components/ha-spinner"; @@ -246,10 +247,13 @@ export class QuickBar extends LitElement { >`} ${this._narrow ? html` - + > + ${this.hass!.localize("ui.common.close")} + ` : ""}
diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts index e0a0d04426..d42d425c89 100644 --- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts +++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiChevronLeft, mdiClose, mdiMenuDown } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts index 4d31a44f29..4ef0f1dfc4 100644 --- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts +++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiChevronDown, mdiClose, diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts index af33535a32..89f53ac60a 100644 --- a/src/layouts/ha-init-page.ts +++ b/src/layouts/ha-init-page.ts @@ -1,8 +1,8 @@ import type { PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { property, state } from "lit/decorators"; -import "@material/mwc-button"; import "../components/ha-spinner"; +import "../components/ha-button"; class HaInitPage extends LitElement { @property({ type: Boolean }) public error = false; @@ -22,7 +22,7 @@ class HaInitPage extends LitElement {

Retrying in ${this._retryInSeconds} seconds...

- Retry now + Retry now ${location.host.includes("ui.nabu.casa") ? html`

@@ -66,7 +66,7 @@ class HaInitPage extends LitElement { protected willUpdate(changedProperties: PropertyValues) { if (changedProperties.has("error") && this.error) { - import("@material/mwc-button"); + import("../components/ha-button"); } } diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts index bae81d2e87..b43dde9c2e 100644 --- a/src/layouts/hass-error-screen.ts +++ b/src/layouts/hass-error-screen.ts @@ -1,8 +1,8 @@ -import "@material/mwc-button"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import "../components/ha-icon-button-arrow-prev"; +import "../components/ha-button"; import "../components/ha-menu-button"; import type { HomeAssistant } from "../types"; import "../components/ha-alert"; @@ -41,9 +41,9 @@ class HassErrorScreen extends LitElement {

${this.error} - + ${this.hass?.localize("ui.common.back")} - +
`; diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts index dba3b154bd..18c5e25d6e 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/src/layouts/hass-tabs-subpage-data-table.ts @@ -1,5 +1,4 @@ import { ResizeController } from "@lit-labs/observers/resize-controller"; -import "@material/mwc-button/mwc-button"; import { mdiArrowDown, mdiArrowUp, @@ -768,12 +767,6 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) { .active-filters ha-svg-icon { color: var(--primary-color); } - .active-filters mwc-button { - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - direction: var(--direction); - } .active-filters::before { background-color: var(--primary-color); opacity: 0.12; diff --git a/src/layouts/supervisor-error-screen.ts b/src/layouts/supervisor-error-screen.ts index 503fe9a7aa..4e4eef6078 100644 --- a/src/layouts/supervisor-error-screen.ts +++ b/src/layouts/supervisor-error-screen.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; diff --git a/src/panels/calendar/confirm-event-dialog-box.ts b/src/panels/calendar/confirm-event-dialog-box.ts index bea8dc0b05..4031b34904 100644 --- a/src/panels/calendar/confirm-event-dialog-box.ts +++ b/src/panels/calendar/confirm-event-dialog-box.ts @@ -47,7 +47,7 @@ class ConfirmEventDialogBox extends LitElement { slot="primaryAction" @click=${this._confirm} dialogInitialFocus - destructive + variant="danger" > ${this._params.confirmText} @@ -56,7 +56,7 @@ class ConfirmEventDialogBox extends LitElement { ${this._params.confirmFutureText} diff --git a/src/panels/calendar/dialog-calendar-event-detail.ts b/src/panels/calendar/dialog-calendar-event-detail.ts index 4644b74fa3..f46efaa6df 100644 --- a/src/panels/calendar/dialog-calendar-event-detail.ts +++ b/src/panels/calendar/dialog-calendar-event-detail.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiCalendarClock } from "@mdi/js"; import { toDate } from "date-fns-tz"; import { addDays, isSameDay } from "date-fns"; @@ -12,6 +11,7 @@ import { fireEvent } from "../../common/dom/fire_event"; import { isDate } from "../../common/string/is_date"; import "../../components/entity/state-info"; import "../../components/ha-alert"; +import "../../components/ha-button"; import "../../components/ha-date-input"; import { createCloseHeading } from "../../components/ha-dialog"; import "../../components/ha-time-input"; @@ -99,24 +99,25 @@ class DialogCalendarEventDetail extends LitElement { ${this._params.canDelete ? html` - ${this.hass.localize("ui.components.calendar.event.delete")} - + ` : ""} ${this._params.canEdit - ? html` ${this.hass.localize("ui.components.calendar.event.edit")} - ` + ` : ""} `; diff --git a/src/panels/calendar/dialog-calendar-event-editor.ts b/src/panels/calendar/dialog-calendar-event-editor.ts index b027028c91..797c61f462 100644 --- a/src/panels/calendar/dialog-calendar-event-editor.ts +++ b/src/panels/calendar/dialog-calendar-event-editor.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { formatInTimeZone, toDate } from "date-fns-tz"; import { addDays, @@ -23,6 +22,7 @@ import "../../components/ha-date-input"; import { createCloseHeading } from "../../components/ha-dialog"; import "../../components/ha-formfield"; import "../../components/ha-switch"; +import "../../components/ha-button"; import "../../components/ha-textarea"; import "../../components/ha-textfield"; import "../../components/ha-time-input"; @@ -262,34 +262,34 @@ class DialogCalendarEventEditor extends LitElement { ${isCreate ? html` - ${this.hass.localize("ui.components.calendar.event.add")} - + ` : html` - ${this.hass.localize("ui.components.calendar.event.save")} - + ${this._params.canDelete ? html` - ${this.hass.localize( "ui.components.calendar.event.delete" )} - + ` : ""} `} diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts index 4d9973f86b..9d3a4a55cd 100644 --- a/src/panels/calendar/ha-full-calendar.ts +++ b/src/panels/calendar/ha-full-calendar.ts @@ -5,7 +5,6 @@ import dayGridPlugin from "@fullcalendar/daygrid"; import interactionPlugin from "@fullcalendar/interaction"; import listPlugin from "@fullcalendar/list"; import { ResizeController } from "@lit-labs/observers/resize-controller"; -import "@material/mwc-button"; import { mdiPlus, mdiViewAgenda, @@ -26,6 +25,7 @@ import "../../components/ha-button-toggle-group"; import "../../components/ha-fab"; import "../../components/ha-icon-button-next"; import "../../components/ha-icon-button-prev"; +import "../../components/ha-button"; import type { Calendar as CalendarData, CalendarEvent, @@ -137,13 +137,14 @@ export class HAFullCalendar extends LitElement { ${!this.narrow ? html`
- ${this.hass.localize( "ui.components.calendar.today" - )}
- ${this.hass.localize( "ui.components.calendar.today" - )} ${!this.narrow ? html` - ${this.hass.localize( "ui.panel.config.application_credentials.picker.remove_selected.button" - )} ` : html` @@ -349,7 +354,7 @@ export class HaConfigApplicationCredentials extends LitElement { .header-btns { display: flex; } - .header-btns > mwc-button, + .header-btns > ha-button, .header-btns > ha-icon-button { margin: 8px; } diff --git a/src/panels/config/areas/ha-config-area-page.ts b/src/panels/config/areas/ha-config-area-page.ts index b8f4968817..8112f405ce 100644 --- a/src/panels/config/areas/ha-config-area-page.ts +++ b/src/panels/config/areas/ha-config-area-page.ts @@ -1,5 +1,4 @@ import { consume } from "@lit/context"; -import "@material/mwc-button"; import { mdiDelete, mdiDotsVertical, mdiImagePlus, mdiPencil } from "@mdi/js"; import type { HassEntity } from "home-assistant-js-websocket/dist/types"; import type { CSSResultGroup } from "lit"; @@ -16,6 +15,7 @@ import { groupBy } from "../../../common/util/group-by"; import { afterNextRender } from "../../../common/util/render-status"; import "../../../components/ha-button-menu"; import "../../../components/ha-card"; +import "../../../components/ha-button"; import "../../../components/ha-icon-button"; import "../../../components/ha-icon-next"; import "../../../components/ha-list-item"; @@ -266,15 +266,18 @@ class HaConfigAreaPage extends LitElement { class="img-edit-btn" >
` - : html` - - `} + + ${this.hass.localize("ui.panel.config.areas.add_picture")} + `} ha-svg-icon { - margin-inline-start: 0; - margin-inline-end: 8px; - } `, ]; } diff --git a/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts b/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts index 8fcb7a5e75..f23e079687 100644 --- a/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts +++ b/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button"; - import { mdiClose, mdiHelpCircle } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -10,6 +8,7 @@ import "../../../../components/ha-icon-button"; import "../../../../components/ha-md-list-item"; import "../../../../components/ha-md-list"; import "../../../../components/ha-radio"; +import "../../../../components/ha-button"; import "../../../../components/ha-textfield"; import "../../../../components/ha-dialog"; @@ -158,12 +157,16 @@ class DialogAutomationMode extends LitElement implements HassDialog { ` : nothing} - + ${this.hass.localize("ui.common.cancel")} - - + + ${this.hass.localize("ui.panel.config.automation.editor.change_mode")} - + `; } diff --git a/src/panels/config/automation/blueprint-automation-editor.ts b/src/panels/config/automation/blueprint-automation-editor.ts index e0ef3df62d..445ad1b412 100644 --- a/src/panels/config/automation/blueprint-automation-editor.ts +++ b/src/panels/config/automation/blueprint-automation-editor.ts @@ -1,8 +1,8 @@ -import "@material/mwc-button/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; import { html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-alert"; +import "../../../components/ha-button"; import "../../../components/ha-markdown"; import type { BlueprintAutomationConfig } from "../../../data/automation"; import { fetchBlueprints } from "../../../data/blueprint"; @@ -26,11 +26,16 @@ export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor { ${this.hass.localize( "ui.panel.config.automation.editor.disabled" )} - + ${this.hass.localize( "ui.panel.config.automation.editor.enable" )} - + ` : ""} diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index 5fae94ede3..2e2c612d74 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -1,5 +1,4 @@ import { consume } from "@lit/context"; -import "@material/mwc-button"; import { mdiCog, mdiContentDuplicate, @@ -31,6 +30,7 @@ import { promiseTimeout } from "../../../common/util/promise-timeout"; import { afterNextRender } from "../../../common/util/render-status"; import "../../../components/ha-button-menu"; import "../../../components/ha-fab"; +import "../../../components/ha-button"; import "../../../components/ha-fade-in"; import "../../../components/ha-icon"; import "../../../components/ha-icon-button"; @@ -214,11 +214,15 @@ export class HaAutomationEditor extends PreventUnsavedMixin( > ${this._config?.id && !this.narrow ? html` - + ${this.hass.localize( "ui.panel.config.automation.editor.show_trace" )} - + ` : ""} @@ -427,11 +431,11 @@ export class HaAutomationEditor extends PreventUnsavedMixin( "ui.panel.config.automation.editor.confirm_take_control" )}
- ${this.hass.localize("ui.common.yes")}${this.hass.localize("ui.common.yes")} - ${this.hass.localize("ui.common.no")}${this.hass.localize("ui.common.no")}
` @@ -440,11 +444,17 @@ export class HaAutomationEditor extends PreventUnsavedMixin( >${this.hass.localize( "ui.panel.config.automation.editor.read_only" )} - + ${this.hass.localize( "ui.panel.config.automation.editor.migrate" )} - + ` : nothing} ${this._mode === "gui" @@ -487,11 +497,16 @@ export class HaAutomationEditor extends PreventUnsavedMixin( ${this.hass.localize( "ui.panel.config.automation.editor.disabled" )} - + ${this.hass.localize( "ui.panel.config.automation.editor.enable" )} - + ` : ""} diff --git a/src/panels/config/automation/ha-automation-trace.ts b/src/panels/config/automation/ha-automation-trace.ts index 4544d97887..5829d2fa95 100644 --- a/src/panels/config/automation/ha-automation-trace.ts +++ b/src/panels/config/automation/ha-automation-trace.ts @@ -18,6 +18,7 @@ import { fireEvent } from "../../../common/dom/fire_event"; import { computeRTL } from "../../../common/util/compute_rtl"; import "../../../components/ha-button-menu"; import "../../../components/ha-icon-button"; +import "../../../components/ha-button"; import "../../../components/ha-list-item"; import "../../../components/trace/ha-trace-blueprint-config"; import "../../../components/trace/ha-trace-config"; @@ -106,11 +107,11 @@ export class HaAutomationTrace extends LitElement { )}" slot="toolbar-icon" > - + ${this.hass.localize( "ui.panel.config.automation.trace.edit_automation" )} - + ` : ""} diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts index 4317f48007..f7211ee5d2 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts @@ -155,11 +155,6 @@ export class HaConversationTrigger .option { margin-top: 4px; } - mwc-button { - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - } ha-textfield { display: block; margin-bottom: 8px; diff --git a/src/panels/config/backup/dialogs/dialog-restore-backup.ts b/src/panels/config/backup/dialogs/dialog-restore-backup.ts index e923678b4d..7b8d6bd1c4 100644 --- a/src/panels/config/backup/dialogs/dialog-restore-backup.ts +++ b/src/panels/config/backup/dialogs/dialog-restore-backup.ts @@ -230,7 +230,7 @@ class DialogRestoreBackup extends LitElement implements HassDialog { ${this.hass.localize("ui.common.cancel")} - + ${this.hass.localize( "ui.panel.config.backup.dialogs.restore.actions.restore" )} diff --git a/src/panels/config/backup/ha-config-backup-location.ts b/src/panels/config/backup/ha-config-backup-location.ts index 5debf93ae5..c9f848372c 100644 --- a/src/panels/config/backup/ha-config-backup-location.ts +++ b/src/panels/config/backup/ha-config-backup-location.ts @@ -189,7 +189,7 @@ class HaConfigBackupDetails extends LitElement { ${this.hass.localize( "ui.panel.config.backup.location.encryption.encryption_turn_off" diff --git a/src/panels/config/blueprint/blueprint-generic-editor.ts b/src/panels/config/blueprint/blueprint-generic-editor.ts index 97d6ad7442..3921d0dd8f 100644 --- a/src/panels/config/blueprint/blueprint-generic-editor.ts +++ b/src/panels/config/blueprint/blueprint-generic-editor.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; diff --git a/src/panels/config/category/dialog-assign-category.ts b/src/panels/config/category/dialog-assign-category.ts index 28767f79b3..4fab1582db 100644 --- a/src/panels/config/category/dialog-assign-category.ts +++ b/src/panels/config/category/dialog-assign-category.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -8,6 +7,7 @@ import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-icon-picker"; import "../../../components/ha-settings-row"; import "../../../components/ha-textfield"; +import "../../../components/ha-button"; import { updateEntityRegistryEntry } from "../../../data/entity_registry"; import { haStyleDialog } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; @@ -70,16 +70,20 @@ class DialogAssignCategory extends LitElement { > - + ${this.hass.localize("ui.common.cancel")} - - + ${this.hass.localize("ui.common.save")} - + `; } diff --git a/src/panels/config/category/dialog-category-registry-detail.ts b/src/panels/config/category/dialog-category-registry-detail.ts index b6c88faa19..d1c6c2e072 100644 --- a/src/panels/config/category/dialog-category-registry-detail.ts +++ b/src/panels/config/category/dialog-category-registry-detail.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -7,6 +6,7 @@ import "../../../components/ha-alert"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-icon-picker"; import "../../../components/ha-settings-row"; +import "../../../components/ha-button"; import "../../../components/ha-textfield"; import type { CategoryRegistryEntry, @@ -96,18 +96,22 @@ class DialogCategoryDetail extends LitElement { > - + ${this.hass.localize("ui.common.cancel")} - - + ${entry ? this.hass.localize("ui.common.save") : this.hass.localize("ui.common.add")} - + `; } diff --git a/src/panels/config/cloud/account/cloud-account.ts b/src/panels/config/cloud/account/cloud-account.ts index 82730ce21c..80ea2f15be 100644 --- a/src/panels/config/cloud/account/cloud-account.ts +++ b/src/panels/config/cloud/account/cloud-account.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiDeleteForever, mdiDotsVertical, mdiDownload } from "@mdi/js"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -10,6 +9,7 @@ import "../../../../components/ha-button-menu"; import "../../../../components/ha-card"; import "../../../../components/ha-list-item"; import "../../../../components/ha-tip"; +import "../../../../components/ha-button"; import type { CloudStatusLoggedIn, SubscriptionInfo, @@ -148,22 +148,21 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
- - - ${this.hass.localize( - "ui.panel.config.cloud.account.manage_account" - )} - - - + ${this.hass.localize( + "ui.panel.config.cloud.account.manage_account" + )} + + ${this.hass.localize( "ui.panel.config.cloud.account.sign_out" )} - +
@@ -359,7 +358,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) { flex-direction: row-reverse; justify-content: space-between; } - mwc-button { + ha-button { align-self: center; } .wrap { diff --git a/src/panels/config/cloud/account/cloud-tts-pref.ts b/src/panels/config/cloud/account/cloud-tts-pref.ts index 8adc58e737..2ece03bde3 100644 --- a/src/panels/config/cloud/account/cloud-tts-pref.ts +++ b/src/panels/config/cloud/account/cloud-tts-pref.ts @@ -1,10 +1,9 @@ -import "@material/mwc-button"; - import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-card"; +import "../../../../components/ha-button"; import "../../../../components/ha-language-picker"; import "../../../../components/ha-list-item"; import "../../../../components/ha-select"; @@ -103,9 +102,9 @@ export class CloudTTSPref extends LitElement {
- + ${this.hass.localize("ui.panel.config.cloud.account.tts.try")} - +
`; diff --git a/src/panels/config/cloud/account/cloud-webhooks.ts b/src/panels/config/cloud/account/cloud-webhooks.ts index 045fa0a825..fddbcaa7ad 100644 --- a/src/panels/config/cloud/account/cloud-webhooks.ts +++ b/src/panels/config/cloud/account/cloud-webhooks.ts @@ -3,6 +3,7 @@ import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { isComponentLoaded } from "../../../../common/config/is_component_loaded"; import "../../../../components/ha-card"; +import "../../../../components/ha-button"; import "../../../../components/ha-spinner"; import "../../../../components/ha-settings-row"; import "../../../../components/ha-switch"; @@ -93,11 +94,15 @@ export class CloudWebhooks extends LitElement { ` : this._cloudHooks![entry.webhook_id] ? html` - + ${this.hass!.localize( "ui.panel.config.cloud.account.webhooks.manage" )} - + ` : html` `} diff --git a/src/panels/config/cloud/account/dialog-cloud-support-package.ts b/src/panels/config/cloud/account/dialog-cloud-support-package.ts index b45ebda259..7caab2260a 100644 --- a/src/panels/config/cloud/account/dialog-cloud-support-package.ts +++ b/src/panels/config/cloud/account/dialog-cloud-support-package.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button"; - import { mdiClose } from "@mdi/js"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts index 08fd1cd604..5a2c8cf498 100644 --- a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts +++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; @@ -7,6 +6,7 @@ import { computeStateName } from "../../../../../../common/entity/compute_state_ import "../../../../../../components/ha-dialog"; import "../../../../../../components/ha-formfield"; import "../../../../../../components/ha-switch"; +import "../../../../../../components/ha-button"; import type { HaSwitch } from "../../../../../../components/ha-switch"; import type { MQTTDeviceDebugInfo } from "../../../../../../data/mqtt"; import { fetchMQTTDebugInfo } from "../../../../../../data/mqtt"; @@ -107,9 +107,9 @@ class DialogMQTTDeviceDebugInfo extends LitElement { )} `} - + ${this.hass!.localize("ui.common.close")} - + `; } diff --git a/src/panels/config/energy/components/ha-energy-battery-settings.ts b/src/panels/config/energy/components/ha-energy-battery-settings.ts index 16e358a7ad..dc2f5e5d95 100644 --- a/src/panels/config/energy/components/ha-energy-battery-settings.ts +++ b/src/panels/config/energy/components/ha-energy-battery-settings.ts @@ -1,10 +1,11 @@ -import "@material/mwc-button/mwc-button"; -import { mdiBatteryHigh, mdiDelete, mdiPencil } from "@mdi/js"; +import { mdiBatteryHigh, mdiDelete, mdiPencil, mdiPlus } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-card"; +import "../../../../components/ha-button"; +import "../../../../components/ha-svg-icon"; import "../../../../components/ha-icon-button"; import "../../../../components/ha-settings-row"; import type { @@ -132,10 +133,15 @@ export class EnergyBatterySettings extends LitElement { })}
- ${this.hass.localize( + + + ${this.hass.localize( "ui.panel.config.energy.battery.add_battery_system" - )}
diff --git a/src/panels/config/energy/components/ha-energy-device-settings.ts b/src/panels/config/energy/components/ha-energy-device-settings.ts index 11eb58d42f..de364660d1 100644 --- a/src/panels/config/energy/components/ha-energy-device-settings.ts +++ b/src/panels/config/energy/components/ha-energy-device-settings.ts @@ -1,11 +1,11 @@ -import "@material/mwc-button/mwc-button"; -import { mdiDelete, mdiDevices, mdiDrag, mdiPencil } from "@mdi/js"; +import { mdiDelete, mdiDevices, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { repeat } from "lit/directives/repeat"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-card"; +import "../../../../components/ha-button"; import "../../../../components/ha-icon-button"; import "../../../../components/ha-sortable"; import "../../../../components/ha-svg-icon"; @@ -117,10 +117,15 @@ export class EnergyDeviceSettings extends LitElement {
- + ${this.hass.localize( "ui.panel.config.energy.device_consumption.add_device" - )}
diff --git a/src/panels/config/energy/components/ha-energy-gas-settings.ts b/src/panels/config/energy/components/ha-energy-gas-settings.ts index e3be87f220..fce692c8bf 100644 --- a/src/panels/config/energy/components/ha-energy-gas-settings.ts +++ b/src/panels/config/energy/components/ha-energy-gas-settings.ts @@ -1,9 +1,9 @@ -import "@material/mwc-button/mwc-button"; -import { mdiDelete, mdiFire, mdiPencil } from "@mdi/js"; +import { mdiDelete, mdiFire, mdiPencil, mdiPlus } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; +import "../../../../components/ha-button"; import "../../../../components/ha-card"; import "../../../../components/ha-icon-button"; import type { @@ -120,10 +120,15 @@ export class EnergyGasSettings extends LitElement { })}
- + ${this.hass.localize( "ui.panel.config.energy.gas.add_gas_source" - )}
diff --git a/src/panels/config/energy/components/ha-energy-solar-settings.ts b/src/panels/config/energy/components/ha-energy-solar-settings.ts index 9a01fa4962..41c5bb9978 100644 --- a/src/panels/config/energy/components/ha-energy-solar-settings.ts +++ b/src/panels/config/energy/components/ha-energy-solar-settings.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button/mwc-button"; -import { mdiDelete, mdiPencil, mdiSolarPower } from "@mdi/js"; +import { mdiDelete, mdiPencil, mdiPlus, mdiSolarPower } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-card"; +import "../../../../components/ha-button"; import "../../../../components/ha-icon-button"; import type { EnergyInfo, @@ -132,11 +132,16 @@ export class EnergySolarSettings extends LitElement { ? html`
- + + ${this.hass.localize( "ui.panel.config.energy.solar.add_solar_production" )} - +
` : ""} diff --git a/src/panels/config/energy/components/ha-energy-water-settings.ts b/src/panels/config/energy/components/ha-energy-water-settings.ts index ddb1bb911c..8671d9c28c 100644 --- a/src/panels/config/energy/components/ha-energy-water-settings.ts +++ b/src/panels/config/energy/components/ha-energy-water-settings.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button/mwc-button"; -import { mdiDelete, mdiWater, mdiPencil } from "@mdi/js"; +import { mdiDelete, mdiWater, mdiPencil, mdiPlus } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-card"; +import "../../../../components/ha-button"; import "../../../../components/ha-icon-button"; import type { EnergyPreferences, @@ -121,10 +121,15 @@ export class EnergyWaterSettings extends LitElement { })}
- + ${this.hass.localize( "ui.panel.config.energy.water.add_water_source" - )}
diff --git a/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts index 7cbaf1eb3d..0dfc85cc60 100644 --- a/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts +++ b/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiFire } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -9,6 +8,7 @@ import "../../../../components/entity/ha-statistic-picker"; import "../../../../components/ha-dialog"; import "../../../../components/ha-formfield"; import "../../../../components/ha-radio"; +import "../../../../components/ha-button"; import type { HaRadio } from "../../../../components/ha-radio"; import "../../../../components/ha-textfield"; import type { GasSourceTypeEnergyPreference } from "../../../../data/energy"; @@ -247,16 +247,20 @@ export class DialogEnergyGasSettings ` : ""} - + ${this.hass.localize("ui.common.cancel")} - - + ${this.hass.localize("ui.common.save")} - + `; } diff --git a/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts index dedc4ffb9a..d0fddbc8ba 100644 --- a/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts +++ b/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiTransmissionTower } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -7,6 +6,7 @@ import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/entity/ha-entity-picker"; import "../../../../components/entity/ha-statistic-picker"; import "../../../../components/ha-dialog"; +import "../../../../components/ha-button"; import "../../../../components/ha-formfield"; import "../../../../components/ha-radio"; import type { HaRadio } from "../../../../components/ha-radio"; @@ -280,10 +280,14 @@ export class DialogEnergyGridFlowSettings ` : ""} - + ${this.hass.localize("ui.common.cancel")} - - + ${this.hass.localize("ui.common.save")} - + `; } diff --git a/src/panels/config/entities/entity-registry-settings-editor.ts b/src/panels/config/entities/entity-registry-settings-editor.ts index c74a0fecfc..0250d6d5dd 100644 --- a/src/panels/config/entities/entity-registry-settings-editor.ts +++ b/src/panels/config/entities/entity-registry-settings-editor.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiContentCopy } from "@mdi/js"; import type { HassEntity } from "home-assistant-js-websocket"; import type { CSSResultGroup, PropertyValues } from "lit"; @@ -1539,9 +1538,6 @@ export class EntityRegistrySettingsEditor extends LitElement { li[divider] { border-bottom-color: var(--divider-color); } - ha-alert mwc-button { - width: max-content; - } .menu-item { border-radius: 4px; margin-top: 3px; diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index 252f1a9b24..ddbe51dc7a 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -1563,7 +1563,6 @@ ${rejected .header-btns { display: flex; } - .header-btns > mwc-button, .header-btns > ha-icon-button { margin: 8px; } diff --git a/src/panels/config/helpers/forms/ha-input_select-form.ts b/src/panels/config/helpers/forms/ha-input_select-form.ts index 554ff7d6df..19d8b77928 100644 --- a/src/panels/config/helpers/forms/ha-input_select-form.ts +++ b/src/panels/config/helpers/forms/ha-input_select-form.ts @@ -235,11 +235,6 @@ class HaInputSelectForm extends LitElement { cursor: default; background-color: var(--card-background-color); } - mwc-button { - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - } ha-textfield { display: block; margin-bottom: 8px; diff --git a/src/panels/config/integrations/dialog-add-integration.ts b/src/panels/config/integrations/dialog-add-integration.ts index f1932b8847..204046394e 100644 --- a/src/panels/config/integrations/dialog-add-integration.ts +++ b/src/panels/config/integrations/dialog-add-integration.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button"; - import type { IFuseOptions } from "fuse.js"; import Fuse from "fuse.js"; import type { HassConfig } from "home-assistant-js-websocket"; diff --git a/src/panels/config/integrations/integration-panels/matter/dialog-matter-manage-fabrics.ts b/src/panels/config/integrations/integration-panels/matter/dialog-matter-manage-fabrics.ts index 0389daf7ca..7bd3a6d38b 100644 --- a/src/panels/config/integrations/integration-panels/matter/dialog-matter-manage-fabrics.ts +++ b/src/panels/config/integrations/integration-panels/matter/dialog-matter-manage-fabrics.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiDelete } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; diff --git a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts index 32026565cb..55e6382f31 100644 --- a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts +++ b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts @@ -1,9 +1,9 @@ -import "@material/mwc-button"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { formatTime } from "../../../../../common/datetime/format_time"; import "../../../../../components/ha-card"; +import "../../../../../components/ha-button"; import "../../../../../components/ha-select"; import "../../../../../components/ha-textfield"; import type { MQTTMessage } from "../../../../../data/mqtt"; @@ -100,7 +100,9 @@ class MqttSubscribeCard extends LitElement { (qos) => html`${qos}` )} - +
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts index ea9dc214ae..3a12f2789a 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts @@ -1,11 +1,10 @@ -import "@material/mwc-button"; import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state, query } from "lit/decorators"; import type { HASSDomEvent } from "../../../../../common/dom/fire_event"; import { navigate } from "../../../../../common/navigate"; import type { SelectionChangedEvent } from "../../../../../components/data-table/ha-data-table"; -import "../../../../../components/ha-spinner"; +import "../../../../../components/ha-button"; import type { ZHADeviceEndpoint, ZHAGroup } from "../../../../../data/zha"; import { addGroup, fetchGroupableDevices } from "../../../../../data/zha"; import "../../../../../layouts/hass-subpage"; @@ -97,24 +96,17 @@ export class ZHAAddGroupPage extends LitElement {
- - ${this._processingAdd - ? html`` - : ""} ${this.hass!.localize( "ui.panel.config.zha.groups.create" - )}
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts index bc4b9efa59..ddb91aaf91 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiPlus } from "@mdi/js"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; diff --git a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts index d6eefa08b9..fd74a36892 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts index 1d98a00eb7..7dfdd1e488 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button/mwc-button"; - import { mdiCheckCircle, mdiCircle, diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-installer.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-installer.ts index 9cff05bae1..48950d4565 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-installer.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-installer.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button/mwc-button"; - import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts index 57fa33ac89..6755985be2 100644 --- a/src/panels/config/person/ha-config-person.ts +++ b/src/panels/config/person/ha-config-person.ts @@ -1,8 +1,8 @@ import { mdiPlus } from "@mdi/js"; - import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { stringCompare } from "../../../common/string/compare"; +import "../../../components/ha-button"; import "../../../components/ha-card"; import "../../../components/ha-fab"; import "../../../components/ha-list"; @@ -117,10 +117,15 @@ export class HaConfigPerson extends LitElement { ${hass.localize( "ui.panel.config.person.no_persons_created_yet" )} - + + ${hass.localize( "ui.panel.config.person.create_person" - )}
` diff --git a/src/panels/config/repairs/dialog-integration-startup.ts b/src/panels/config/repairs/dialog-integration-startup.ts index 62996283f5..95a4c17849 100644 --- a/src/panels/config/repairs/dialog-integration-startup.ts +++ b/src/panels/config/repairs/dialog-integration-startup.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; diff --git a/src/panels/config/script/blueprint-script-editor.ts b/src/panels/config/script/blueprint-script-editor.ts index 5689d74648..acf7b15de5 100644 --- a/src/panels/config/script/blueprint-script-editor.ts +++ b/src/panels/config/script/blueprint-script-editor.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-markdown"; diff --git a/src/panels/config/script/ha-script-fields.ts b/src/panels/config/script/ha-script-fields.ts index 08d30cb971..3d0a8928d8 100644 --- a/src/panels/config/script/ha-script-fields.ts +++ b/src/panels/config/script/ha-script-fields.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiPlus } from "@mdi/js"; import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -47,14 +46,13 @@ export default class HaScriptFields extends LitElement { ` : nothing} - + + ${this.hass.localize("ui.panel.config.script.editor.field.add_field")} `; } diff --git a/src/panels/config/script/manual-script-editor.ts b/src/panels/config/script/manual-script-editor.ts index 2395e18b5b..f42ecb58aa 100644 --- a/src/panels/config/script/manual-script-editor.ts +++ b/src/panels/config/script/manual-script-editor.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiHelpCircle } from "@mdi/js"; import type { CSSResultGroup, PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; diff --git a/src/panels/config/voice-assistants/dialog-voice-settings.ts b/src/panels/config/voice-assistants/dialog-voice-settings.ts index 8113e155d7..9203f7a606 100644 --- a/src/panels/config/voice-assistants/dialog-voice-settings.ts +++ b/src/panels/config/voice-assistants/dialog-voice-settings.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { mdiClose, mdiTuneVertical } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts index fb733ddae4..5a88b4f32b 100644 --- a/src/panels/config/zone/ha-config-zone.ts +++ b/src/panels/config/zone/ha-config-zone.ts @@ -10,6 +10,7 @@ import { navigate } from "../../../common/navigate"; import { stringCompare } from "../../../common/string/compare"; import "../../../components/ha-card"; import "../../../components/ha-fab"; +import "../../../components/ha-button"; import "../../../components/ha-icon-button"; import "../../../components/ha-list"; import "../../../components/ha-list-item"; @@ -136,8 +137,8 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
${hass.localize("ui.panel.config.zone.no_zones_created_yet")}
- - ${hass.localize("ui.panel.config.zone.create_zone")} + ${hass.localize("ui.panel.config.zone.create_zone")}
` diff --git a/src/panels/developer-tools/assist/developer-tools-assist.ts b/src/panels/developer-tools/assist/developer-tools-assist.ts index 3a9249de92..b2ea1d322f 100644 --- a/src/panels/developer-tools/assist/developer-tools-assist.ts +++ b/src/panels/developer-tools/assist/developer-tools-assist.ts @@ -164,7 +164,7 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) { ${this._results.length ? html`
- + ${this.hass.localize("ui.common.clear")} diff --git a/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts b/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts index 359f388149..f71fddec29 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts @@ -1,7 +1,7 @@ import { differenceInDays, endOfDay } from "date-fns"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; -import { css, html, LitElement, nothing } from "lit"; +import { html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { formatDate } from "../../../../common/datetime/format_date"; import type { EnergyData } from "../../../../data/energy"; @@ -126,12 +126,6 @@ export class HuiEnergyCompareCard energyCollection.setCompare(false); energyCollection.refresh(); } - - static styles = css` - mwc-button { - width: max-content; - } - `; } declare global { diff --git a/src/panels/lovelace/cards/hui-recovery-mode-card.ts b/src/panels/lovelace/cards/hui-recovery-mode-card.ts index ed09372c20..46f0c9b5d0 100644 --- a/src/panels/lovelace/cards/hui-recovery-mode-card.ts +++ b/src/panels/lovelace/cards/hui-recovery-mode-card.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; diff --git a/src/panels/lovelace/cards/hui-starting-card.ts b/src/panels/lovelace/cards/hui-starting-card.ts index 6ae7f66286..3fdf0fb60c 100644 --- a/src/panels/lovelace/cards/hui-starting-card.ts +++ b/src/panels/lovelace/cards/hui-starting-card.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import { STATE_NOT_RUNNING } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts index 6f1742d031..c7a3499bcb 100644 --- a/src/panels/lovelace/components/hui-energy-period-selector.ts +++ b/src/panels/lovelace/components/hui-energy-period-selector.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item"; import { mdiDotsVertical } from "@mdi/js"; import { @@ -34,6 +33,7 @@ import { } from "../../../common/datetime/format_date"; import { debounce } from "../../../common/util/debounce"; import "../../../components/ha-button-menu"; +import "../../../components/ha-button"; import "../../../components/ha-check-list-item"; import "../../../components/ha-date-range-picker"; import type { DateRangePickerRanges } from "../../../components/ha-date-range-picker"; @@ -205,11 +205,15 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
${!this.narrow - ? html` + ? html` ${this.hass.localize( "ui.panel.lovelace.components.energy_period_selector.now" )} - ` + ` : nothing} @@ -485,17 +489,12 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) { margin-inline-start: unset; margin-inline-end: initial; } - mwc-button { + ha-button { margin-left: 8px; margin-inline-start: 8px; margin-inline-end: initial; flex-shrink: 0; - --mdc-button-outline-color: currentColor; - --primary-color: currentColor; - --mdc-theme-primary: currentColor; - --mdc-theme-on-primary: currentColor; - --mdc-button-disabled-outline-color: var(--disabled-text-color); - --mdc-button-disabled-ink-color: var(--disabled-text-color); + --ha-button-theme-color: currentColor; } `; } diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts index 467e5bc33b..9c2ddc1777 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts @@ -7,6 +7,7 @@ import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; import { haStyleDialog } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; import "../../cards/hui-card"; +import "../../../../components/ha-button"; import type { DeleteCardDialogParams } from "./show-delete-card-dialog"; @customElement("hui-dialog-delete-card") @@ -55,16 +56,17 @@ export class HuiDialogDeleteCard extends LitElement { ` : ""} - ${this.hass!.localize("ui.common.cancel")} - - + + ${this.hass!.localize("ui.common.delete")} - + `; } diff --git a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts index c2a78db0b3..862932c62b 100644 --- a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts @@ -115,10 +115,13 @@ export class HuiConditionalCardEditor .path=${mdiContentCopy} @click=${this._handleCopyCard} > - ${this.hass!.localize( "ui.panel.lovelace.editor.card.conditional.change_type" - )}
- + ${this.hass!.localize("ui.common.cancel")} - +
`; diff --git a/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts b/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts index 6832139051..cb4230f7cd 100644 --- a/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -7,6 +6,7 @@ import type { HomeAssistant } from "../../../types"; import { hasConfigOrEntityChanged } from "../common/has-changed"; import "../components/hui-generic-entity-row"; import { createEntityNotFoundWarning } from "../components/hui-warning"; +import "../../../components/ha-button"; import type { ConfirmableRowConfig, LovelaceRow } from "./types"; import { callProtectedLockService } from "../../../data/lock"; import { confirmAction } from "../common/confirm-action"; @@ -45,7 +45,9 @@ class HuiLockEntityRow extends LitElement implements LovelaceRow { return html` - + `; } static styles = css` - mwc-button { + ha-button { margin-right: -0.57em; margin-inline-end: -0.57em; margin-inline-start: initial; diff --git a/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts b/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts index 55b8e62b86..45a14e25ad 100644 --- a/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts @@ -1,8 +1,8 @@ -import "@material/mwc-button/mwc-button"; import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../components/entity/ha-entity-toggle"; +import "../../../components/ha-button"; import { UNAVAILABLE } from "../../../data/entity"; import { activateScene } from "../../../data/scene"; import type { HomeAssistant } from "../../../types"; @@ -46,20 +46,22 @@ class HuiSceneEntityRow extends LitElement implements LovelaceRow { return html` - ${this._config.action_name || this.hass!.localize("ui.card.scene.activate")} - + `; } static styles = css` - mwc-button { + ha-button { margin-right: -0.57em; margin-inline-end: -0.57em; margin-inline-start: initial; diff --git a/src/panels/lovelace/entity-rows/hui-script-entity-row.ts b/src/panels/lovelace/entity-rows/hui-script-entity-row.ts index bbf1fba097..16e8b75384 100644 --- a/src/panels/lovelace/entity-rows/hui-script-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-script-entity-row.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -9,6 +8,7 @@ import type { HomeAssistant } from "../../../types"; import { hasConfigOrEntityChanged } from "../common/has-changed"; import "../components/hui-generic-entity-row"; import { createEntityNotFoundWarning } from "../components/hui-warning"; +import "../../../components/ha-button"; import type { ActionRowConfig, LovelaceRow } from "./types"; import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog"; import { confirmAction } from "../common/confirm-action"; @@ -48,7 +48,11 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow { return html` ${stateObj.state === "on" - ? html` + ? html` ${stateObj.attributes.mode !== "single" && stateObj.attributes.current && stateObj.attributes.current > 0 @@ -56,24 +60,26 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow { number: stateObj.attributes.current, }) : this.hass.localize("ui.card.script.cancel")} - ` + ` : ""} ${stateObj.state === "off" || stateObj.attributes.max - ? html` ${this._config.action_name || this.hass!.localize("ui.card.script.run")} - ` + ` : ""} `; } static styles = css` - mwc-button:last-child { + ha-button:last-child { margin-right: -0.57em; margin-inline-end: -0.57em; margin-inline-start: initial; diff --git a/src/panels/lovelace/special-rows/hui-button-row.ts b/src/panels/lovelace/special-rows/hui-button-row.ts index c75742722d..282688d39e 100644 --- a/src/panels/lovelace/special-rows/hui-button-row.ts +++ b/src/panels/lovelace/special-rows/hui-button-row.ts @@ -1,10 +1,10 @@ -import "@material/mwc-button"; import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; import { DOMAINS_TOGGLE } from "../../../common/const"; import { computeDomain } from "../../../common/entity/compute_domain"; import { computeStateName } from "../../../common/entity/compute_state_name"; import "../../../components/ha-state-icon"; +import "../../../components/ha-button"; import type { HomeAssistant } from "../../../types"; import { actionHandler } from "../common/directives/action-handler-directive"; import { handleAction } from "../common/handle-action"; @@ -61,7 +61,9 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
${name}
- ${this._config.action_name ? this._config.action_name - : this.hass!.localize("ui.card.service.run")}
`; @@ -99,7 +101,7 @@ export class HuiButtonRow extends LitElement implements LovelaceRow { overflow: hidden; text-overflow: ellipsis; } - mwc-button { + ha-button { margin-right: -0.57em; margin-inline-end: -0.57em; margin-inline-start: initial; diff --git a/src/panels/lovelace/special-rows/hui-cast-row.ts b/src/panels/lovelace/special-rows/hui-cast-row.ts index 27de92daff..efc4eee59c 100644 --- a/src/panels/lovelace/special-rows/hui-cast-row.ts +++ b/src/panels/lovelace/special-rows/hui-cast-row.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button/mwc-button"; import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -8,6 +7,7 @@ import { castSendShowLovelaceView, ensureConnectedCastSession, } from "../../../cast/receiver_messages"; +import "../../../components/ha-button"; import "../../../components/ha-icon"; import type { HomeAssistant } from "../../../types"; import type { CastConfig, LovelaceRow } from "../entity-rows/types"; @@ -61,14 +61,15 @@ class HuiCastRow extends LitElement implements LovelaceRow { : html`
- SHOW - +
`} diff --git a/src/panels/media-browser/ha-panel-media-browser.ts b/src/panels/media-browser/ha-panel-media-browser.ts index d84f09a703..61704ef6da 100644 --- a/src/panels/media-browser/ha-panel-media-browser.ts +++ b/src/panels/media-browser/ha-panel-media-browser.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import type { ActionDetail } from "@material/mwc-list"; import { mdiAlphaABoxOutline, diff --git a/src/panels/profile/ha-long-lived-access-token-dialog.ts b/src/panels/profile/ha-long-lived-access-token-dialog.ts index 018325c284..69db923096 100644 --- a/src/panels/profile/ha-long-lived-access-token-dialog.ts +++ b/src/panels/profile/ha-long-lived-access-token-dialog.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import { mdiContentCopy } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -6,6 +5,7 @@ import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import { createCloseHeading } from "../../components/ha-dialog"; import "../../components/ha-textfield"; +import "../../components/ha-button"; import "../../components/ha-icon-button"; import { haStyleDialog } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; @@ -67,11 +67,15 @@ export class HaLongLivedAccessTokenDialog extends LitElement { ${this._qrCode ? this._qrCode : html` - + ${this.hass.localize( "ui.panel.profile.long_lived_access_tokens.generate_qr_code" )} - + `} diff --git a/src/panels/profile/ha-pick-theme-row.ts b/src/panels/profile/ha-pick-theme-row.ts index edd4cece83..276813040e 100644 --- a/src/panels/profile/ha-pick-theme-row.ts +++ b/src/panels/profile/ha-pick-theme-row.ts @@ -1,5 +1,3 @@ -import "@material/mwc-button/mwc-button"; - import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -7,6 +5,7 @@ import { fireEvent } from "../../common/dom/fire_event"; import "../../components/ha-formfield"; import "../../components/ha-list-item"; import "../../components/ha-radio"; +import "../../components/ha-button"; import type { HaRadio } from "../../components/ha-radio"; import "../../components/ha-select"; import "../../components/ha-settings-row"; @@ -147,9 +146,13 @@ export class HaPickThemeRow extends LitElement { @change=${this._handleColorChange} > ${themeSettings?.primaryColor || themeSettings?.accentColor - ? html` + ? html` ${this.hass.localize("ui.panel.profile.themes.reset")} - ` + ` : ""} ` : ""} diff --git a/src/panels/profile/ha-refresh-tokens-card.ts b/src/panels/profile/ha-refresh-tokens-card.ts index eba7a50837..1975feccc1 100644 --- a/src/panels/profile/ha-refresh-tokens-card.ts +++ b/src/panels/profile/ha-refresh-tokens-card.ts @@ -14,12 +14,13 @@ import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; import { relativeTime } from "../../common/datetime/relative_time"; import { fireEvent } from "../../common/dom/fire_event"; +import "../../components/ha-button"; import "../../components/ha-button-menu"; import "../../components/ha-card"; import "../../components/ha-icon-button"; import "../../components/ha-label"; -import "../../components/ha-settings-row"; import "../../components/ha-list-item"; +import "../../components/ha-settings-row"; import { deleteAllRefreshTokens } from "../../data/auth"; import type { RefreshToken } from "../../data/refresh_token"; import { @@ -191,11 +192,16 @@ class HaRefreshTokens extends LitElement { : nothing}
- + ${this.hass.localize( "ui.panel.profile.refresh_tokens.delete_all_tokens" )} - +
`; diff --git a/src/resources/styles.ts b/src/resources/styles.ts index c279d44ced..d84a63ccbd 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -80,11 +80,6 @@ export const haStyle = css` color: var(--error-color); } - ha-button.warning, - mwc-button.warning { - --mdc-theme-primary: var(--error-color); - } - ${buttonLinkStyle} .card-actions a { @@ -172,10 +167,6 @@ export const haStyleDialog = css` --ha-dialog-border-radius: 0; } } - mwc-button.warning, - ha-button.warning { - --mdc-theme-primary: var(--error-color); - } .error { color: var(--error-color); } diff --git a/src/state-summary/state-card-scene.ts b/src/state-summary/state-card-scene.ts index b414eba78b..624d3e9957 100644 --- a/src/state-summary/state-card-scene.ts +++ b/src/state-summary/state-card-scene.ts @@ -1,6 +1,6 @@ import type { HassEntity } from "home-assistant-js-websocket"; import type { CSSResultGroup } from "lit"; -import { css, html, LitElement } from "lit"; +import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import "../components/entity/state-info"; import "../components/ha-button"; @@ -37,18 +37,7 @@ class StateCardScene extends LitElement { } static get styles(): CSSResultGroup { - return [ - haStyle, - css` - mwc-button { - top: 3px; - height: 37px; - margin-right: -0.57em; - margin-inline-end: -0.57em; - margin-inline-start: initial; - } - `, - ]; + return [haStyle]; } }