Feature/refactor dialog footer and header components (#5445)

* Refactor dialog footer and header components

* Update changelog

CHANGELOG.md

@@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Localized the content of the about page
+- Refactored the dialog footer component
+- Refactored the dialog header component
 - Refactored the benchmark comparator component to standalone
 - Refactored the world map chart component to standalone
 - Improved the language localization for German (`de`)

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html

@@ -1,5 +1,4 @@
 <gf-dialog-header
-  mat-dialog-title
   position="center"
   [deviceType]="data.deviceType"
   [title]="name"
@@ -166,7 +165,6 @@
 </div>
 
 <gf-dialog-footer
-  mat-dialog-actions
   [deviceType]="data.deviceType"
   (closeButtonClicked)="onClose()"
 />

apps/client/src/app/components/dialog-footer/dialog-footer.component.html

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

apps/client/src/app/components/dialog-footer/dialog-footer.component.scss

@@ -1,9 +1,3 @@
 :host {
-  display: flex;
-  flex: 0 0 auto;
-  min-height: 0;
-
-  @media (min-width: 576px) {
-    padding: 0 !important;
-  }
+  display: block;
 }

apps/client/src/app/components/dialog-footer/dialog-footer.component.ts

@@ -6,6 +6,7 @@ import {
   Output
 } from '@angular/core';
 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';
@@ -13,7 +14,7 @@ import { close } from 'ionicons/icons';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'justify-content-center' },
-  imports: [IonIcon, MatButtonModule],
+  imports: [IonIcon, MatButtonModule, MatDialogModule],
   selector: 'gf-dialog-footer',
   styleUrls: ['./dialog-footer.component.scss'],
   templateUrl: './dialog-footer.component.html'

apps/client/src/app/components/dialog-header/dialog-header.component.html

@@ -1,10 +1,12 @@
-<span
-  class="flex-grow-1 text-truncate"
-  [ngClass]="{ '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>
-}
+<div class="d-flex" mat-dialog-title>
+  <span
+    class="flex-grow-1 text-truncate"
+    [ngClass]="{ '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>
+  }
+</div>

apps/client/src/app/components/dialog-header/dialog-header.component.scss

@@ -1,4 +1,3 @@
 :host {
-  align-items: center;
-  display: flex;
+  display: block;
 }

apps/client/src/app/components/dialog-header/dialog-header.component.ts

@@ -7,6 +7,7 @@ import {
   Output
 } from '@angular/core';
 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';
@@ -14,7 +15,7 @@ import { close } from 'ionicons/icons';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'justify-content-center' },
-  imports: [CommonModule, IonIcon, MatButtonModule],
+  imports: [CommonModule, IonIcon, MatButtonModule, MatDialogModule],
   selector: 'gf-dialog-header',
   styleUrls: ['./dialog-header.component.scss'],
   templateUrl: './dialog-header.component.html'

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html

@@ -1,5 +1,4 @@
 <gf-dialog-header
-  mat-dialog-title
   position="center"
   [deviceType]="data.deviceType"
   [title]="SymbolProfile?.name ?? SymbolProfile?.symbol"
@@ -459,7 +458,6 @@
 </div>
 
 <gf-dialog-footer
-  mat-dialog-actions
   [deviceType]="data.deviceType"
   (closeButtonClicked)="onClose()"
 />

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html

@@ -1,8 +1,4 @@
-<gf-dialog-header
-  mat-dialog-title
-  [title]="data.title"
-  (closeButtonClicked)="onClose()"
-/>
+<gf-dialog-header [title]="data.title" (closeButtonClicked)="onClose()" />
 
 <div class="py-3" mat-dialog-content>
   <div class="align-items-center d-flex flex-column">

apps/client/src/app/pages/portfolio/activities/activities-page.component.ts

@@ -250,6 +250,7 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
         deviceType: this.deviceType,
         user: this.user
       } as ImportActivitiesDialogParams,
+      height: this.deviceType === 'mobile' ? '98vh' : undefined,
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'
     });
 
@@ -273,6 +274,7 @@ export class GfActivitiesPageComponent implements OnDestroy, OnInit {
         deviceType: this.deviceType,
         user: this.user
       } as ImportActivitiesDialogParams,
+      height: this.deviceType === 'mobile' ? '98vh' : undefined,
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'
     });
 

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts

@@ -56,6 +56,7 @@ import { ImportActivitiesDialogParams } from './interfaces/interfaces';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'd-flex flex-column h-100' },
   imports: [
     GfActivitiesTableComponent,
     GfDialogFooterComponent,

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html

@@ -1,5 +1,4 @@
 <gf-dialog-header
-  mat-dialog-title
   [deviceType]="data.deviceType"
   [title]="dialogTitle"
   (closeButtonClicked)="onCancel()"
@@ -193,7 +192,6 @@
 </div>
 
 <gf-dialog-footer
-  mat-dialog-actions
   [deviceType]="data.deviceType"
   (closeButtonClicked)="onCancel()"
 />

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss

@@ -1,54 +1,58 @@
 :host {
   display: block;
 
-  a {
-    color: rgba(var(--palette-primary-500), 1);
-  }
+  .mat-mdc-dialog-content {
+    max-height: unset;
+
+    a {
+      color: rgba(var(--palette-primary-500), 1);
+    }
 
-  mat-stepper {
-    ::ng-deep {
-      .mat-step-header {
-        &[aria-selected='false'] {
-          pointer-events: none;
+    mat-stepper {
+      ::ng-deep {
+        .mat-step-header {
+          &[aria-selected='false'] {
+            pointer-events: none;
+          }
         }
       }
     }
-  }
 
-  .mat-expansion-panel {
-    background: none;
-    box-shadow: none;
+    .drop-area {
+      background-color: rgba(var(--palette-foreground-base), 0.02);
+      border: 1px dashed
+        rgba(
+          var(--palette-foreground-divider),
+          var(--palette-foreground-divider-alpha)
+        );
+      border-radius: 0.25rem;
 
-    .mat-expansion-panel-header {
-      color: inherit;
+      &:hover {
+        border-color: rgba(var(--palette-primary-500), 1) !important;
+        color: rgba(var(--palette-primary-500), 1);
+      }
 
-      &[aria-disabled='true'] {
-        cursor: default;
+      .cloud-icon {
+        font-size: 2.5rem;
       }
     }
-  }
 
-  .mat-mdc-progress-spinner {
-    right: 1.5rem;
-    top: calc(50% - 10px);
-  }
-
-  .drop-area {
-    background-color: rgba(var(--palette-foreground-base), 0.02);
-    border: 1px dashed
-      rgba(
-        var(--palette-foreground-divider),
-        var(--palette-foreground-divider-alpha)
-      );
-    border-radius: 0.25rem;
-
-    &:hover {
-      border-color: rgba(var(--palette-primary-500), 1) !important;
-      color: rgba(var(--palette-primary-500), 1);
+    .mat-mdc-progress-spinner {
+      right: 1.5rem;
+      top: calc(50% - 10px);
     }
 
-    .cloud-icon {
-      font-size: 2.5rem;
+    .mat-expansion-panel {
+      background: none;
+      box-shadow: none;
+
+      .mat-expansion-panel-header {
+        color: inherit;
+
+        &[aria-disabled='true'] {
+          cursor: default;
+        }
+      }
     }
   }
 }

libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.html

@@ -1,5 +1,4 @@
 <gf-dialog-header
-  mat-dialog-title
   position="center"
   [deviceType]="data.deviceType"
   [title]="assetProfile?.name ?? assetProfile?.symbol"
@@ -35,7 +34,6 @@
 </div>
 
 <gf-dialog-footer
-  mat-dialog-actions
   [deviceType]="data.deviceType"
   (closeButtonClicked)="onClose()"
 />