From a30c8205b1f6a13e60dff50dfa2cdaa43b3224da Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 11 Jul 2022 22:07:10 +0200 Subject: [PATCH] Update dialog styles (#13132) --- src/components/ha-dialog.ts | 22 ++++++++++++------- src/components/ha-target-picker.ts | 2 +- src/dialogs/generic/dialog-box.ts | 3 --- .../areas/dialog-area-registry-detail.ts | 3 --- .../dialog-device-registry-detail.ts | 3 --- .../entities/entity-registry-settings.ts | 8 +++---- .../config/person/dialog-person-detail.ts | 3 --- src/resources/styles.ts | 1 - 8 files changed, 18 insertions(+), 27 deletions(-) diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index 346410aa44..dfec72aeec 100644 --- a/src/components/ha-dialog.ts +++ b/src/components/ha-dialog.ts @@ -40,10 +40,13 @@ export class HaDialog extends DialogBase { z-index: var(--dialog-z-index, 7); -webkit-backdrop-filter: var(--dialog-backdrop-filter, none); backdrop-filter: var(--dialog-backdrop-filter, none); + --mdc-dialog-box-shadow: var(--dialog-box-shadow, none); + --mdc-typography-headline6-font-weight: 400; + --mdc-typography-headline6-font-size: 1.574rem; } .mdc-dialog__actions { justify-content: var(--justify-action-buttons, flex-end); - padding-bottom: max(env(safe-area-inset-bottom), 8px); + padding-bottom: max(env(safe-area-inset-bottom), 24px); } .mdc-dialog__actions span:nth-child(1) { flex: var(--secondary-action-button-flex, unset); @@ -54,17 +57,23 @@ export class HaDialog extends DialogBase { .mdc-dialog__container { align-items: var(--vertial-align-dialog, center); } + .mdc-dialog__title { + padding: 24px 24px 0 24px; + } + .mdc-dialog__actions { + padding: 0 24px 24px 24px; + } .mdc-dialog__title::before { display: block; - height: 20px; + height: 0px; } .mdc-dialog .mdc-dialog__content { position: var(--dialog-content-position, relative); - padding: var(--dialog-content-padding, 20px 24px); + padding: var(--dialog-content-padding, 24px); } :host([hideactions]) .mdc-dialog .mdc-dialog__content { padding-bottom: max( - var(--dialog-content-padding, 20px), + var(--dialog-content-padding, 24px), env(safe-area-inset-bottom) ); } @@ -72,10 +81,7 @@ export class HaDialog extends DialogBase { position: var(--dialog-surface-position, relative); top: var(--dialog-surface-top); min-height: var(--mdc-dialog-min-height, auto); - border-radius: var( - --ha-dialog-border-radius, - var(--ha-card-border-radius, 4px) - ); + border-radius: var(--ha-dialog-border-radius, 28px); } :host([flexContent]) .mdc-dialog .mdc-dialog__content { display: flex; diff --git a/src/components/ha-target-picker.ts b/src/components/ha-target-picker.ts index 8df2bea571..0243534269 100644 --- a/src/components/ha-target-picker.ts +++ b/src/components/ha-target-picker.ts @@ -314,7 +314,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) { class="mdc-chip__icon mdc-chip__icon--trailing" tabindex="-1" role="button" - .label=${this.hass.localize("ui.components.target-picker.expand")} + .label=${this.hass.localize("ui.components.target-picker.remove")} .path=${mdiClose} hideTooltip .id=${id} diff --git a/src/dialogs/generic/dialog-box.ts b/src/dialogs/generic/dialog-box.ts index fdf2107756..7aa5ebb5e6 100644 --- a/src/dialogs/generic/dialog-box.ts +++ b/src/dialogs/generic/dialog-box.ts @@ -144,8 +144,6 @@ class DialogBox extends LitElement { } p { margin: 0; - padding-top: 6px; - padding-bottom: 24px; color: var(--primary-text-color); } .no-bottom-padding { @@ -157,7 +155,6 @@ class DialogBox extends LitElement { ha-dialog { --mdc-dialog-heading-ink-color: var(--primary-text-color); --mdc-dialog-content-ink-color: var(--primary-text-color); - --justify-action-buttons: space-between; /* Place above other dialogs */ --dialog-z-index: 104; } diff --git a/src/panels/config/areas/dialog-area-registry-detail.ts b/src/panels/config/areas/dialog-area-registry-detail.ts index fcf95fc6c1..c2fadae31d 100644 --- a/src/panels/config/areas/dialog-area-registry-detail.ts +++ b/src/panels/config/areas/dialog-area-registry-detail.ts @@ -178,9 +178,6 @@ class DialogAreaDetail extends LitElement { return [ haStyleDialog, css` - .form { - padding-bottom: 24px; - } ha-textfield { display: block; margin-bottom: 16px; diff --git a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts index 662e8f3ca9..b61ac0bdd8 100644 --- a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts +++ b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts @@ -169,9 +169,6 @@ class DialogDeviceRegistryDetail extends LitElement { haStyle, haStyleDialog, css` - .form { - padding-bottom: 24px; - } mwc-button.warning { margin-right: auto; } diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts index 02c59f09b8..a680418fb5 100644 --- a/src/panels/config/entities/entity-registry-settings.ts +++ b/src/panels/config/entities/entity-registry-settings.ts @@ -1052,12 +1052,10 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) { bottom: 0; width: 100%; box-sizing: border-box; - border-top: 1px solid - var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12)); display: flex; - justify-content: space-between; - padding: 8px; - padding-bottom: max(env(safe-area-inset-bottom), 8px); + padding: 0 24px 24px 24px; + justify-content: flex-end; + padding-bottom: max(env(safe-area-inset-bottom), 24px); background-color: var(--mdc-theme-surface, #fff); } ha-select { diff --git a/src/panels/config/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts index 16fd99416c..c9d0c0c56a 100644 --- a/src/panels/config/person/dialog-person-detail.ts +++ b/src/panels/config/person/dialog-person-detail.ts @@ -454,9 +454,6 @@ class DialogPersonDetail extends LitElement { return [ haStyleDialog, css` - .form { - padding-bottom: 24px; - } ha-picture-upload, ha-textfield { display: block; diff --git a/src/resources/styles.ts b/src/resources/styles.ts index 62af21f471..1a71387b56 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -316,7 +316,6 @@ export const haStyleDialog = css` } ha-dialog .form { - padding-bottom: 24px; color: var(--primary-text-color); }