From 620b4833709dc9e4df2a374a97c016a7b1f681ee Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 10 Apr 2023 10:25:27 +0200
Subject: [PATCH] Upgrade form components to Angular Material 15

---
 apps/client/src/app/app.module.ts             |  2 +-
 .../admin-jobs/admin-jobs.module.ts           |  2 +-
 .../market-data-detail-dialog.html            |  2 +-
 .../asset-profile-dialog.module.ts            |  2 +-
 .../admin-overview/admin-overview.module.ts   |  2 +-
 .../admin-overview/admin-overview.scss        |  2 +-
 .../benchmark-comparator.module.ts            |  2 +-
 .../login-with-access-token-dialog.html       |  4 +-
 .../login-with-access-token-dialog.module.ts  |  4 +-
 .../login-with-access-token-dialog.scss       | 20 -----
 .../app/pages/account/account-page.module.ts  |  4 +-
 .../src/app/pages/account/account-page.scss   |  8 --
 .../create-or-update-access-dialog.html       |  2 +-
 .../create-or-update-access-dialog.module.ts  |  6 +-
 .../create-or-update-account-dialog.html      |  2 +-
 .../create-or-update-account-dialog.module.ts |  6 +-
 .../create-or-update-account-dialog.scss      | 36 ---------
 .../create-or-update-activity-dialog.html     |  2 +-
 .../import-activities-dialog.html             |  2 +-
 .../import-activities-dialog.module.ts        |  4 +-
 .../show-access-token-dialog.html             |  2 +-
 .../show-access-token-dialog.module.ts        |  4 +-
 .../show-access-token-dialog.scss             |  3 -
 apps/client/src/styles.scss                   | 76 +++++++------------
 24 files changed, 54 insertions(+), 145 deletions(-)

diff --git a/apps/client/src/app/app.module.ts b/apps/client/src/app/app.module.ts
index f463718fd..da478ce23 100644
--- a/apps/client/src/app/app.module.ts
+++ b/apps/client/src/app/app.module.ts
@@ -7,7 +7,7 @@ import {
   MAT_DATE_LOCALE,
   MatNativeDateModule
 } from '@angular/material/core';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+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';
diff --git a/apps/client/src/app/components/admin-jobs/admin-jobs.module.ts b/apps/client/src/app/components/admin-jobs/admin-jobs.module.ts
index 5dd8d16d0..93e668097 100644
--- a/apps/client/src/app/components/admin-jobs/admin-jobs.module.ts
+++ b/apps/client/src/app/components/admin-jobs/admin-jobs.module.ts
@@ -3,7 +3,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 
 import { AdminJobsComponent } from './admin-jobs.component';
 
diff --git a/apps/client/src/app/components/admin-market-data-detail/market-data-detail-dialog/market-data-detail-dialog.html b/apps/client/src/app/components/admin-market-data-detail/market-data-detail-dialog/market-data-detail-dialog.html
index 1797833c4..cbe2099b7 100644
--- a/apps/client/src/app/components/admin-market-data-detail/market-data-detail-dialog/market-data-detail-dialog.html
+++ b/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>
diff --git a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts
index 6a4d87e72..f46fe59a5 100644
--- a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts
+++ b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts
@@ -4,7 +4,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+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';
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.module.ts b/apps/client/src/app/components/admin-overview/admin-overview.module.ts
index 5b090b908..899fb09ae 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.module.ts
+++ b/apps/client/src/app/components/admin-overview/admin-overview.module.ts
@@ -4,7 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { CacheService } from '@ghostfolio/client/services/cache.service';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.scss b/apps/client/src/app/components/admin-overview/admin-overview.scss
index 9b114ef1a..25209ac97 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.scss
+++ b/apps/client/src/app/components/admin-overview/admin-overview.scss
@@ -4,7 +4,7 @@
   display: block;
 
   .subscription {
-    .mat-form-field {
+    .mat-mdc-form-field {
       max-width: 100%;
     }
   }
diff --git a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.module.ts b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.module.ts
index efbdd9473..23b0a48a1 100644
--- a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.module.ts
+++ b/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';
 
diff --git a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html b/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html
index 01dc2de95..5dfc84a02 100644
--- a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html
+++ b/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
diff --git a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts b/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts
index fad400587..26211771b 100644
--- a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts
+++ b/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts
@@ -5,8 +5,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/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 { 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';
diff --git a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.scss b/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.scss
index c2d96b648..5d4e87f30 100644
--- a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.scss
+++ b/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-mdc-checkbox {
-    ::ng-deep {
-      label {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .mat-form-field {
-    ::ng-deep {
-      .mat-form-field-wrapper {
-        padding-bottom: 0;
-      }
-    }
-  }
 }
diff --git a/apps/client/src/app/pages/account/account-page.module.ts b/apps/client/src/app/pages/account/account-page.module.ts
index 8ef256c99..d3a5d22b7 100644
--- a/apps/client/src/app/pages/account/account-page.module.ts
+++ b/apps/client/src/app/pages/account/account-page.module.ts
@@ -5,8 +5,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 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 { 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';
diff --git a/apps/client/src/app/pages/account/account-page.scss b/apps/client/src/app/pages/account/account-page.scss
index ef3fd6b8f..6a010a85d 100644
--- a/apps/client/src/app/pages/account/account-page.scss
+++ b/apps/client/src/app/pages/account/account-page.scss
@@ -17,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) {
diff --git a/apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.html b/apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.html
index 273bfd095..5142a7f6b 100644
--- a/apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.html
+++ b/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>
diff --git a/apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.module.ts b/apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.module.ts
index 3d7cfcfee..367605e0e 100644
--- a/apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.module.ts
+++ b/apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.module.ts
@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/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 { 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';
 
diff --git a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html
index bff544339..fca606d27 100644
--- a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html
+++ b/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>
diff --git a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts
index e0232ded3..f8b25f296 100644
--- a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts
+++ b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts
@@ -4,9 +4,9 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/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 { 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';
 
diff --git a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.scss b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.scss
index 0ce226588..ce1c7d599 100644
--- a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.scss
+++ b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.scss
@@ -3,41 +3,5 @@
 
   .mat-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);
-      }
-    }
   }
 }
diff --git a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
index 8cf6bc50a..bb5f62f8a 100644
--- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
+++ b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
@@ -6,7 +6,7 @@
 >
   <h1 *ngIf="data.activity.id" i18n mat-dialog-title>Update activity</h1>
   <h1 *ngIf="!data.activity.id" i18n mat-dialog-title>Add activity</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>Type</mat-label>
diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
index 7cbea8417..d0a6a1e91 100644
--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
@@ -5,7 +5,7 @@
   (closeButtonClicked)="onCancel()"
 ></gf-dialog-header>
 
-<div class="flex-grow-1" mat-dialog-content>
+<div class="flex-grow-1 py-3" mat-dialog-content>
   <ng-container *ngIf="!isFileSelected">
     <ng-container *ngIf="mode === 'DIVIDEND'; else selectFile">
       <form [formGroup]="uniqueAssetForm" (ngSubmit)="onLoadDividends()">
diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts
index 91942b16f..4c4ed618e 100644
--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts
@@ -4,8 +4,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatButtonModule } from '@angular/material/button';
 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 { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
 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';
diff --git a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.html b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.html
index a742bdbf6..436977f7d 100644
--- a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.html
+++ b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.html
@@ -4,7 +4,7 @@
     >{{ data.role }}</span
   >
 </h1>
-<div mat-dialog-content>
+<div class="py-3" mat-dialog-content>
   <div>
     <mat-form-field appearance="outline" class="w-100">
       <mat-label i18n>Security Token</mat-label>
diff --git a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.module.ts b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.module.ts
index 1622e0551..9dbf460ec 100644
--- a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.module.ts
+++ b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.module.ts
@@ -5,8 +5,8 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/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 { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 import { ShowAccessTokenDialog } from './show-access-token-dialog.component';
 
diff --git a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.scss b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.scss
index 39842634f..dc9093b45 100644
--- a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.scss
+++ b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.scss
@@ -1,5 +1,2 @@
 :host {
-  textarea.mat-input-element.cdk-textarea-autosize {
-    box-sizing: content-box;
-  }
 }
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 7167c7f96..5ac396b9e 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -279,16 +279,13 @@ body {
     }
 
     .with-placeholder-as-option {
-      .mat-select-placeholder {
+      .mat-mdc-select-placeholder {
         color: rgba(var(--light-primary-text));
       }
 
-      &.mat-select-disabled {
-        .mat-select-placeholder {
-          color: rgba(
-            var(--palette-foreground-disabled-text-dark),
-            var(--palette-foreground-disabled-text-dark-alpha)
-          );
+      &.mat-mdc-select-disabled {
+        .mat-mdc-select-placeholder {
+          color: rgba(var(--light-disabled-text));
         }
       }
     }
@@ -372,6 +369,12 @@ ngx-skeleton-loader {
   }
 }
 
+.mat-mdc-checkbox {
+  label {
+    margin-bottom: 0;
+  }
+}
+
 .mat-mdc-fab,
 .mat-mdc-unelevated-button {
   &.mat-primary {
@@ -379,42 +382,6 @@ ngx-skeleton-loader {
   }
 }
 
-.mat-form-field {
-  &.compact-with-outline {
-    .mat-form-field-wrapper {
-      margin: 0.5rem 0 0.25rem;
-      padding-bottom: 1rem;
-
-      .mat-form-field-infix {
-        border-top-width: 0;
-        padding: 1rem 0 0.75rem;
-
-        .mat-form-field-label {
-          margin-top: 0.1rem;
-        }
-
-        .mat-select-arrow-wrapper {
-          transform: none;
-        }
-      }
-
-      .mat-form-field-prefix {
-        top: 0;
-      }
-
-      .mat-form-field-suffix {
-        top: 0;
-      }
-    }
-  }
-
-  &.without-hint {
-    .mat-form-field-wrapper {
-      padding-bottom: 0;
-    }
-  }
-}
-
 .mat-mdc-fab {
   color: var(--mat-mdc-fab-color, inherit) !important;
 
@@ -424,6 +391,18 @@ ngx-skeleton-loader {
   }
 }
 
+.mat-mdc-form-field {
+  &.compact-with-outline {
+    // TODO: Configure density in Angular Material
+  }
+
+  &.without-hint {
+    .mat-mdc-form-field-subscript-wrapper {
+      display: none;
+    }
+  }
+}
+
 .mat-mdc-menu-panel {
   .mat-mdc-menu-item {
     .mdc-list-item__primary-text {
@@ -475,16 +454,13 @@ ngx-skeleton-loader {
 }
 
 .with-placeholder-as-option {
-  .mat-select-placeholder {
+  .mat-mdc-select-placeholder {
     color: rgba(var(--dark-primary-text));
   }
 
-  &.mat-select-disabled {
-    .mat-select-placeholder {
-      color: rgba(
-        var(--palette-foreground-disabled-text),
-        var(--palette-foreground-disabled-text-alpha)
-      );
+  &.mat-mdc-select-disabled {
+    .mat-mdc-select-placeholder {
+      color: rgba(var(--dark-disabled-text));
     }
   }
 }