Use fab-button in access management tab (#2456)

* Use fab-button in access management tab

* Refactor fab container

* Update changelog

---------

Co-authored-by: Thomas <4159106+dtslvr@users.noreply.github.com>

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Harmonized the style of the create button on the page for granting and revoking public access to share the portfolio
 - Improved the language localization for German (`de`)
 
 ## 2.10.0 - 2023-10-09

apps/client/src/app/components/access-table/access-table.component.html

@@ -1,15 +1,3 @@
-<div *ngIf="hasPermissionToCreateAccess" class="d-flex justify-content-end">
-  <a
-    color="primary"
-    i18n
-    mat-flat-button
-    [queryParams]="{ createDialog: true }"
-    [routerLink]="[]"
-  >
-    Add Access
-  </a>
-</div>
-
 <table class="gf-table w-100" mat-table [dataSource]="dataSource">
   <ng-container matColumnDef="alias">
     <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Alias</th>

apps/client/src/app/components/access-table/access-table.component.ts

@@ -19,7 +19,6 @@ import { Access } from '@ghostfolio/common/interfaces';
 })
 export class AccessTableComponent implements OnChanges, OnInit {
   @Input() accesses: Access[];
-  @Input() hasPermissionToCreateAccess = false;
   @Input() showActions: boolean;
 
   @Output() accessDeleted = new EventEmitter<string>();

apps/client/src/app/components/admin-market-data/admin-market-data.scss

@@ -2,11 +2,4 @@
 
 :host {
   display: block;
-
-  .fab-container {
-    bottom: 2rem;
-    position: fixed;
-    right: 2rem;
-    z-index: 999;
-  }
 }

apps/client/src/app/components/user-account-access/user-account-access.html

@@ -10,8 +10,18 @@
   </h1>
   <gf-access-table
     [accesses]="accesses"
-    [hasPermissionToCreateAccess]="hasPermissionToCreateAccess"
     [showActions]="hasPermissionToDeleteAccess"
     (accessDeleted)="onDeleteAccess($event)"
   ></gf-access-table>
+  <div *ngIf="hasPermissionToCreateAccess" class="fab-container">
+    <a
+      class="align-items-center d-flex justify-content-center"
+      color="primary"
+      mat-fab
+      [queryParams]="{ createDialog: true }"
+      [routerLink]="[]"
+    >
+      <ion-icon name="add-outline" size="large"></ion-icon>
+    </a>
+  </div>
 </div>

apps/client/src/app/components/user-account-access/user-account-access.module.ts

@@ -7,6 +7,7 @@ import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 
 import { GfCreateOrUpdateAccessDialogModule } from './create-or-update-access-dialog/create-or-update-access-dialog.module';
 import { UserAccountAccessComponent } from './user-account-access.component';
+import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
   declarations: [UserAccountAccessComponent],
@@ -16,6 +17,7 @@ import { UserAccountAccessComponent } from './user-account-access.component';
     GfCreateOrUpdateAccessDialogModule,
     GfPortfolioAccessTableModule,
     GfPremiumIndicatorModule,
+    MatButtonModule,
     MatDialogModule,
     RouterModule
   ]

apps/client/src/app/pages/accounts/accounts-page.scss

@@ -4,11 +4,4 @@
   .accounts {
     overflow-x: auto;
   }
-
-  .fab-container {
-    position: fixed;
-    right: 2rem;
-    bottom: 2rem;
-    z-index: 999;
-  }
 }

apps/client/src/app/pages/portfolio/activities/activities-page.scss

@@ -1,10 +1,3 @@
 :host {
   display: block;
-
-  .fab-container {
-    position: fixed;
-    right: 2rem;
-    bottom: 2rem;
-    z-index: 999;
-  }
 }

apps/client/src/styles.scss

@@ -491,6 +491,13 @@ ngx-skeleton-loader {
   flex-direction: column;
   overflow-y: auto;
 
+  .fab-container {
+    bottom: 2rem;
+    position: fixed;
+    right: 2rem;
+    z-index: 999;
+  }
+
   &:not(.has-tabs) {
     @media (min-width: 576px) {
       padding: 2rem 0;
@@ -502,6 +509,10 @@ ngx-skeleton-loader {
     padding-bottom: env(safe-area-inset-bottom);
     padding-bottom: constant(safe-area-inset-bottom);
 
+    .fab-container {
+      bottom: 5rem;
+    }
+
     .mat-mdc-tab-nav-bar {
       --mat-tab-header-active-focus-indicator-color: transparent;
       --mat-tab-header-active-hover-indicator-color: transparent;