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') {
+  <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;
+  display: block;
-  flex: 0 0 auto;
-  min-height: 0;
-
-  @media (min-width: 576px) {
-    padding: 0 !important;
-  }
 }

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,3 +1,4 @@
+<div class="d-flex" mat-dialog-title>
   <span
     class="flex-grow-1 text-truncate"
     [ngClass]="{ 'text-center': position === 'center' }"
@@ -8,3 +9,4 @@
       <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: block;
-  display: flex;
 }

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
+<gf-dialog-header [title]="data.title" (closeButtonClicked)="onClose()" />
-  mat-dialog-title
-  [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,6 +1,9 @@
 :host {
   display: block;
 
+  .mat-mdc-dialog-content {
+    max-height: unset;
+
     a {
       color: rgba(var(--palette-primary-500), 1);
     }
@@ -15,24 +18,6 @@
       }
     }
 
-  .mat-expansion-panel {
-    background: none;
-    box-shadow: none;
-
-    .mat-expansion-panel-header {
-      color: inherit;
-
-      &[aria-disabled='true'] {
-        cursor: default;
-      }
-    }
-  }
-
-  .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
@@ -51,6 +36,25 @@
         font-size: 2.5rem;
       }
     }
+
+    .mat-mdc-progress-spinner {
+      right: 1.5rem;
+      top: calc(50% - 10px);
+    }
+
+    .mat-expansion-panel {
+      background: none;
+      box-shadow: none;
+
+      .mat-expansion-panel-header {
+        color: inherit;
+
+        &[aria-disabled='true'] {
+          cursor: default;
+        }
+      }
+    }
+  }
 }
 
 :host-context(.theme-dark) {

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()"
 />