Release 1.254.0 (#1856)

* Improve queue jobs implementation

* Update changelog

CHANGELOG.md

@@ -5,6 +5,103 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 1.254.0 - 2023-04-14
+
+### Changed
+
+- Improved the queue jobs implementation by adding in bulk
+- Improved the queue jobs implementation by introducing unique job ids
+
+## 1.253.0 - 2023-04-14
+
+### Changed
+
+- Reduced the execution interval of the data gathering to every 12 hours
+
+### Fixed
+
+- Fixed the background color of dialogs in dark mode
+
+## 1.252.2 - 2023-04-11
+
+### Changed
+
+- Deprecated the `auth` endpoint of the login with _Security Token_ (`GET`)
+
+## 1.252.1 - 2023-04-10
+
+### Changed
+
+- Changed the slide toggles to checkboxes on the account page
+- Changed the slide toggles to checkboxes in the admin control panel
+- Decreased the density of the theme
+- Migrated the style of various components to `@angular/material` `15` (mdc)
+- Upgraded `@angular/cdk` and `@angular/material` from version `15.2.5` to `15.2.6`
+- Upgraded `bull` from version `4.10.2` to `4.10.4`
+
+## 1.251.0 - 2023-04-07
+
+### Changed
+
+- Improved the activities import for `csv` files exported by _Interactive Brokers_
+- Improved the rendering of the chart ticks (`0.5K` → `500`)
+- Increased the historical market data gathering of currency pairs to 10+ years
+- Improved the content of the Frequently Asked Questions (FAQ) page
+- Improved the content of the pricing page
+- Changed the `auth` endpoint of the login with _Security Token_ from `GET` to `POST`
+- Changed the `auth` endpoint of the _Internet Identity_ login provider from `GET` to `POST`
+- Migrated the style of the `libs` components to `@angular/material` `15` (mdc)
+  - `ActivitiesFilterComponent`
+  - `ActivitiesTableComponent`
+  - `BenchmarkComponent`
+  - `HoldingsTableComponent`
+- Upgraded `angular` from version `15.1.5` to `15.2.5`
+- Upgraded `Nx` from version `15.7.2` to `15.9.2`
+
+## 1.250.0 - 2023-04-02
+
+### Added
+
+- Added support for multiple subscription offers
+
+### Changed
+
+- Improved the portfolio evolution chart (ignore first item)
+- Improved the accounts import by handling the platform
+
+### Fixed
+
+- Fixed an issue with more than 50 activities in the activities import (`dryRun`)
+
+## 1.249.0 - 2023-03-27
+
+### Added
+
+- Extended the testimonial section on the landing page
+
+### Changed
+
+- Improved the loading state of the value component on the allocations page
+- Improved the value component by always showing the label (also while loading)
+- Improved the language localization for German (`de`)
+
+### Fixed
+
+- Fixed an issue with the algebraic sign in the value component
+
+## 1.248.0 - 2023-03-25
+
+### Added
+
+- Added a blog post: _Ghostfolio reaches 1’000 Stars on GitHub_
+- Added a breadcrumb navigation to the blog post pages
+
+### Changed
+
+- Refactored the calculation of the chart
+- Hid the platform selector if no platforms are available in the create or update account dialog
+- Upgraded `ng-extract-i18n-merge` from version `2.5.0` to `2.6.0`
+
 ## 1.247.0 - 2023-03-23
 
 ### Added
@@ -210,7 +307,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added support to export accounts
-- Added suport to import accounts
+- Added support to import accounts
 
 ### Changed
 

README.md

@@ -200,7 +200,9 @@ Set the header for each request as follows:
 "Authorization": "Bearer eyJh..."
 ```
 
-You can get the _Bearer Token_ via `GET http://localhost:3333/api/v1/auth/anonymous/<INSERT_SECURITY_TOKEN_OF_ACCOUNT>` or `curl -s http://localhost:3333/api/v1/auth/anonymous/<INSERT_SECURITY_TOKEN_OF_ACCOUNT>`.
+You can get the _Bearer Token_ via `POST http://localhost:3333/api/v1/auth/anonymous` (Body: `{ accessToken: <INSERT_SECURITY_TOKEN_OF_ACCOUNT> }`)
+
+Deprecated: `GET http://localhost:3333/api/v1/auth/anonymous/<INSERT_SECURITY_TOKEN_OF_ACCOUNT>` or `curl -s http://localhost:3333/api/v1/auth/anonymous/<INSERT_SECURITY_TOKEN_OF_ACCOUNT>`.
 
 ### Import Activities
 

apps/api/jest.config.ts

@@ -2,13 +2,14 @@
 export default {
   displayName: 'api',
 
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/tsconfig.spec.json'
-    }
-  },
+  globals: {},
   transform: {
-    '^.+\\.[tj]s$': 'ts-jest'
+    '^.+\\.[tj]s$': [
+      'ts-jest',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json'
+      }
+    ]
   },
   moduleFileExtensions: ['ts', 'js', 'html'],
   coverageDirectory: '../../coverage/apps/api',

apps/api/src/app/admin/admin.controller.ts

@@ -107,7 +107,10 @@ export class AdminController {
           dataSource,
           symbol
         },
-        GATHER_ASSET_PROFILE_PROCESS_OPTIONS
+        {
+          ...GATHER_ASSET_PROFILE_PROCESS_OPTIONS,
+          jobId: `${dataSource}-${symbol}}`
+        }
       );
     }
 
@@ -138,7 +141,10 @@ export class AdminController {
           dataSource,
           symbol
         },
-        GATHER_ASSET_PROFILE_PROCESS_OPTIONS
+        {
+          ...GATHER_ASSET_PROFILE_PROCESS_OPTIONS,
+          jobId: `${dataSource}-${symbol}}`
+        }
       );
     }
   }
@@ -167,7 +173,10 @@ export class AdminController {
         dataSource,
         symbol
       },
-      GATHER_ASSET_PROFILE_PROCESS_OPTIONS
+      {
+        ...GATHER_ASSET_PROFILE_PROCESS_OPTIONS,
+        jobId: `${dataSource}-${symbol}}`
+      }
     );
   }
 

apps/api/src/app/admin/admin.service.ts

@@ -100,6 +100,7 @@ export class AdminService {
             dataSource,
             marketDataItemCount,
             symbol,
+            assetClass: 'CASH',
             countriesCount: 0,
             sectorsCount: 0
           };
@@ -186,8 +187,11 @@ export class AdminService {
     ]);
 
     return {
-      assetProfile,
-      marketData
+      marketData,
+      assetProfile: assetProfile ?? {
+        symbol,
+        currency: '-'
+      }
     };
   }
 

apps/api/src/app/auth/auth.controller.ts

@@ -33,8 +33,11 @@ export class AuthController {
     private readonly webAuthService: WebAuthService
   ) {}
 
+  /**
+   * @deprecated
+   */
   @Get('anonymous/:accessToken')
-  public async accessTokenLogin(
+  public async accessTokenLoginGet(
     @Param('accessToken') accessToken: string
   ): Promise<OAuthResponse> {
     try {
@@ -50,6 +53,23 @@ export class AuthController {
     }
   }
 
+  @Post('anonymous')
+  public async accessTokenLogin(
+    @Body() body: { accessToken: string }
+  ): Promise<OAuthResponse> {
+    try {
+      const authToken = await this.authService.validateAnonymousLogin(
+        body.accessToken
+      );
+      return { authToken };
+    } catch {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
+    }
+  }
+
   @Get('google')
   @UseGuards(AuthGuard('google'))
   public googleLogin() {
@@ -81,13 +101,13 @@ export class AuthController {
     }
   }
 
-  @Get('internet-identity/:principalId')
+  @Post('internet-identity')
   public async internetIdentityLogin(
-    @Param('principalId') principalId: string
+    @Body() body: { principalId: string }
   ): Promise<OAuthResponse> {
     try {
       const authToken = await this.authService.validateInternetIdentityLogin(
-        principalId
+        body.principalId
       );
       return { authToken };
     } catch {

apps/api/src/app/frontend.middleware.ts

@@ -87,6 +87,13 @@ export class FrontendMiddleware implements NestMiddleware {
     ) {
       featureGraphicPath = 'assets/images/blog/ghostfolio-x-umbrel.png';
       title = `Ghostfolio meets Umbrel - ${title}`;
+    } else if (
+      request.path.startsWith(
+        '/en/blog/2023/03/ghostfolio-reaches-1000-stars-on-github'
+      )
+    ) {
+      featureGraphicPath = 'assets/images/blog/1000-stars-on-github.jpg';
+      title = `Ghostfolio reaches 1’000 Stars on GitHub - ${title}`;
     }
 
     if (

apps/api/src/app/import/import.module.ts

@@ -13,6 +13,7 @@ import { Module } from '@nestjs/common';
 
 import { ImportController } from './import.controller';
 import { ImportService } from './import.service';
+import { PlatformModule } from '@ghostfolio/api/services/platform/platform.module';
 
 @Module({
   controllers: [ImportController],
@@ -24,6 +25,7 @@ import { ImportService } from './import.service';
     DataProviderModule,
     ExchangeRateDataModule,
     OrderModule,
+    PlatformModule,
     PortfolioModule,
     PrismaModule,
     RedisCacheModule,

apps/api/src/app/import/import.service.ts

@@ -6,6 +6,7 @@ import { OrderService } from '@ghostfolio/api/app/order/order.service';
 import { PortfolioService } from '@ghostfolio/api/app/portfolio/portfolio.service';
 import { DataProviderService } from '@ghostfolio/api/services/data-provider/data-provider.service';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
+import { PlatformService } from '@ghostfolio/api/services/platform/platform.service';
 import { SymbolProfileService } from '@ghostfolio/api/services/symbol-profile.service';
 import { parseDate } from '@ghostfolio/common/helper';
 import { UniqueAsset } from '@ghostfolio/common/interfaces';
@@ -14,7 +15,7 @@ import {
   OrderWithAccount
 } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
-import { SymbolProfile } from '@prisma/client';
+import { Prisma, SymbolProfile } from '@prisma/client';
 import Big from 'big.js';
 import { endOfToday, isAfter, isSameDay, parseISO } from 'date-fns';
 import { v4 as uuidv4 } from 'uuid';
@@ -26,6 +27,7 @@ export class ImportService {
     private readonly dataProviderService: DataProviderService,
     private readonly exchangeRateDataService: ExchangeRateDataService,
     private readonly orderService: OrderService,
+    private readonly platformService: PlatformService,
     private readonly portfolioService: PortfolioService,
     private readonly symbolProfileService: SymbolProfileService
   ) {}
@@ -118,15 +120,18 @@ export class ImportService {
     const accountIdMapping: { [oldAccountId: string]: string } = {};
 
     if (!isDryRun && accountsDto?.length) {
-      const existingAccounts = await this.accountService.accounts({
-        where: {
-          id: {
-            in: accountsDto.map(({ id }) => {
-              return id;
-            })
+      const [existingAccounts, existingPlatforms] = await Promise.all([
+        this.accountService.accounts({
+          where: {
+            id: {
+              in: accountsDto.map(({ id }) => {
+                return id;
+              })
+            }
           }
-        }
-      });
+        }),
+        this.platformService.get()
+      ]);
 
       for (const account of accountsDto) {
         // Check if there is any existing account with the same ID
@@ -146,19 +151,24 @@ export class ImportService {
             delete account.id;
           }
 
-          const newAccountObject = {
+          let accountObject: Prisma.AccountCreateInput = {
             ...account,
             User: { connect: { id: userId } }
           };
 
-          if (platformId) {
-            Object.assign(newAccountObject, {
+          if (
+            existingPlatforms.some(({ id }) => {
+              return id === platformId;
+            })
+          ) {
+            accountObject = {
+              ...accountObject,
               Platform: { connect: { id: platformId } }
-            });
+            };
           }
 
           const newAccount = await this.accountService.createAccount(
-            newAccountObject,
+            accountObject,
             userId
           );
 

apps/api/src/app/info/info.service.ts

@@ -22,6 +22,7 @@ import { InfoItem } from '@ghostfolio/common/interfaces';
 import { Statistics } from '@ghostfolio/common/interfaces/statistics.interface';
 import { Subscription } from '@ghostfolio/common/interfaces/subscription.interface';
 import { permissions } from '@ghostfolio/common/permissions';
+import { SubscriptionOffer } from '@ghostfolio/common/types';
 import { Injectable, Logger } from '@nestjs/common';
 import { JwtService } from '@nestjs/jwt';
 import * as bent from 'bent';
@@ -304,19 +305,17 @@ export class InfoService {
     return statistics;
   }
 
-  private async getSubscriptions(): Promise<Subscription[]> {
+  private async getSubscriptions(): Promise<{
+    [offer in SubscriptionOffer]: Subscription;
+  }> {
     if (!this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
       return undefined;
     }
 
-    let subscriptions: Subscription[] = [];
-
     const stripeConfig = (await this.prismaService.property.findUnique({
       where: { key: PROPERTY_STRIPE_CONFIG }
     })) ?? { value: '{}' };
 
-    subscriptions = [JSON.parse(stripeConfig.value)];
-
-    return subscriptions;
+    return JSON.parse(stripeConfig.value);
   }
 }

apps/api/src/app/order/order.service.ts

@@ -118,7 +118,10 @@ export class OrderService {
         dataSource: data.SymbolProfile.connectOrCreate.create.dataSource,
         symbol: data.SymbolProfile.connectOrCreate.create.symbol
       },
-      GATHER_ASSET_PROFILE_PROCESS_OPTIONS
+      {
+        ...GATHER_ASSET_PROFILE_PROCESS_OPTIONS,
+        jobId: `${data.SymbolProfile.connectOrCreate.create.dataSource}-${data.SymbolProfile.connectOrCreate.create.symbol}}`
+      }
     );
 
     const isDraft = isAfter(data.date as Date, endOfToday());

apps/api/src/app/portfolio/portfolio-calculator.ts

@@ -182,10 +182,10 @@ export class PortfolioCalculator {
         return isBefore(parseDate(transactionPoint.date), end);
       }) ?? [];
 
-    const firstIndex = transactionPointsBeforeEndDate.length;
+    const currencies: { [symbol: string]: string } = {};
     const dates: Date[] = [];
     const dataGatheringItems: IDataGatheringItem[] = [];
-    const currencies: { [symbol: string]: string } = {};
+    const firstIndex = transactionPointsBeforeEndDate.length;
 
     let day = start;
 
@@ -235,27 +235,24 @@ export class PortfolioCalculator {
       }
     }
 
-    const currentValuesBySymbol: {
-      [symbol: string]: { [date: string]: Big };
+    const valuesByDate: {
+      [date: string]: {
+        maxTotalInvestmentValue: Big;
+        totalCurrentValue: Big;
+        totalInvestmentValue: Big;
+        totalNetPerformanceValue: Big;
+      };
     } = {};
 
-    const investmentValuesBySymbol: {
-      [symbol: string]: { [date: string]: Big };
+    const valuesBySymbol: {
+      [symbol: string]: {
+        currentValues: { [date: string]: Big };
+        investmentValues: { [date: string]: Big };
+        maxInvestmentValues: { [date: string]: Big };
+        netPerformanceValues: { [date: string]: Big };
+      };
     } = {};
 
-    const maxInvestmentValuesBySymbol: {
-      [symbol: string]: { [date: string]: Big };
-    } = {};
-
-    const netPerformanceValuesBySymbol: {
-      [symbol: string]: { [date: string]: Big };
-    } = {};
-
-    const totalCurrentValues: { [date: string]: Big } = {};
-    const totalNetPerformanceValues: { [date: string]: Big } = {};
-    const totalInvestmentValues: { [date: string]: Big } = {};
-    const maxTotalInvestmentValues: { [date: string]: Big } = {};
-
     for (const symbol of Object.keys(symbols)) {
       const {
         currentValues,
@@ -271,68 +268,67 @@ export class PortfolioCalculator {
         isChartMode: true
       });
 
-      currentValuesBySymbol[symbol] = currentValues;
-      netPerformanceValuesBySymbol[symbol] = netPerformanceValues;
-      investmentValuesBySymbol[symbol] = investmentValues;
-      maxInvestmentValuesBySymbol[symbol] = maxInvestmentValues;
+      valuesBySymbol[symbol] = {
+        currentValues,
+        investmentValues,
+        maxInvestmentValues,
+        netPerformanceValues
+      };
     }
 
     for (const currentDate of dates) {
       const dateString = format(currentDate, DATE_FORMAT);
 
-      for (const symbol of Object.keys(netPerformanceValuesBySymbol)) {
-        totalCurrentValues[dateString] =
-          totalCurrentValues[dateString] ?? new Big(0);
+      for (const symbol of Object.keys(valuesBySymbol)) {
+        const symbolValues = valuesBySymbol[symbol];
 
-        if (currentValuesBySymbol[symbol]?.[dateString]) {
-          totalCurrentValues[dateString] = totalCurrentValues[dateString].add(
-            currentValuesBySymbol[symbol][dateString]
-          );
-        }
+        const currentValue =
+          symbolValues.currentValues?.[dateString] ?? new Big(0);
+        const investmentValue =
+          symbolValues.investmentValues?.[dateString] ?? new Big(0);
+        const maxInvestmentValue =
+          symbolValues.maxInvestmentValues?.[dateString] ?? new Big(0);
+        const netPerformanceValue =
+          symbolValues.netPerformanceValues?.[dateString] ?? new Big(0);
 
-        totalNetPerformanceValues[dateString] =
-          totalNetPerformanceValues[dateString] ?? new Big(0);
-
-        if (netPerformanceValuesBySymbol[symbol]?.[dateString]) {
-          totalNetPerformanceValues[dateString] = totalNetPerformanceValues[
-            dateString
-          ].add(netPerformanceValuesBySymbol[symbol][dateString]);
-        }
-
-        totalInvestmentValues[dateString] =
-          totalInvestmentValues[dateString] ?? new Big(0);
-
-        if (investmentValuesBySymbol[symbol]?.[dateString]) {
-          totalInvestmentValues[dateString] = totalInvestmentValues[
-            dateString
-          ].add(investmentValuesBySymbol[symbol][dateString]);
-        }
-
-        maxTotalInvestmentValues[dateString] =
-          maxTotalInvestmentValues[dateString] ?? new Big(0);
-
-        if (maxInvestmentValuesBySymbol[symbol]?.[dateString]) {
-          maxTotalInvestmentValues[dateString] = maxTotalInvestmentValues[
-            dateString
-          ].add(maxInvestmentValuesBySymbol[symbol][dateString]);
-        }
+        valuesByDate[dateString] = {
+          totalCurrentValue: (
+            valuesByDate[dateString]?.totalCurrentValue ?? new Big(0)
+          ).add(currentValue),
+          totalInvestmentValue: (
+            valuesByDate[dateString]?.totalInvestmentValue ?? new Big(0)
+          ).add(investmentValue),
+          maxTotalInvestmentValue: (
+            valuesByDate[dateString]?.maxTotalInvestmentValue ?? new Big(0)
+          ).add(maxInvestmentValue),
+          totalNetPerformanceValue: (
+            valuesByDate[dateString]?.totalNetPerformanceValue ?? new Big(0)
+          ).add(netPerformanceValue)
+        };
       }
     }
 
-    return Object.keys(totalNetPerformanceValues).map((date) => {
-      const netPerformanceInPercentage = maxTotalInvestmentValues[date].eq(0)
+    return Object.entries(valuesByDate).map(([date, values]) => {
+      const {
+        maxTotalInvestmentValue,
+        totalCurrentValue,
+        totalInvestmentValue,
+        totalNetPerformanceValue
+      } = values;
+
+      const netPerformanceInPercentage = maxTotalInvestmentValue.eq(0)
         ? 0
-        : totalNetPerformanceValues[date]
-            .div(maxTotalInvestmentValues[date])
+        : totalNetPerformanceValue
+            .div(maxTotalInvestmentValue)
             .mul(100)
             .toNumber();
 
       return {
         date,
         netPerformanceInPercentage,
-        netPerformance: totalNetPerformanceValues[date].toNumber(),
-        totalInvestment: totalInvestmentValues[date].toNumber(),
-        value: totalCurrentValues[date].toNumber()
+        netPerformance: totalNetPerformanceValue.toNumber(),
+        totalInvestment: totalInvestmentValue.toNumber(),
+        value: totalCurrentValue.toNumber()
       };
     });
   }

apps/api/src/app/portfolio/portfolio.service.ts

@@ -37,8 +37,7 @@ import {
   PortfolioSummary,
   Position,
   TimelinePosition,
-  UserSettings,
-  UserWithSettings
+  UserSettings
 } from '@ghostfolio/common/interfaces';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
 import type {
@@ -47,7 +46,8 @@ import type {
   GroupBy,
   Market,
   OrderWithAccount,
-  RequestWithUser
+  RequestWithUser,
+  UserWithSettings
 } from '@ghostfolio/common/types';
 import { Inject, Injectable } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';

apps/api/src/app/subscription/subscription.service.ts

@@ -4,9 +4,9 @@ import {
   DEFAULT_LANGUAGE_CODE,
   PROPERTY_STRIPE_CONFIG
 } from '@ghostfolio/common/config';
-import { UserWithSettings } from '@ghostfolio/common/interfaces';
 import { Subscription as SubscriptionInterface } from '@ghostfolio/common/interfaces/subscription.interface';
-import { SubscriptionType } from '@ghostfolio/common/types/subscription.type';
+import { UserWithSettings } from '@ghostfolio/common/types';
+import { SubscriptionType } from '@ghostfolio/common/types/subscription-type.type';
 import { Injectable, Logger } from '@nestjs/common';
 import { Subscription } from '@prisma/client';
 import { addMilliseconds, isBefore } from 'date-fns';
@@ -123,7 +123,9 @@ export class SubscriptionService {
     }
   }
 
-  public getSubscription(aSubscriptions: Subscription[]) {
+  public getSubscription(
+    aSubscriptions: Subscription[]
+  ): UserWithSettings['subscription'] {
     if (aSubscriptions.length > 0) {
       const latestSubscription = aSubscriptions.reduce((a, b) => {
         return new Date(a.expiresAt) > new Date(b.expiresAt) ? a : b;
@@ -131,12 +133,14 @@ export class SubscriptionService {
 
       return {
         expiresAt: latestSubscription.expiresAt,
+        offer: latestSubscription.price === 0 ? 'default' : 'renewal',
         type: isBefore(new Date(), latestSubscription.expiresAt)
           ? SubscriptionType.Premium
           : SubscriptionType.Basic
       };
     } else {
       return {
+        offer: 'default',
         type: SubscriptionType.Basic
       };
     }

apps/api/src/app/symbol/symbol.service.ts

@@ -5,10 +5,8 @@ import {
 } from '@ghostfolio/api/services/interfaces/interfaces';
 import { MarketDataService } from '@ghostfolio/api/services/market-data.service';
 import { DATE_FORMAT } from '@ghostfolio/common/helper';
-import {
-  HistoricalDataItem,
-  UserWithSettings
-} from '@ghostfolio/common/interfaces';
+import { HistoricalDataItem } from '@ghostfolio/common/interfaces';
+import { UserWithSettings } from '@ghostfolio/common/types';
 import { Injectable, Logger } from '@nestjs/common';
 import { format, subDays } from 'date-fns';
 

apps/api/src/app/user/user.service.ts

@@ -4,16 +4,13 @@ import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { PropertyService } from '@ghostfolio/api/services/property/property.service';
 import { TagService } from '@ghostfolio/api/services/tag/tag.service';
 import { PROPERTY_IS_READ_ONLY_MODE, locale } from '@ghostfolio/common/config';
-import {
-  User as IUser,
-  UserSettings,
-  UserWithSettings
-} from '@ghostfolio/common/interfaces';
+import { User as IUser, UserSettings } from '@ghostfolio/common/interfaces';
 import {
   getPermissions,
   hasRole,
   permissions
 } from '@ghostfolio/common/permissions';
+import { UserWithSettings } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
 import { Prisma, Role, User } from '@prisma/client';
 import { sortBy } from 'lodash';

apps/api/src/services/cron.service.ts

@@ -45,7 +45,10 @@ export class CronService {
           dataSource,
           symbol
         },
-        GATHER_ASSET_PROFILE_PROCESS_OPTIONS
+        {
+          ...GATHER_ASSET_PROFILE_PROCESS_OPTIONS,
+          jobId: `${dataSource}-${symbol}}`
+        }
       );
     }
   }

apps/api/src/services/data-gathering.service.ts

@@ -2,8 +2,7 @@ import { SymbolProfileService } from '@ghostfolio/api/services/symbol-profile.se
 import {
   DATA_GATHERING_QUEUE,
   GATHER_HISTORICAL_MARKET_DATA_PROCESS,
-  GATHER_HISTORICAL_MARKET_DATA_PROCESS_OPTIONS,
-  QUEUE_JOB_STATUS_LIST
+  GATHER_HISTORICAL_MARKET_DATA_PROCESS_OPTIONS
 } from '@ghostfolio/common/config';
 import { DATE_FORMAT, resetHours } from '@ghostfolio/common/helper';
 import { UniqueAsset } from '@ghostfolio/common/interfaces';
@@ -11,7 +10,7 @@ import { InjectQueue } from '@nestjs/bull';
 import { Inject, Injectable, Logger } from '@nestjs/common';
 import { DataSource } from '@prisma/client';
 import { JobOptions, Queue } from 'bull';
-import { format, subDays } from 'date-fns';
+import { format, min, subDays, subYears } from 'date-fns';
 
 import { DataProviderService } from './data-provider/data-provider.service';
 import { DataEnhancerInterface } from './data-provider/interfaces/data-enhancer.interface';
@@ -34,17 +33,14 @@ export class DataGatheringService {
     private readonly symbolProfileService: SymbolProfileService
   ) {}
 
-  public async addJobToQueue(name: string, data: any, options?: JobOptions) {
-    const hasJob = await this.hasJob(name, data);
+  public async addJobToQueue(name: string, data: any, opts?: JobOptions) {
+    return this.dataGatheringQueue.add(name, data, opts);
+  }
 
-    if (hasJob) {
-      Logger.log(
-        `Job ${name} with data ${JSON.stringify(data)} already exists.`,
-        'DataGatheringService'
-      );
-    } else {
-      return this.dataGatheringQueue.add(name, data, options);
-    }
+  public async addJobsToQueue(
+    jobs: { data: any; name: string; opts?: JobOptions }[]
+  ) {
+    return this.dataGatheringQueue.addBulk(jobs);
   }
 
   public async gather7Days() {
@@ -209,17 +205,22 @@ export class DataGatheringService {
   }
 
   public async gatherSymbols(aSymbolsWithStartDate: IDataGatheringItem[]) {
-    for (const { dataSource, date, symbol } of aSymbolsWithStartDate) {
-      await this.addJobToQueue(
-        GATHER_HISTORICAL_MARKET_DATA_PROCESS,
-        {
-          dataSource,
-          date,
-          symbol
-        },
-        GATHER_HISTORICAL_MARKET_DATA_PROCESS_OPTIONS
-      );
-    }
+    await this.addJobsToQueue(
+      aSymbolsWithStartDate.map(({ dataSource, date, symbol }) => {
+        return {
+          data: {
+            dataSource,
+            date,
+            symbol
+          },
+          name: GATHER_HISTORICAL_MARKET_DATA_PROCESS,
+          opts: {
+            ...GATHER_HISTORICAL_MARKET_DATA_PROCESS_OPTIONS,
+            jobId: `${dataSource}-${symbol}-${format(date, DATE_FORMAT)}`
+          }
+        };
+      })
+    );
   }
 
   public async getSymbolsMax(): Promise<IDataGatheringItem[]> {
@@ -236,7 +237,7 @@ export class DataGatheringService {
         return {
           dataSource,
           symbol,
-          date: startDate
+          date: min([startDate, subYears(new Date(), 10)])
         };
       });
 
@@ -341,18 +342,4 @@ export class DataGatheringService {
 
     return [...currencyPairsToGather, ...symbolProfilesToGather];
   }
-
-  private async hasJob(name: string, data: any) {
-    const jobs = await this.dataGatheringQueue.getJobs(
-      QUEUE_JOB_STATUS_LIST.filter((status) => {
-        return status !== 'completed';
-      })
-    );
-
-    return jobs.some((job) => {
-      return (
-        job.name === name && JSON.stringify(job.data) === JSON.stringify(data)
-      );
-    });
-  }
 }

apps/api/src/services/data-provider/data-provider.service.ts

@@ -8,7 +8,7 @@ import {
 } from '@ghostfolio/api/services/interfaces/interfaces';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { DATE_FORMAT } from '@ghostfolio/common/helper';
-import { UserWithSettings } from '@ghostfolio/common/interfaces';
+import { UserWithSettings } from '@ghostfolio/common/types';
 import { Granularity } from '@ghostfolio/common/types';
 import { Inject, Injectable, Logger } from '@nestjs/common';
 import { DataSource, MarketData, SymbolProfile } from '@prisma/client';

apps/api/src/services/platform/platform.module.ts

@@ -0,0 +1,11 @@
+import { PrismaModule } from '@ghostfolio/api/services/prisma.module';
+import { Module } from '@nestjs/common';
+
+import { PlatformService } from './platform.service';
+
+@Module({
+  exports: [PlatformService],
+  imports: [PrismaModule],
+  providers: [PlatformService]
+})
+export class PlatformModule {}

apps/api/src/services/platform/platform.service.ts

@@ -0,0 +1,11 @@
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { Injectable } from '@nestjs/common';
+
+@Injectable()
+export class PlatformService {
+  public constructor(private readonly prismaService: PrismaService) {}
+
+  public async get() {
+    return this.prismaService.platform.findMany();
+  }
+}

apps/client/jest.config.ts

@@ -3,12 +3,7 @@ export default {
   displayName: 'client',
 
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/tsconfig.spec.json',
-      stringifyContentPathRegex: '\\.(html|svg)$'
-    }
-  },
+  globals: {},
   coverageDirectory: '../../coverage/apps/client',
   snapshotSerializers: [
     'jest-preset-angular/build/serializers/no-ng-attributes',
@@ -16,7 +11,13 @@ export default {
     'jest-preset-angular/build/serializers/html-comment'
   ],
   transform: {
-    '^.+.(ts|mjs|js|html)$': 'jest-preset-angular'
+    '^.+.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$'
+      }
+    ]
   },
   transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],
   preset: '../../jest.preset.js'

apps/client/src/app/app-routing.module.ts

@@ -130,6 +130,13 @@ const routes: Routes = [
         './pages/blog/2023/02/ghostfolio-meets-umbrel/ghostfolio-meets-umbrel-page.module'
       ).then((m) => m.GhostfolioMeetsUmbrelPageModule)
   },
+  {
+    path: 'blog/2023/03/ghostfolio-reaches-1000-stars-on-github',
+    loadChildren: () =>
+      import(
+        './pages/blog/2023/03/1000-stars-on-github/1000-stars-on-github-page.module'
+      ).then((m) => m.ThousandStarsOnGitHubPageModule)
+  },
   {
     path: 'demo',
     loadChildren: () =>

apps/client/src/app/app.module.ts

@@ -7,10 +7,10 @@ import {
   MAT_DATE_LOCALE,
   MatNativeDateModule
 } from '@angular/material/core';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
-import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ServiceWorkerModule } from '@angular/service-worker';

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

@@ -7,7 +7,7 @@ import {
   OnInit,
   Output
 } from '@angular/core';
-import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
+import { MatTableDataSource } from '@angular/material/table';
 import { DEFAULT_LANGUAGE_CODE } from '@ghostfolio/common/config';
 import { Access } from '@ghostfolio/common/interfaces';
 

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

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTableModule } from '@angular/material/table';
 
 import { AccessTableComponent } from './access-table.component';
 

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.scss

@@ -1,7 +1,7 @@
 :host {
   display: block;
 
-  .mat-dialog-content {
+  .mat-mdc-dialog-content {
     max-height: unset;
   }
 }

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts

@@ -6,10 +6,7 @@ import {
   OnDestroy,
   OnInit
 } from '@angular/core';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef
-} from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { downloadAsFile } from '@ghostfolio/common/helper';

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
 import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';

apps/client/src/app/components/accounts-table/accounts-table.component.scss

@@ -3,17 +3,7 @@
 :host {
   display: block;
 
-  .mat-table {
-    td {
-      &.mat-footer-cell {
-        border-top: 1px solid
-          rgba(
-            var(--palette-foreground-divider),
-            var(--palette-foreground-divider-alpha)
-          );
-      }
-    }
-
+  .mat-mdc-table {
     th {
       ::ng-deep {
         .mat-sort-header-container {
@@ -23,16 +13,3 @@
     }
   }
 }
-
-:host-context(.is-dark-theme) {
-  .mat-table {
-    td {
-      &.mat-footer-cell {
-        border-top-color: rgba(
-          var(--palette-foreground-divider-dark),
-          var(--palette-foreground-divider-dark-alpha)
-        );
-      }
-    }
-  }
-}

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

@@ -9,7 +9,7 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
+import { MatTableDataSource } from '@angular/material/table';
 import { MatSort } from '@angular/material/sort';
 import { Router } from '@angular/router';
 import { Account as AccountModel } from '@prisma/client';

apps/client/src/app/components/accounts-table/accounts-table.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTableModule } from '@angular/material/table';
 import { MatSortModule } from '@angular/material/sort';
 import { RouterModule } from '@angular/router';
 import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';

apps/client/src/app/components/admin-jobs/admin-jobs.html

@@ -2,10 +2,7 @@
   <div class="row">
     <div class="col">
       <form class="align-items-center d-flex" [formGroup]="filterForm">
-        <mat-form-field
-          appearance="outline"
-          class="compact-with-outline without-hint w-100"
-        >
+        <mat-form-field appearance="outline" class="w-100 without-hint">
           <mat-select formControlName="status">
             <mat-option></mat-option>
             <mat-option

apps/client/src/app/components/admin-jobs/admin-jobs.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
 
 import { AdminJobsComponent } from './admin-jobs.component';
 

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

@@ -7,7 +7,7 @@ import {
   OnInit,
   Output
 } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import {
   DATE_FORMAT,

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

@@ -6,10 +6,7 @@ import {
   OnDestroy
 } from '@angular/core';
 import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef
-} from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { Subject, takeUntil } from 'rxjs';
 

apps/client/src/app/components/admin-market-data-detail/market-data-detail-dialog/market-data-detail-dialog.html

@@ -1,6 +1,6 @@
 <form class="d-flex flex-column h-100">
   <h1 i18n mat-dialog-title>Details for {{ data.symbol }}</h1>
-  <div class="flex-grow-1 pt-3" mat-dialog-content>
+  <div class="flex-grow-1 py-3" mat-dialog-content>
     <div class="mb-3">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Date</mat-label>

apps/client/src/app/components/admin-market-data-detail/market-data-detail-dialog/market-data-detail-dialog.module.ts

@@ -5,7 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatDialogModule } from '@angular/material/dialog';
 
 import { MarketDataDetailDialog } from './market-data-detail-dialog.component';
 

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

@@ -1,7 +1,7 @@
 :host {
   display: block;
 
-  .mat-dialog-content {
+  .mat-mdc-dialog-content {
     max-height: unset;
 
     .mat-mdc-button {

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

@@ -6,8 +6,8 @@ import {
   OnInit,
   ViewChild
 } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
+import { MatDialog } from '@angular/material/dialog';
+import { MatTableDataSource } from '@angular/material/table';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AdminService } from '@ghostfolio/client/services/admin.service';

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

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTableModule } from '@angular/material/table';
 import { MatSortModule } from '@angular/material/sort';
 import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
 

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.scss

@@ -1,7 +1,7 @@
 :host {
   display: block;
 
-  .mat-dialog-content {
+  .mat-mdc-dialog-content {
     max-height: unset;
   }
 }

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

@@ -7,13 +7,11 @@ import {
   OnInit
 } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef
-} from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { UpdateAssetProfileDto } from '@ghostfolio/api/app/admin/update-asset-profile.dto';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import {
+  AdminMarketDataDetails,
   EnhancedSymbolProfile,
   UniqueAsset
 } from '@ghostfolio/common/interfaces';
@@ -33,7 +31,7 @@ import { AssetProfileDialogParams } from './interfaces/interfaces';
 })
 export class AssetProfileDialog implements OnDestroy, OnInit {
   public assetClass: string;
-  public assetProfile: EnhancedSymbolProfile;
+  public assetProfile: AdminMarketDataDetails['assetProfile'];
   public assetProfileForm = this.formBuilder.group({
     comment: '',
     symbolMapping: ''

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts

@@ -2,10 +2,10 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
 import { GfAdminMarketDataDetailModule } from '@ghostfolio/client/components/admin-market-data-detail/admin-market-data-detail.module';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
 import { GfValueModule } from '@ghostfolio/ui/value';

apps/client/src/app/components/admin-overview/admin-overview.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { MatLegacySlideToggleChange as MatSlideToggleChange } from '@angular/material/legacy-slide-toggle';
+import { MatCheckboxChange } from '@angular/material/checkbox';
 import { CacheService } from '@ghostfolio/client/services/cache.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
@@ -166,14 +166,14 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
     }
   }
 
-  public onReadOnlyModeChange(aEvent: MatSlideToggleChange) {
+  public onReadOnlyModeChange(aEvent: MatCheckboxChange) {
     this.putAdminSetting({
       key: PROPERTY_IS_READ_ONLY_MODE,
       value: aEvent.checked ? true : undefined
     });
   }
 
-  public onEnableUserSignupModeChange(aEvent: MatSlideToggleChange) {
+  public onEnableUserSignupModeChange(aEvent: MatCheckboxChange) {
     this.putAdminSetting({
       key: PROPERTY_IS_USER_SIGNUP_ENABLED,
       value: aEvent.checked ? undefined : false

apps/client/src/app/components/admin-overview/admin-overview.html

@@ -1,7 +1,7 @@
 <div class="container">
-  <div class="mb-5 row">
+  <div class="row">
     <div class="col">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
           <div class="d-flex my-3">
             <div class="w-50" i18n>User Count</div>
@@ -51,7 +51,7 @@
                   <td>
                     <button
                       *ngIf="customCurrencies.includes(exchangeRate.label2)"
-                      class="mini-icon mx-1 no-min-width px-2"
+                      class="h-100 mx-1 no-min-width px-2"
                       mat-button
                       (click)="onDeleteCurrency(exchangeRate.label2)"
                     >
@@ -101,21 +101,21 @@
           <div class="d-flex my-3">
             <div class="w-50" i18n>User Signup</div>
             <div class="w-50">
-              <mat-slide-toggle
+              <mat-checkbox
                 color="primary"
                 [checked]="info.globalPermissions.includes(permissions.createUserAccount)"
                 (change)="onEnableUserSignupModeChange($event)"
-              ></mat-slide-toggle>
+              ></mat-checkbox>
             </div>
           </div>
           <div *ngIf="hasPermissionToToggleReadOnlyMode" class="d-flex my-3">
             <div class="w-50" i18n>Read-only Mode</div>
             <div class="w-50">
-              <mat-slide-toggle
+              <mat-checkbox
                 color="primary"
                 [checked]="info?.isReadOnlyMode"
                 (change)="onReadOnlyModeChange($event)"
-              ></mat-slide-toggle>
+              ></mat-checkbox>
             </div>
           </div>
           <div *ngIf="hasPermissionForSystemMessage" class="d-flex my-3">
@@ -124,7 +124,7 @@
               <div *ngIf="info?.systemMessage">
                 <span>{{ info.systemMessage }}</span>
                 <button
-                  class="mini-icon mx-1 no-min-width px-2"
+                  class="h-100 mx-1 no-min-width px-2"
                   mat-button
                   (click)="onDeleteSystemMessage()"
                 >
@@ -159,7 +159,7 @@
                   </td>
                   <td>
                     <button
-                      class="mini-icon mx-1 no-min-width px-2"
+                      class="h-100 mx-1 no-min-width px-2"
                       mat-button
                       (click)="onDeleteCoupon(coupon.code)"
                     >
@@ -172,7 +172,7 @@
                 <form #couponForm="ngForm" class="align-items-center d-flex">
                   <mat-form-field
                     appearance="outline"
-                    class="compact-with-outline mr-2 without-hint"
+                    class="mr-2 without-hint"
                   >
                     <mat-select
                       name="duration"

apps/client/src/app/components/admin-overview/admin-overview.module.ts

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSelectModule } from '@angular/material/select';
 import { CacheService } from '@ghostfolio/client/services/cache.service';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
@@ -18,9 +18,9 @@ import { AdminOverviewComponent } from './admin-overview.component';
     FormsModule,
     GfValueModule,
     MatButtonModule,
+    MatCheckboxModule,
     MatCardModule,
     MatSelectModule,
-    MatSlideToggleModule,
     ReactiveFormsModule
   ],
   providers: [CacheService],

apps/client/src/app/components/admin-overview/admin-overview.scss

@@ -3,26 +3,8 @@
 :host {
   display: block;
 
-  .mat-button {
-    &.mini-icon {
-      line-height: 1.5;
-    }
-  }
-
-  .mat-flat-button {
-    ::ng-deep {
-      .mat-button-wrapper {
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        width: 100%;
-      }
-    }
-  }
-
   .subscription {
-    .mat-form-field {
+    .mat-mdc-form-field {
       max-width: 100%;
     }
   }

apps/client/src/app/components/admin-users/admin-users.html

@@ -4,44 +4,47 @@
       <div class="users">
         <table class="gf-table">
           <thead>
-            <tr class="mat-header-row">
-              <th class="mat-header-cell px-1 py-2 text-right">#</th>
-              <th class="mat-header-cell px-1 py-2" i18n>User</th>
+            <tr class="mat-mdc-header-row">
+              <th class="mat-mdc-header-cell px-1 py-2 text-right">#</th>
+              <th class="mat-mdc-header-cell px-1 py-2" i18n>User</th>
               <th
                 *ngIf="hasPermissionForSubscription"
-                class="mat-header-cell px-1 py-2"
+                class="mat-mdc-header-cell px-1 py-2"
               >
                 <ng-container i18n>Country</ng-container>
               </th>
-              <th class="mat-header-cell px-1 py-2">
+              <th class="mat-mdc-header-cell px-1 py-2">
                 <ng-container i18n>Registration</ng-container>
               </th>
-              <th class="mat-header-cell px-1 py-2 text-right">
+              <th class="mat-mdc-header-cell px-1 py-2 text-right">
                 <ng-container i18n>Accounts</ng-container>
               </th>
-              <th class="mat-header-cell px-1 py-2 text-right">
+              <th class="mat-mdc-header-cell px-1 py-2 text-right">
                 <ng-container i18n>Activities</ng-container>
               </th>
               <th
                 *ngIf="hasPermissionForSubscription"
-                class="mat-header-cell px-1 py-2 text-right"
+                class="mat-mdc-header-cell px-1 py-2 text-right"
               >
                 <ng-container i18n>Engagement per Day</ng-container>
               </th>
               <th
                 *ngIf="hasPermissionForSubscription"
-                class="mat-header-cell px-1 py-2"
+                class="mat-mdc-header-cell px-1 py-2"
                 i18n
               >
                 Last Request
               </th>
-              <th class="mat-header-cell px-1 py-2"></th>
+              <th class="mat-mdc-header-cell px-1 py-2"></th>
             </tr>
           </thead>
           <tbody>
-            <tr *ngFor="let userItem of users; let i = index" class="mat-row">
-              <td class="mat-cell px-1 py-2 text-right">{{ i + 1 }}</td>
-              <td class="mat-cell px-1 py-2">
+            <tr
+              *ngFor="let userItem of users; let i = index"
+              class="mat-mdc-row"
+            >
+              <td class="mat-mdc-cell px-1 py-2 text-right">{{ i + 1 }}</td>
+              <td class="mat-mdc-cell px-1 py-2">
                 <div class="d-flex align-items-center">
                   <span class="d-none d-sm-inline-block text-monospace"
                     >{{ userItem.id }}</span
@@ -59,23 +62,23 @@
               </td>
               <td
                 *ngIf="hasPermissionForSubscription"
-                class="mat-cell px-1 py-2"
+                class="mat-mdc-cell px-1 py-2"
               >
                 <span class="h5" [title]="userItem.country"
                   >{{ getEmojiFlag(userItem.country) }}</span
                 >
               </td>
-              <td class="mat-cell px-1 py-2">
+              <td class="mat-mdc-cell px-1 py-2">
                 {{ formatDistanceToNow(userItem.createdAt) }}
               </td>
-              <td class="mat-cell px-1 py-2 text-right">
+              <td class="mat-mdc-cell px-1 py-2 text-right">
                 <gf-value
                   class="d-inline-block justify-content-end"
                   [locale]="user?.settings?.locale"
                   [value]="userItem.accountCount"
                 ></gf-value>
               </td>
-              <td class="mat-cell px-1 py-2 text-right">
+              <td class="mat-mdc-cell px-1 py-2 text-right">
                 <gf-value
                   class="d-inline-block justify-content-end"
                   [locale]="user?.settings?.locale"
@@ -84,7 +87,7 @@
               </td>
               <td
                 *ngIf="hasPermissionForSubscription"
-                class="mat-cell px-1 py-2 text-right"
+                class="mat-mdc-cell px-1 py-2 text-right"
               >
                 <gf-value
                   class="d-inline-block justify-content-end"
@@ -95,11 +98,11 @@
               </td>
               <td
                 *ngIf="hasPermissionForSubscription"
-                class="mat-cell px-1 py-2"
+                class="mat-mdc-cell px-1 py-2"
               >
                 {{ formatDistanceToNow(userItem.lastActivity) }}
               </td>
-              <td class="mat-cell px-1 py-2">
+              <td class="mat-mdc-cell px-1 py-2">
                 <button
                   class="mx-1 no-min-width px-2"
                   mat-button

apps/client/src/app/components/admin-users/admin-users.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 

apps/client/src/app/components/admin-users/admin-users.scss

@@ -9,8 +9,8 @@
     table {
       min-width: 100%;
 
-      .mat-row,
-      .mat-header-row {
+      .mat-mdc-row,
+      .mat-mdc-header-row {
         width: 100%;
       }
     }

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 

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

@@ -3,5 +3,5 @@
   flex: 0 0 auto;
   margin-bottom: 0;
   min-height: 0;
-  padding: 0;
+  padding: 0 !important;
 }

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

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 
 import { DialogFooterComponent } from './dialog-footer.component';
 

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

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 
 import { DialogHeaderComponent } from './dialog-header.component';
 

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

@@ -6,7 +6,7 @@ import {
   OnChanges,
   Output
 } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { LoginWithAccessTokenDialog } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.component';
 import { DataService } from '@ghostfolio/client/services/data.service';

apps/client/src/app/components/home-holdings/home-holdings.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { PositionDetailDialog } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.component';
 import { ToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';

apps/client/src/app/components/home-holdings/home-holdings.html

@@ -9,8 +9,8 @@
   </div>
   <div class="row">
     <div class="align-items-center col-xs-12 col-md-8 offset-md-2">
-      <mat-card class="p-0">
-        <mat-card-content>
+      <mat-card appearance="outlined">
+        <mat-card-content class="p-0">
           <gf-positions
             [baseCurrency]="user?.settings?.baseCurrency"
             [deviceType]="deviceType"

apps/client/src/app/components/home-holdings/home-holdings.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
 import { GfPositionDetailDialogModule } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.module';
 import { GfPositionsModule } from '@ghostfolio/client/components/positions/positions.module';

apps/client/src/app/components/home-overview/home-overview.scss

@@ -2,6 +2,7 @@
 
 :host {
   display: block;
+  height: 100%;
 
   .chart-container {
     aspect-ratio: 16 / 9;

apps/client/src/app/components/home-summary/home-summary.component.ts

@@ -1,9 +1,9 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import {
-  MatLegacySnackBar as MatSnackBar,
-  MatLegacySnackBarRef as MatSnackBarRef,
-  LegacyTextOnlySnackBar as TextOnlySnackBar
-} from '@angular/material/legacy-snack-bar';
+  MatSnackBar,
+  MatSnackBarRef,
+  TextOnlySnackBar
+} from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';

apps/client/src/app/components/home-summary/home-summary.html

@@ -2,7 +2,7 @@
   <h3 class="d-none d-sm-block mb-3 text-center" i18n>Summary</h3>
   <div class="row">
     <div class="col-xs-12 col-md-8 offset-md-2">
-      <mat-card class="h-100">
+      <mat-card appearance="outlined">
         <mat-card-content>
           <gf-portfolio-summary
             [baseCurrency]="user?.settings?.baseCurrency"

apps/client/src/app/components/home-summary/home-summary.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
+import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
 import { GfPortfolioSummaryModule } from '@ghostfolio/client/components/portfolio-summary/portfolio-summary.module';
 

apps/client/src/app/components/investment-chart/investment-chart.component.ts

@@ -208,8 +208,10 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
 
         if (
           this.savingsRate &&
+          // @ts-ignore
           this.chart.options.plugins.annotation.annotations.savingsRate
         ) {
+          // @ts-ignore
           this.chart.options.plugins.annotation.annotations.savingsRate.value =
             this.savingsRate;
         }

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

@@ -1,9 +1,6 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef
-} from '@angular/material/legacy-dialog';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { InternetIdentityService } from '@ghostfolio/client/services/internet-identity.service';
 import {

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

@@ -4,9 +4,9 @@
   (closeButtonClicked)="onClose()"
 ></gf-dialog-header>
 
-<div mat-dialog-content>
+<div class="py-3" mat-dialog-content>
   <div class="align-items-center d-flex flex-column">
-    <mat-form-field appearance="outline" class="w-100">
+    <mat-form-field appearance="outline" class="without-hint w-100">
       <mat-label i18n>Security Token</mat-label>
       <textarea
         cdkTextareaAutosize
@@ -45,7 +45,7 @@
 </div>
 <div mat-dialog-actions>
   <div class="flex-grow-1">
-    <mat-checkbox i18n (change)="onChangeStaySignedIn($event)"
+    <mat-checkbox color="primary" i18n (change)="onChangeStaySignedIn($event)"
       >Stay signed in</mat-checkbox
     >
   </div>

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

@@ -2,11 +2,11 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 import { GfDialogHeaderModule } from '../dialog-header/dialog-header.module';
 import { LoginWithAccessTokenDialog } from './login-with-access-token-dialog.component';

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

@@ -1,23 +1,3 @@
 :host {
   display: block;
-
-  textarea.mat-input-element.cdk-textarea-autosize {
-    box-sizing: content-box;
-  }
-
-  .mat-checkbox {
-    ::ng-deep {
-      label {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .mat-form-field {
-    ::ng-deep {
-      .mat-form-field-wrapper {
-        padding-bottom: 0;
-      }
-    }
-  }
 }

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.component.scss

@@ -1,7 +1,7 @@
 :host {
   display: block;
 
-  .mat-dialog-content {
+  .mat-mdc-dialog-content {
     max-height: unset;
 
     gf-line-chart {

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.component.ts

@@ -6,10 +6,7 @@ import {
   OnDestroy,
   OnInit
 } from '@angular/core';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef
-} from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { DATE_FORMAT, downloadAsFile } from '@ghostfolio/common/helper';
 import {

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

@@ -257,9 +257,11 @@
     <div *ngIf="tags?.length > 0" class="row">
       <div class="col">
         <div class="h5" i18n>Tags</div>
-        <mat-chip-list>
-          <mat-chip *ngFor="let tag of tags">{{ tag.name }}</mat-chip>
-        </mat-chip-list>
+        <mat-chip-listbox>
+          <mat-chip-option *ngFor="let tag of tags" disabled
+            >{{ tag.name }}</mat-chip-option
+          >
+        </mat-chip-listbox>
       </div>
     </div>
 

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDialogModule } from '@angular/material/dialog';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
 import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';

apps/client/src/app/components/position/position.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatDialogModule } from '@angular/material/dialog';
 import { RouterModule } from '@angular/router';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { GfTrendIndicatorModule } from '@ghostfolio/ui/trend-indicator';

apps/client/src/app/components/positions/positions.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 
 import { GfPositionModule } from '../position/position.module';

apps/client/src/app/components/rules/rules.component.html

@@ -3,11 +3,14 @@
     <div class="col">
       <mat-card
         *ngIf="hasPermissionToCreateOrder && rules === null"
+        appearance="outlined"
         class="my-2 text-center"
       >
-        <gf-no-transactions-info-indicator
-          [hasBorder]="false"
-        ></gf-no-transactions-info-indicator>
+        <mat-card-content>
+          <gf-no-transactions-info-indicator
+            [hasBorder]="false"
+          ></gf-no-transactions-info-indicator
+        ></mat-card-content>
       </mat-card>
 
       <gf-rule *ngIf="rules?.length === 0" [isLoading]="true"></gf-rule>

apps/client/src/app/components/rules/rules.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 import { GfRuleModule } from '@ghostfolio/client/components/rule/rule.module';
 import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 

apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.component.ts

@@ -1,8 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef
-} from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 import { SubscriptionInterstitialDialogParams } from './interfaces/interfaces';
 

apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
 import { RouterModule } from '@angular/router';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 

apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.scss

@@ -1,7 +1,7 @@
 :host {
   display: block;
 
-  .mat-dialog-content {
+  .mat-mdc-dialog-content {
     max-height: unset;
 
     ion-icon[name='checkmark-circle-outline'] {

apps/client/src/app/components/toggle/toggle.component.html

@@ -6,6 +6,7 @@
   <mat-radio-button
     *ngFor="let option of options"
     [disabled]="isLoading"
+    [ngClass]="{ 'cursor-pointer': !isLoading }"
     [value]="option.value"
     >{{ option.label }}</mat-radio-button
   >

apps/client/src/app/components/toggle/toggle.component.scss

@@ -1,26 +1,24 @@
 :host {
   display: block;
 
-  .mat-radio-button {
+  .mat-mdc-radio-button {
     border-radius: 1rem;
     margin: 0 0.25rem;
     padding: 0.15rem 0.75rem;
 
-    &.mat-radio-checked {
+    &.mat-mdc-radio-checked {
       background-color: rgba(var(--dark-dividers));
     }
 
     ::ng-deep {
-      .mat-radio-container {
+      .mdc-radio {
         display: none;
       }
 
-      .mat-radio-label {
-        margin-bottom: 0;
-      }
-
-      .mat-radio-label-content {
+      label {
         color: rgba(var(--dark-primary-text), 1);
+        cursor: inherit;
+        margin: 0;
         padding: 0;
       }
     }
@@ -28,14 +26,14 @@
 }
 
 :host-context(.is-dark-theme) {
-  .mat-radio-button {
-    &.mat-radio-checked {
+  .mat-mdc-radio-button {
+    &.mat-mdc-radio-checked {
       background-color: rgba(var(--light-dividers));
       border: 1px solid rgba(var(--light-disabled-text));
     }
 
     ::ng-deep {
-      .mat-radio-label-content {
+      label {
         color: rgba(var(--light-primary-text), 1);
       }
     }

apps/client/src/app/components/toggle/toggle.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
+import { MatRadioModule } from '@angular/material/radio';
 
 import { ToggleComponent } from './toggle.component';
 

apps/client/src/app/core/http-response.interceptor.ts

@@ -8,10 +8,10 @@ import {
 } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import {
-  MatLegacySnackBar as MatSnackBar,
-  MatLegacySnackBarRef as MatSnackBarRef,
-  LegacyTextOnlySnackBar as TextOnlySnackBar
-} from '@angular/material/legacy-snack-bar';
+  MatSnackBar,
+  MatSnackBarRef,
+  TextOnlySnackBar
+} from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';

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

@@ -5,16 +5,13 @@ import {
   OnInit,
   ViewChild
 } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
+import { MatDialog } from '@angular/material/dialog';
 import {
-  MatLegacySlideToggle as MatSlideToggle,
-  MatLegacySlideToggleChange as MatSlideToggleChange
-} from '@angular/material/legacy-slide-toggle';
-import {
-  MatLegacySnackBar as MatSnackBar,
-  MatLegacySnackBarRef as MatSnackBarRef,
-  LegacyTextOnlySnackBar as TextOnlySnackBar
-} from '@angular/material/legacy-snack-bar';
+  MatSnackBar,
+  MatSnackBarRef,
+  TextOnlySnackBar
+} from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CreateAccessDto } from '@ghostfolio/api/app/access/create-access.dto';
 import { DataService } from '@ghostfolio/client/services/data.service';
@@ -39,7 +36,7 @@ import { CreateOrUpdateAccessDialog } from './create-or-update-access-dialog/cre
 })
 export class AccountPageComponent implements OnDestroy, OnInit {
   @ViewChild('toggleSignInWithFingerprintEnabledElement')
-  signInWithFingerprintElement: MatSlideToggle;
+  signInWithFingerprintElement: MatCheckbox;
 
   public accesses: Access[];
   public appearancePlaceholder = $localize`Auto`;
@@ -91,8 +88,6 @@ export class AccountPageComponent implements OnDestroy, OnInit {
       this.dataService.fetchInfo();
 
     this.baseCurrency = baseCurrency;
-    this.coupon = subscriptions?.[0]?.coupon;
-    this.couponId = subscriptions?.[0]?.couponId;
     this.currencies = currencies;
 
     this.hasPermissionForSubscription = hasPermission(
@@ -105,9 +100,6 @@ export class AccountPageComponent implements OnDestroy, OnInit {
       permissions.deleteAccess
     );
 
-    this.price = subscriptions?.[0]?.price;
-    this.priceId = subscriptions?.[0]?.priceId;
-
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((state) => {
@@ -141,6 +133,12 @@ export class AccountPageComponent implements OnDestroy, OnInit {
           this.locales.push(this.user.settings.locale);
           this.locales = uniq(this.locales.sort());
 
+          this.coupon = subscriptions?.[this.user.subscription.offer]?.coupon;
+          this.couponId =
+            subscriptions?.[this.user.subscription.offer]?.couponId;
+          this.price = subscriptions?.[this.user.subscription.offer]?.price;
+          this.priceId = subscriptions?.[this.user.subscription.offer]?.priceId;
+
           this.changeDetectorRef.markForCheck();
         }
       });
@@ -214,7 +212,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
       });
   }
 
-  public onExperimentalFeaturesChange(aEvent: MatSlideToggleChange) {
+  public onExperimentalFeaturesChange(aEvent: MatCheckboxChange) {
     this.dataService
       .putUserSetting({ isExperimentalFeatures: aEvent.checked })
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -279,7 +277,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
     }
   }
 
-  public onRestrictedViewChange(aEvent: MatSlideToggleChange) {
+  public onRestrictedViewChange(aEvent: MatCheckboxChange) {
     this.dataService
       .putUserSetting({ isRestrictedView: aEvent.checked })
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -297,7 +295,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
       });
   }
 
-  public onSignInWithFingerprintChange(aEvent: MatSlideToggleChange) {
+  public onSignInWithFingerprintChange(aEvent: MatCheckboxChange) {
     if (aEvent.checked) {
       this.registerDevice();
     } else {
@@ -313,7 +311,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
     }
   }
 
-  public onViewModeChange(aEvent: MatSlideToggleChange) {
+  public onViewModeChange(aEvent: MatCheckboxChange) {
     this.dataService
       .putUserSetting({ viewMode: aEvent.checked === true ? 'ZEN' : 'DEFAULT' })
       .pipe(takeUntil(this.unsubscribeSubject))

apps/client/src/app/pages/account/account-page.html

@@ -6,7 +6,7 @@
   </div>
   <div *ngIf="user?.settings" class="mb-5 row">
     <div class="col">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
           <div
             *ngIf="hasPermissionToUpdateUserSettings && user?.subscription"
@@ -34,7 +34,16 @@
                     mat-flat-button
                     (click)="onCheckout(priceId)"
                   >
-                    <ng-container i18n>Upgrade</ng-container>
+                    <ng-container
+                      *ngIf="user.subscription.offer === 'default'"
+                      i18n
+                      >Upgrade</ng-container
+                    >
+                    <ng-container
+                      *ngIf="user.subscription.offer === 'renewal'"
+                      i18n
+                      >Renew</ng-container
+                    >
                   </button>
                   <div *ngIf="price" class="mt-1">
                     <ng-container *ngIf="coupon"
@@ -79,12 +88,12 @@
               </div>
             </div>
             <div class="pl-1 w-50">
-              <mat-slide-toggle
+              <mat-checkbox
                 color="primary"
                 [checked]="user.settings.isRestrictedView"
                 [disabled]="!hasPermissionToUpdateUserSettings"
                 (change)="onRestrictedViewChange($event)"
-              ></mat-slide-toggle>
+              ></mat-checkbox>
             </div>
           </div>
           <div class="d-flex mt-4 py-1">
@@ -96,7 +105,7 @@
                 <div class="pl-1 w-50">
                   <mat-form-field
                     appearance="outline"
-                    class="compact-with-outline w-100 without-hint"
+                    class="w-100 without-hint"
                   >
                     <mat-select
                       name="baseCurrency"
@@ -120,7 +129,7 @@
                 <div class="pl-1 w-50">
                   <mat-form-field
                     appearance="outline"
-                    class="compact-with-outline w-100 without-hint"
+                    class="w-100 without-hint"
                   >
                     <mat-select
                       name="language"
@@ -165,7 +174,7 @@
                 <div class="pl-1 w-50">
                   <mat-form-field
                     appearance="outline"
-                    class="compact-with-outline w-100 without-hint"
+                    class="w-100 without-hint"
                   >
                     <mat-select
                       name="locale"
@@ -190,7 +199,7 @@
                 <div class="pl-1 w-50">
                   <mat-form-field
                     appearance="outline"
-                    class="compact-with-outline w-100 without-hint"
+                    class="w-100 without-hint"
                   >
                     <mat-select
                       class="with-placeholder-as-option"
@@ -217,23 +226,23 @@
               </div>
             </div>
             <div class="pl-1 w-50">
-              <mat-slide-toggle
+              <mat-checkbox
                 color="primary"
                 [checked]="user.settings.viewMode === 'ZEN'"
                 [disabled]="!hasPermissionToUpdateViewMode"
                 (change)="onViewModeChange($event)"
-              ></mat-slide-toggle>
+              ></mat-checkbox>
             </div>
           </div>
           <div class="align-items-center d-flex mt-4 py-1">
             <div class="pr-1 w-50" i18n>Sign in with fingerprint</div>
             <div class="pl-1 w-50">
-              <mat-slide-toggle
+              <mat-checkbox
                 #toggleSignInWithFingerprintEnabledElement
                 color="primary"
                 [disabled]="!hasPermissionToUpdateUserSettings"
                 (change)="onSignInWithFingerprintChange($event)"
-              ></mat-slide-toggle>
+              ></mat-checkbox>
             </div>
           </div>
           <div
@@ -247,12 +256,12 @@
               </div>
             </div>
             <div class="pl-1 w-50">
-              <mat-slide-toggle
+              <mat-checkbox
                 color="primary"
                 [checked]="user.settings.isExperimentalFeatures"
                 [disabled]="!hasPermissionToUpdateUserSettings"
                 (change)="onExperimentalFeaturesChange($event)"
-              ></mat-slide-toggle>
+              ></mat-checkbox>
             </div>
           </div>
           <div class="align-items-center d-flex mt-4 py-1">

apps/client/src/app/pages/account/account-page.module.ts

@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
 import { RouterModule } from '@angular/router';
 import { GfPortfolioAccessTableModule } from '@ghostfolio/client/components/access-table/access-table.module';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
@@ -28,10 +28,10 @@ import { GfCreateOrUpdateAccessDialogModule } from './create-or-update-access-di
     GfValueModule,
     MatButtonModule,
     MatCardModule,
+    MatCheckboxModule,
     MatDialogModule,
     MatFormFieldModule,
     MatSelectModule,
-    MatSlideToggleModule,
     ReactiveFormsModule,
     RouterModule
   ]

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

@@ -4,15 +4,6 @@
 
   gf-access-table {
     overflow-x: auto;
-
-    table {
-      min-width: 100%;
-
-      .mat-row,
-      .mat-header-row {
-        width: 100%;
-      }
-    }
   }
 
   .fab-container {
@@ -26,14 +17,6 @@
     font-size: 90%;
     line-height: 1.2;
   }
-
-  .mat-form-field {
-    ::ng-deep {
-      .mat-form-field-wrapper {
-        padding-bottom: 0;
-      }
-    }
-  }
 }
 
 :host-context(.is-dark-theme) {

apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.component.ts

@@ -4,10 +4,7 @@ import {
   Inject,
   OnDestroy
 } from '@angular/core';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef
-} from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Subject } from 'rxjs';
 
 import { CreateOrUpdateAccessDialogParams } from './interfaces/interfaces';

apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.html

@@ -1,6 +1,6 @@
 <form #addAccessForm="ngForm" class="d-flex flex-column h-100">
   <h1 i18n mat-dialog-title>Grant access</h1>
-  <div class="flex-grow-1" mat-dialog-content>
+  <div class="flex-grow-1 py-3" mat-dialog-content>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Alias</mat-label>

apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.module.ts

@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
 
 import { CreateOrUpdateAccessDialog } from './create-or-update-access-dialog.component';
 

apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.scss

@@ -1,7 +1,7 @@
 :host {
   display: block;
 
-  .mat-dialog-content {
+  .mat-mdc-dialog-content {
     max-height: unset;
   }
 }

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

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CreateAccountDto } from '@ghostfolio/api/app/account/create-account.dto';
 import { UpdateAccountDto } from '@ghostfolio/api/app/account/update-account.dto';

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

@@ -30,7 +30,7 @@
       [queryParams]="{ createDialog: true }"
       [routerLink]="[]"
     >
-      <ion-icon class="mt-2" name="add-outline" size="large"></ion-icon>
+      <ion-icon name="add-outline" size="large"></ion-icon>
     </a>
   </div>
 </div>

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts

@@ -4,10 +4,7 @@ import {
   Inject,
   OnDestroy
 } from '@angular/core';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef
-} from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Subject } from 'rxjs';
 
 import { DataService } from '../../../services/data.service';

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html

@@ -1,7 +1,7 @@
 <form #addAccountForm="ngForm" class="d-flex flex-column h-100">
   <h1 *ngIf="data.account.id" i18n mat-dialog-title>Update account</h1>
   <h1 *ngIf="!data.account.id" i18n mat-dialog-title>Add account</h1>
-  <div class="flex-grow-1" mat-dialog-content>
+  <div class="flex-grow-1 py-3" mat-dialog-content>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Name</mat-label>
@@ -39,7 +39,7 @@
         />
       </mat-form-field>
     </div>
-    <div>
+    <div [ngClass]="{ 'd-none': platforms?.length < 1 }">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Platform</mat-label>
         <mat-select name="platformId" [(value)]="data.account.platformId">

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts

@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
 
 import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog.component';
 

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.scss

@@ -1,43 +1,7 @@
 :host {
   display: block;
 
-  .mat-dialog-content {
+  .mat-mdc-dialog-content {
     max-height: unset;
-
-    .autocomplete {
-      font-size: 90%;
-      height: 2.5rem;
-
-      .symbol {
-        display: inline-block;
-        min-width: 4rem;
-      }
-    }
-
-    .mat-select {
-      &.no-arrow {
-        ::ng-deep {
-          .mat-select-arrow {
-            opacity: 0;
-          }
-        }
-      }
-    }
-
-    .mat-datepicker-input {
-      &.mat-input-element:disabled {
-        color: var(--dark-primary-text);
-      }
-    }
-  }
-}
-
-:host-context(.is-dark-theme) {
-  .mat-dialog-content {
-    .mat-datepicker-input {
-      &.mat-input-element:disabled {
-        color: var(--light-primary-text);
-      }
-    }
   }
 }

apps/client/src/app/pages/admin/admin-page.html

@@ -1,14 +1,16 @@
-<router-outlet></router-outlet>
+<mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
+  <router-outlet></router-outlet>
+</mat-tab-nav-panel>
 
-<nav mat-align-tabs="center" mat-tab-nav-bar>
+<nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
   <a
-    *ngFor="let link of [
-  { iconName: 'reader-outline', path: 'overview' },
-  { iconName: 'people-outline', path: 'users' },
-  { iconName: 'server-outline', path: 'market-data' },
-  { iconName: 'flash-outline', path: 'jobs' }
-]"
     #rla="routerLinkActive"
+    *ngFor="let link of [
+      { iconName: 'reader-outline', path: 'overview' },
+      { iconName: 'people-outline', path: 'users' },
+      { iconName: 'server-outline', path: 'market-data' },
+      { iconName: 'flash-outline', path: 'jobs' }
+    ]"
     mat-tab-link
     routerLinkActive
     [active]="rla.isActive"

apps/client/src/app/pages/admin/admin-page.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 import { GfAdminJobsModule } from '@ghostfolio/client/components/admin-jobs/admin-jobs.module';
 import { GfAdminMarketDataModule } from '@ghostfolio/client/components/admin-market-data/admin-market-data.module';
 import { GfAdminOverviewModule } from '@ghostfolio/client/components/admin-overview/admin-overview.module';

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

@@ -19,19 +19,10 @@
       overflow-y: auto;
     }
 
-    .mat-tab-header {
-      border-bottom: 0;
+    .mat-mdc-tab-link-container {
+      --mdc-tab-indicator-active-indicator-color: transparent;
 
-      .mat-ink-bar {
-        visibility: hidden !important;
-      }
-
-      .mat-tab-label-active {
-        color: rgba(var(--palette-primary-500), 1);
-        opacity: 1;
-      }
-
-      .mat-tab-link {
+      .mat-mdc-tab-link {
         &:hover {
           opacity: 0.75;
         }