Improve style of close button in dialogs

libs/ui/src/lib/dialog-footer/dialog-footer.component.html

@@ -1,7 +1,7 @@
 @if (deviceType === 'mobile') {
   <div class="d-flex justify-content-center" mat-dialog-actions>
-    <button mat-button (click)="onClickCloseButton()">
+    <button mat-icon-button (click)="onClickCloseButton()">
-      <ion-icon name="close" size="large" />
+      <ion-icon class="d-block text-body-secondary" name="close-outline" />
     </button>
   </div>
 }

libs/ui/src/lib/dialog-footer/dialog-footer.component.scss

@@ -1,3 +1,8 @@
 :host {
   display: block;
+
+  button[mat-icon-button] {
+    // Show the touch target of 48px, which the density of the theme hides
+    --mat-icon-button-touch-target-display: block;
+  }
 }

libs/ui/src/lib/dialog-footer/dialog-footer.component.ts

@@ -9,7 +9,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { close } from 'ionicons/icons';
+import { closeOutline } from 'ionicons/icons';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -25,7 +25,7 @@ export class GfDialogFooterComponent {
   @Output() closeButtonClicked = new EventEmitter<void>();
 
   public constructor() {
-    addIcons({ close });
+    addIcons({ closeOutline });
   }
 
   public onClickCloseButton() {

libs/ui/src/lib/dialog-header/dialog-header.component.html

@@ -1,12 +1,16 @@
-<div class="d-flex" mat-dialog-title>
+<div
+  class="d-flex"
+  mat-dialog-title
+  [class.with-close-button]="deviceType() !== 'mobile'"
+>
   <span
     class="flex-grow-1 text-truncate"
     [class.text-center]="position() === 'center'"
     >{{ title() }}</span
   >
   @if (deviceType() !== 'mobile') {
-    <button class="no-min-width px-0" mat-button (click)="onClickCloseButton()">
+    <button mat-icon-button (click)="onClickCloseButton()">
-      <ion-icon name="close" size="large" />
+      <ion-icon class="d-block text-body-secondary" name="close-outline" />
     </button>
   }
 </div>

libs/ui/src/lib/dialog-header/dialog-header.component.scss

@@ -1,3 +1,18 @@
 :host {
   display: block;
+
+  button[mat-icon-button] {
+    // Move the button to the corner with the same distance to the top and to the right
+    margin-right: -0.8125rem;
+    // Center the button on the title
+    margin-top: 0.125rem;
+  }
+
+  .with-close-button {
+    .text-center {
+      // Compensate for the width of the button (1.75rem minus the negative
+      // margin) to center the title in the dialog
+      padding-left: 0.9375rem;
+    }
+  }
 }

libs/ui/src/lib/dialog-header/dialog-header.component.ts

@@ -8,7 +8,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { close } from 'ionicons/icons';
+import { closeOutline } from 'ionicons/icons';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -26,7 +26,7 @@ export class GfDialogHeaderComponent {
   public readonly closeButtonClicked = output<void>();
 
   public constructor() {
-    addIcons({ close });
+    addIcons({ closeOutline });
   }
 
   protected onClickCloseButton() {