Task/improve style of close button in dialogs (#8268)

* Improve style of close button in dialogs

* Update changelog

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

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()">
+    <button mat-icon-button (click)="onClickCloseButton()">
-      <ion-icon name="close" size="large" />
+      <ion-icon
+        class="d-block mat-icon text-body-secondary"
+        name="close-outline"
+      />
     </button>
   </div>
 }

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

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,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()">
+    <button mat-icon-button (click)="onClickCloseButton()">
-      <ion-icon name="close" size="large" />
+      <ion-icon
+        class="d-block mat-icon text-body-secondary"
+        name="close-outline"
+      />
     </button>
   }
 </div>

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

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() {