From 4ad49ad604491b21d00afc575fbfe895f6ad38b8 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 21 Oct 2026 11:12:48 +0200
Subject: [PATCH] Improve style of close button in dialogs

---
 .../dialog-footer/dialog-footer.component.html    |  4 ++--
 .../dialog-footer/dialog-footer.component.scss    |  5 +++++
 .../lib/dialog-footer/dialog-footer.component.ts  |  4 ++--
 .../dialog-header/dialog-header.component.html    | 10 +++++++---
 .../dialog-header/dialog-header.component.scss    | 15 +++++++++++++++
 .../lib/dialog-header/dialog-header.component.ts  |  4 ++--
 6 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/libs/ui/src/lib/dialog-footer/dialog-footer.component.html b/libs/ui/src/lib/dialog-footer/dialog-footer.component.html
index 463354cf1c..b29dfd7239 100644
--- a/libs/ui/src/lib/dialog-footer/dialog-footer.component.html
+++ b/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()">
-      <ion-icon name="close" size="large" />
+    <button mat-icon-button (click)="onClickCloseButton()">
+      <ion-icon class="d-block text-body-secondary" name="close-outline" />
     </button>
   </div>
 }
diff --git a/libs/ui/src/lib/dialog-footer/dialog-footer.component.scss b/libs/ui/src/lib/dialog-footer/dialog-footer.component.scss
index 5d4e87f30f..4268e83fab 100644
--- a/libs/ui/src/lib/dialog-footer/dialog-footer.component.scss
+++ b/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;
+  }
 }
diff --git a/libs/ui/src/lib/dialog-footer/dialog-footer.component.ts b/libs/ui/src/lib/dialog-footer/dialog-footer.component.ts
index e230802a76..3c06f932ed 100644
--- a/libs/ui/src/lib/dialog-footer/dialog-footer.component.ts
+++ b/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() {
diff --git a/libs/ui/src/lib/dialog-header/dialog-header.component.html b/libs/ui/src/lib/dialog-header/dialog-header.component.html
index 435af1b295..6345dff8a9 100644
--- a/libs/ui/src/lib/dialog-header/dialog-header.component.html
+++ b/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()">
-      <ion-icon name="close" size="large" />
+    <button mat-icon-button (click)="onClickCloseButton()">
+      <ion-icon class="d-block text-body-secondary" name="close-outline" />
     </button>
   }
 </div>
diff --git a/libs/ui/src/lib/dialog-header/dialog-header.component.scss b/libs/ui/src/lib/dialog-header/dialog-header.component.scss
index 5d4e87f30f..43aa12cf35 100644
--- a/libs/ui/src/lib/dialog-header/dialog-header.component.scss
+++ b/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;
+    }
+  }
 }
diff --git a/libs/ui/src/lib/dialog-header/dialog-header.component.ts b/libs/ui/src/lib/dialog-header/dialog-header.component.ts
index f16d66c4b5..a626e1b6f7 100644
--- a/libs/ui/src/lib/dialog-header/dialog-header.component.ts
+++ b/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() {