feat(console): MDC components (#6482)

mdc components --------- Co-authored-by: Elio Bischof <[email protected]>
2026-11-14 18:05:12 +00:00 · 2023-10-26 08:29:06 +00:00
parent cb7b50b513
commit b099a26a16
412 changed files with 2711 additions and 2698 deletions
@@ -7,38 +7,43 @@
  [selection]="selection"
 >
  <div actions *ngIf="selection.isEmpty()">
-    <a class="cnsl-action-button" color="primary" mat-raised-button (click)="openAddAction()">
-      <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
+    <a color="primary" mat-raised-button (click)="openAddAction()">
+      <div class="cnsl-action-button">
+        <mat-icon class="icon">add</mat-icon>
+        <span>{{ 'ACTIONS.NEW' | translate }}</span>
+      </div>
    </a>
  </div>
  <div actions *ngIf="!selection.isEmpty()">
-    <button
-      class="margin-right action-state-btn cnsl-action-button bg-state inactive"
-      mat-raised-button
-      (click)="deactivateSelection()"
-    >
-      <span>{{ 'ACTIONS.DEACTIVATE' | translate }}</span>
-      <cnsl-action-keys (actionTriggered)="deactivateSelection()" [type]="ActionKeysType.DEACTIVATE"> </cnsl-action-keys>
+    <button class="margin-right action-state-btn bg-state inactive" mat-raised-button (click)="deactivateSelection()">
+      <div class="cnsl-action-button">
+        <span>{{ 'ACTIONS.DEACTIVATE' | translate }}</span>
+        <cnsl-action-keys (actionTriggered)="deactivateSelection()" [type]="ActionKeysType.DEACTIVATE"> </cnsl-action-keys>
+      </div>
    </button>
-    <button class="action-state-btn cnsl-action-button bg-state active" mat-raised-button (click)="activateSelection()">
-      <span>{{ 'ACTIONS.REACTIVATE' | translate }}</span>
-      <cnsl-action-keys (actionTriggered)="activateSelection()" [type]="ActionKeysType.REACTIVATE"> </cnsl-action-keys>
+    <button class="action-state-btn bg-state active" mat-raised-button (click)="activateSelection()">
+      <div class="cnsl-action-button">
+        <span>{{ 'ACTIONS.REACTIVATE' | translate }}</span>
+        <cnsl-action-keys (actionTriggered)="activateSelection()" [type]="ActionKeysType.REACTIVATE"> </cnsl-action-keys>
+      </div>
    </button>
  </div>

  <div class="table-wrapper">
    <table class="table" mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="select">
-        <th mat-header-cell *matHeaderCellDef class="action-select-cell">
-          <mat-checkbox
-            color="primary"
-            (change)="$event ? masterToggle() : null"
-            [checked]="selection.hasValue() && isAllSelected()"
-            [indeterminate]="selection.hasValue() && !isAllSelected()"
-          >
-          </mat-checkbox>
+        <th mat-header-cell *matHeaderCellDef>
+          <div class="selection">
+            <mat-checkbox
+              color="primary"
+              (change)="$event ? masterToggle() : null"
+              [checked]="selection.hasValue() && isAllSelected()"
+              [indeterminate]="selection.hasValue() && !isAllSelected()"
+            >
+            </mat-checkbox>
+          </div>
        </th>
-        <td mat-cell *matCellDef="let key" class="action-select-cell">
+        <td mat-cell *matCellDef="let key" class="selection">
          <mat-checkbox
            color="primary"
            (click)="$event.stopPropagation()"
@@ -16,10 +16,6 @@ th {
  }
 }

-.action-select-cell {
-  width: 50px;
-}
-
 tr {
  outline: none;

@@ -1,8 +1,8 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { LegacyPageEvent as PageEvent } from '@angular/material/legacy-paginator';
-import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
+import { MatDialog } from '@angular/material/dialog';
+import { PageEvent } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
 import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { ActionKeysType } from 'src/app/modules/action-keys/action-keys.component';
@@ -82,16 +82,12 @@
            </div>
          </cnsl-card>

-          <button
-            *ngIf="flow.type"
-            class="add-btn cnsl-action-button"
-            mat-raised-button
-            color="primary"
-            (click)="openAddTrigger(flow.type)"
-          >
-            <mat-icon>add</mat-icon>
-            <span>{{ 'FLOWS.ADDTRIGGER' | translate }}</span>
-            <span *ngIf="selection && selection.length">&nbsp;({{ selection.length }})</span>
+          <button *ngIf="flow.type" class="add-btn" mat-raised-button color="primary" (click)="openAddTrigger(flow.type)">
+            <div class="cnsl-action-button">
+              <mat-icon>add</mat-icon>
+              <span>{{ 'FLOWS.ADDTRIGGER' | translate }}</span>
+              <span *ngIf="selection && selection.length">&nbsp;({{ selection.length }})</span>
+            </div>
          </button>
        </div>
      </div>
@@ -1,5 +1,3 @@
-@use '@angular/material' as mat;
-
@mixin actions-theme($theme) {
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
@@ -1,7 +1,7 @@
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { Component, OnDestroy } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { Subject, takeUntil } from 'rxjs';
 import { ActionKeysType } from 'src/app/modules/action-keys/action-keys.component';
 import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
@@ -2,13 +2,13 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-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 { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { CodemirrorModule } from '@ctrl/ngx-codemirror';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
@@ -1,17 +1,8 @@
-@use '@angular/material' as mat;
-
 .action-dialog-title {
  font-size: 1.2rem;
  margin-top: 0;
 }

-@mixin action-dialog-theme($theme) {
-  $primary: map-get($theme, primary);
-  $primary-color: mat.get-color-from-palette($primary, 500);
-  $is-dark-theme: map-get($theme, is-dark);
-  $foreground: map-get($theme, foreground);
-}
-
 .action {
  display: flex;
  align-items: center;
@@ -1,10 +1,6 @@
 import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import {
-  MatLegacyDialog as MatDialog,
-  MatLegacyDialogRef as MatDialogRef,
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

 import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
 import { mapTo, Subject, takeUntil } from 'rxjs';
@@ -22,6 +22,7 @@
  </form>
 </div>
 <div mat-dialog-actions class="action">
+  <span class="fill-space"></span>
  <button mat-stroked-button (click)="closeDialog()">
    {{ 'ACTIONS.CANCEL' | translate }}
  </button>
@@ -9,9 +9,12 @@

 .action {
  display: flex;
-  justify-content: space-between;
  margin-top: 1rem;

+  .fill-space {
+    flex: 1;
+  }
+
  .ok-button {
    margin-left: 0.5rem;
  }
@@ -1,9 +1,6 @@
 import { Component, Inject } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import {
-  MatLegacyDialogRef as MatDialogRef,
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { requiredValidator } from 'src/app/modules/form-field/validators/validators';
 import { Action, FlowType, TriggerType } from 'src/app/proto/generated/zitadel/action_pb';
 import { SetTriggerActionsRequest } from 'src/app/proto/generated/zitadel/management_pb';
@@ -13,8 +13,8 @@ h1 {
    .continue-button {
      margin-top: 3rem;
      display: block;
-      padding: 0.5rem 4rem;
-      border-radius: 0.5rem;
+      height: 3.5rem;
+      padding: 0 4rem;
    }
  }

@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
@@ -1,13 +1,11 @@
-@use '@angular/material' as mat;
-
@mixin events-theme($theme) {
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);
  $is-dark-theme: map-get($theme, is-dark);
-  $card-background-color: mat.get-color-from-palette($background, cards);
+  $card-background-color: map-get($background, cards);
  $border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
  $primary: map-get($theme, primary);
-  $primary-color: mat.get-color-from-palette($primary, 500);
+  $primary-color: map-get($primary, 500);

  .mat-column-payload {
    position: relative;
@@ -1,8 +1,8 @@
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { Component, OnDestroy, 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 { MatSort, Sort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
 import { BehaviorSubject, Observable, Subject, takeUntil } from 'rxjs';
 import { DisplayJsonDialogComponent } from 'src/app/modules/display-json-dialog/display-json-dialog.component';
 import { PaginatorComponent } from 'src/app/modules/paginator/paginator.component';
@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
 import { CardModule } from 'src/app/modules/card/card.module';
@@ -19,7 +19,7 @@ import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/local
 import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';

 import { OverlayModule } from '@angular/cdk/overlay';
-import { MatLegacyDialogModule } from '@angular/material/legacy-dialog';
+import { MatDialogModule } from '@angular/material/dialog';
 import { ActionKeysModule } from 'src/app/modules/action-keys/action-keys.module';
 import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
 import { DisplayJsonDialogModule } from 'src/app/modules/display-json-dialog/display-json-dialog.module';
@@ -41,7 +41,7 @@ import { EventsComponent } from './events.component';
    ToObjectPipeModule,
    ToPayloadPipeModule,
    HasRolePipeModule,
-    MatLegacyDialogModule,
+    MatDialogModule,
    MatButtonModule,
    CopyToClipboardModule,
    InputModule,
@@ -1,6 +1,6 @@
 import { AfterViewInit, Component, ViewChild } from '@angular/core';
-import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
-import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
 import { BehaviorSubject, from, Observable, of } from 'rxjs';
 import { catchError, finalize, map } from 'rxjs/operators';
 import { FailedEvent } from 'src/app/proto/generated/zitadel/admin_pb';
@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
 import { CardModule } from 'src/app/modules/card/card.module';
@@ -1,20 +1,18 @@
-@use '@angular/material' as mat;
-
@mixin home-theme($theme) {
  $primary: map-get($theme, primary);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $accent: map-get($theme, accent);
-  $primary-color: mat.get-color-from-palette($primary, 500);
+  $primary-color: map-get($primary, 500);

-  $warn-color: mat.get-color-from-palette($warn, 500);
-  $accent-color: mat.get-color-from-palette($accent, 500);
+  $warn-color: map-get($warn, 500);
+  $accent-color: map-get($accent, 500);
  $foreground: map-get($theme, foreground);
  $is-dark-theme: map-get($theme, is-dark);
  $back: map-get($background, background);

-  $list-background-color: mat.get-color-from-palette($background, 300);
-  $card-background-color: mat.get-color-from-palette($background, cards);
+  $list-background-color: map-get($background, 300);
+  $card-background-color: map-get($background, cards);
  $border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
  $border-selected-color: if($is-dark-theme, #fff, #000);

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatRippleModule } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { ShortcutsModule } from 'src/app/modules/shortcuts/shortcuts.module';
@@ -1,7 +1,7 @@
 import { AfterViewInit, Component, ViewChild } from '@angular/core';
-import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
-import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
+import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
 import { BehaviorSubject, from, Observable, of } from 'rxjs';
 import { catchError, finalize, map } from 'rxjs/operators';
 import { View } from 'src/app/proto/generated/zitadel/admin_pb';
@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
 import { CardModule } from 'src/app/modules/card/card.module';
@@ -2,7 +2,7 @@
  <p class="subinfo" sub>
    <span class="cnsl-secondary-text">{{ 'IAM.MEMBER.DESCRIPTION' | translate }}</span>
    <a mat-icon-button href="https://zitadel.com/docs/concepts/structure/managers" target="_blank">
-      <i class="las la-info-circle"></i>
+      <mat-icon class="icon">info_outline</mat-icon>
    </a>
  </p>
  <cnsl-members-table
@@ -29,10 +29,12 @@
      </button>
    </ng-template>
    <ng-template cnslHasRole writeactions [hasRole]="['iam.member.write']">
-      <button color="primary" (click)="openAddMember()" class="cnsl-action-button" mat-raised-button>
-        <mat-icon class="icon">add</mat-icon>
-        <span>{{ 'ACTIONS.NEW' | translate }}</span>
-        <cnsl-action-keys (actionTriggered)="openAddMember()"> </cnsl-action-keys>
+      <button color="primary" (click)="openAddMember()" mat-raised-button>
+        <div class="cnsl-action-button">
+          <mat-icon class="icon">add</mat-icon>
+          <span>{{ 'ACTIONS.NEW' | translate }}</span>
+          <cnsl-action-keys (actionTriggered)="openAddMember()"> </cnsl-action-keys>
+        </div>
      </button>
    </ng-template>
  </cnsl-members-table>
@@ -4,7 +4,7 @@
  font-size: 14px;
  margin: -1.5rem 0 0 0;

-  i {
+  .icon {
    font-size: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
 import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';

 import { InstanceMembersComponent } from './instance-members.component';
@@ -1,6 +1,6 @@
 import { Component, EventEmitter } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { LegacyPageEvent as PageEvent } from '@angular/material/legacy-paginator';
+import { MatDialog } from '@angular/material/dialog';
+import { PageEvent } from '@angular/material/paginator';
 import { ActionKeysType } from 'src/app/modules/action-keys/action-keys.component';
 import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
 import { Member } from 'src/app/proto/generated/zitadel/member_pb';
@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { ActionKeysModule } from 'src/app/modules/action-keys/action-keys.module';
@@ -1,5 +1,3 @@
-@use '@angular/material' as mat;
-
@mixin instance-detail-theme($theme) {
  $foreground: map-get($theme, foreground);
  $is-dark-theme: map-get($theme, is-dark);
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { BehaviorSubject, from, Observable, of } from 'rxjs';
 import { catchError, finalize, map } from 'rxjs/operators';
@@ -1,16 +1,16 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { CardModule } from 'src/app/modules/card/card.module';
@@ -34,7 +34,8 @@ h1 {
        .continue-button {
          margin-top: 3rem;
          display: block;
-          padding: 0.5rem 4rem;
+          height: 3.5rem;
+          padding: 0 4rem;
        }
      }

@@ -115,7 +116,8 @@ h1 {

    .big-button {
      display: block;
-      padding: 0.5rem 4rem;
+      padding: 0 4rem;
+      height: 3.5rem;
    }
  }

@@ -2,7 +2,7 @@ import { animate, style, transition, trigger } from '@angular/animations';
 import { Location } from '@angular/common';
 import { Component } from '@angular/core';
 import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, ValidatorFn, Validators } from '@angular/forms';
-import { MatLegacySlideToggleChange as MatSlideToggleChange } from '@angular/material/legacy-slide-toggle';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { Router } from '@angular/router';
 import {
  containsLowerCaseValidator,
@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { Buffer } from 'buffer';
 import { BehaviorSubject, from, Observable, of, Subject, takeUntil } from 'rxjs';
@@ -2,7 +2,7 @@
  <p class="subinfo" sub>
    <span class="cnsl-secondary-text">{{ 'ORG.MEMBER.DESCRIPTION' | translate }}</span>
    <a mat-icon-button href="https://zitadel.com/docs/concepts/structure/managers" target="_blank">
-      <i class="las la-info-circle"></i>
+      <mat-icon class="icon">info_outline</mat-icon>
    </a>
  </p>
  <cnsl-members-table
@@ -29,10 +29,12 @@
      </button>
    </ng-template>
    <ng-template cnslHasRole writeactions [hasRole]="['org.member.write:' + org?.id, 'org.member.write']">
-      <button color="primary" (click)="openAddMember()" class="cnsl-action-button" mat-raised-button>
-        <mat-icon class="icon">add</mat-icon>
-        <span>{{ 'ACTIONS.NEW' | translate }}</span>
-        <cnsl-action-keys (actionTriggered)="openAddMember()"> </cnsl-action-keys>
+      <button color="primary" (click)="openAddMember()" mat-raised-button>
+        <div class="cnsl-action-button">
+          <mat-icon class="icon">add</mat-icon>
+          <span>{{ 'ACTIONS.NEW' | translate }}</span>
+          <cnsl-action-keys (actionTriggered)="openAddMember()"> </cnsl-action-keys>
+        </div>
      </button>
    </ng-template>
  </cnsl-members-table>
@@ -4,7 +4,7 @@
  font-size: 14px;
  margin: -1.5rem 0 0 0;

-  i {
+  .icon {
    font-size: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
 import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';

 import { OrgMembersComponent } from './org-members.component';
@@ -1,6 +1,6 @@
 import { Component, EventEmitter } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { LegacyPageEvent as PageEvent } from '@angular/material/legacy-paginator';
+import { MatDialog } from '@angular/material/dialog';
+import { PageEvent } from '@angular/material/paginator';
 import { ActionKeysType } from 'src/app/modules/action-keys/action-keys.component';
 import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
 import { Member } from 'src/app/proto/generated/zitadel/member_pb';
@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { ActionKeysModule } from 'src/app/modules/action-keys/action-keys.module';
@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
@@ -8,7 +8,7 @@
  }

  button {
-    margin-bottom: 14px;
+    margin-bottom: 0.5rem;
    margin-right: -0.5rem;
  }
 }
@@ -104,7 +104,8 @@ p.desc {
  }

  .create-button {
-    padding: 0.5rem 4rem;
+    height: 3.5rem;
+    padding: 0 4rem;
  }
 }

@@ -139,7 +140,8 @@ p.desc {
  .continue-button {
    margin-top: 3rem;
    display: block;
-    padding: 0.5rem 4rem;
+    height: 3.5rem;
+    padding: 0 4rem;
  }
 }

@@ -3,7 +3,7 @@ import { StepperSelectionEvent } from '@angular/cdk/stepper';
 import { Location } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Buffer } from 'buffer';
 import { Subject, Subscription } from 'rxjs';
@@ -282,17 +282,17 @@
              </cnsl-info-section>

              <p class="clockskew-title cnsl-secondary-text">ClockSkew</p>
+              <!-- TODO: The 'tickInterval' property no longer exists -->
              <mat-slider
                color="primary"
                formControlName="clockSkewSeconds"
                class="clockskew-slider"
                thumbLabel
                [displayWith]="formatClockSkewLabel"
-                tickInterval=".1"
                min="0"
                [step]="1"
                max="5"
-              >
+                ><input matSliderThumb />
              </mat-slider>
              <cnsl-info-section class="full-width app-desc">
                <span>{{ 'APP.OIDC.CLOCKSKEW' | translate }}</span>
@@ -1,5 +1,3 @@
-@use '@angular/material' as mat;
-
@mixin app-detail-theme($theme) {
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
@@ -247,7 +245,7 @@
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  .rt {
-    margin-top: 2.3rem;
+    margin-top: 1.7rem;
    margin-left: 0.5rem;
  }
 }
@@ -2,8 +2,8 @@ import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
 import { Location } from '@angular/common';
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { AbstractControl, FormControl, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
-import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Buffer } from 'buffer';
@@ -268,6 +268,15 @@ export class AppDetailComponent implements OnInit, OnDestroy {
            if (app.app) {
              this.app = app.app;

+              // TODO: duplicates should be handled in the API
+              if (this.app.oidcConfig?.complianceProblemsList && this.app.oidcConfig?.complianceProblemsList.length) {
+                this.app.oidcConfig.complianceProblemsList = this.app.oidcConfig?.complianceProblemsList.filter(
+                  (element, index) => {
+                    return this.app?.oidcConfig?.complianceProblemsList.findIndex((e) => e.key === element.key) === index;
+                  },
+                );
+              }
+
              const breadcrumbs = [
                new Breadcrumb({
                  type: BreadcrumbType.ORG,
@@ -1,8 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import {
-  MatLegacyDialogRef as MatDialogRef,
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'cnsl-auth-method-dialog',
@@ -1,8 +1,9 @@
 <h1 mat-dialog-title>
  <span class="title">{{ 'APP.OIDC.CLIENTSECRET' | translate }}</span>
 </h1>
-<p class="desc cnsl-secondary-text">{{ 'APP.OIDC.CLIENTSECRET_DESCRIPTION' | translate }}</p>
 <div mat-dialog-content>
+  <p class="desc cnsl-secondary-text">{{ 'APP.OIDC.CLIENTSECRET_DESCRIPTION' | translate }}</p>
+
  <div class="flex" *ngIf="data.clientId">
    <span class="overflow-auto" data-e2e="client-id"><span class="desc">ClientId:</span> {{ data.clientId }}</span>
    <button
@@ -1,8 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import {
-  MatLegacyDialogRef as MatDialogRef,
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'cnsl-app-secret-dialog',
@@ -2,20 +2,20 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
-import { MatLegacySliderModule as MatSliderModule } from '@angular/material/legacy-slider';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSliderModule } from '@angular/material/slider';
 import { MatStepperModule } from '@angular/material/stepper';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { CodemirrorModule } from '@ctrl/ngx-codemirror';
 import { TranslateModule } from '@ngx-translate/core';
 import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
@@ -1,5 +1,3 @@
-@use '@angular/material' as mat;
-
@mixin redirect-uris-theme($theme) {
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
@@ -40,11 +38,13 @@

      .icon-button {
        height: 30px;
+        width: 30px;
        line-height: 30px;
+        padding: 0;

        .icon {
          font-size: 1rem;
-          margin-bottom: 3px;
+          height: 1rem;
        }

        &:not(:hover) {
@@ -84,7 +84,7 @@
  }

  button {
-    margin-bottom: 14px;
+    margin-bottom: 0.5rem;
    margin-right: -0.5rem;
  }
 }
@@ -1,5 +1,3 @@
-@use '@angular/material' as mat;
-
@mixin granted-project-detail-theme($theme) {
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
@@ -1,6 +1,6 @@
 import { Location } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject, from, Observable, of, Subscription } from 'rxjs';
@@ -1,16 +1,16 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatRippleModule } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { MemberCreateDialogModule } from 'src/app/modules/add-member-dialog/member-create-dialog.module';
@@ -7,30 +7,37 @@
 >
  <ng-template cnslHasRole [hasRole]="['project.app.write']" actions>
    <a [disabled]="disabled" [routerLink]="['/projects', projectId, 'apps', 'create']" color="primary" mat-raised-button>
-      <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
+      <div class="cnsl-action-button">
+        <mat-icon class="icon">add</mat-icon>
+        <span>{{ 'ACTIONS.NEW' | translate }}</span>
+      </div>
    </a>
  </ng-template>

  <div class="table-wrapper">
    <table [dataSource]="dataSource" mat-table class="table" aria-label="Elements">
      <ng-container matColumnDef="select">
-        <th class="selection" mat-header-cell *matHeaderCellDef>
-          <mat-checkbox
-            color="primary"
-            (change)="$event ? masterToggle() : null"
-            [checked]="selection.hasValue() && isAllSelected()"
-            [indeterminate]="selection.hasValue() && !isAllSelected()"
-          >
-          </mat-checkbox>
+        <th mat-header-cell *matHeaderCellDef>
+          <div class="selection">
+            <mat-checkbox
+              color="primary"
+              (change)="$event ? masterToggle() : null"
+              [checked]="selection.hasValue() && isAllSelected()"
+              [indeterminate]="selection.hasValue() && !isAllSelected()"
+            >
+            </mat-checkbox>
+          </div>
        </th>
-        <td class="selection" mat-cell *matCellDef="let row">
-          <mat-checkbox
-            color="primary"
-            (click)="$event.stopPropagation()"
-            (change)="$event ? selection.toggle(row) : null"
-            [checked]="selection.isSelected(row)"
-          >
-          </mat-checkbox>
+        <td mat-cell *matCellDef="let row">
+          <div class="selection">
+            <mat-checkbox
+              color="primary"
+              (click)="$event.stopPropagation()"
+              (change)="$event ? selection.toggle(row) : null"
+              [checked]="selection.isSelected(row)"
+            >
+            </mat-checkbox>
+          </div>
        </td>
      </ng-container>

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
 import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';

 import { ApplicationsComponent } from './applications.component';
@@ -1,6 +1,6 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
-import { MatLegacyTable as MatTable } from '@angular/material/legacy-table';
+import { MatTable } from '@angular/material/table';
 import { merge } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { PaginatorComponent } from 'src/app/modules/paginator/paginator.component';
@@ -1,5 +1,3 @@
-@use '@angular/material' as mat;
-
@mixin owned-project-detail-theme($theme) {
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
@@ -1,7 +1,7 @@
 import { Location } from '@angular/common';
 import { Component, EventEmitter, OnInit } 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 { ActivatedRoute, Params, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject, from, Observable, of } from 'rxjs';
@@ -1,15 +1,15 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatRippleModule } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { MemberCreateDialogModule } from 'src/app/modules/add-member-dialog/member-create-dialog.module';
@@ -1,16 +1,16 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatRippleModule } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
@@ -24,6 +24,7 @@ form {

  .big-button {
    display: block;
-    padding: 0.5rem 4rem;
+    padding: 0 4rem;
+    height: 3.5rem;
  }
 }
@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { CardModule } from 'src/app/modules/card/card.module';
 import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
@@ -2,14 +2,16 @@
  <p class="subinfo" sub>
    <span class="cnsl-secondary-text">{{ 'PROJECT.GRANT.DETAIL.DESC' | translate }}</span>
    <a mat-icon-button href="https://zitadel.com/docs/concepts/structure/projects#granted-organizations" target="_blank">
-      <i class="las la-info-circle"></i>
+      <mat-icon class="icon">info_outline</mat-icon>
    </a>
  </p>

  <div actions>
    <button class="actions-trigger-desk" mat-raised-button color="primary" [matMenuTriggerFor]="actions">
-      <span>{{ 'ACTIONS.ACTIONS' | translate }}</span>
-      <mat-icon class="icon">keyboard_arrow_down</mat-icon>
+      <div class="cnsl-action-button">
+        <span>{{ 'ACTIONS.ACTIONS' | translate }}</span>
+        <mat-icon class="icon">keyboard_arrow_down</mat-icon>
+      </div>
    </button>
    <button
      class="actions-trigger-mob"
@@ -67,7 +69,6 @@
    [refreshTrigger]="changePage"
  >
    <button
-      class="cnsl-action-button"
      selectactions
      (click)="removeProjectMemberSelection()"
      [disabled]="
@@ -77,13 +78,14 @@
      color="warn"
      mat-raised-button
    >
-      <i class="las la-trash"></i>
-      <span>{{ 'ACTIONS.SELECTIONDELETE' | translate }}</span>
-      <cnsl-action-keys [type]="ActionKeysType.DELETE" (actionTriggered)="removeProjectMemberSelection()">
-      </cnsl-action-keys>
+      <div class="cnsl-action-button">
+        <i class="las la-trash"></i>
+        <span>{{ 'ACTIONS.SELECTIONDELETE' | translate }}</span>
+        <cnsl-action-keys [type]="ActionKeysType.DELETE" (actionTriggered)="removeProjectMemberSelection()">
+        </cnsl-action-keys>
+      </div>
    </button>
    <button
-      class="cnsl-action-button"
      writeactions
      color="primary"
      [disabled]="
@@ -93,8 +95,10 @@
      color="primary"
      mat-raised-button
    >
-      <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
-      <cnsl-action-keys (actionTriggered)="openAddMember()"> </cnsl-action-keys>
+      <div class="cnsl-action-button">
+        <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
+        <cnsl-action-keys (actionTriggered)="openAddMember()"> </cnsl-action-keys>
+      </div>
    </button>
  </cnsl-members-table>
 </cnsl-detail-layout>
@@ -4,7 +4,7 @@
  font-size: 14px;
  margin: -1.5rem 0 0 0;

-  i {
+  .icon {
    font-size: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
@@ -1,6 +1,6 @@
 import { Component, EventEmitter } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { LegacyPageEvent as PageEvent } from '@angular/material/legacy-paginator';
+import { MatDialog } from '@angular/material/dialog';
+import { PageEvent } from '@angular/material/paginator';
 import { ActivatedRoute } from '@angular/router';
 import { ActionKeysType } from 'src/app/modules/action-keys/action-keys.component';
 import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
@@ -1,17 +1,17 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { ActionKeysModule } from 'src/app/modules/action-keys/action-keys.module';
@@ -14,40 +14,45 @@
          <a
            [disabled]="(['project.grant.write$', 'project.grant.write:' + projectId] | hasRole | async) === false"
            color="primary"
-            class="cnsl-action-button"
            mat-raised-button
            [routerLink]="['/projects', projectId, 'projectgrants', 'create']"
            data-e2e="create-project-grant-button"
          >
-            <mat-icon class="icon">add</mat-icon>
-            <span>{{ 'ACTIONS.NEW' | translate }}</span>
-            <cnsl-action-keys (actionTriggered)="gotoRouterLink(['/projects', projectId, 'projectgrants', 'create'])">
-            </cnsl-action-keys>
+            <div class="cnsl-action-button">
+              <mat-icon class="icon">add</mat-icon>
+              <span>{{ 'ACTIONS.NEW' | translate }}</span>
+              <cnsl-action-keys (actionTriggered)="gotoRouterLink(['/projects', projectId, 'projectgrants', 'create'])">
+              </cnsl-action-keys>
+            </div>
          </a>
        </div>

        <div class="table-wrapper">
          <table mat-table multiTemplateDataRows class="table" aria-label="Elements" [dataSource]="dataSource">
            <ng-container matColumnDef="select">
-              <th class="selection" mat-header-cell *matHeaderCellDef>
-                <mat-checkbox
-                  [disabled]="(['project.grant.write$', 'project.grant.write:' + projectId] | hasRole | async) === false"
-                  color="primary"
-                  (change)="$event ? masterToggle() : null"
-                  [checked]="selection.hasValue() && isAllSelected()"
-                  [indeterminate]="selection.hasValue() && !isAllSelected()"
-                >
-                </mat-checkbox>
+              <th mat-header-cell *matHeaderCellDef>
+                <div class="selection">
+                  <mat-checkbox
+                    [disabled]="(['project.grant.write$', 'project.grant.write:' + projectId] | hasRole | async) === false"
+                    color="primary"
+                    (change)="$event ? masterToggle() : null"
+                    [checked]="selection.hasValue() && isAllSelected()"
+                    [indeterminate]="selection.hasValue() && !isAllSelected()"
+                  >
+                  </mat-checkbox>
+                </div>
              </th>
-              <td class="selection" mat-cell *matCellDef="let row">
-                <mat-checkbox
-                  [disabled]="(['project.grant.write$', 'project.grant.write:' + projectId] | hasRole | async) === false"
-                  color="primary"
-                  (click)="$event.stopPropagation()"
-                  (change)="$event ? selection.toggle(row) : null"
-                  [checked]="selection.isSelected(row)"
-                >
-                </mat-checkbox>
+              <td mat-cell *matCellDef="let row">
+                <div class="selection">
+                  <mat-checkbox
+                    [disabled]="(['project.grant.write$', 'project.grant.write:' + projectId] | hasRole | async) === false"
+                    color="primary"
+                    (click)="$event.stopPropagation()"
+                    (change)="$event ? selection.toggle(row) : null"
+                    [checked]="selection.isSelected(row)"
+                  >
+                  </mat-checkbox>
+                </div>
              </td>
            </ng-container>

@@ -1,9 +1,9 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { SelectionModel } from '@angular/cdk/collections';
 import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatLegacySelectChange as MatSelectChange } from '@angular/material/legacy-select';
-import { MatLegacyTable as MatTable } from '@angular/material/legacy-table';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSelectChange } from '@angular/material/select';
+import { MatTable } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { tap } from 'rxjs/operators';
 import { PaginatorComponent } from 'src/app/modules/paginator/paginator.component';
@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { ActionKeysModule } from 'src/app/modules/action-keys/action-keys.module';
@@ -30,7 +30,8 @@
 .continue-button {
  margin-top: 3rem;
  display: block;
-  padding: 0.5rem 4rem;
+  height: 3.5rem;
+  padding: 0 4rem;

  @media only screen and (max-width: 450px) {
    margin-top: 1rem;
@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
 import { InputModule } from 'src/app/modules/input/input.module';
@@ -1,7 +1,7 @@
 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 { MatButtonModule } from '@angular/material/button';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { InputModule } from 'src/app/modules/input/input.module';
@@ -33,6 +33,6 @@ h1 {
 .continue-button {
  margin-top: 3rem;
  display: block;
-  padding: 0.5rem 4rem;
-  border-radius: 0.5rem;
+  height: 3.5rem;
+  padding: 0 4rem;
 }
@@ -2,8 +2,8 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { TranslateModule } from '@ngx-translate/core';
 import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
 import { InputModule } from 'src/app/modules/input/input.module';
@@ -1,7 +1,7 @@
 import { animate, animateChild, keyframes, query, stagger, style, transition, trigger } from '@angular/animations';
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, EventEmitter, Input, OnDestroy, OnInit, 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 { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { BehaviorSubject, Observable, Subject, takeUntil } from 'rxjs';
@@ -20,33 +20,38 @@
        [routerLink]="['/projects', 'create']"
        color="primary"
        mat-raised-button
-        class="cnsl-action-button"
      >
-        <mat-icon class="icon">add</mat-icon>
-        <span>{{ 'ACTIONS.NEW' | translate }}</span>
-        <cnsl-action-keys (actionTriggered)="gotoRouterLink(['/projects', 'create'])"> </cnsl-action-keys>
+        <div class="cnsl-action-button">
+          <mat-icon class="icon">add</mat-icon>
+          <span>{{ 'ACTIONS.NEW' | translate }}</span>
+          <cnsl-action-keys (actionTriggered)="gotoRouterLink(['/projects', 'create'])"> </cnsl-action-keys>
+        </div>
      </a>
    </ng-template>
    <div class="table-wrapper">
      <table class="table" mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="select">
-          <th class="selection" mat-header-cell *matHeaderCellDef>
-            <mat-checkbox
-              color="primary"
-              (change)="$event ? masterToggle() : null"
-              [checked]="selection.hasValue() && isAllSelected()"
-              [indeterminate]="selection.hasValue() && !isAllSelected()"
-            >
-            </mat-checkbox>
+          <th mat-header-cell *matHeaderCellDef>
+            <div class="selection">
+              <mat-checkbox
+                color="primary"
+                (change)="$event ? masterToggle() : null"
+                [checked]="selection.hasValue() && isAllSelected()"
+                [indeterminate]="selection.hasValue() && !isAllSelected()"
+              >
+              </mat-checkbox>
+            </div>
          </th>
-          <td class="selection" mat-cell *matCellDef="let row">
-            <mat-checkbox
-              color="primary"
-              (click)="$event.stopPropagation()"
-              (change)="$event ? selection.toggle(row) : null"
-              [checked]="selection.isSelected(row)"
-            >
-            </mat-checkbox>
+          <td mat-cell *matCellDef="let row">
+            <div class="selection">
+              <mat-checkbox
+                color="primary"
+                (click)="$event.stopPropagation()"
+                (change)="$event ? selection.toggle(row) : null"
+                [checked]="selection.isSelected(row)"
+              >
+              </mat-checkbox>
+            </div>
          </td>
        </ng-container>

@@ -1,8 +1,8 @@
 import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, 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 { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
@@ -3,7 +3,7 @@
    <div class="project-title-row">
      <h1>{{ 'PROJECT.PAGES.LIST' | translate }}</h1>
      <a mat-icon-button href="https://zitadel.com/docs/guides/manage/console/projects" rel="noreferrer" target="_blank">
-        <i class="las la-info-circle"></i>
+        <mat-icon class="icon">info_outline</mat-icon>
      </a>
    </div>
    <p class="sub cnsl-secondary-text max-width-description">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>
@@ -6,10 +6,12 @@
    margin: 0;
  }

-  a i {
-    font-size: 1.2rem;
-    height: 1.2rem;
-    line-height: 1.2rem;
+  a {
+    .icon {
+      font-size: 1.2rem;
+      height: 1.2rem;
+      width: 1.2rem;
+    }
  }
 }

@@ -21,6 +23,10 @@
@mixin projects-theme($theme) {
  $foreground: map-get($theme, foreground);

+  .project-title-row a {
+    color: map-get($foreground, text);
+  }
+
  .projects-controls {
    display: flex;
    align-items: center;
@@ -1,14 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatRippleModule } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { ActionKeysModule } from 'src/app/modules/action-keys/action-keys.module';
@@ -36,7 +36,7 @@ import { ProjectsComponent } from './projects.component';
    TranslateModule,
    FormsModule,
    HasRoleModule,
-    MatLegacyTableModule,
+    MatTableModule,
    PaginatorModule,
    InputModule,
    MatIconModule,
@@ -17,15 +17,11 @@

      <p class="cnsl-secondary-text">{{ 'USER.SIGNEDOUT' | translate }}</p>

-      <a
-        class="cnsl-action-button"
-        matTooltip="{{ 'ACTIONS.LOGIN' | translate }}"
-        color="primary"
-        mat-raised-button
-        [routerLink]="['/users/me']"
-      >
-        <i class="las la-sign-in-alt"></i>
-        <span>{{ 'USER.SIGNEDOUT_BTN' | translate }}</span>
+      <a matTooltip="{{ 'ACTIONS.LOGIN' | translate }}" color="primary" mat-raised-button [routerLink]="['/users/me']">
+        <div class="cnsl-action-button">
+          <i class="las la-sign-in-alt"></i>
+          <span>{{ 'USER.SIGNEDOUT_BTN' | translate }}</span>
+        </div>
      </a>
    </div>
  </div>
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 import { LabelPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
-import { ThemeService } from 'src/app/services/theme.service';
 const LABELPOLICY_LOCALSTORAGE_KEY = 'labelPolicyOnSignout';

@Component({
@@ -14,7 +13,7 @@ export class SignedoutComponent {

  public labelpolicy?: LabelPolicy.AsObject;
  public queryParams = { state: '' };
-  constructor(themeService: ThemeService, authService: GrpcAuthService) {
+  constructor(authService: GrpcAuthService) {
    const theme = localStorage.getItem('theme');
    this.dark = theme === 'dark-theme' ? true : theme === 'light-theme' ? false : true;

@@ -25,7 +24,6 @@ export class SignedoutComponent {
      localStorage.removeItem(LABELPOLICY_LOCALSTORAGE_KEY);
      if (parsed) {
        this.labelpolicy = parsed;
-        themeService.applyLabelPolicy(parsed);
        authService.labelpolicy.next(parsed);
        authService.labelPolicyLoading$.next(false);
      }
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { SignedoutRoutingModule } from './signedout-routing.module';
 import { SignedoutComponent } from './signedout.component';
@@ -20,6 +20,7 @@
  .big-button {
    display: block;
    padding: 0.5rem 4rem;
+    height: 3.5rem;
  }
 }

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { TranslateModule } from '@ngx-translate/core';
 import { CardModule } from 'src/app/modules/card/card.module';
 import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
@@ -10,6 +10,7 @@
        margin-top: 3rem;
        display: block;
        padding: 0.5rem 4rem;
+        height: 3.5rem;
        border-radius: 0.5rem;
      }
    }
@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
@@ -101,7 +101,7 @@
        <p class="user-create-section">{{ 'USER.CREATE.ADDRESSANDPHONESECTION' | translate }}</p>

        <div class="phone-grid">
-          <cnsl-form-field>
+          <cnsl-form-field class="phone-country">
            <cnsl-label>{{ 'USER.PROFILE.COUNTRY' | translate }}</cnsl-label>
            <mat-select
              [(value)]="selected"
@@ -109,11 +109,17 @@
              (selectionChange)="setCountryCallingCode()"
              data-cy="country-calling-code"
            >
-              <mat-select-trigger> <span class="fi fi-{{ selected?.countryCode | lowercase }}"></span></mat-select-trigger>
-              <mat-option *ngFor="let country of countryPhoneCodes" [value]="country">
-                <span class="fi fi-{{ country.countryCode | lowercase }}"></span>
-                <span class="phone-country-name">{{ country.countryName }}</span>
-                <span class="phone-country-code">+{{ country.countryCallingCode }}</span>
+              <mat-select-trigger>
+                <span class="fi fi-{{ selected?.countryCode | lowercase }}"></span>
+                <span class="trigger-name">{{ selected?.countryName }}</span>
+              </mat-select-trigger>
+              <mat-option class="phone-country-option" *ngFor="let country of countryPhoneCodes" [value]="country">
+                <span class="phone-country-row">
+                  <span class="phone-country-flag fi fi-{{ country.countryCode | lowercase }}"></span>
+                  <span class="phone-country-name">{{ country.countryName }}</span>
+                  <span class="fill-space"></span>
+                  <small class="phone-country-code">+{{ country.countryCallingCode }}</small>
+                </span>
              </mat-option>
            </mat-select>
          </cnsl-form-field>
@@ -129,6 +135,7 @@
          color="primary"
          [disabled]="userForm.invalid || (this.usePassword && this.pwdForm.invalid)"
          type="submit"
+          class="create-button"
          mat-raised-button
        >
          {{ 'ACTIONS.CREATE' | translate }}
@@ -42,6 +42,7 @@
        margin-top: 3rem;
        display: block;
        padding: 0.5rem 4rem;
+        height: 3.5rem;
        border-radius: 0.5rem;
      }
    }
@@ -60,15 +61,47 @@
  grid-template-columns: auto 1fr;
  column-gap: 1rem;

+  .phone-country {
+    min-width: 200px;
+  }
+
  @media only screen and (max-width: 500px) {
    grid-template-columns: 1fr;
  }
 }

-.phone-country-name {
-  padding: 0 0.5em;
+.trigger-name {
+  font-size: 14px;
+  margin-left: 0.5rem;
 }

-.phone-country-code {
-  color: darkgrey;
+.phone-country-flag {
+  margin-right: 0.5rem;
+  min-width: 22px;
+}
+
+.phone-country-row {
+  display: flex;
+  align-items: center;
+
+  .phone-country-flag {
+    margin-right: 0.5rem;
+  }
+
+  .phone-country-name {
+    padding: 0 0.5em;
+  }
+
+  .phone-country-code {
+    color: darkgrey;
+  }
+
+  .fill-space {
+    flex: 1;
+  }
+}
+
+.create-button {
+  padding: 0.5rem 4rem;
+  height: 3.5rem;
 }
@@ -1,14 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatRippleModule } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
@@ -1,8 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import {
-  MatLegacyDialogRef as MatDialogRef,
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { take } from 'rxjs/operators';
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
@@ -19,14 +19,16 @@
  >
    <button
      actions
-      class="cnsl-action-button button"
+      class="button"
      (click)="addPasswordless()"
      mat-raised-button
      color="primary"
      matTooltip="{{ 'ACTIONS.NEW' | translate }}"
    >
-      <mat-icon>add</mat-icon>
-      {{ 'USER.PASSWORDLESS.U2F' | translate }}
+      <div class="cnsl-action-button">
+        <mat-icon>add</mat-icon>
+        <span>{{ 'USER.PASSWORDLESS.U2F' | translate }}</span>
+      </div>
    </button>
    <table class="table" mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="name">
@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatLegacyTable as MatTable, MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
+import { MatDialog } from '@angular/material/dialog';
 import { MatSort } from '@angular/material/sort';
+import { MatTable, MatTableDataSource } from '@angular/material/table';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
 import { AuthFactorState, WebAuthNToken } from 'src/app/proto/generated/zitadel/user_pb';
@@ -1,8 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import {
-  MatLegacyDialogRef as MatDialogRef,
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-} from '@angular/material/legacy-dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { take } from 'rxjs/operators';

@@ -1,5 +1,3 @@
-@use '@angular/material' as mat;
-
@mixin auth-user-detail-theme($theme) {
  $foreground: map-get($theme, foreground);
  $is-dark-theme: map-get($theme, is-dark);
@@ -2,7 +2,7 @@ import { MediaMatcher } from '@angular/cdk/layout';
 import { Location } from '@angular/common';
 import { Component, EventEmitter, OnDestroy } from '@angular/core';
 import { Validators } from '@angular/forms';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Params } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Buffer } from 'buffer';
@@ -17,14 +17,16 @@
  >
    <button
      actions
-      class="button cnsl-action-button"
+      class="button"
      (click)="addAuthFactor()"
      mat-raised-button
      color="primary"
      matTooltip="{{ 'ACTIONS.NEW' | translate }}"
    >
-      <mat-icon class="icon">add</mat-icon>
-      <span>{{ 'USER.MFA.ADD' | translate }}</span>
+      <div class="cnsl-action-button">
+        <mat-icon class="icon">add</mat-icon>
+        <span>{{ 'USER.MFA.ADD' | translate }}</span>
+      </div>
    </button>

    <table class="table" mat-table [dataSource]="dataSource">
@@ -1,7 +1,7 @@
 import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatLegacyTable as MatTable, MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
+import { MatDialog } from '@angular/material/dialog';
 import { MatSort } from '@angular/material/sort';
+import { MatTable, MatTableDataSource } from '@angular/material/table';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
 import { AuthFactor, AuthFactorState } from 'src/app/proto/generated/zitadel/user_pb';
--- a/Show More
+++ b/Show More