From 3e1934961826553ed14f7a8a76abcdddf55c95de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 21 Feb 2023 19:51:37 +0200
Subject: [PATCH] RED-5875: Upgrade to new Angular Material components (form
 field)

---
 .../user-profile-screen.component.html        | 12 +++--
 ...it-dossier-attribute-dialog.component.html | 12 +++--
 ...-edit-file-attribute-dialog.component.html | 12 +++--
 ...delete-dossier-state-dialog.component.html | 18 ++++---
 ...butes-configurations-dialog.component.html | 12 +++--
 .../active-fields-listing.component.html      |  2 +-
 ...ttributes-csv-import-dialog.component.html | 16 +++---
 .../screens/audit/audit-screen.component.html | 12 ++---
 .../license-select.component.html             | 30 ++++++-----
 .../admin/screens/license/license.module.ts   |  2 +-
 .../dossier-overview-screen.component.ts      |  1 -
 ...ccept-recommendation-dialog.component.html | 28 +++++-----
 .../change-legal-basis-dialog.component.html  | 20 +++----
 .../force-annotation-dialog.component.html    | 20 +++----
 .../manual-annotation-dialog.component.html   | 52 ++++++++++---------
 .../recategorize-image-dialog.component.html  | 20 +++----
 .../modules/mat-config/mat-config.module.ts   |  8 +--
 ...gn-reviewer-approver-dialog.component.html |  4 +-
 ...it-dossier-download-package.component.scss | 14 +----
 .../edit-dossier-team.component.html          |  4 +-
 .../edit-dossier-general-info.component.html  | 22 ++++----
 .../edit-dossier-general-info.component.scss  |  8 ---
 .../add-edit-entity.component.html            | 10 ++--
 .../assign-user-dropdown.component.html       | 18 ++++---
 .../dictionary-manager.component.html         | 44 +++++++++-------
 .../watermark-selector.component.html         | 26 +++++-----
 .../watermark-selector.component.scss         | 24 ---------
 .../add-dossier-dialog.component.html         |  4 +-
 .../add-dossier-dialog.component.scss         | 10 ----
 apps/red-ui/src/styles.scss                   |  2 +
 libs/common-ui                                |  2 +-
 31 files changed, 228 insertions(+), 241 deletions(-)

diff --git a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html
index a5a0694c6..9aa65fe09 100644
--- a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html
+++ b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html
@@ -18,11 +18,13 @@
 
             <div *ngIf="userPreferences.areDevFeaturesEnabled" class="iqser-input-group">
                 <label [translate]="'top-bar.navigation-items.my-account.children.language.label'"></label>
-                <mat-select formControlName="language">
-                    <mat-option *ngFor="let language of languages" [value]="language">
-                        {{ translations[language] | translate }}
-                    </mat-option>
-                </mat-select>
+                <mat-form-field>
+                    <mat-select formControlName="language">
+                        <mat-option *ngFor="let language of languages" [value]="language">
+                            {{ translations[language] | translate }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
             </div>
 
             <div class="iqser-input-group">
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
index c1faa54f3..42c9d30b1 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
@@ -20,11 +20,13 @@
 
             <div class="iqser-input-group w-300">
                 <label [translate]="'add-edit-dossier-attribute.form.type'"></label>
-                <mat-select formControlName="type">
-                    <mat-option *ngFor="let type of typeOptions" [value]="type">
-                        {{ translations[type] | translate }}
-                    </mat-option>
-                </mat-select>
+                <mat-form-field>
+                    <mat-select formControlName="type">
+                        <mat-option *ngFor="let type of typeOptions" [value]="type">
+                            {{ translations[type] | translate }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
             </div>
         </div>
         <div class="dialog-actions">
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
index 32dff42fb..ab4222018 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
@@ -25,11 +25,13 @@
 
             <div class="iqser-input-group w-300 required">
                 <label [translate]="'add-edit-file-attribute.form.type'"></label>
-                <mat-select formControlName="type">
-                    <mat-option *ngFor="let type of typeOptions" [value]="type">
-                        {{ translations[type] | translate }}
-                    </mat-option>
-                </mat-select>
+                <mat-form-field>
+                    <mat-select formControlName="type">
+                        <mat-option *ngFor="let type of typeOptions" [value]="type">
+                            {{ translations[type] | translate }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
             </div>
 
             <div class="options-wrapper">
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
index 066d61e70..32e3c9315 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.html
@@ -15,14 +15,16 @@
 
             <div *ngIf="form.get('replace').value" class="iqser-input-group w-300 min-h-55">
                 <label translate="confirm-delete-dossier-state.form.state"></label>
-                <mat-select
-                    [placeholder]="'confirm-delete-dossier-state.form.state-placeholder' | translate"
-                    formControlName="replaceDossierStatusId"
-                >
-                    <mat-option *ngFor="let state of data.otherStates" [value]="state.dossierStatusId">
-                        {{ state.name }}
-                    </mat-option>
-                </mat-select>
+                <mat-form-field>
+                    <mat-select
+                        [placeholder]="'confirm-delete-dossier-state.form.state-placeholder' | translate"
+                        formControlName="replaceDossierStatusId"
+                    >
+                        <mat-option *ngFor="let state of data.otherStates" [value]="state.dossierStatusId">
+                            {{ state.name }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
             </div>
         </form>
     </div>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.html
index 177379a5e..fcfd86c6e 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component.html
@@ -31,11 +31,13 @@
 
                 <div class="iqser-input-group w-150 required">
                     <label [translate]="'file-attributes-configurations.form.encoding-type'"></label>
-                    <mat-select formControlName="encodingType">
-                        <mat-option *ngFor="let type of encodingTypeOptions" [value]="type">
-                            {{ translations[type] | translate }}
-                        </mat-option>
-                    </mat-select>
+                    <mat-form-field>
+                        <mat-select formControlName="encodingType">
+                            <mat-option *ngFor="let type of encodingTypeOptions" [value]="type">
+                                {{ translations[type] | translate }}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
                 </div>
             </ng-container>
         </div>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
index 48aa8505f..7f902855f 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
@@ -70,7 +70,7 @@
 
         <div class="cell">
             <div class="iqser-input-group">
-                <mat-form-field class="no-label">
+                <mat-form-field>
                     <mat-select [(ngModel)]="field.type">
                         <mat-option *ngFor="let type of typeOptions" [value]="type">
                             {{ translations[type] | translate }}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
index 88aeced82..fdbb645b9 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
@@ -12,8 +12,8 @@
             <div class="right">
                 <form (submit)="changedParseConfig && readFile()" [formGroup]="form">
                     <div class="iqser-input-group required w-250">
-                        <mat-form-field floatLabel="always">
-                            <mat-label>{{ 'file-attributes-csv-import.key-column' | translate }}</mat-label>
+                        <label>{{ 'file-attributes-csv-import.key-column' | translate }}</label>
+                        <mat-form-field>
                             <input
                                 [matAutocomplete]="auto"
                                 [placeholder]="'file-attributes-csv-import.key-column-placeholder' | translate"
@@ -45,11 +45,13 @@
                     <div class="iqser-input-group required w-160">
                         <label translate="file-attributes-csv-import.encoding"></label>
 
-                        <mat-select (selectionChange)="readFile()" formControlName="encoding">
-                            <mat-option *ngFor="let type of encodingTypeOptions" [value]="type">
-                                {{ translations[type] | translate }}
-                            </mat-option>
-                        </mat-select>
+                        <mat-form-field>
+                            <mat-select (selectionChange)="readFile()" formControlName="encoding">
+                                <mat-option *ngFor="let type of encodingTypeOptions" [value]="type">
+                                    {{ translations[type] | translate }}
+                                </mat-option>
+                            </mat-select>
+                        </mat-form-field>
                     </div>
                     <iqser-circle-button
                         (action)="readFile()"
diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
index fc571809f..fd39ef1e3 100644
--- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
@@ -5,13 +5,13 @@
 ></iqser-page-header>
 
 <iqser-table
+    [emptyColumnWidth]="'2fr'"
     [headerTemplate]="headerTemplate"
     [itemSize]="80"
     [noDataIcon]="'iqser:document'"
     [noDataText]="'audit-screen.no-data.title' | translate"
     [tableColumnConfigs]="tableColumnConfigs"
     [totalSize]="logs?.totalHits || 0"
-    [emptyColumnWidth]="'2fr'"
 ></iqser-table>
 
 <ng-template #headerTemplate>
@@ -26,7 +26,7 @@
 
         <form [formGroup]="form">
             <div class="iqser-input-group w-150 mr-20">
-                <mat-form-field class="no-label">
+                <mat-form-field>
                     <mat-select (selectionChange)="filterChange()" formControlName="category">
                         <mat-option *ngFor="let category of categories" [value]="category">
                             {{ (translations[category] | translate) || category }}
@@ -36,7 +36,7 @@
             </div>
 
             <div class="iqser-input-group w-150">
-                <mat-form-field class="no-label">
+                <mat-form-field>
                     <mat-select (selectionChange)="filterChange()" formControlName="userId">
                         <mat-select-trigger>
                             <iqser-initials-avatar
@@ -87,7 +87,7 @@
         </div>
 
         <div class="cell">
-            <span class="small-label">{{ log.recordDate | date: 'd MMM yyyy, hh:mm a' }}</span>
+            <span class="small-label">{{ log.recordDate | date : 'd MMM yyyy, hh:mm a' }}</span>
         </div>
 
         <div class="user-column cell">
@@ -99,11 +99,11 @@
         <div class="cell">
             <div class="action-buttons">
                 <iqser-circle-button
-                    *ngIf="log.hasDetails"
                     (action)="openAuditDetails($event, log)"
+                    *ngIf="log.hasDetails"
                     [tooltip]="'audit-screen.action.info' | translate"
-                    icon="red:info"
                     [type]="circleButtonTypes.dark"
+                    icon="red:info"
                 ></iqser-circle-button>
             </div>
         </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license-select/license-select.component.html b/apps/red-ui/src/app/modules/admin/screens/license/license-select/license-select.component.html
index db8191877..325004086 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/license-select/license-select.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/license/license-select/license-select.component.html
@@ -1,19 +1,21 @@
 <div *ngIf="licenses$ | async as licenses" class="iqser-input-group w-400">
-    <mat-select
-        (valueChange)="licenseChanged($event)"
-        *ngIf="value"
-        [(ngModel)]="value"
-        [disabled]="isReadonly$ | async"
-        [iqserHelpMode]="'license_information'"
-    >
-        <mat-select-trigger>
-            <ng-container *ngTemplateOutlet="licenseInfo; context: { license: value }"></ng-container>
-        </mat-select-trigger>
+    <mat-form-field>
+        <mat-select
+            (valueChange)="licenseChanged($event)"
+            *ngIf="value"
+            [(ngModel)]="value"
+            [disabled]="isReadonly$ | async"
+            [iqserHelpMode]="'license_information'"
+        >
+            <mat-select-trigger>
+                <ng-container *ngTemplateOutlet="licenseInfo; context: { license: value }"></ng-container>
+            </mat-select-trigger>
 
-        <mat-option *ngFor="let license of licenses" [value]="license">
-            <ng-container *ngTemplateOutlet="licenseInfo; context: { license: this.license }"></ng-container>
-        </mat-option>
-    </mat-select>
+            <mat-option *ngFor="let license of licenses" [value]="license">
+                <ng-container *ngTemplateOutlet="licenseInfo; context: { license: this.license }"></ng-container>
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
 </div>
 
 <ng-template #licenseInfo let-license="license">
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license.module.ts b/apps/red-ui/src/app/modules/admin/screens/license/license.module.ts
index ad7375bca..d578901b2 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/license.module.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/license/license.module.ts
@@ -4,7 +4,7 @@ import { LicenseSelectComponent } from './license-select/license-select.componen
 import { LicenseChartComponent } from './license-chart/license-chart.component';
 import { RouterModule, Routes } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { IqserHelpModeModule, IqserListingModule } from '@iqser/common-ui';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { ComboChartComponent, ComboSeriesVerticalComponent, YAxisComponent } from './combo-chart';
diff --git a/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts
index 1c5668f8c..2cce9fcc6 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts
@@ -188,7 +188,6 @@ export class DossierOverviewScreenComponent extends ListingComponent<File> imple
     async #updateDossierAttributes(): Promise<void> {
         try {
             this.dossierAttributes = await this._dossierAttributesService.getWithValues(this.#currentDossier);
-            console.log('this.dossierAttributes: ', this.dossierAttributes);
         } catch (e) {
             this._logger.error('[DOSSIER ATTRIBUTES] Error: ', e);
         }
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/accept-recommendation-dialog/accept-recommendation-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/accept-recommendation-dialog/accept-recommendation-dialog.component.html
index d5108f8b6..2c2099576 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/accept-recommendation-dialog/accept-recommendation-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/accept-recommendation-dialog/accept-recommendation-dialog.component.html
@@ -15,19 +15,21 @@
             <div class="iqser-input-group required w-400">
                 <label translate="manual-annotation.dialog.content.dictionary"></label>
 
-                <mat-select formControlName="dictionary">
-                    <mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
-                    <mat-option
-                        *ngFor="let dictionary of possibleDictionaries"
-                        [matTooltip]="dictionary.description"
-                        [value]="dictionary.type"
-                        matTooltipPosition="after"
-                    >
-                        <span>
-                            {{ dictionary.label }}
-                        </span>
-                    </mat-option>
-                </mat-select>
+                <mat-form-field>
+                    <mat-select formControlName="dictionary">
+                        <mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
+                        <mat-option
+                            *ngFor="let dictionary of possibleDictionaries"
+                            [matTooltip]="dictionary.description"
+                            [value]="dictionary.type"
+                            matTooltipPosition="after"
+                        >
+                            <span>
+                                {{ dictionary.label }}
+                            </span>
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
             </div>
 
             <div class="iqser-input-group w-300">
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html
index c77b18df4..e4a06f8b3 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html
@@ -5,15 +5,17 @@
         <div class="dialog-content">
             <div class="iqser-input-group required w-400">
                 <label translate="change-legal-basis-dialog.content.reason"></label>
-                <mat-select
-                    [placeholder]="'change-legal-basis-dialog.content.reason-placeholder' | translate"
-                    class="full-width"
-                    formControlName="reason"
-                >
-                    <mat-option *ngFor="let option of legalOptions" [matTooltip]="option.description" [value]="option">
-                        {{ option.label }}
-                    </mat-option>
-                </mat-select>
+                <mat-form-field>
+                    <mat-select
+                        [placeholder]="'change-legal-basis-dialog.content.reason-placeholder' | translate"
+                        class="full-width"
+                        formControlName="reason"
+                    >
+                        <mat-option *ngFor="let option of legalOptions" [matTooltip]="option.description" [value]="option">
+                            {{ option.label }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
             </div>
 
             <div class="iqser-input-group w-400">
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.html
index 5c5bdec6e..1503a79fc 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.html
@@ -6,15 +6,17 @@
         <div class="dialog-content">
             <div *ngIf="!isHintDialog" class="iqser-input-group required w-400">
                 <label translate="manual-annotation.dialog.content.reason"></label>
-                <mat-select
-                    [placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate"
-                    class="full-width"
-                    formControlName="reason"
-                >
-                    <mat-option *ngFor="let option of legalOptions" [matTooltip]="option.description" [value]="option">
-                        {{ option.label }}
-                    </mat-option>
-                </mat-select>
+                <mat-form-field>
+                    <mat-select
+                        [placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate"
+                        class="full-width"
+                        formControlName="reason"
+                    >
+                        <mat-option *ngFor="let option of legalOptions" [matTooltip]="option.description" [value]="option">
+                            {{ option.label }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
             </div>
 
             <div *ngIf="!isHintDialog" class="iqser-input-group w-400">
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
index d14561341..53092c156 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
@@ -38,35 +38,39 @@
                 <label *ngIf="isDictionaryRequest" translate="manual-annotation.dialog.content.dictionary"></label>
                 <label *ngIf="!isDictionaryRequest" translate="manual-annotation.dialog.content.type"></label>
 
-                <mat-select formControlName="dictionary">
-                    <mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
-                    <mat-option
-                        *ngFor="let dictionary of possibleDictionaries"
-                        [matTooltip]="dictionary.description"
-                        [value]="dictionary.type"
-                        matTooltipPosition="after"
-                    >
-                        <span> {{ dictionary.label }} </span>
-                    </mat-option>
-                </mat-select>
+                <mat-form-field>
+                    <mat-select formControlName="dictionary">
+                        <mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
+                        <mat-option
+                            *ngFor="let dictionary of possibleDictionaries"
+                            [matTooltip]="dictionary.description"
+                            [value]="dictionary.type"
+                            matTooltipPosition="after"
+                        >
+                            <span> {{ dictionary.label }} </span>
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
             </div>
 
             <div *deny="roles.getRss; if: !isDictionaryRequest" class="iqser-input-group required w-450">
                 <label translate="manual-annotation.dialog.content.reason"></label>
-                <mat-select
-                    [placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate"
-                    class="full-width"
-                    formControlName="reason"
-                >
-                    <mat-option
-                        *ngFor="let option of legalOptions"
-                        [matTooltip]="option.description"
-                        [value]="option"
-                        matTooltipPosition="after"
+                <mat-form-field>
+                    <mat-select
+                        [placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate"
+                        class="full-width"
+                        formControlName="reason"
                     >
-                        {{ option.label }}
-                    </mat-option>
-                </mat-select>
+                        <mat-option
+                            *ngFor="let option of legalOptions"
+                            [matTooltip]="option.description"
+                            [value]="option"
+                            matTooltipPosition="after"
+                        >
+                            {{ option.label }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
             </div>
 
             <div *deny="roles.getRss; if: !isDictionaryRequest" class="iqser-input-group w-450">
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html
index 427faa022..d4058b6a7 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html
@@ -5,15 +5,17 @@
         <div class="dialog-content">
             <div class="iqser-input-group required w-400">
                 <label translate="recategorize-image-dialog.content.type"></label>
-                <mat-select
-                    [placeholder]="'recategorize-image-dialog.content.type-placeholder' | translate"
-                    class="full-width"
-                    formControlName="type"
-                >
-                    <mat-option *ngFor="let option of typeOptions" [value]="option">
-                        {{ translations[option] | translate }}
-                    </mat-option>
-                </mat-select>
+                <mat-form-field>
+                    <mat-select
+                        [placeholder]="'recategorize-image-dialog.content.type-placeholder' | translate"
+                        class="full-width"
+                        formControlName="type"
+                    >
+                        <mat-option *ngFor="let option of typeOptions" [value]="option">
+                            {{ translations[option] | translate }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
             </div>
 
             <div class="iqser-input-group w-300">
diff --git a/apps/red-ui/src/app/modules/mat-config/mat-config.module.ts b/apps/red-ui/src/app/modules/mat-config/mat-config.module.ts
index d91f271cb..401ac7742 100644
--- a/apps/red-ui/src/app/modules/mat-config/mat-config.module.ts
+++ b/apps/red-ui/src/app/modules/mat-config/mat-config.module.ts
@@ -7,14 +7,14 @@ import { MatLegacySliderModule as MatSliderModule } from '@angular/material/lega
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
 import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
 import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
 import { MatDialogModule } from '@angular/material/dialog';
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html
index 2e183ac89..43eeefe73 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html
@@ -4,8 +4,8 @@
     <form (submit)="save()" [formGroup]="form">
         <div class="dialog-content">
             <div class="iqser-input-group w-300 required">
-                <mat-form-field floatLabel="always">
-                    <mat-label>{{ 'assign-owner.dialog.label' | translate : { type: mode } }}</mat-label>
+                <label>{{ 'assign-owner.dialog.label' | translate : { type: mode } }}</label>
+                <mat-form-field>
                     <mat-select [placeholder]="'initials-avatar.unassigned' | translate" formControlName="user">
                         <mat-option *ngFor="let userId of userOptions" [value]="userId">
                             {{ userId | name : { defaultValue: 'initials-avatar.unassigned' | translate } }}
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.scss b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.scss
index 85c23997f..e00963652 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.scss
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.scss
@@ -1,5 +1,3 @@
-@use '../../../../../apps/red-ui/src/assets/styles/variables';
-
 redaction-select {
     flex: 1;
 }
@@ -14,21 +12,11 @@ form {
     }
 }
 
-.watermark {
-    width: 315px;
-    max-width: 315px;
-
-    mat-form-field {
-        margin-left: 22px;
-        margin-top: -10px;
-    }
-}
-
 .heading {
     margin-top: 32px !important;
     margin-bottom: 0 !important;
 }
 
 .no-watermark {
-    color: variables.$grey-7;
+    color: var(--iqser-grey-7);
 }
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.html b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.html
index ed4f62201..b4d769083 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.html
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.html
@@ -1,7 +1,7 @@
 <form [formGroup]="form">
     <div class="iqser-input-group w-300 required">
-        <mat-form-field floatLabel="always">
-            <mat-label>{{ 'assign-dossier-owner.dialog.single-user' | translate }}</mat-label>
+        <label>{{ 'assign-dossier-owner.dialog.single-user' | translate }}</label>
+        <mat-form-field>
             <mat-select (valueChange)="onChangeOwner($event)" formControlName="owner" id="editDossierOwnerSelect">
                 <mat-option *ngFor="let userId of ownersSelectOptions; let index = index" [id]="'mat-option-' + index" [value]="userId">
                     {{ userId | name }}
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
index 6836a8104..574c38578 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
@@ -12,8 +12,8 @@
             </div>
 
             <div class="iqser-input-group required w-400">
-                <mat-form-field floatLabel="always">
-                    <mat-label>{{ 'edit-dossier-dialog.general-info.form.template' | translate }}</mat-label>
+                <label>{{ 'edit-dossier-dialog.general-info.form.template' | translate }}</label>
+                <mat-form-field>
                     <mat-select formControlName="dossierTemplateId">
                         <mat-option
                             *ngFor="let dossierTemplate of dossierTemplates"
@@ -43,14 +43,16 @@
         <div class="flex fields-container">
             <div class="iqser-input-group w-300">
                 <label translate="edit-dossier-dialog.general-info.form.dossier-state.label"></label>
-                <mat-select [placeholder]="statusPlaceholder" formControlName="dossierStatusId">
-                    <mat-option *ngFor="let stateId of states" [value]="stateId">
-                        <div [matTooltip]="getStateName(stateId)" class="flex-align-items-center" matTooltipPosition="after">
-                            <iqser-small-chip *ngIf="!!stateId" [color]="getStateColor(stateId)"></iqser-small-chip>
-                            <div class="clamp-1">{{ getStateName(stateId) }}</div>
-                        </div>
-                    </mat-option>
-                </mat-select>
+                <mat-form-field>
+                    <mat-select [placeholder]="statusPlaceholder" formControlName="dossierStatusId">
+                        <mat-option *ngFor="let stateId of states" [value]="stateId">
+                            <div [matTooltip]="getStateName(stateId)" class="flex-align-items-center" matTooltipPosition="after">
+                                <iqser-small-chip *ngIf="!!stateId" [color]="getStateColor(stateId)"></iqser-small-chip>
+                                <div class="clamp-1">{{ getStateName(stateId) }}</div>
+                            </div>
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
             </div>
 
             <div class="due-date">
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
index 021a72706..cea3d3370 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
@@ -1,11 +1,3 @@
-.watermark {
-    margin-top: 24px;
-}
-
-.watermark-preview {
-    margin-top: 8px;
-}
-
 .due-date {
     margin-top: 8px;
     min-height: 34px;
diff --git a/apps/red-ui/src/app/modules/shared/components/add-edit-entity/add-edit-entity.component.html b/apps/red-ui/src/app/modules/shared/components/add-edit-entity/add-edit-entity.component.html
index 35e327475..85bc988ce 100644
--- a/apps/red-ui/src/app/modules/shared/components/add-edit-entity/add-edit-entity.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/add-edit-entity/add-edit-entity.component.html
@@ -58,10 +58,12 @@
 
     <div *ngIf="form.get('defaultReason')" class="iqser-input-group w-400">
         <label translate="add-edit-entity.form.default-reason"></label>
-        <mat-select
-            [placeholder]="'add-edit-entity.form.default-reason-placeholder' | translate"
-            formControlName="defaultReason"
-        ></mat-select>
+        <mat-form-field>
+            <mat-select
+                [placeholder]="'add-edit-entity.form.default-reason-placeholder' | translate"
+                formControlName="defaultReason"
+            ></mat-select>
+        </mat-form-field>
     </div>
 
     <div *ngIf="form.get('description')" class="iqser-input-group w-400">
diff --git a/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html b/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html
index de108134d..d0e891616 100644
--- a/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html
@@ -1,13 +1,15 @@
 <div class="flex-align-items-center space-between">
     <div class="iqser-input-group w-250">
-        <mat-select [(ngModel)]="value" [placeholder]="'initials-avatar.unassigned' | translate" id="select-assignee">
-            <mat-select-trigger>
-                <ng-container *ngTemplateOutlet="avatar; context: getContext(value)"></ng-container>
-            </mat-select-trigger>
-            <mat-option *ngFor="let user of options" [id]="'assignee-option-' + user" [value]="user">
-                <ng-container *ngTemplateOutlet="avatar; context: getContext(user)"></ng-container>
-            </mat-option>
-        </mat-select>
+        <mat-form-field>
+            <mat-select [(ngModel)]="value" [placeholder]="'initials-avatar.unassigned' | translate" id="select-assignee">
+                <mat-select-trigger>
+                    <ng-container *ngTemplateOutlet="avatar; context: getContext(value)"></ng-container>
+                </mat-select-trigger>
+                <mat-option *ngFor="let user of options" [id]="'assignee-option-' + user" [value]="user">
+                    <ng-container *ngTemplateOutlet="avatar; context: getContext(user)"></ng-container>
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
     </div>
 
     <iqser-circle-button
diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
index b590446b2..2d2e5c915 100644
--- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
@@ -27,8 +27,8 @@
             <iqser-circle-button
                 (action)="download()"
                 *ngIf="canDownload"
-                [matTooltip]="'dictionary-overview.download' | translate"
                 [iqserHelpMode]="helpModeKey"
+                [matTooltip]="'dictionary-overview.download' | translate"
                 class="ml-8"
                 icon="iqser:download"
             ></iqser-circle-button>
@@ -42,31 +42,37 @@
 
             <ng-container *ngIf="filterByDossierTemplate">
                 <div *ngIf="dossierTemplatesService.all$ | async as templates" class="iqser-input-group w-200 mt-0 mr-8">
-                    <mat-select [(ngModel)]="dossierTemplate" [disabled]="!compare">
-                        <mat-option [value]="selectDossierTemplate">{{ selectDossierTemplate.name | translate }}</mat-option>
-                        <mat-option *ngFor="let dossierTemplate of templates" [value]="dossierTemplate">
-                            {{ dossierTemplate.name }}
-                        </mat-option>
-                    </mat-select>
+                    <mat-form-field>
+                        <mat-select [(ngModel)]="dossierTemplate" [disabled]="!compare">
+                            <mat-option [value]="selectDossierTemplate">{{ selectDossierTemplate.name | translate }}</mat-option>
+                            <mat-option *ngFor="let dossierTemplate of templates" [value]="dossierTemplate">
+                                {{ dossierTemplate.name }}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
                 </div>
 
                 <div class="iqser-input-group w-200 mt-0">
-                    <mat-select [(ngModel)]="compareDictionary" [disabled]="!compare || dossierTemplateIsNotSelected">
-                        <mat-option [value]="selectDictionary">{{ selectDictionary.label | translate }}</mat-option>
-                        <mat-option *ngFor="let dictionary of dictionaries" [value]="dictionary">
-                            {{ dictionary.label }}
-                        </mat-option>
-                    </mat-select>
+                    <mat-form-field>
+                        <mat-select [(ngModel)]="compareDictionary" [disabled]="!compare || dossierTemplateIsNotSelected">
+                            <mat-option [value]="selectDictionary">{{ selectDictionary.label | translate }}</mat-option>
+                            <mat-option *ngFor="let dictionary of dictionaries" [value]="dictionary">
+                                {{ dictionary.label }}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
                 </div>
             </ng-container>
 
             <div *ngIf="!filterByDossierTemplate && activeDossiersService.all$ | async as dossiers" class="iqser-input-group w-200 mt-0">
-                <mat-select [(ngModel)]="dossier" [disabled]="!compare">
-                    <mat-option [value]="selectDossier">{{ selectDossier.dossierName | translate }}</mat-option>
-                    <mat-option *ngFor="let dossier of dossiers" [value]="dossier">
-                        {{ dossier.dossierName }}
-                    </mat-option>
-                </mat-select>
+                <mat-form-field>
+                    <mat-select [(ngModel)]="dossier" [disabled]="!compare">
+                        <mat-option [value]="selectDossier">{{ selectDossier.dossierName | translate }}</mat-option>
+                        <mat-option *ngFor="let dossier of dossiers" [value]="dossier">
+                            {{ dossier.dossierName }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
             </div>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.html b/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.html
index ec009eb4e..eb7683934 100644
--- a/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.html
@@ -1,19 +1,21 @@
-<div *ngIf="watermarks$ | async as watermarks" class="container">
-    <div class="iqser-input-group watermark">
+<div *ngIf="watermarks$ | async as watermarks" class="mt-14">
+    <div class="iqser-input-group w-300">
         <mat-checkbox (change)="changeChecked($event)" [checked]="!!value" [disabled]="disabled || isReadonly" color="primary">
             {{ label }}
         </mat-checkbox>
 
-        <mat-select (selectionChange)="selectWatermark($event.value)" *ngIf="!!value" [value]="value" [disabled]="disabled || isReadonly">
-            <mat-select-trigger *ngIf="!!value">
-                <mat-icon *ngIf="!watermarksMap.get(value)?.enabled" svgIcon="red:warning"></mat-icon>
-                <span> {{ watermarksMap.get(value)?.name }} </span>
-            </mat-select-trigger>
+        <mat-form-field *ngIf="!!value">
+            <mat-select (selectionChange)="selectWatermark($event.value)" [disabled]="disabled || isReadonly" [value]="value">
+                <mat-select-trigger *ngIf="!!value">
+                    <mat-icon *ngIf="!watermarksMap.get(value)?.enabled" svgIcon="red:warning"></mat-icon>
+                    <span> {{ watermarksMap.get(value)?.name }} </span>
+                </mat-select-trigger>
 
-            <mat-option *ngFor="let watermark of watermarks" [disabled]="!watermark.enabled" [value]="watermark.id">
-                <mat-icon *ngIf="!watermark.enabled" svgIcon="red:warning"></mat-icon>
-                {{ watermark.name }}
-            </mat-option>
-        </mat-select>
+                <mat-option *ngFor="let watermark of watermarks" [disabled]="!watermark.enabled" [value]="watermark.id">
+                    <mat-icon *ngIf="!watermark.enabled" svgIcon="red:warning"></mat-icon>
+                    {{ watermark.name }}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
     </div>
 </div>
diff --git a/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.scss b/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.scss
index a383c5123..e69de29bb 100644
--- a/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.scss
@@ -1,24 +0,0 @@
-.container {
-    margin-top: 14px;
-
-    .watermark {
-        width: 300px;
-        max-width: 300px;
-
-        mat-select {
-            margin-left: 22px;
-
-            mat-select-trigger,
-            mat-option {
-                display: flex;
-                align-items: center;
-                gap: 18px;
-            }
-
-            span {
-                text-overflow: ellipsis;
-                overflow: hidden;
-            }
-        }
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html b/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
index 3c9be07e8..9cd46b0e0 100644
--- a/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
+++ b/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
@@ -15,8 +15,8 @@
             </div>
 
             <div class="iqser-input-group required w-400">
-                <mat-form-field floatLabel="always">
-                    <mat-label>{{ 'add-dossier-dialog.form.template.label' | translate }}</mat-label>
+                <label>{{ 'add-dossier-dialog.form.template.label' | translate }}</label>
+                <mat-form-field>
                     <mat-select
                         (valueChange)="dossierTemplateChanged($event)"
                         [placeholder]="'add-dossier-dialog.form.template.placeholder' | translate"
diff --git a/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.scss b/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.scss
index bc9000977..d668add21 100644
--- a/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.scss
@@ -19,13 +19,3 @@
 redaction-select {
     flex: 1;
 }
-
-.watermark {
-    width: 315px;
-    max-width: 315px;
-
-    mat-form-field {
-        margin-left: 22px;
-        margin-top: -10px;
-    }
-}
diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss
index 26875aa03..c05edc9ac 100644
--- a/apps/red-ui/src/styles.scss
+++ b/apps/red-ui/src/styles.scss
@@ -68,6 +68,7 @@
     $iqser-yellow-2: vars.$yellow-2,
     $iqser-helpmode-primary: vars.$green-2,
     $iqser-inputs-outline: vars.$grey-5,
+    $iqser-inputs-height: 36px,
     $iqser-popup-background: vars.$white,
     $iqser-shadow: vars.$grey-4,
     $iqser-toggle-bg: vars.$grey-4,
@@ -123,6 +124,7 @@ $dark-accent-10: darken(vars.$accent, 10%);
     $iqser-yellow-2: vars.$yellow-2,
     $iqser-helpmode-primary: vars.$green-2,
     $iqser-inputs-outline: $light-accent-10,
+    $iqser-inputs-height: 36px,
     $iqser-popup-background: $dark-accent-5,
     $iqser-shadow: rgba(0, 0, 0, 0.4),
     $iqser-toggle-bg: $light-accent-5,
diff --git a/libs/common-ui b/libs/common-ui
index 66f13e9ef..daa92eecc 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 66f13e9ef0e0cb6c2c323806baf5b0d2ab2446e4
+Subproject commit daa92eeccf25713f75f674ab0b8a4df0becdb083