From 3b5a34f6f30bfd3c03cd0ee1b693ea98baedd47c Mon Sep 17 00:00:00 2001
From: Aldrin <53973174+Dhoni77@users.noreply.github.com>
Date: Wed, 11 Oct 2023 13:27:35 +0530
Subject: [PATCH] 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                                         |  1 +
 .../access-table/access-table.component.html         | 12 ------------
 .../access-table/access-table.component.ts           |  1 -
 .../admin-market-data/admin-market-data.scss         |  7 -------
 .../user-account-access/user-account-access.html     | 12 +++++++++++-
 .../user-account-access.module.ts                    |  2 ++
 .../client/src/app/pages/accounts/accounts-page.scss |  7 -------
 .../pages/portfolio/activities/activities-page.scss  |  7 -------
 apps/client/src/styles.scss                          | 11 +++++++++++
 9 files changed, 25 insertions(+), 35 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b51ced82..12254fd9 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/apps/client/src/app/components/access-table/access-table.component.html b/apps/client/src/app/components/access-table/access-table.component.html
index 498e73bf..589c67e1 100644
--- a/apps/client/src/app/components/access-table/access-table.component.html
+++ b/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>
diff --git a/apps/client/src/app/components/access-table/access-table.component.ts b/apps/client/src/app/components/access-table/access-table.component.ts
index 298a0206..c0db8fb2 100644
--- a/apps/client/src/app/components/access-table/access-table.component.ts
+++ b/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>();
diff --git a/apps/client/src/app/components/admin-market-data/admin-market-data.scss b/apps/client/src/app/components/admin-market-data/admin-market-data.scss
index 50901445..b5b58f67 100644
--- a/apps/client/src/app/components/admin-market-data/admin-market-data.scss
+++ b/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;
-  }
 }
diff --git a/apps/client/src/app/components/user-account-access/user-account-access.html b/apps/client/src/app/components/user-account-access/user-account-access.html
index c3aa485c..392337a8 100644
--- a/apps/client/src/app/components/user-account-access/user-account-access.html
+++ b/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>
diff --git a/apps/client/src/app/components/user-account-access/user-account-access.module.ts b/apps/client/src/app/components/user-account-access/user-account-access.module.ts
index 76495db6..0388dd24 100644
--- a/apps/client/src/app/components/user-account-access/user-account-access.module.ts
+++ b/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
   ]
diff --git a/apps/client/src/app/pages/accounts/accounts-page.scss b/apps/client/src/app/pages/accounts/accounts-page.scss
index 307bf0f3..32e9fe14 100644
--- a/apps/client/src/app/pages/accounts/accounts-page.scss
+++ b/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;
-  }
 }
diff --git a/apps/client/src/app/pages/portfolio/activities/activities-page.scss b/apps/client/src/app/pages/portfolio/activities/activities-page.scss
index c10640da..5d4e87f3 100644
--- a/apps/client/src/app/pages/portfolio/activities/activities-page.scss
+++ b/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;
-  }
 }
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 26f8a4a4..8e79de77 100644
--- a/apps/client/src/styles.scss
+++ b/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;