Feature/increase spacing around floating action buttons (#3385)

* Increase spacing around floating action buttons

* Update changelog

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Increased the spacing around the floating action buttons (FAB)
 - Set the icon column of the activities table to stick at the beginning
 - Set the icon column of the holdings table to stick at the beginning
 - Increased the number of attempts of queue jobs from `10` to `12` (fail later)

apps/client/src/app/components/admin-market-data/admin-market-data.component.ts

@@ -38,6 +38,7 @@ import { CreateAssetProfileDialogParams } from './create-asset-profile-dialog/in
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'has-fab' },
   selector: 'gf-admin-market-data',
   styleUrls: ['./admin-market-data.scss'],
   templateUrl: './admin-market-data.html'

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

@@ -21,6 +21,7 @@ import { CreateOrUpdateAccessDialog } from './create-or-update-access-dialog/cre
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'has-fab' },
   selector: 'gf-user-account-access',
   styleUrls: ['./user-account-access.scss'],
   templateUrl: './user-account-access.html'

apps/client/src/app/pages/accounts/accounts-page.component.ts

@@ -21,7 +21,7 @@ import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog/c
 import { TransferBalanceDialog } from './transfer-balance/transfer-balance-dialog.component';
 
 @Component({
-  host: { class: 'page' },
+  host: { class: 'has-fab page' },
   selector: 'gf-accounts-page',
   styleUrls: ['./accounts-page.scss'],
   templateUrl: './accounts-page.html'

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

@@ -29,6 +29,7 @@ import { ImportActivitiesDialog } from './import-activities-dialog/import-activi
 import { ImportActivitiesDialogParams } from './import-activities-dialog/interfaces/interfaces';
 
 @Component({
+  host: { class: 'has-fab' },
   selector: 'gf-activities-page',
   styleUrls: ['./activities-page.scss'],
   templateUrl: './activities-page.html'

apps/client/src/styles.scss

@@ -387,6 +387,10 @@ ngx-skeleton-loader {
   @include gf-table;
 }
 
+.has-fab {
+  padding-bottom: 3rem !important;
+}
+
 .has-info-message {
   .page.has-tabs {
     height: calc(100svh - 2 * var(--mat-toolbar-standard-height));
@@ -543,6 +547,10 @@ ngx-skeleton-loader {
       --mdc-tab-indicator-active-indicator-color: transparent;
     }
 
+    .mat-mdc-tab-nav-panel {
+      padding: 2rem 0;
+    }
+
     @media (max-width: 575.98px) {
       .mat-mdc-tab-link {
         --mdc-secondary-navigation-tab-container-height: 3rem;
@@ -567,10 +575,6 @@ ngx-skeleton-loader {
           }
         }
       }
-
-      .mat-mdc-tab-nav-panel {
-        padding: 2rem 0;
-      }
     }
   }
 }