From 63e96774a8721dd03d79a97510b47e62d158b49b Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Thu, 22 Oct 2026 17:27:23 +0200
Subject: [PATCH] Task/improve style of close button in dialogs (#8268)

* Improve style of close button in dialogs

* Update changelog
---
 CHANGELOG.md                                        |  7 +++++++
 .../lib/dialog-footer/dialog-footer.component.html  |  7 +++++--
 .../lib/dialog-footer/dialog-footer.component.scss  |  4 ++++
 .../lib/dialog-footer/dialog-footer.component.ts    |  4 ++--
 .../lib/dialog-header/dialog-header.component.html  | 13 ++++++++++---
 .../lib/dialog-header/dialog-header.component.scss  | 11 +++++++++++
 .../lib/dialog-header/dialog-header.component.ts    |  4 ++--
 7 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4f13393d1a..39e70ada24 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Improved the style of the close button in the dialog footer component
+- Improved the style of the close button in the dialog header component
+
 ## 3.90.0 - 2026-10-21
 
 ### Changed
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..461f839822 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,10 @@
 @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 mat-icon 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..0f41fc37bc 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,7 @@
 :host {
   display: block;
+
+  button[mat-icon-button] {
+    --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..023548a562 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,19 @@
-<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 mat-icon 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..c7dbf3b951 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,14 @@
 :host {
   display: block;
+
+  button[mat-icon-button] {
+    margin-right: -0.8125rem;
+    margin-top: 0.125rem;
+  }
+
+  .with-close-button {
+    .text-center {
+      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() {