Update dialog styles (#13132)

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;

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}

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;
       }

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;

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;
         }

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 {

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;

src/resources/styles.ts

@@ -316,7 +316,6 @@ export const haStyleDialog = css`
   }
 
   ha-dialog .form {
-    padding-bottom: 24px;
     color: var(--primary-text-color);
   }