diff --git a/cmd/ready/ready.go b/cmd/ready/ready.go index 2c0e10d076..679a1ac563 100644 --- a/cmd/ready/ready.go +++ b/cmd/ready/ready.go @@ -32,6 +32,9 @@ func ready(config *Config) bool { return false } defer res.Body.Close() - logging.WithFields("status", res.StatusCode).Warn("ready check failed") - return res.StatusCode == 200 + if res.StatusCode != 200 { + logging.WithFields("status", res.StatusCode).Warn("ready check failed") + return false + } + return true } diff --git a/console/angular.json b/console/angular.json index 1301e6686b..ad3d13efd2 100644 --- a/console/angular.json +++ b/console/angular.json @@ -30,6 +30,7 @@ "includePaths": ["node_modules"] }, "allowedCommonJsDependencies": [ + "opentype.js", "fast-sha256", "buffer", "moment", diff --git a/console/package.json b/console/package.json index 5b677e6c25..5819fdd77a 100644 --- a/console/package.json +++ b/console/package.json @@ -12,18 +12,18 @@ }, "private": true, "dependencies": { - "@angular/animations": "^16.2.0", - "@angular/cdk": "^16.2.0", - "@angular/common": "^16.2.0", - "@angular/compiler": "^16.2.0", - "@angular/core": "^16.2.0", - "@angular/forms": "^16.2.0", - "@angular/material": "^16.2.0", - "@angular/material-moment-adapter": "^16.2.0", - "@angular/platform-browser": "^16.2.0", - "@angular/platform-browser-dynamic": "^16.2.0", - "@angular/router": "^16.2.0", - "@angular/service-worker": "^16.2.0", + "@angular/animations": "^16.2.5", + "@angular/cdk": "^16.2.4", + "@angular/common": "^16.2.5", + "@angular/compiler": "^16.2.5", + "@angular/core": "^16.2.5", + "@angular/forms": "^16.2.5", + "@angular/material": "^16.2.4", + "@angular/material-moment-adapter": "^16.2.4", + "@angular/platform-browser": "^16.2.5", + "@angular/platform-browser-dynamic": "^16.2.5", + "@angular/router": "^16.2.5", + "@angular/service-worker": "^16.2.5", "@ctrl/ngx-codemirror": "^6.1.0", "@grpc/grpc-js": "^1.9.3", "@ngx-translate/core": "^14.0.0", @@ -50,15 +50,15 @@ "zone.js": "~0.13.1" }, "devDependencies": { - "@angular-devkit/build-angular": "^16.2.0", - "@angular-eslint/builder": "16.1.0", - "@angular-eslint/eslint-plugin": "16.1.0", - "@angular-eslint/eslint-plugin-template": "16.1.0", - "@angular-eslint/schematics": "16.1.0", - "@angular-eslint/template-parser": "16.1.0", - "@angular/cli": "^16.2.0", - "@angular/compiler-cli": "^16.2.0", - "@angular/language-service": "^16.2.0", + "@angular-devkit/build-angular": "^16.2.2", + "@angular-eslint/builder": "16.2.0", + "@angular-eslint/eslint-plugin": "16.2.0", + "@angular-eslint/eslint-plugin-template": "16.2.0", + "@angular-eslint/schematics": "16.2.0", + "@angular-eslint/template-parser": "16.2.0", + "@angular/cli": "^16.2.2", + "@angular/compiler-cli": "^16.2.5", + "@angular/language-service": "^16.2.5", "@bufbuild/buf": "^1.23.1", "@types/file-saver": "^2.0.2", "@types/google-protobuf": "^3.15.3", diff --git a/console/src/app/app.component.scss b/console/src/app/app.component.scss index b3a8cd86f4..865b96e3f8 100644 --- a/console/src/app/app.component.scss +++ b/console/src/app/app.component.scss @@ -1,15 +1,13 @@ -@use '@angular/material' as mat; - @mixin main-theme($theme) { $primary: map-get($theme, primary); $warn: map-get($theme, warn); $background: map-get($theme, background); $foreground: map-get($theme, foreground); $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); $is-dark-theme: map-get($theme, is-dark); .main-container { diff --git a/console/src/app/app.component.ts b/console/src/app/app.component.ts index b4758e180e..1a9ef8cd91 100644 --- a/console/src/app/app.component.ts +++ b/console/src/app/app.component.ts @@ -218,7 +218,6 @@ export class AppComponent implements OnDestroy { }) .catch((error) => { console.error(error); - this.themeService.setDefaultColors(); this.router.navigate(['/users/me']); }); } diff --git a/console/src/app/app.module.ts b/console/src/app/app.module.ts index 3781c33576..68c356ff8c 100644 --- a/console/src/app/app.module.ts +++ b/console/src/app/app.module.ts @@ -13,11 +13,11 @@ import localePt from '@angular/common/locales/pt'; import localeZh from '@angular/common/locales/zh'; import { APP_INITIALIZER, NgModule } from '@angular/core'; import { MatNativeDateModule } from '@angular/material/core'; +import { MatDialogModule } from '@angular/material/dialog'; import { MatIconModule } from '@angular/material/icon'; -import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog'; -import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select'; -import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar'; -import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; +import { MatSelectModule } from '@angular/material/select'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { ServiceWorkerModule } from '@angular/service-worker'; diff --git a/console/src/app/modules/accounts-card/accounts-card.component.scss b/console/src/app/modules/accounts-card/accounts-card.component.scss index f0a1e30f74..c4926ca891 100644 --- a/console/src/app/modules/accounts-card/accounts-card.component.scss +++ b/console/src/app/modules/accounts-card/accounts-card.component.scss @@ -3,11 +3,11 @@ $warn: map-get($theme, warn); $background: map-get($theme, background); $accent: map-get($theme, accent); - $primary-color: mat.get-color-from-palette($primary, 500); - $card-background-color: mat.get-color-from-palette($background, cards); + $primary-color: map-get($primary, 500); + $card-background-color: map-get($background, cards); - $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); @@ -54,10 +54,6 @@ button { border-radius: 50vh; margin: 0.5rem; - - .mat-button-wrapper { - font-size: 0.8rem; - } } .l-accounts { diff --git a/console/src/app/modules/accounts-card/accounts-card.module.ts b/console/src/app/modules/accounts-card/accounts-card.module.ts index 7f4ec08ae8..057175a793 100644 --- a/console/src/app/modules/accounts-card/accounts-card.module.ts +++ b/console/src/app/modules/accounts-card/accounts-card.module.ts @@ -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 { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar'; +import { MatProgressBarModule } from '@angular/material/progress-bar'; import { RouterModule } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; diff --git a/console/src/app/modules/action-keys/action-keys.component.scss b/console/src/app/modules/action-keys/action-keys.component.scss index 824e763ec1..102019f9ca 100644 --- a/console/src/app/modules/action-keys/action-keys.component.scss +++ b/console/src/app/modules/action-keys/action-keys.component.scss @@ -1,12 +1,10 @@ -@use '@angular/material' as mat; - @mixin action-keys-theme($theme) { $primary: map-get($theme, primary); $background: map-get($theme, background); $foreground: map-get($theme, foreground); $accent: map-get($theme, accent); $is-dark-theme: map-get($theme, is-dark); - $accent-color: mat.get-color-from-palette($primary, 500); + $accent-color: map-get($primary, 500); $back: map-get($background, background); .action-keys-wrapper { @@ -45,7 +43,7 @@ right: 0; bottom: 0; left: 0; - background: mat.get-color-from-palette($primary, default-contrast); + background: map-get($primary, default-contrast); opacity: 0.2; border-radius: 4px; } diff --git a/console/src/app/modules/add-key-dialog/add-key-dialog.component.ts b/console/src/app/modules/add-key-dialog/add-key-dialog.component.ts index c072b974b0..4e5c7f6de6 100644 --- a/console/src/app/modules/add-key-dialog/add-key-dialog.component.ts +++ b/console/src/app/modules/add-key-dialog/add-key-dialog.component.ts @@ -1,9 +1,6 @@ import { Component, Inject } from '@angular/core'; import { UntypedFormControl } 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 { KeyType } from 'src/app/proto/generated/zitadel/auth_n_key_pb'; export enum AddKeyDialogType { diff --git a/console/src/app/modules/add-key-dialog/add-key-dialog.module.ts b/console/src/app/modules/add-key-dialog/add-key-dialog.module.ts index 4301a8bbc2..1dd50fae2a 100644 --- a/console/src/app/modules/add-key-dialog/add-key-dialog.module.ts +++ b/console/src/app/modules/add-key-dialog/add-key-dialog.module.ts @@ -2,14 +2,15 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatMomentDateModule } from '@angular/material-moment-adapter'; +import { MatButtonModule } from '@angular/material/button'; import { MatDatepickerModule } from '@angular/material/datepicker'; 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 { InputModule } from 'src/app/modules/input/input.module'; import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module'; +import { MatDialogModule } from '@angular/material/dialog'; import { AddKeyDialogComponent } from './add-key-dialog.component'; @NgModule({ @@ -22,6 +23,7 @@ import { AddKeyDialogComponent } from './add-key-dialog.component'; MatSelectModule, MatIconModule, FormsModule, + MatDialogModule, MatDatepickerModule, MatMomentDateModule, ReactiveFormsModule, diff --git a/console/src/app/modules/add-member-dialog/member-create-dialog.component.html b/console/src/app/modules/add-member-dialog/member-create-dialog.component.html index 3cfcefdeaf..679d27f2bd 100644 --- a/console/src/app/modules/add-member-dialog/member-create-dialog.component.html +++ b/console/src/app/modules/add-member-dialog/member-create-dialog.component.html @@ -1,9 +1,10 @@

{{ 'MEMBER.ADD' | translate }}

-

{{ 'ORG_DETAIL.MEMBER.ADDDESCRIPTION' | translate }}

+

{{ 'ORG_DETAIL.MEMBER.ADDDESCRIPTION' | translate }}

+ {{ 'MEMBER.CREATIONTYPE' | translate }} diff --git a/console/src/app/modules/add-member-dialog/member-create-dialog.component.scss b/console/src/app/modules/add-member-dialog/member-create-dialog.component.scss index 0336217b1f..ec0bc2f3d3 100644 --- a/console/src/app/modules/add-member-dialog/member-create-dialog.component.scss +++ b/console/src/app/modules/add-member-dialog/member-create-dialog.component.scss @@ -14,7 +14,6 @@ box-sizing: border-box; .role-cb { - padding: 0.25rem 0; box-sizing: border-box; .role-cb-content { diff --git a/console/src/app/modules/add-member-dialog/member-create-dialog.component.ts b/console/src/app/modules/add-member-dialog/member-create-dialog.component.ts index c90477852e..6e34450b56 100644 --- a/console/src/app/modules/add-member-dialog/member-create-dialog.component.ts +++ b/console/src/app/modules/add-member-dialog/member-create-dialog.component.ts @@ -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 { Observable } from 'rxjs'; import { GrantedProject, Project } from 'src/app/proto/generated/zitadel/project_pb'; import { User } from 'src/app/proto/generated/zitadel/user_pb'; diff --git a/console/src/app/modules/add-member-dialog/member-create-dialog.module.ts b/console/src/app/modules/add-member-dialog/member-create-dialog.module.ts index ec9b6204d5..a274c173c2 100644 --- a/console/src/app/modules/add-member-dialog/member-create-dialog.module.ts +++ b/console/src/app/modules/add-member-dialog/member-create-dialog.module.ts @@ -1,12 +1,12 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; -import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox'; -import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips'; -import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog'; -import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select'; -import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; +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 { MatSelectModule } from '@angular/material/select'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { TranslateModule } from '@ngx-translate/core'; import { InputModule } from 'src/app/modules/input/input.module'; import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autocomplete/search-user-autocomplete.module'; diff --git a/console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.component.scss b/console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.component.scss index e1c7139205..f69be987e7 100644 --- a/console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.component.scss +++ b/console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.component.scss @@ -12,8 +12,6 @@ flex-direction: column; .role-cb { - padding: 0.25rem 0; - .role-cb-content { padding-left: 0.5rem; display: flex; @@ -30,5 +28,9 @@ .action { display: flex; - justify-content: space-between; + justify-content: flex-end; + + .ok-button { + margin-left: 1rem; + } } diff --git a/console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.component.ts b/console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.component.ts index 538b8d307f..8119d541c8 100644 --- a/console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.component.ts +++ b/console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.component.ts @@ -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 { getMembershipColor } from 'src/app/utils/color'; @Component({ diff --git a/console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.module.ts b/console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.module.ts index e6546c9a2c..3bc964bff9 100644 --- a/console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.module.ts +++ b/console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.module.ts @@ -1,13 +1,14 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; -import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox'; -import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { TranslateModule } from '@ngx-translate/core'; import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module'; import { RoleTransformPipeModule } from 'src/app/pipes/role-transform/role-transform.module'; import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module'; +import { MatDialogModule } from '@angular/material/dialog'; import { AddMemberRolesDialogComponent } from './add-member-roles-dialog.component'; @NgModule({ @@ -17,6 +18,7 @@ import { AddMemberRolesDialogComponent } from './add-member-roles-dialog.compone TranslateModule, MatCheckboxModule, MatButtonModule, + MatDialogModule, LocalizedDatePipeModule, MatTooltipModule, RoleTransformPipeModule, diff --git a/console/src/app/modules/add-token-dialog/add-token-dialog.component.ts b/console/src/app/modules/add-token-dialog/add-token-dialog.component.ts index d41cb3fc2f..fe84a02db4 100644 --- a/console/src/app/modules/add-token-dialog/add-token-dialog.component.ts +++ b/console/src/app/modules/add-token-dialog/add-token-dialog.component.ts @@ -1,9 +1,6 @@ import { Component, Inject } from '@angular/core'; import { UntypedFormControl } 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'; @Component({ selector: 'cnsl-add-token-dialog', diff --git a/console/src/app/modules/add-token-dialog/add-token-dialog.module.ts b/console/src/app/modules/add-token-dialog/add-token-dialog.module.ts index 99334f458c..7503acc66b 100644 --- a/console/src/app/modules/add-token-dialog/add-token-dialog.module.ts +++ b/console/src/app/modules/add-token-dialog/add-token-dialog.module.ts @@ -2,14 +2,15 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatMomentDateModule } from '@angular/material-moment-adapter'; +import { MatButtonModule } from '@angular/material/button'; import { MatDatepickerModule } from '@angular/material/datepicker'; 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 { InputModule } from 'src/app/modules/input/input.module'; import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module'; +import { MatDialogModule } from '@angular/material/dialog'; import { InfoSectionModule } from '../info-section/info-section.module'; import { AddTokenDialogComponent } from './add-token-dialog.component'; @@ -22,6 +23,7 @@ import { AddTokenDialogComponent } from './add-token-dialog.component'; InfoSectionModule, InputModule, MatSelectModule, + MatDialogModule, MatIconModule, FormsModule, MatDatepickerModule, diff --git a/console/src/app/modules/app-card/app-card.component.scss b/console/src/app/modules/app-card/app-card.component.scss index f34ebeeec5..ce878502b4 100644 --- a/console/src/app/modules/app-card/app-card.component.scss +++ b/console/src/app/modules/app-card/app-card.component.scss @@ -1,12 +1,10 @@ -@use '@angular/material' as mat; - @mixin app-card-theme($theme) { $primary: map-get($theme, primary); $background: map-get($theme, background); $foreground: map-get($theme, foreground); $accent: map-get($theme, accent); $is-dark-theme: map-get($theme, is-dark); - $accent-color: mat.get-color-from-palette($primary, 500); + $accent-color: map-get($primary, 500); $back: map-get($background, background); .cnsl-app-card { @@ -26,7 +24,7 @@ font-weight: 600; background-color: $back; transition: background-color box-shadow 0.3s ease-in; - color: mat.get-color-from-palette($primary, default-contrast); + color: map-get($primary, default-contrast); &.add { background-color: map-get($primary, 500); diff --git a/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss b/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss index 0abe726237..c46ee15bc6 100644 --- a/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss +++ b/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss @@ -1,5 +1,3 @@ -@use '@angular/material' as mat; - .auth-method-radio-button-wrapper { display: flex; flex-direction: row; @@ -20,7 +18,7 @@ @mixin app-auth-method-radio-theme($theme) { $primary: map-get($theme, primary); - $primary-color: mat.get-color-from-palette($primary, 500); + $primary-color: map-get($primary, 500); $is-dark-theme: map-get($theme, is-dark); $background: map-get($theme, background); $border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2)); diff --git a/console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.scss b/console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.scss index df5d638331..10523c9f05 100644 --- a/console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.scss +++ b/console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.scss @@ -1,5 +1,3 @@ -@use '@angular/material' as mat; - .app-type-radio-button-wrapper { display: flex; flex-direction: row; @@ -10,7 +8,7 @@ @mixin app-type-radio-theme($theme) { $primary: map-get($theme, primary); - $primary-color: mat.get-color-from-palette($primary, 500); + $primary-color: map-get($primary, 500); $is-dark-theme: map-get($theme, is-dark); $background: map-get($theme, background); $border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2)); diff --git a/console/src/app/modules/avatar/avatar.component.scss b/console/src/app/modules/avatar/avatar.component.scss index 742728c5ba..ab454f998a 100644 --- a/console/src/app/modules/avatar/avatar.component.scss +++ b/console/src/app/modules/avatar/avatar.component.scss @@ -1,8 +1,6 @@ -@use '@angular/material' as mat; - @mixin avatar-theme($theme) { $primary: map-get($theme, primary); - $primary-color: mat.get-color-from-palette($primary, 500); + $primary-color: map-get($primary, 500); .avatar-circle { border-radius: 50%; diff --git a/console/src/app/modules/card/card.module.ts b/console/src/app/modules/card/card.module.ts index 89702f05a6..2fc3c82b2d 100644 --- a/console/src/app/modules/card/card.module.ts +++ b/console/src/app/modules/card/card.module.ts @@ -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 { CardComponent } from './card.component'; diff --git a/console/src/app/modules/card/card.scss b/console/src/app/modules/card/card.scss index fa39538ddd..89e7a324cb 100644 --- a/console/src/app/modules/card/card.scss +++ b/console/src/app/modules/card/card.scss @@ -1,10 +1,8 @@ -@use '@angular/material' as mat; - @mixin card-theme($theme) { $primary: map-get($theme, primary); - $primary-color: mat.get-color-from-palette($primary, 500); + $primary-color: map-get($primary, 500); $background: map-get($theme, background); - $card-background-color: mat.get-color-from-palette($background, cards); + $card-background-color: map-get($background, cards); $is-dark-theme: map-get($theme, is-dark); $border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2)); $border-selected-color: if($is-dark-theme, #fff, #000); @@ -59,6 +57,13 @@ .cnsl-chip { height: auto; border: 1px solid $border-color; + background: if($is-dark-theme, map-get($background, state), #e4e7e4) !important; + + .cnsl-chip-content { + display: flex; + align-items: center; + font-size: 14px !important; + } } .cnsl-chip-list { diff --git a/console/src/app/modules/changes/changes.component.scss b/console/src/app/modules/changes/changes.component.scss index 59a25dfea7..438d27a5ad 100644 --- a/console/src/app/modules/changes/changes.component.scss +++ b/console/src/app/modules/changes/changes.component.scss @@ -1,5 +1,3 @@ -@use '@angular/material' as mat; - .change-header { display: flex; justify-content: space-between; diff --git a/console/src/app/modules/changes/changes.module.ts b/console/src/app/modules/changes/changes.module.ts index 67ddc917f8..9c087e6383 100644 --- a/console/src/app/modules/changes/changes.module.ts +++ b/console/src/app/modules/changes/changes.module.ts @@ -1,10 +1,10 @@ import { ScrollingModule } from '@angular/cdk/scrolling'; 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 { 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 { ScrollableModule } from 'src/app/directives/scrollable/scrollable.module'; import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module'; diff --git a/console/src/app/modules/client-keys/client-keys.component.html b/console/src/app/modules/client-keys/client-keys.component.html index 80c6d42682..8ac5869c8d 100644 --- a/console/src/app/modules/client-keys/client-keys.component.html +++ b/console/src/app/modules/client-keys/client-keys.component.html @@ -12,7 +12,9 @@ mat-raised-button (click)="openAddKey()" > - add{{ 'ACTIONS.NEW' | translate }} +
+ add{{ 'ACTIONS.NEW' | translate }} +
diff --git a/console/src/app/modules/client-keys/client-keys.component.ts b/console/src/app/modules/client-keys/client-keys.component.ts index b3c7aa0190..bfa32b0b54 100644 --- a/console/src/app/modules/client-keys/client-keys.component.ts +++ b/console/src/app/modules/client-keys/client-keys.component.ts @@ -1,7 +1,7 @@ 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 { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table'; +import { MatDialog } from '@angular/material/dialog'; +import { MatTableDataSource } from '@angular/material/table'; import { TranslateService } from '@ngx-translate/core'; import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb'; import { Moment } from 'moment'; diff --git a/console/src/app/modules/client-keys/client-keys.module.ts b/console/src/app/modules/client-keys/client-keys.module.ts index 3b99a04243..6345df600e 100644 --- a/console/src/app/modules/client-keys/client-keys.module.ts +++ b/console/src/app/modules/client-keys/client-keys.module.ts @@ -1,13 +1,13 @@ 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 { 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 { 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 { MatTableModule } from '@angular/material/table'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { RouterModule } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; import { HasRoleModule } from 'src/app/directives/has-role/has-role.module'; diff --git a/console/src/app/modules/contributors/contributors.component.scss b/console/src/app/modules/contributors/contributors.component.scss index 2782272969..1a15257edb 100644 --- a/console/src/app/modules/contributors/contributors.component.scss +++ b/console/src/app/modules/contributors/contributors.component.scss @@ -1,5 +1,3 @@ -@use '@angular/material' as mat; - @mixin contributors-theme($theme) { $foreground: map-get($theme, foreground); $background: map-get($theme, background); diff --git a/console/src/app/modules/contributors/contributors.module.ts b/console/src/app/modules/contributors/contributors.module.ts index fbd3de6044..3738b34ac0 100644 --- a/console/src/app/modules/contributors/contributors.module.ts +++ b/console/src/app/modules/contributors/contributors.module.ts @@ -1,9 +1,9 @@ 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 { 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 { RoleTransformPipeModule } from 'src/app/pipes/role-transform/role-transform.module'; diff --git a/console/src/app/modules/create-layout/create-layout.component.scss b/console/src/app/modules/create-layout/create-layout.component.scss index 172d993cb8..3cbbebb823 100644 --- a/console/src/app/modules/create-layout/create-layout.component.scss +++ b/console/src/app/modules/create-layout/create-layout.component.scss @@ -1,8 +1,6 @@ -@use '@angular/material' as mat; - @mixin app-create-theme($theme) { $primary: map-get($theme, primary); - $primary-color: mat.get-color-from-palette($primary, 500); + $primary-color: map-get($primary, 500); // Number of steps creating app $steps: 3; @@ -35,7 +33,11 @@ .abort { font-size: 1.2rem; - margin-left: 2rem; + margin-left: 1.5rem; + text-transform: uppercase; + font-size: 14px; + opacity: 0.8; + letter-spacing: 0.05em; } .abort-2 { diff --git a/console/src/app/modules/create-layout/create-layout.module.ts b/console/src/app/modules/create-layout/create-layout.module.ts index 03e1fd412d..346ae71576 100644 --- a/console/src/app/modules/create-layout/create-layout.module.ts +++ b/console/src/app/modules/create-layout/create-layout.module.ts @@ -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 { CreateLayoutComponent } from './create-layout.component'; diff --git a/console/src/app/modules/detail-layout/detail-layout.component.scss b/console/src/app/modules/detail-layout/detail-layout.component.scss index 7e5628314d..b20cc2197a 100644 --- a/console/src/app/modules/detail-layout/detail-layout.component.scss +++ b/console/src/app/modules/detail-layout/detail-layout.component.scss @@ -1,10 +1,8 @@ -@use '@angular/material' as mat; - @mixin detail-layout-theme($theme) { $primary: map-get($theme, primary); - $primary-color: mat.get-color-from-palette($primary, 500); + $primary-color: map-get($primary, 500); $is-dark-theme: map-get($theme, is-dark); - $lighter-color: rgba(mat.get-color-from-palette($primary, 300), 0.5); + $lighter-color: rgba(map-get($primary, 300), 0.5); .detail-layout-head { margin-bottom: 2rem; diff --git a/console/src/app/modules/detail-layout/detail-layout.module.ts b/console/src/app/modules/detail-layout/detail-layout.module.ts index ae458d3261..bfb549a231 100644 --- a/console/src/app/modules/detail-layout/detail-layout.module.ts +++ b/console/src/app/modules/detail-layout/detail-layout.module.ts @@ -1,7 +1,7 @@ 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 { RouterModule } from '@angular/router'; import { BackModule } from 'src/app/directives/back/back.module'; diff --git a/console/src/app/modules/display-json-dialog/display-json-dialog.component.ts b/console/src/app/modules/display-json-dialog/display-json-dialog.component.ts index 1e0a781294..764f74a9b0 100644 --- a/console/src/app/modules/display-json-dialog/display-json-dialog.component.ts +++ b/console/src/app/modules/display-json-dialog/display-json-dialog.component.ts @@ -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 { mapTo } from 'rxjs'; import { Event } from 'src/app/proto/generated/zitadel/event_pb'; diff --git a/console/src/app/modules/display-json-dialog/display-json-dialog.module.ts b/console/src/app/modules/display-json-dialog/display-json-dialog.module.ts index 065f3810a9..369ca2e043 100644 --- a/console/src/app/modules/display-json-dialog/display-json-dialog.module.ts +++ b/console/src/app/modules/display-json-dialog/display-json-dialog.module.ts @@ -1,11 +1,12 @@ 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 { TranslateModule } from '@ngx-translate/core'; import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module'; import { FormsModule } from '@angular/forms'; +import { MatDialogModule } from '@angular/material/dialog'; import { CodemirrorModule } from '@ctrl/ngx-codemirror'; import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module'; import { ToObjectPipeModule } from 'src/app/pipes/to-object/to-object.module'; @@ -19,6 +20,7 @@ import { DisplayJsonDialogComponent } from './display-json-dialog.component'; FormsModule, TranslateModule, MatButtonModule, + MatDialogModule, MatIconModule, CodemirrorModule, TimestampToDatePipeModule, diff --git a/console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.html b/console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.html index 5dd2f7896c..167185c460 100644 --- a/console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.html +++ b/console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.html @@ -1,4 +1,4 @@ -{{ 'ORG.DOMAINS.ADD.TITLE' | translate }} +

{{ 'ORG.DOMAINS.ADD.TITLE' | translate }}

{{ 'ORG.DOMAINS.ADD.DESCRIPTION' | translate }}

diff --git a/console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.scss b/console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.scss index d865b143c0..34245bc39f 100644 --- a/console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.scss +++ b/console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.scss @@ -7,10 +7,6 @@ font-size: 0.9rem; } -.form-field { - width: 100%; -} - .action { display: flex; justify-content: space-between; diff --git a/console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.ts b/console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.ts index 9adce8dc15..0bd2c3d5ae 100644 --- a/console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.ts +++ b/console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.ts @@ -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-add-domain-dialog', diff --git a/console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.module.ts b/console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.module.ts index 986ad68679..b6c2ac7323 100644 --- a/console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.module.ts +++ b/console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.module.ts @@ -1,14 +1,15 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } 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 { InputModule } from 'src/app/modules/input/input.module'; +import { MatDialogModule } from '@angular/material/dialog'; import { AddDomainDialogComponent } from './add-domain-dialog.component'; @NgModule({ declarations: [AddDomainDialogComponent], - imports: [CommonModule, TranslateModule, MatButtonModule, InputModule, FormsModule], + imports: [CommonModule, TranslateModule, MatDialogModule, MatButtonModule, InputModule, FormsModule], }) export class AddDomainDialogModule {} diff --git a/console/src/app/modules/domains/domain-verification/domain-verification.component.ts b/console/src/app/modules/domains/domain-verification/domain-verification.component.ts index 46222cc3ca..94a79908da 100644 --- a/console/src/app/modules/domains/domain-verification/domain-verification.component.ts +++ b/console/src/app/modules/domains/domain-verification/domain-verification.component.ts @@ -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 { saveAs } from 'file-saver'; import { InfoSectionType } from 'src/app/modules/info-section/info-section.component'; import { GenerateOrgDomainValidationResponse } from 'src/app/proto/generated/zitadel/management_pb'; diff --git a/console/src/app/modules/domains/domains.component.html b/console/src/app/modules/domains/domains.component.html index b44caeca9f..1841e30a03 100644 --- a/console/src/app/modules/domains/domains.component.html +++ b/console/src/app/modules/domains/domains.component.html @@ -9,7 +9,7 @@ rel="noreferrer" target="_blank" > - + info_outline

{{ 'ORG.DOMAINS.DESCRIPTION' | translate }}

@@ -24,9 +24,11 @@ class="cnsl-action-button" (click)="addNewDomain()" > - add - {{ 'ACTIONS.NEW' | translate }} - +
+ add + {{ 'ACTIONS.NEW' | translate }} + +
diff --git a/console/src/app/modules/domains/domains.component.scss b/console/src/app/modules/domains/domains.component.scss index 8a324173b5..32455d7929 100644 --- a/console/src/app/modules/domains/domains.component.scss +++ b/console/src/app/modules/domains/domains.component.scss @@ -10,7 +10,7 @@ margin: 0; } - a i { + a .icon { font-size: 1.2rem; height: 1.2rem; line-height: 1.2rem; diff --git a/console/src/app/modules/domains/domains.component.ts b/console/src/app/modules/domains/domains.component.ts index 6a957e06c9..4c57f18c60 100644 --- a/console/src/app/modules/domains/domains.component.ts +++ b/console/src/app/modules/domains/domains.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'; +import { MatDialog } from '@angular/material/dialog'; import { InfoSectionType } from 'src/app/modules/info-section/info-section.component'; import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component'; import { Domain, DomainValidationType } from 'src/app/proto/generated/zitadel/org_pb'; @@ -63,7 +63,6 @@ export class DomainsComponent implements OnInit { public addNewDomain(): void { const dialogRef = this.dialog.open(AddDomainDialogComponent, { - data: {}, width: '400px', }); diff --git a/console/src/app/modules/domains/domains.module.ts b/console/src/app/modules/domains/domains.module.ts index 15fb0c0605..03bb40c94c 100644 --- a/console/src/app/modules/domains/domains.module.ts +++ b/console/src/app/modules/domains/domains.module.ts @@ -1,9 +1,9 @@ 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 { 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 { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module'; import { ActionKeysModule } from 'src/app/modules/action-keys/action-keys.module'; diff --git a/console/src/app/modules/edit-text/edit-text.component.scss b/console/src/app/modules/edit-text/edit-text.component.scss index 402a559fad..d19b42693a 100644 --- a/console/src/app/modules/edit-text/edit-text.component.scss +++ b/console/src/app/modules/edit-text/edit-text.component.scss @@ -3,10 +3,10 @@ $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); @@ -41,7 +41,7 @@ padding: 4px 0.5rem; font-size: 12px; background: $primary-color; - color: mat.get-color-from-palette($primary, default-contrast); + color: map-get($primary, default-contrast); margin: 0.25rem; display: flex; align-items: center; @@ -98,7 +98,7 @@ display: flex; flex-direction: column; align-self: flex-start; - margin-top: 30px; + margin-top: 20px; } } } diff --git a/console/src/app/modules/edit-text/edit-text.module.ts b/console/src/app/modules/edit-text/edit-text.module.ts index 68e66d5905..6c80a7dfa4 100644 --- a/console/src/app/modules/edit-text/edit-text.module.ts +++ b/console/src/app/modules/edit-text/edit-text.module.ts @@ -2,9 +2,9 @@ import { TextFieldModule } from '@angular/cdk/text-field'; 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 { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module'; import { InputModule } from 'src/app/modules/input/input.module'; diff --git a/console/src/app/modules/filter-events/filter-events.component.html b/console/src/app/modules/filter-events/filter-events.component.html index 7e76d422e6..5d835c32b5 100644 --- a/console/src/app/modules/filter-events/filter-events.component.html +++ b/console/src/app/modules/filter-events/filter-events.component.html @@ -3,15 +3,20 @@ mat-stroked-button cdkOverlayOrigin (click)="showFilter = !showFilter" - class="cnsl-action-button" #triggereventfilter="cdkOverlayOrigin" data-e2e="open-filter-button" > - - {{ 'ACTIONS.FILTER' | translate }} - {{ queryCount }} - - +
+ + {{ 'ACTIONS.FILTER' | translate }} + {{ queryCount }} + + +
- - {{ 'MENU.INSTANCE' | translate }} - +
+ {{ 'MENU.INSTANCE' | translate }} + +
- {{ 'MENU.ORGANIZATION' | translate }} - +
+ {{ 'MENU.ORGANIZATION' | translate }} + +
diff --git a/console/src/app/modules/header/header.component.scss b/console/src/app/modules/header/header.component.scss index b4ff0928c6..2b219cc0fa 100644 --- a/console/src/app/modules/header/header.component.scss +++ b/console/src/app/modules/header/header.component.scss @@ -9,17 +9,17 @@ $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); .filter-form { margin: 0 0.5rem; - color: mat.get-color-from-palette($foreground, text) !important; + color: map-get($foreground, text) !important; } .header-wrapper { diff --git a/console/src/app/modules/header/header.module.ts b/console/src/app/modules/header/header.module.ts index 9342548ac9..bc887c9ebd 100644 --- a/console/src/app/modules/header/header.module.ts +++ b/console/src/app/modules/header/header.module.ts @@ -2,10 +2,10 @@ import { OverlayModule } from '@angular/cdk/overlay'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +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 { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatToolbarModule } from '@angular/material/toolbar'; import { RouterModule } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; diff --git a/console/src/app/modules/idp-table/idp-table.component.scss b/console/src/app/modules/idp-table/idp-table.component.scss index 29cb7485a4..8ed40c9efe 100644 --- a/console/src/app/modules/idp-table/idp-table.component.scss +++ b/console/src/app/modules/idp-table/idp-table.component.scss @@ -3,10 +3,10 @@ $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); diff --git a/console/src/app/modules/idp-table/idp-table.component.ts b/console/src/app/modules/idp-table/idp-table.component.ts index b871d9329d..c28b4dd49a 100644 --- a/console/src/app/modules/idp-table/idp-table.component.ts +++ b/console/src/app/modules/idp-table/idp-table.component.ts @@ -1,7 +1,7 @@ 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, RouterLink } from '@angular/router'; import { TranslateService } from '@ngx-translate/core'; import { Duration } from 'google-protobuf/google/protobuf/duration_pb'; diff --git a/console/src/app/modules/idp-table/idp-table.module.ts b/console/src/app/modules/idp-table/idp-table.module.ts index 78251c7402..c428fcccca 100644 --- a/console/src/app/modules/idp-table/idp-table.module.ts +++ b/console/src/app/modules/idp-table/idp-table.module.ts @@ -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 { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table'; -import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; +import { MatTableModule } from '@angular/material/table'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { RouterModule } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; import { HasRoleModule } from 'src/app/directives/has-role/has-role.module'; diff --git a/console/src/app/modules/info-dialog/info-dialog.component.ts b/console/src/app/modules/info-dialog/info-dialog.component.ts index 408be61197..c85abff9ad 100644 --- a/console/src/app/modules/info-dialog/info-dialog.component.ts +++ b/console/src/app/modules/info-dialog/info-dialog.component.ts @@ -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 { InfoSectionType } from '../info-section/info-section.component'; diff --git a/console/src/app/modules/info-dialog/info-dialog.module.ts b/console/src/app/modules/info-dialog/info-dialog.module.ts index 5bc1712ba3..573111b05a 100644 --- a/console/src/app/modules/info-dialog/info-dialog.module.ts +++ b/console/src/app/modules/info-dialog/info-dialog.module.ts @@ -1,15 +1,16 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } 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 { MatDialogModule } from '@angular/material/dialog'; import { InfoSectionModule } from '../info-section/info-section.module'; import { InputModule } from '../input/input.module'; import { InfoDialogComponent } from './info-dialog.component'; @NgModule({ declarations: [InfoDialogComponent], - imports: [CommonModule, FormsModule, TranslateModule, InfoSectionModule, MatButtonModule, InputModule], + imports: [CommonModule, FormsModule, MatDialogModule, TranslateModule, InfoSectionModule, MatButtonModule, InputModule], }) export class InfoDialogModule {} diff --git a/console/src/app/modules/info-overlay/info-overlay.component.scss b/console/src/app/modules/info-overlay/info-overlay.component.scss index 7bd92caaee..30c7c73290 100644 --- a/console/src/app/modules/info-overlay/info-overlay.component.scss +++ b/console/src/app/modules/info-overlay/info-overlay.component.scss @@ -3,10 +3,10 @@ $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); diff --git a/console/src/app/modules/info-overlay/info-overlay.module.ts b/console/src/app/modules/info-overlay/info-overlay.module.ts index c1e5271646..5dec52960f 100644 --- a/console/src/app/modules/info-overlay/info-overlay.module.ts +++ b/console/src/app/modules/info-overlay/info-overlay.module.ts @@ -1,7 +1,7 @@ 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 { TranslateModule } from '@ngx-translate/core'; import { InfoOverlayComponent } from './info-overlay.component'; diff --git a/console/src/app/modules/info-row/info-row.component.scss b/console/src/app/modules/info-row/info-row.component.scss index 71f602c322..4df6179f7c 100644 --- a/console/src/app/modules/info-row/info-row.component.scss +++ b/console/src/app/modules/info-row/info-row.component.scss @@ -1,5 +1,3 @@ -@use '@angular/material' as mat; - @mixin info-row-theme($theme) { $foreground: map-get($theme, foreground); $button-text-color: map-get($foreground, text); diff --git a/console/src/app/modules/info-row/info-row.module.ts b/console/src/app/modules/info-row/info-row.module.ts index 3faec3efda..4ee88f86d7 100644 --- a/console/src/app/modules/info-row/info-row.module.ts +++ b/console/src/app/modules/info-row/info-row.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; -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 { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module'; import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module'; diff --git a/console/src/app/modules/info-section/info-section.component.scss b/console/src/app/modules/info-section/info-section.component.scss index ee49563203..8399226662 100644 --- a/console/src/app/modules/info-section/info-section.component.scss +++ b/console/src/app/modules/info-section/info-section.component.scss @@ -1,10 +1,8 @@ -@use '@angular/material' as mat; - @mixin info-section-theme($theme) { $primary: map-get($theme, primary); $background: map-get($theme, background); $foreground: map-get($theme, foreground); - $primary-color: mat.get-color-from-palette($primary, 500); + $primary-color: map-get($primary, 500); $is-dark-theme: map-get($theme, is-dark); .info-section-row { diff --git a/console/src/app/modules/input/input.directive.ts b/console/src/app/modules/input/input.directive.ts index bd8e6b7c8e..ca160b680d 100644 --- a/console/src/app/modules/input/input.directive.ts +++ b/console/src/app/modules/input/input.directive.ts @@ -17,15 +17,8 @@ import { } from '@angular/core'; import { FormGroupDirective, NgControl, NgForm } from '@angular/forms'; import { CanUpdateErrorState, ErrorStateMatcher, mixinErrorState } from '@angular/material/core'; -import { - MatLegacyFormField as MatFormField, - MatLegacyFormFieldControl as MatFormFieldControl, - MAT_LEGACY_FORM_FIELD as MAT_FORM_FIELD, -} from '@angular/material/legacy-form-field'; -import { - getMatLegacyInputUnsupportedTypeError as getMatInputUnsupportedTypeError, - MAT_LEGACY_INPUT_VALUE_ACCESSOR as MAT_INPUT_VALUE_ACCESSOR, -} from '@angular/material/legacy-input'; +import { MatFormField, MatFormFieldControl, MAT_FORM_FIELD } from '@angular/material/form-field'; +import { getMatInputUnsupportedTypeError, MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input'; import { Subject } from 'rxjs'; // Invalid input type. Using one of these will throw an MatInputUnsupportedTypeError. @@ -370,7 +363,7 @@ export class InputDirective private _dirtyCheckPlaceholder(): void { // If we're hiding the native placeholder, it should also be cleared from the DOM, otherwise // screen readers will read it out twice: once from the label and once from the attribute. - const placeholder = this._formField?._hideControlPlaceholder?.() ? null : this.placeholder; + const placeholder = null; if (placeholder !== this._previousPlaceholder) { const element = this._elementRef.nativeElement; this._previousPlaceholder = placeholder; diff --git a/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.html b/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.html index 013a02a404..c3a755e96d 100644 --- a/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.html +++ b/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.html @@ -34,7 +34,7 @@
- diff --git a/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.scss b/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.scss index d389100871..3d901287dd 100644 --- a/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.scss +++ b/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.scss @@ -1,5 +1,3 @@ -@use '@angular/material' as mat; - @mixin keyboard-shortcuts-theme($theme) { $primary: map-get($theme, primary); $background: map-get($theme, background); @@ -7,9 +5,9 @@ $text-color: map-get($foreground, text); $accent: map-get($theme, accent); $is-dark-theme: map-get($theme, is-dark); - $accent-color: mat.get-color-from-palette($primary, 500); + $accent-color: map-get($primary, 500); $back: map-get($background, background); - $card-background-color: mat.get-color-from-palette($background, cards); + $card-background-color: map-get($background, cards); .keyboard-shortcuts-group { $border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2)); diff --git a/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.ts b/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.ts index 2eda8be046..15cb81f87d 100644 --- a/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.ts +++ b/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.ts @@ -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 { Router } from '@angular/router'; import { KeyboardShortcut, ORGSHORTCUTS, SIDEWIDESHORTCUTS } from 'src/app/services/keyboard-shortcuts/keyboard-shortcuts'; diff --git a/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.module.ts b/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.module.ts index e8a31e1c46..3d725cc6cb 100644 --- a/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.module.ts +++ b/console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.module.ts @@ -1,8 +1,8 @@ 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 { HasRoleModule } from 'src/app/directives/has-role/has-role.module'; diff --git a/console/src/app/modules/label/label.component.scss b/console/src/app/modules/label/label.component.scss index f4046d4866..c116b38f38 100644 --- a/console/src/app/modules/label/label.component.scss +++ b/console/src/app/modules/label/label.component.scss @@ -1,11 +1,9 @@ -@use '@angular/material' as mat; - @mixin cnsl-label-theme($theme) { $primary: map-get($theme, primary); - $primary-color: mat.get-color-from-palette($primary, 500); + $primary-color: map-get($primary, 500); $is-dark-theme: map-get($theme, is-dark); $warn: map-get($theme, warn); - $warn-color: mat.get-color-from-palette($warn, 500); + $warn-color: map-get($warn, 500); $foreground: map-get($theme, foreground); $secondary-text: map-get($foreground, secondary-text); diff --git a/console/src/app/modules/machine-keys/machine-keys.component.html b/console/src/app/modules/machine-keys/machine-keys.component.html index 49cd48855a..9e24fb2b9e 100644 --- a/console/src/app/modules/machine-keys/machine-keys.component.html +++ b/console/src/app/modules/machine-keys/machine-keys.component.html @@ -12,7 +12,9 @@ mat-raised-button (click)="openAddKey()" > - add{{ 'ACTIONS.NEW' | translate }} +
+ add{{ 'ACTIONS.NEW' | translate }} +
diff --git a/console/src/app/modules/machine-keys/machine-keys.component.ts b/console/src/app/modules/machine-keys/machine-keys.component.ts index a12e6bcc31..06a945062d 100644 --- a/console/src/app/modules/machine-keys/machine-keys.component.ts +++ b/console/src/app/modules/machine-keys/machine-keys.component.ts @@ -1,7 +1,7 @@ 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 { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table'; +import { MatDialog } from '@angular/material/dialog'; +import { MatTableDataSource } from '@angular/material/table'; import { TranslateService } from '@ngx-translate/core'; import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb'; import { Moment } from 'moment'; diff --git a/console/src/app/modules/machine-keys/machine-keys.module.ts b/console/src/app/modules/machine-keys/machine-keys.module.ts index e94b999446..397eae8bfd 100644 --- a/console/src/app/modules/machine-keys/machine-keys.module.ts +++ b/console/src/app/modules/machine-keys/machine-keys.module.ts @@ -1,13 +1,13 @@ 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 { 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 { 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 { MatTableModule } from '@angular/material/table'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { RouterModule } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; import { HasRoleModule } from 'src/app/directives/has-role/has-role.module'; diff --git a/console/src/app/modules/members-table/members-table.component.html b/console/src/app/modules/members-table/members-table.component.html index 7f69806bc5..3b2e70cff7 100644 --- a/console/src/app/modules/members-table/members-table.component.html +++ b/console/src/app/modules/members-table/members-table.component.html @@ -17,40 +17,44 @@
- - @@ -108,22 +112,24 @@ diff --git a/console/src/app/modules/members-table/members-table.component.spec.ts b/console/src/app/modules/members-table/members-table.component.spec.ts index 99cda41fe7..f20807e7a6 100644 --- a/console/src/app/modules/members-table/members-table.component.spec.ts +++ b/console/src/app/modules/members-table/members-table.component.spec.ts @@ -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 { MembersTableComponent } from './members-table.component'; diff --git a/console/src/app/modules/members-table/members-table.component.ts b/console/src/app/modules/members-table/members-table.component.ts index 69933abf9f..3ac361488d 100644 --- a/console/src/app/modules/members-table/members-table.component.ts +++ b/console/src/app/modules/members-table/members-table.component.ts @@ -1,7 +1,7 @@ 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 { MatLegacyTable as MatTable } from '@angular/material/legacy-table'; +import { MatDialog } from '@angular/material/dialog'; +import { MatTable } from '@angular/material/table'; import { Observable, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { InstanceMembersDataSource } from 'src/app/pages/instance/instance-members/instance-members-datasource'; diff --git a/console/src/app/modules/members-table/members-table.module.ts b/console/src/app/modules/members-table/members-table.module.ts index 3ae53d96bc..50c5884225 100644 --- a/console/src/app/modules/members-table/members-table.module.ts +++ b/console/src/app/modules/members-table/members-table.module.ts @@ -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 { MatChipsModule } from '@angular/material/chips'; 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 { 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 { MatSortModule } from '@angular/material/sort'; +import { MatTableModule } from '@angular/material/table'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { RouterModule } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; import { InputModule } from 'src/app/modules/input/input.module'; diff --git a/console/src/app/modules/memberships-table/memberships-table.component.html b/console/src/app/modules/memberships-table/memberships-table.component.html index 94a24003aa..4465ed3d21 100644 --- a/console/src/app/modules/memberships-table/memberships-table.component.html +++ b/console/src/app/modules/memberships-table/memberships-table.component.html @@ -18,25 +18,29 @@
- - - - - +
+ - - - - + +
+ + 		+
+ + - - + + + + + + +
{{ 'ROLESLABEL' | translate }} - - + -
- {{ role | roletransform }} - - - +
+
+ {{ role | roletransform }} + +
+ +
- - @@ -65,28 +69,30 @@ diff --git a/console/src/app/modules/memberships-table/memberships-table.component.spec.ts b/console/src/app/modules/memberships-table/memberships-table.component.spec.ts index 24dfcb1fe9..2c2550b752 100644 --- a/console/src/app/modules/memberships-table/memberships-table.component.spec.ts +++ b/console/src/app/modules/memberships-table/memberships-table.component.spec.ts @@ -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 { MembershipsTableComponent } from './memberships-table.component'; diff --git a/console/src/app/modules/memberships-table/memberships-table.component.ts b/console/src/app/modules/memberships-table/memberships-table.component.ts index e7a2ed26b7..c7771d2abb 100644 --- a/console/src/app/modules/memberships-table/memberships-table.component.ts +++ b/console/src/app/modules/memberships-table/memberships-table.component.ts @@ -1,6 +1,6 @@ import { SelectionModel } from '@angular/cdk/collections'; import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; -import { MatLegacyTable as MatTable } from '@angular/material/legacy-table'; +import { MatTable } from '@angular/material/table'; import { Router } from '@angular/router'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; diff --git a/console/src/app/modules/memberships-table/memberships-table.module.ts b/console/src/app/modules/memberships-table/memberships-table.module.ts index d0fb06e83c..8ab03ad3e9 100644 --- a/console/src/app/modules/memberships-table/memberships-table.module.ts +++ b/console/src/app/modules/memberships-table/memberships-table.module.ts @@ -1,15 +1,15 @@ 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 { MatChipsModule } from '@angular/material/chips'; 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 { 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 { 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 { RouterModule } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; import { InputModule } from 'src/app/modules/input/input.module'; diff --git a/console/src/app/modules/meta-layout/meta-layout.module.ts b/console/src/app/modules/meta-layout/meta-layout.module.ts index c4f9c84d0d..a988dd587a 100644 --- a/console/src/app/modules/meta-layout/meta-layout.module.ts +++ b/console/src/app/modules/meta-layout/meta-layout.module.ts @@ -1,7 +1,7 @@ import { LayoutModule } from '@angular/cdk/layout'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; +import { MatButtonModule } from '@angular/material/button'; import { MetaLayoutComponent } from './meta-layout.component'; diff --git a/console/src/app/modules/metadata/metadata-dialog/metadata-dialog.component.html b/console/src/app/modules/metadata/metadata-dialog/metadata-dialog.component.html index 5c04eb96d2..31262d9cf3 100644 --- a/console/src/app/modules/metadata/metadata-dialog/metadata-dialog.component.html +++ b/console/src/app/modules/metadata/metadata-dialog/metadata-dialog.component.html @@ -1,10 +1,8 @@
-

{{ 'METADATA.TITLE' | translate }}

+

{{ 'METADATA.TITLE' | translate }}

{{ ts | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}

-
-

{{ 'METADATA.DESCRIPTION' | translate }}

@@ -40,9 +38,11 @@
-
diff --git a/console/src/app/modules/metadata/metadata-dialog/metadata-dialog.component.ts b/console/src/app/modules/metadata/metadata-dialog/metadata-dialog.component.ts index b6adf3c1e9..599e58d937 100644 --- a/console/src/app/modules/metadata/metadata-dialog/metadata-dialog.component.ts +++ b/console/src/app/modules/metadata/metadata-dialog/metadata-dialog.component.ts @@ -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 { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb'; import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb'; import { ToastService } from 'src/app/services/toast.service'; @@ -14,7 +11,6 @@ import { ToastService } from 'src/app/services/toast.service'; }) export class MetadataDialogComponent { public metadata: Partial[] = []; - public loading: boolean = false; public ts!: Timestamp.AsObject | undefined; constructor( diff --git a/console/src/app/modules/metadata/metadata.module.ts b/console/src/app/modules/metadata/metadata.module.ts index e23753df27..dd87968efd 100644 --- a/console/src/app/modules/metadata/metadata.module.ts +++ b/console/src/app/modules/metadata/metadata.module.ts @@ -1,17 +1,17 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } 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 { 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 { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module'; import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module'; import { CardModule } from '../card/card.module'; -import { MatLegacyTableModule } from '@angular/material/legacy-table'; +import { MatTableModule } from '@angular/material/table'; import { InputModule } from '../input/input.module'; import { RefreshTableModule } from '../refresh-table/refresh-table.module'; import { MetadataDialogComponent } from './metadata-dialog/metadata-dialog.component'; @@ -33,7 +33,7 @@ import { MetadataComponent } from './metadata/metadata.component'; LocalizedDatePipeModule, TimestampToDatePipeModule, RefreshTableModule, - MatLegacyTableModule, + MatTableModule, ], exports: [MetadataComponent, MetadataDialogComponent], }) diff --git a/console/src/app/modules/metadata/metadata/metadata.component.ts b/console/src/app/modules/metadata/metadata/metadata.component.ts index 22ff727a8a..96c454f7c3 100644 --- a/console/src/app/modules/metadata/metadata/metadata.component.ts +++ b/console/src/app/modules/metadata/metadata/metadata.component.ts @@ -1,6 +1,6 @@ import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core'; -import { MatLegacyTable as MatTable, MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table'; import { MatSort } from '@angular/material/sort'; +import { MatTable, MatTableDataSource } from '@angular/material/table'; import { BehaviorSubject, Observable } from 'rxjs'; import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb'; diff --git a/console/src/app/modules/name-dialog/name-dialog.component.html b/console/src/app/modules/name-dialog/name-dialog.component.html index fe1f6782ea..e57c70269c 100644 --- a/console/src/app/modules/name-dialog/name-dialog.component.html +++ b/console/src/app/modules/name-dialog/name-dialog.component.html @@ -1,15 +1,16 @@

{{ data.titleKey | translate }} {{ data?.number }}

-

{{ data.descKey | translate }}

+

{{ data.descKey | translate }}

+ {{ data.labelKey | translate }}
- diff --git a/console/src/app/modules/name-dialog/name-dialog.component.ts b/console/src/app/modules/name-dialog/name-dialog.component.ts index 7baa65b2a7..a3e450b98d 100644 --- a/console/src/app/modules/name-dialog/name-dialog.component.ts +++ b/console/src/app/modules/name-dialog/name-dialog.component.ts @@ -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-name-dialog', diff --git a/console/src/app/modules/name-dialog/name-dialog.module.ts b/console/src/app/modules/name-dialog/name-dialog.module.ts index 802ab1448b..dfcc85e378 100644 --- a/console/src/app/modules/name-dialog/name-dialog.module.ts +++ b/console/src/app/modules/name-dialog/name-dialog.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; -import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDialogModule } from '@angular/material/dialog'; import { TranslateModule } from '@ngx-translate/core'; import { InputModule } from '../input/input.module'; diff --git a/console/src/app/modules/nav-toggle/nav-toggle.component.scss b/console/src/app/modules/nav-toggle/nav-toggle.component.scss index a04b13d0d6..d69e6c4974 100644 --- a/console/src/app/modules/nav-toggle/nav-toggle.component.scss +++ b/console/src/app/modules/nav-toggle/nav-toggle.component.scss @@ -1,14 +1,12 @@ -@use '@angular/material' as mat; - @mixin nav-toggle-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); @@ -19,7 +17,7 @@ font-size: 14px; line-height: 14px; padding: 0.4rem 12px; - color: mat.get-color-from-palette($foreground, text) !important; + color: map-get($foreground, text); transition: all 0.2s ease; text-decoration: none; border-radius: 50vw; @@ -76,7 +74,7 @@ &.active { background-color: $primary-color; - color: mat.get-color-from-palette($foreground, toolbar-items) !important; + color: map-get($primary, default-contrast); .c_label { .count { diff --git a/console/src/app/modules/nav/nav.component.html b/console/src/app/modules/nav/nav.component.html index cbcdcecb46..3317e41f91 100644 --- a/console/src/app/modules/nav/nav.component.html +++ b/console/src/app/modules/nav/nav.component.html @@ -204,19 +204,22 @@ - +
+ +
+
diff --git a/console/src/app/modules/org-context/org-context.component.scss b/console/src/app/modules/org-context/org-context.component.scss index f20910c5bb..d5736cba2a 100644 --- a/console/src/app/modules/org-context/org-context.component.scss +++ b/console/src/app/modules/org-context/org-context.component.scss @@ -3,10 +3,10 @@ $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); @@ -41,7 +41,7 @@ .show-all { width: 100%; - color: mat.get-color-from-palette($foreground, text); + color: map-get($foreground, text); border-top: 1px solid map-get($foreground, divider); } @@ -59,6 +59,10 @@ position: relative; overflow: hidden; + .mdc-button__label { + width: 100%; + } + .org-flex-row { display: flex; align-items: center; @@ -77,6 +81,7 @@ margin-right: -0.5rem; visibility: hidden; opacity: 0.5; + padding: 0; &:hover { opacity: 1; @@ -85,7 +90,7 @@ mat-icon { font-size: 20px; height: 20px; - width: 20px; + width: 36px; } } } diff --git a/console/src/app/modules/org-context/org-context.module.ts b/console/src/app/modules/org-context/org-context.module.ts index beb12daf2a..2d025f7178 100644 --- a/console/src/app/modules/org-context/org-context.module.ts +++ b/console/src/app/modules/org-context/org-context.module.ts @@ -2,10 +2,10 @@ 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 { 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 { RouterModule } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; import { HasRoleModule } from 'src/app/directives/has-role/has-role.module'; diff --git a/console/src/app/modules/org-table/org-table.component.html b/console/src/app/modules/org-table/org-table.component.html index 1a28850227..d0582c87b4 100644 --- a/console/src/app/modules/org-table/org-table.component.html +++ b/console/src/app/modules/org-table/org-table.component.html @@ -8,10 +8,12 @@ - - add - {{ 'ACTIONS.NEW' | translate }} - + +
+ add + {{ 'ACTIONS.NEW' | translate }} + +
@@ -31,20 +33,21 @@ diff --git a/console/src/app/modules/org-table/org-table.component.scss b/console/src/app/modules/org-table/org-table.component.scss index cc165bacc9..4a7ad537df 100644 --- a/console/src/app/modules/org-table/org-table.component.scss +++ b/console/src/app/modules/org-table/org-table.component.scss @@ -1,23 +1,28 @@ td { cursor: pointer; - .cpy-button { - visibility: hidden; + .primary-domain-wrapper { + display: flex; + align-items: center; - i { - pointer-events: none; + .cpy-button { + visibility: hidden; + + i { + pointer-events: none; + } + } + + &:hover { + .cpy-button { + visibility: visible; + } } } .orgdefaultlabel { margin-left: 0.5rem; } - - &:hover { - .cpy-button { - visibility: visible; - } - } } .pointer { diff --git a/console/src/app/modules/org-table/org-table.component.ts b/console/src/app/modules/org-table/org-table.component.ts index b60c049fd5..bc2fcc71aa 100644 --- a/console/src/app/modules/org-table/org-table.component.ts +++ b/console/src/app/modules/org-table/org-table.component.ts @@ -1,7 +1,7 @@ import { LiveAnnouncer } from '@angular/cdk/a11y'; import { Component, Input, ViewChild } from '@angular/core'; -import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table'; import { MatSort, Sort } from '@angular/material/sort'; +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'; diff --git a/console/src/app/modules/org-table/org-table.module.ts b/console/src/app/modules/org-table/org-table.module.ts index 9a1f1b6b3c..b4650e381c 100644 --- a/console/src/app/modules/org-table/org-table.module.ts +++ b/console/src/app/modules/org-table/org-table.module.ts @@ -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 { MatIconModule } from '@angular/material/icon'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; -import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio'; -import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table'; -import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; +import { MatRadioModule } from '@angular/material/radio'; import { MatSortModule } from '@angular/material/sort'; +import { MatTableModule } from '@angular/material/table'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { RouterModule } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module'; diff --git a/console/src/app/modules/paginator/paginator.component.scss b/console/src/app/modules/paginator/paginator.component.scss index 66e04072af..b280d4b0ab 100644 --- a/console/src/app/modules/paginator/paginator.component.scss +++ b/console/src/app/modules/paginator/paginator.component.scss @@ -49,8 +49,8 @@ } } -::ng-deep .paginator-select.mat-select { +::ng-deep .paginator-select.mat-mdc-select { min-width: 60px; height: 36px !important; - padding-top: 8px !important; + padding-top: 4px !important; } diff --git a/console/src/app/modules/paginator/paginator.module.ts b/console/src/app/modules/paginator/paginator.module.ts index 663c4c9e0d..c2926e1f75 100644 --- a/console/src/app/modules/paginator/paginator.module.ts +++ b/console/src/app/modules/paginator/paginator.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; -import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select'; +import { MatButtonModule } from '@angular/material/button'; +import { MatSelectModule } from '@angular/material/select'; import { TranslateModule } from '@ngx-translate/core'; import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module'; import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module'; diff --git a/console/src/app/modules/password-complexity-view/password-complexity-view.module.ts b/console/src/app/modules/password-complexity-view/password-complexity-view.module.ts index 8a27c5e394..8d2829677c 100644 --- a/console/src/app/modules/password-complexity-view/password-complexity-view.module.ts +++ b/console/src/app/modules/password-complexity-view/password-complexity-view.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { TranslateModule } from '@ngx-translate/core'; import { PasswordComplexityViewComponent } from './password-complexity-view.component'; diff --git a/console/src/app/modules/personal-access-tokens/personal-access-tokens.component.html b/console/src/app/modules/personal-access-tokens/personal-access-tokens.component.html index c1df8a5cd5..3d2e60adea 100644 --- a/console/src/app/modules/personal-access-tokens/personal-access-tokens.component.html +++ b/console/src/app/modules/personal-access-tokens/personal-access-tokens.component.html @@ -12,7 +12,9 @@ mat-raised-button (click)="openAddKey()" > - add{{ 'ACTIONS.NEW' | translate }} +
+ add{{ 'ACTIONS.NEW' | translate }} +
diff --git a/console/src/app/modules/personal-access-tokens/personal-access-tokens.component.ts b/console/src/app/modules/personal-access-tokens/personal-access-tokens.component.ts index 7d77fb0bff..17a9e980e5 100644 --- a/console/src/app/modules/personal-access-tokens/personal-access-tokens.component.ts +++ b/console/src/app/modules/personal-access-tokens/personal-access-tokens.component.ts @@ -1,7 +1,7 @@ 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 { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table'; +import { MatDialog } from '@angular/material/dialog'; +import { MatTableDataSource } from '@angular/material/table'; import { TranslateService } from '@ngx-translate/core'; import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb'; import { Moment } from 'moment'; diff --git a/console/src/app/modules/personal-access-tokens/personal-access-tokens.module.ts b/console/src/app/modules/personal-access-tokens/personal-access-tokens.module.ts index 530c5d9941..b4b7b4942c 100644 --- a/console/src/app/modules/personal-access-tokens/personal-access-tokens.module.ts +++ b/console/src/app/modules/personal-access-tokens/personal-access-tokens.module.ts @@ -1,13 +1,13 @@ 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 { 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 { 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 { MatTableModule } from '@angular/material/table'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { RouterModule } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; import { HasRoleModule } from 'src/app/directives/has-role/has-role.module'; diff --git a/console/src/app/modules/policies/domain-policy/domain-policy.component.ts b/console/src/app/modules/policies/domain-policy/domain-policy.component.ts index fb8efe1ff6..0ac32cd0fb 100644 --- a/console/src/app/modules/policies/domain-policy/domain-policy.component.ts +++ b/console/src/app/modules/policies/domain-policy/domain-policy.component.ts @@ -1,5 +1,5 @@ import { Component, Injector, Input, OnDestroy, OnInit, Type } from '@angular/core'; -import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'; +import { MatDialog } from '@angular/material/dialog'; import { Subscription } from 'rxjs'; import { AddCustomDomainPolicyRequest, diff --git a/console/src/app/modules/policies/domain-policy/domain-policy.module.ts b/console/src/app/modules/policies/domain-policy/domain-policy.module.ts index e152220a40..e7f8174492 100644 --- a/console/src/app/modules/policies/domain-policy/domain-policy.module.ts +++ b/console/src/app/modules/policies/domain-policy/domain-policy.module.ts @@ -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 { 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 { 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 { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module'; diff --git a/console/src/app/modules/policies/general-settings/general-settings.module.ts b/console/src/app/modules/policies/general-settings/general-settings.module.ts index 93c095db76..98f0e4cb53 100644 --- a/console/src/app/modules/policies/general-settings/general-settings.module.ts +++ b/console/src/app/modules/policies/general-settings/general-settings.module.ts @@ -1,9 +1,9 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; -import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner'; -import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select'; +import { MatButtonModule } from '@angular/material/button'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatSelectModule } from '@angular/material/select'; import { TranslateModule } from '@ngx-translate/core'; import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module'; diff --git a/console/src/app/modules/policies/idp-settings/idp-settings.component.scss b/console/src/app/modules/policies/idp-settings/idp-settings.component.scss index d092423b95..095a05491e 100644 --- a/console/src/app/modules/policies/idp-settings/idp-settings.component.scss +++ b/console/src/app/modules/policies/idp-settings/idp-settings.component.scss @@ -1,8 +1,6 @@ -@use '@angular/material' as mat; - @mixin idp-settings-theme($theme) { $primary: map-get($theme, primary); - $primary-color: mat.get-color-from-palette($primary, 500); + $primary-color: map-get($primary, 500); $is-dark-theme: map-get($theme, is-dark); $background: map-get($theme, background); $foreground: map-get($theme, foreground); diff --git a/console/src/app/modules/policies/idp-settings/idp-settings.module.ts b/console/src/app/modules/policies/idp-settings/idp-settings.module.ts index 79264fbe3c..33730519ad 100644 --- a/console/src/app/modules/policies/idp-settings/idp-settings.module.ts +++ b/console/src/app/modules/policies/idp-settings/idp-settings.module.ts @@ -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 } from '@angular/material/legacy-button'; -import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { RouterModule } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module'; @@ -15,7 +15,7 @@ import { IdpSettingsComponent } from './idp-settings.component'; declarations: [IdpSettingsComponent], imports: [ CommonModule, - MatLegacyButtonModule, + MatButtonModule, CardModule, MatIconModule, IdpTableModule, diff --git a/console/src/app/modules/policies/login-policy/factor-table/dialog-add-type/dialog-add-type.component.ts b/console/src/app/modules/policies/login-policy/factor-table/dialog-add-type/dialog-add-type.component.ts index 5a71691ed0..7314e41933 100644 --- a/console/src/app/modules/policies/login-policy/factor-table/dialog-add-type/dialog-add-type.component.ts +++ b/console/src/app/modules/policies/login-policy/factor-table/dialog-add-type/dialog-add-type.component.ts @@ -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 { MultiFactorType, SecondFactorType } from 'src/app/proto/generated/zitadel/policy_pb'; enum LoginMethodComponentType { diff --git a/console/src/app/modules/policies/login-policy/factor-table/factor-table.component.html b/console/src/app/modules/policies/login-policy/factor-table/factor-table.component.html index 948f5cfa26..e31877be75 100644 --- a/console/src/app/modules/policies/login-policy/factor-table/factor-table.component.html +++ b/console/src/app/modules/policies/login-policy/factor-table/factor-table.component.html @@ -21,12 +21,14 @@
diff --git a/console/src/app/modules/policies/login-policy/factor-table/factor-table.component.scss b/console/src/app/modules/policies/login-policy/factor-table/factor-table.component.scss index ff4a6ba796..46f9e91757 100644 --- a/console/src/app/modules/policies/login-policy/factor-table/factor-table.component.scss +++ b/console/src/app/modules/policies/login-policy/factor-table/factor-table.component.scss @@ -1,5 +1,3 @@ -@use '@angular/material' as mat; - @mixin login-policy-mfas-theme($theme) { $foreground: map-get($theme, foreground); diff --git a/console/src/app/modules/policies/login-policy/factor-table/factor-table.component.ts b/console/src/app/modules/policies/login-policy/factor-table/factor-table.component.ts index f1f050dc1a..b28a4c3c19 100644 --- a/console/src/app/modules/policies/login-policy/factor-table/factor-table.component.ts +++ b/console/src/app/modules/policies/login-policy/factor-table/factor-table.component.ts @@ -1,6 +1,6 @@ import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'; -import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'; -import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator'; +import { MatDialog } from '@angular/material/dialog'; +import { MatPaginator } from '@angular/material/paginator'; import { TranslateService } from '@ngx-translate/core'; import { BehaviorSubject, Observable } from 'rxjs'; import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum'; diff --git a/console/src/app/modules/policies/login-policy/login-policy.component.ts b/console/src/app/modules/policies/login-policy/login-policy.component.ts index 495ce0f1ad..123bb66aeb 100644 --- a/console/src/app/modules/policies/login-policy/login-policy.component.ts +++ b/console/src/app/modules/policies/login-policy/login-policy.component.ts @@ -1,6 +1,6 @@ import { Component, Injector, Input, OnInit, Type } from '@angular/core'; import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; -import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'; +import { MatDialog } from '@angular/material/dialog'; import { Duration } from 'google-protobuf/google/protobuf/duration_pb'; import { take } from 'rxjs'; import { diff --git a/console/src/app/modules/policies/login-policy/login-policy.module.ts b/console/src/app/modules/policies/login-policy/login-policy.module.ts index 6e244da559..6fc6c24a1a 100644 --- a/console/src/app/modules/policies/login-policy/login-policy.module.ts +++ b/console/src/app/modules/policies/login-policy/login-policy.module.ts @@ -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 { 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 { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner'; -import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select'; -import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle'; -import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatSelectModule } from '@angular/material/select'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +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'; diff --git a/console/src/app/modules/policies/login-texts/login-texts.component.html b/console/src/app/modules/policies/login-texts/login-texts.component.html index ae14b6c135..81421cb28b 100644 --- a/console/src/app/modules/policies/login-texts/login-texts.component.html +++ b/console/src/app/modules/policies/login-texts/login-texts.component.html @@ -18,8 +18,10 @@

@@ -70,7 +72,10 @@ type="submit" mat-stroked-button > - {{ 'ACTIONS.RESETDEFAULT' | translate }} +
+ + {{ 'ACTIONS.RESETDEFAULT' | translate }} +
- - + +
+ + +
- - + +
+ + +
{{ 'ROLESLABEL' | translate }}
- - + -
- {{ role | roletransform }} - - - +
+
+ {{ role | roletransform }} + +
+ +
{{ 'ORG.PAGES.PRIMARYDOMAIN' | translate }} - {{ org.primaryDomain }} - +
+ {{ org.primaryDomain }} + +
- - diff --git a/console/src/app/modules/project-roles-table/project-roles-table.component.spec.ts b/console/src/app/modules/project-roles-table/project-roles-table.component.spec.ts index 17332577a1..d37edf5cf7 100644 --- a/console/src/app/modules/project-roles-table/project-roles-table.component.spec.ts +++ b/console/src/app/modules/project-roles-table/project-roles-table.component.spec.ts @@ -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 { ProjectRolesTableComponent } from './project-roles-table.component'; diff --git a/console/src/app/modules/project-roles-table/project-roles-table.component.ts b/console/src/app/modules/project-roles-table/project-roles-table.component.ts index 96ff9da551..ae8633d15d 100644 --- a/console/src/app/modules/project-roles-table/project-roles-table.component.ts +++ b/console/src/app/modules/project-roles-table/project-roles-table.component.ts @@ -1,7 +1,7 @@ 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 { MatLegacyTable as MatTable } from '@angular/material/legacy-table'; +import { MatDialog } from '@angular/material/dialog'; +import { MatTable } from '@angular/material/table'; import { Router } from '@angular/router'; import { Role } from 'src/app/proto/generated/zitadel/project_pb'; import { ManagementService } from 'src/app/services/mgmt.service'; diff --git a/console/src/app/modules/project-roles-table/project-roles-table.module.ts b/console/src/app/modules/project-roles-table/project-roles-table.module.ts index a39facd539..c30adacd31 100644 --- a/console/src/app/modules/project-roles-table/project-roles-table.module.ts +++ b/console/src/app/modules/project-roles-table/project-roles-table.module.ts @@ -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 { 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 { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu'; -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 { MatMenuModule } from '@angular/material/menu'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatTableModule } from '@angular/material/table'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { RouterModule } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; import { HasRoleModule } from 'src/app/directives/has-role/has-role.module'; diff --git a/console/src/app/modules/provider-options/provider-options.module.ts b/console/src/app/modules/provider-options/provider-options.module.ts index 5060a0fea3..38d8578417 100644 --- a/console/src/app/modules/provider-options/provider-options.module.ts +++ b/console/src/app/modules/provider-options/provider-options.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox'; +import { MatCheckboxModule } from '@angular/material/checkbox'; import { TranslateModule } from '@ngx-translate/core'; import { InfoSectionModule } from '../info-section/info-section.module'; import { ProviderOptionsComponent } from './provider-options.component'; diff --git a/console/src/app/modules/providers/provider-apple/provider-apple.component.html b/console/src/app/modules/providers/provider-apple/provider-apple.component.html index 9a109c2c2f..6e321a5992 100644 --- a/console/src/app/modules/providers/provider-apple/provider-apple.component.html +++ b/console/src/app/modules/providers/provider-apple/provider-apple.component.html @@ -102,17 +102,11 @@ - - + + {{ scope }} cancel - - + + diff --git a/console/src/app/modules/providers/provider-apple/provider-apple.component.ts b/console/src/app/modules/providers/provider-apple/provider-apple.component.ts index 443d586c47..f80a8a8a2c 100644 --- a/console/src/app/modules/providers/provider-apple/provider-apple.component.ts +++ b/console/src/app/modules/providers/provider-apple/provider-apple.component.ts @@ -2,7 +2,7 @@ import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes'; import { Location } from '@angular/common'; import { Component, Injector, Type } from '@angular/core'; import { AbstractControl, FormControl, FormGroup } from '@angular/forms'; -import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips'; +import { MatChipInputEvent } from '@angular/material/chips'; import { ActivatedRoute } from '@angular/router'; import { take } from 'rxjs'; import { diff --git a/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.html b/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.html index 259cdc530c..de0a6707d5 100644 --- a/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.html +++ b/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.html @@ -65,17 +65,11 @@ - - + + {{ scope }} cancel - - + + diff --git a/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.ts b/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.ts index 6d6ba1f0ff..de4fd8efce 100644 --- a/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.ts +++ b/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.ts @@ -2,7 +2,7 @@ import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes'; import { Location } from '@angular/common'; import { Component, Injector, Type } from '@angular/core'; import { AbstractControl, FormControl, FormGroup } from '@angular/forms'; -import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips'; +import { MatChipInputEvent } from '@angular/material/chips'; import { ActivatedRoute } from '@angular/router'; import { take } from 'rxjs'; import { diff --git a/console/src/app/modules/providers/provider-github-es/provider-github-es.component.html b/console/src/app/modules/providers/provider-github-es/provider-github-es.component.html index a4511570a6..fc3d08fdb0 100644 --- a/console/src/app/modules/providers/provider-github-es/provider-github-es.component.html +++ b/console/src/app/modules/providers/provider-github-es/provider-github-es.component.html @@ -80,17 +80,11 @@ - - + + {{ scope }} cancel - - + + diff --git a/console/src/app/modules/providers/provider-github-es/provider-github-es.component.ts b/console/src/app/modules/providers/provider-github-es/provider-github-es.component.ts index 832fc0b379..276d03eba6 100644 --- a/console/src/app/modules/providers/provider-github-es/provider-github-es.component.ts +++ b/console/src/app/modules/providers/provider-github-es/provider-github-es.component.ts @@ -2,7 +2,7 @@ import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes'; import { Location } from '@angular/common'; import { Component, Injector, Type } from '@angular/core'; import { AbstractControl, UntypedFormControl, UntypedFormGroup } from '@angular/forms'; -import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips'; +import { MatChipInputEvent } from '@angular/material/chips'; import { ActivatedRoute } from '@angular/router'; import { take } from 'rxjs'; import { diff --git a/console/src/app/modules/providers/provider-github/provider-github.component.html b/console/src/app/modules/providers/provider-github/provider-github.component.html index 540c178709..e6aa2ec3a1 100644 --- a/console/src/app/modules/providers/provider-github/provider-github.component.html +++ b/console/src/app/modules/providers/provider-github/provider-github.component.html @@ -61,17 +61,11 @@ - - + + {{ scope }} cancel - - + + diff --git a/console/src/app/modules/providers/provider-github/provider-github.component.ts b/console/src/app/modules/providers/provider-github/provider-github.component.ts index c38ebf5b4a..865e2fc5d7 100644 --- a/console/src/app/modules/providers/provider-github/provider-github.component.ts +++ b/console/src/app/modules/providers/provider-github/provider-github.component.ts @@ -2,7 +2,7 @@ import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes'; import { Location } from '@angular/common'; import { Component, Injector, Type } from '@angular/core'; import { AbstractControl, FormControl, FormGroup } from '@angular/forms'; -import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips'; +import { MatChipInputEvent } from '@angular/material/chips'; import { ActivatedRoute } from '@angular/router'; import { take } from 'rxjs'; import { diff --git a/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.html b/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.html index 61df5dfbbc..5adc26b624 100644 --- a/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.html +++ b/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.html @@ -70,17 +70,11 @@ - - + + {{ scope }} cancel - - + + diff --git a/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.ts b/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.ts index d76d5ac777..2fa7170f1f 100644 --- a/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.ts +++ b/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.ts @@ -2,7 +2,7 @@ import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes'; import { Location } from '@angular/common'; import { Component, Injector, Type } from '@angular/core'; import { AbstractControl, FormControl, FormGroup } from '@angular/forms'; -import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips'; +import { MatChipInputEvent } from '@angular/material/chips'; import { ActivatedRoute } from '@angular/router'; import { take } from 'rxjs'; import { diff --git a/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.html b/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.html index c4ec64094b..9382347b4d 100644 --- a/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.html +++ b/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.html @@ -60,17 +60,11 @@ - - + + {{ scope }} cancel - - + + diff --git a/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.ts b/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.ts index 1d88f64baa..a6d889525f 100644 --- a/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.ts +++ b/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.ts @@ -2,7 +2,7 @@ import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes'; import { Location } from '@angular/common'; import { Component, Injector, Type } from '@angular/core'; import { AbstractControl, FormControl, FormGroup } from '@angular/forms'; -import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips'; +import { MatChipInputEvent } from '@angular/material/chips'; import { ActivatedRoute } from '@angular/router'; import { take } from 'rxjs'; import { diff --git a/console/src/app/modules/providers/provider-google/provider-google.component.html b/console/src/app/modules/providers/provider-google/provider-google.component.html index a77006c7af..0e9dca638c 100644 --- a/console/src/app/modules/providers/provider-google/provider-google.component.html +++ b/console/src/app/modules/providers/provider-google/provider-google.component.html @@ -59,17 +59,11 @@ - - + + {{ scope }} cancel - - + + diff --git a/console/src/app/modules/providers/provider-google/provider-google.component.ts b/console/src/app/modules/providers/provider-google/provider-google.component.ts index e9ebfef253..0a1160cd69 100644 --- a/console/src/app/modules/providers/provider-google/provider-google.component.ts +++ b/console/src/app/modules/providers/provider-google/provider-google.component.ts @@ -2,7 +2,7 @@ import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes'; import { Location } from '@angular/common'; import { Component, Injector, Type } from '@angular/core'; import { AbstractControl, FormControl, FormGroup } from '@angular/forms'; -import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips'; +import { MatChipInputEvent } from '@angular/material/chips'; import { ActivatedRoute } from '@angular/router'; import { take } from 'rxjs'; import { diff --git a/console/src/app/modules/providers/provider-oauth/provider-oauth.component.html b/console/src/app/modules/providers/provider-oauth/provider-oauth.component.html index da85abb3a3..ea23e101ba 100644 --- a/console/src/app/modules/providers/provider-oauth/provider-oauth.component.html +++ b/console/src/app/modules/providers/provider-oauth/provider-oauth.component.html @@ -84,17 +84,11 @@ - - + + {{ scope }} cancel - - + + diff --git a/console/src/app/modules/providers/provider-oauth/provider-oauth.component.ts b/console/src/app/modules/providers/provider-oauth/provider-oauth.component.ts index c838143e6f..1621df4123 100644 --- a/console/src/app/modules/providers/provider-oauth/provider-oauth.component.ts +++ b/console/src/app/modules/providers/provider-oauth/provider-oauth.component.ts @@ -2,7 +2,7 @@ import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes'; import { Location } from '@angular/common'; import { Component, Injector, Type } from '@angular/core'; import { AbstractControl, UntypedFormControl, UntypedFormGroup } from '@angular/forms'; -import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips'; +import { MatChipInputEvent } from '@angular/material/chips'; import { ActivatedRoute } from '@angular/router'; import { take } from 'rxjs'; import { diff --git a/console/src/app/modules/providers/provider-oidc/provider-oidc.component.html b/console/src/app/modules/providers/provider-oidc/provider-oidc.component.html index 41f8351629..8dbc345a97 100644 --- a/console/src/app/modules/providers/provider-oidc/provider-oidc.component.html +++ b/console/src/app/modules/providers/provider-oidc/provider-oidc.component.html @@ -64,17 +64,11 @@ - - + + {{ scope }} cancel - - + + diff --git a/console/src/app/modules/providers/provider-oidc/provider-oidc.component.ts b/console/src/app/modules/providers/provider-oidc/provider-oidc.component.ts index 080a850675..037b2dd6ba 100644 --- a/console/src/app/modules/providers/provider-oidc/provider-oidc.component.ts +++ b/console/src/app/modules/providers/provider-oidc/provider-oidc.component.ts @@ -2,7 +2,7 @@ import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes'; import { Location } from '@angular/common'; import { Component, Injector, Type } from '@angular/core'; import { AbstractControl, UntypedFormControl, UntypedFormGroup } from '@angular/forms'; -import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips'; +import { MatChipInputEvent } from '@angular/material/chips'; import { ActivatedRoute } from '@angular/router'; import { take } from 'rxjs'; import { diff --git a/console/src/app/modules/providers/providers.module.ts b/console/src/app/modules/providers/providers.module.ts index 47e2679cfb..5af3fee6a8 100644 --- a/console/src/app/modules/providers/providers.module.ts +++ b/console/src/app/modules/providers/providers.module.ts @@ -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 { MatChipsModule } from '@angular/material/chips'; 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 { MatLegacyProgressSpinnerModule } 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 { 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 { InputModule } from 'src/app/modules/input/input.module'; @@ -64,7 +64,7 @@ import { ProvidersRoutingModule } from './providers-routing.module'; MatTooltipModule, TranslateModule, ProviderOptionsModule, - MatLegacyProgressSpinnerModule, + MatProgressSpinnerModule, ], }) export default class ProvidersModule {} diff --git a/console/src/app/modules/providers/providers.scss b/console/src/app/modules/providers/providers.scss index 8e96c3428e..0fb8879376 100644 --- a/console/src/app/modules/providers/providers.scss +++ b/console/src/app/modules/providers/providers.scss @@ -1,5 +1,3 @@ -@use '@angular/material' as mat; - @mixin identity-provider-theme($theme) { $is-dark-theme: map-get($theme, is-dark); $background: map-get($theme, background); @@ -64,7 +62,7 @@ font-size: 12px; } - .mat-chip-input { + .mat-mdc-chip-input { width: 100%; margin: 0; } @@ -181,6 +179,7 @@ button[mat-raised-button] { border-radius: 0.5rem; padding: 0.5rem 4rem; + height: 3.5rem; } } diff --git a/console/src/app/modules/refresh-table/refresh-table.component.html b/console/src/app/modules/refresh-table/refresh-table.component.html index 895e937093..b971bb164c 100644 --- a/console/src/app/modules/refresh-table/refresh-table.component.html +++ b/console/src/app/modules/refresh-table/refresh-table.component.html @@ -6,15 +6,17 @@ | - - {{ 'ORG_DETAIL.TABLE.CLEAR' | translate }} - - + +
+ {{ 'ORG_DETAIL.TABLE.CLEAR' | translate }} + + +
diff --git a/console/src/app/modules/refresh-table/refresh-table.component.scss b/console/src/app/modules/refresh-table/refresh-table.component.scss index dbed9fc327..096aab6c85 100644 --- a/console/src/app/modules/refresh-table/refresh-table.component.scss +++ b/console/src/app/modules/refresh-table/refresh-table.component.scss @@ -1,5 +1,3 @@ -@use '@angular/material' as mat; - @mixin refresh-table-theme($theme) { $foreground: map-get($theme, foreground); @@ -48,6 +46,8 @@ .icon { font-size: 1.2rem; + height: 1.2rem; + width: 1.2rem; } } } diff --git a/console/src/app/modules/refresh-table/refresh-table.module.ts b/console/src/app/modules/refresh-table/refresh-table.module.ts index 0d797501fd..36fffce9b6 100644 --- a/console/src/app/modules/refresh-table/refresh-table.module.ts +++ b/console/src/app/modules/refresh-table/refresh-table.module.ts @@ -1,10 +1,10 @@ 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 { 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 { PaginatorModule } from 'src/app/modules/paginator/paginator.module'; import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module'; diff --git a/console/src/app/modules/search-org-autocomplete/search-org-autocomplete.component.ts b/console/src/app/modules/search-org-autocomplete/search-org-autocomplete.component.ts index b3139d7b56..cf8164bd58 100644 --- a/console/src/app/modules/search-org-autocomplete/search-org-autocomplete.component.ts +++ b/console/src/app/modules/search-org-autocomplete/search-org-autocomplete.component.ts @@ -1,7 +1,6 @@ import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; import { UntypedFormControl } from '@angular/forms'; -import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; -import { MatLegacyAutocomplete as MatAutocomplete } from '@angular/material/legacy-autocomplete'; +import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; import { debounceTime, from, map, Subject, switchMap, takeUntil, tap } from 'rxjs'; import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb'; import { Org, OrgNameQuery, OrgQuery, OrgState, OrgStateQuery } from 'src/app/proto/generated/zitadel/org_pb'; @@ -14,7 +13,6 @@ import { GrpcAuthService } from 'src/app/services/grpc-auth.service'; styleUrls: ['./search-org-autocomplete.component.scss'], }) export class SearchOrgAutocompleteComponent implements OnInit, OnDestroy { - public selectable: boolean = true; public myControl: UntypedFormControl = new UntypedFormControl(); public filteredOrgs: Array = []; public isLoading: boolean = false; diff --git a/console/src/app/modules/search-org-autocomplete/search-org-autocomplete.module.ts b/console/src/app/modules/search-org-autocomplete/search-org-autocomplete.module.ts index 36c99d27f3..26bf94292c 100644 --- a/console/src/app/modules/search-org-autocomplete/search-org-autocomplete.module.ts +++ b/console/src/app/modules/search-org-autocomplete/search-org-autocomplete.module.ts @@ -1,12 +1,12 @@ 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 { 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 { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips'; -import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner'; -import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatSelectModule } from '@angular/material/select'; import { TranslateModule } from '@ngx-translate/core'; import { InputModule } from 'src/app/modules/input/input.module'; diff --git a/console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts b/console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts index 8a4e39ff97..c6613f3951 100644 --- a/console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts +++ b/console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts @@ -1,11 +1,8 @@ import { COMMA, ENTER } from '@angular/cdk/keycodes'; import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; import { UntypedFormControl } from '@angular/forms'; -import { - MatLegacyAutocomplete as MatAutocomplete, - MatLegacyAutocompleteSelectedEvent as MatAutocompleteSelectedEvent, -} from '@angular/material/legacy-autocomplete'; -import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips'; +import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; +import { MatChipInputEvent } from '@angular/material/chips'; import { forkJoin, from, Subject } from 'rxjs'; import { debounceTime, switchMap, takeUntil, tap } from 'rxjs/operators'; import { ListProjectGrantsResponse, ListProjectsResponse } from 'src/app/proto/generated/zitadel/management_pb'; @@ -26,7 +23,6 @@ export enum ProjectAutocompleteType { styleUrls: ['./search-project-autocomplete.component.scss'], }) export class SearchProjectAutocompleteComponent implements OnInit, OnDestroy { - public selectable: boolean = true; public removable: boolean = true; public addOnBlur: boolean = true; public separatorKeysCodes: number[] = [ENTER, COMMA]; diff --git a/console/src/app/modules/search-project-autocomplete/search-project-autocomplete.module.ts b/console/src/app/modules/search-project-autocomplete/search-project-autocomplete.module.ts index e018e2708a..2a170e34a5 100644 --- a/console/src/app/modules/search-project-autocomplete/search-project-autocomplete.module.ts +++ b/console/src/app/modules/search-project-autocomplete/search-project-autocomplete.module.ts @@ -1,12 +1,12 @@ 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 { 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 { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips'; -import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner'; -import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatSelectModule } from '@angular/material/select'; import { TranslateModule } from '@ngx-translate/core'; import { InputModule } from 'src/app/modules/input/input.module'; diff --git a/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.html b/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.html index 5fa9c90517..77b73f224f 100644 --- a/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.html +++ b/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.html @@ -11,17 +11,11 @@ [matAutocomplete]="auto" /> - - + + {{ selectedRole.displayName }} cancel - + - + diff --git a/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.ts b/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.ts index 255103ea45..3aea4bb4da 100644 --- a/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.ts +++ b/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.ts @@ -1,11 +1,8 @@ import { COMMA, ENTER } from '@angular/cdk/keycodes'; import { Component, ElementRef, EventEmitter, Input, OnDestroy, Output, ViewChild } from '@angular/core'; import { UntypedFormControl } from '@angular/forms'; -import { - MatLegacyAutocomplete as MatAutocomplete, - MatLegacyAutocompleteSelectedEvent as MatAutocompleteSelectedEvent, -} from '@angular/material/legacy-autocomplete'; -import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips'; +import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; +import { MatChipInputEvent } from '@angular/material/chips'; import { from, Subject } from 'rxjs'; import { debounceTime, switchMap, takeUntil, tap } from 'rxjs/operators'; import { Role, RoleDisplayNameQuery, RoleQuery } from 'src/app/proto/generated/zitadel/project_pb'; @@ -17,7 +14,6 @@ import { ManagementService } from 'src/app/services/mgmt.service'; styleUrls: ['./search-roles-autocomplete.component.scss'], }) export class SearchRolesAutocompleteComponent implements OnDestroy { - public selectable: boolean = true; public removable: boolean = true; public addOnBlur: boolean = true; public separatorKeysCodes: number[] = [ENTER, COMMA]; diff --git a/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.module.ts b/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.module.ts index c4ac3214b9..cff2e7a22c 100644 --- a/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.module.ts +++ b/console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.module.ts @@ -1,11 +1,11 @@ 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 { 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 { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips'; -import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { TranslateModule } from '@ngx-translate/core'; import { InputModule } from 'src/app/modules/input/input.module'; diff --git a/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss b/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss index 78ecaee09a..4f2b918838 100644 --- a/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss +++ b/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss @@ -1,17 +1,15 @@ -@use '@angular/material' as mat; - @mixin search-user-autocomplete-theme($theme) { $primary: map-get($theme, primary); - $primary-color: mat.get-color-from-palette($primary, 500); - $lighter-primary-color: mat.get-color-from-palette($primary, 300); - $darker-primary-color: mat.get-color-from-palette($primary, 700); + $primary-color: map-get($primary, 500); + $lighter-primary-color: map-get($primary, 300); + $darker-primary-color: map-get($primary, 700); $background: map-get($theme, background); $foreground: map-get($theme, foreground); $secondary-text: map-get($foreground, secondary-text); $is-dark-theme: map-get($theme, is-dark); - $link-hover-color: if($is-dark-theme, mat.get-color-from-palette($primary, 200), $primary-color); + $link-hover-color: if($is-dark-theme, map-get($primary, 200), $primary-color); $link-color: if($is-dark-theme, $lighter-primary-color, $primary-color); .user-autocomplete-found { diff --git a/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.ts b/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.ts index 987e9f2263..aec06a0416 100644 --- a/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.ts +++ b/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.ts @@ -11,11 +11,8 @@ import { ViewChild, } from '@angular/core'; import { UntypedFormControl } from '@angular/forms'; -import { - MatLegacyAutocomplete as MatAutocomplete, - MatLegacyAutocompleteSelectedEvent as MatAutocompleteSelectedEvent, -} from '@angular/material/legacy-autocomplete'; -import { MatLegacyChipInputEvent as MatChipInputEvent } from '@angular/material/legacy-chips'; +import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; +import { MatChipInputEvent } from '@angular/material/chips'; import { from, of, Subject } from 'rxjs'; import { debounceTime, switchMap, takeUntil, tap } from 'rxjs/operators'; import { ListUsersResponse } from 'src/app/proto/generated/zitadel/management_pb'; @@ -35,7 +32,6 @@ export enum UserTarget { styleUrls: ['./search-user-autocomplete.component.scss'], }) export class SearchUserAutocompleteComponent implements OnInit, AfterContentChecked { - public selectable: boolean = true; public removable: boolean = true; public addOnBlur: boolean = true; public separatorKeysCodes: number[] = [ENTER, COMMA]; diff --git a/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.module.ts b/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.module.ts index 5d6b0453b1..f4f19e6faa 100644 --- a/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.module.ts +++ b/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.module.ts @@ -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 { 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 { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips'; -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 { 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 { AvatarModule } from '../avatar/avatar.module'; diff --git a/console/src/app/modules/settings-grid/settings-grid.module.ts b/console/src/app/modules/settings-grid/settings-grid.module.ts index 24fc0afd0e..59c1f5dcfc 100644 --- a/console/src/app/modules/settings-grid/settings-grid.module.ts +++ b/console/src/app/modules/settings-grid/settings-grid.module.ts @@ -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 { RouterModule } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; import { HasRoleModule } from 'src/app/directives/has-role/has-role.module'; diff --git a/console/src/app/modules/shortcuts/shortcuts.component.scss b/console/src/app/modules/shortcuts/shortcuts.component.scss index 775fc56a90..5dce518130 100644 --- a/console/src/app/modules/shortcuts/shortcuts.component.scss +++ b/console/src/app/modules/shortcuts/shortcuts.component.scss @@ -1,20 +1,18 @@ -@use '@angular/material' as mat; - @mixin shortcut-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); diff --git a/console/src/app/modules/shortcuts/shortcuts.module.ts b/console/src/app/modules/shortcuts/shortcuts.module.ts index 57c593e23e..a48f02dc25 100644 --- a/console/src/app/modules/shortcuts/shortcuts.module.ts +++ b/console/src/app/modules/shortcuts/shortcuts.module.ts @@ -1,9 +1,9 @@ import { DragDropModule } from '@angular/cdk/drag-drop'; 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 { RouterModule } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; import { HasRoleModule } from 'src/app/directives/has-role/has-role.module'; diff --git a/console/src/app/modules/show-key-dialog/show-key-dialog.component.ts b/console/src/app/modules/show-key-dialog/show-key-dialog.component.ts index 7b0c999cf0..e6655ae29b 100644 --- a/console/src/app/modules/show-key-dialog/show-key-dialog.component.ts +++ b/console/src/app/modules/show-key-dialog/show-key-dialog.component.ts @@ -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 { saveAs } from 'file-saver'; import { AddAppKeyResponse, AddMachineKeyResponse } from 'src/app/proto/generated/zitadel/management_pb'; import { InfoSectionType } from '../info-section/info-section.component'; diff --git a/console/src/app/modules/show-key-dialog/show-key-dialog.module.ts b/console/src/app/modules/show-key-dialog/show-key-dialog.module.ts index 14e7523e22..66a3178747 100644 --- a/console/src/app/modules/show-key-dialog/show-key-dialog.module.ts +++ b/console/src/app/modules/show-key-dialog/show-key-dialog.module.ts @@ -1,11 +1,12 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; +import { MatButtonModule } from '@angular/material/button'; import { TranslateModule } from '@ngx-translate/core'; import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module'; import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module'; import { InfoSectionModule } from '../info-section/info-section.module'; +import { MatDialogModule } from '@angular/material/dialog'; import { ShowKeyDialogComponent } from './show-key-dialog.component'; @NgModule({ @@ -15,6 +16,7 @@ import { ShowKeyDialogComponent } from './show-key-dialog.component'; TranslateModule, MatButtonModule, LocalizedDatePipeModule, + MatDialogModule, InfoSectionModule, TimestampToDatePipeModule, ], diff --git a/console/src/app/modules/show-token-dialog/show-token-dialog.component.ts b/console/src/app/modules/show-token-dialog/show-token-dialog.component.ts index c42f659006..4ba5d3b508 100644 --- a/console/src/app/modules/show-token-dialog/show-token-dialog.component.ts +++ b/console/src/app/modules/show-token-dialog/show-token-dialog.component.ts @@ -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 { AddPersonalAccessTokenResponse } from 'src/app/proto/generated/zitadel/management_pb'; import { InfoSectionType } from '../info-section/info-section.component'; diff --git a/console/src/app/modules/show-token-dialog/show-token-dialog.module.ts b/console/src/app/modules/show-token-dialog/show-token-dialog.module.ts index 207b3a1d2a..78ddb6ee51 100644 --- a/console/src/app/modules/show-token-dialog/show-token-dialog.module.ts +++ b/console/src/app/modules/show-token-dialog/show-token-dialog.module.ts @@ -1,12 +1,13 @@ 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 { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module'; import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module'; import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module'; +import { MatDialogModule } from '@angular/material/dialog'; import { InfoSectionModule } from '../info-section/info-section.module'; import { ShowTokenDialogComponent } from './show-token-dialog.component'; @@ -15,6 +16,7 @@ import { ShowTokenDialogComponent } from './show-token-dialog.component'; imports: [ CommonModule, TranslateModule, + MatDialogModule, InfoSectionModule, CopyToClipboardModule, MatButtonModule, diff --git a/console/src/app/modules/sidenav/sidenav.component.scss b/console/src/app/modules/sidenav/sidenav.component.scss index cc0caf57dd..383857751c 100644 --- a/console/src/app/modules/sidenav/sidenav.component.scss +++ b/console/src/app/modules/sidenav/sidenav.component.scss @@ -1,5 +1,3 @@ -@use '@angular/material' as mat; - @mixin sidenav-theme($theme) { $foreground: map-get($theme, foreground); $background: map-get($theme, background); @@ -133,7 +131,6 @@ .sidenav-content { width: 100%; - overflow-x: auto; } @media only screen and (min-width: 824px) { diff --git a/console/src/app/modules/string-list/string-list.component.scss b/console/src/app/modules/string-list/string-list.component.scss index d44143914a..b5309d5964 100644 --- a/console/src/app/modules/string-list/string-list.component.scss +++ b/console/src/app/modules/string-list/string-list.component.scss @@ -1,5 +1,3 @@ -@use '@angular/material' as mat; - @mixin string-list-theme($theme) { $foreground: map-get($theme, foreground); $background: map-get($theme, background); @@ -11,7 +9,7 @@ display: flex; flex-direction: row; max-width: 400px; - background: if($is-dark-theme, #00000020, mat.get-color-from-palette($background, cards)); + background: if($is-dark-theme, #00000020, map-get($background, cards)); margin-left: -1rem; margin-right: -1rem; padding: 0 1rem 0.5rem 1rem; diff --git a/console/src/app/modules/string-list/string-list.module.ts b/console/src/app/modules/string-list/string-list.module.ts index db9322641b..fb9d7938c8 100644 --- a/console/src/app/modules/string-list/string-list.module.ts +++ b/console/src/app/modules/string-list/string-list.module.ts @@ -1,10 +1,10 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { MatButtonModule } from '@angular/material/button'; +import { MatChipsModule } from '@angular/material/chips'; import { MatIconModule } from '@angular/material/icon'; -import { MatLegacyButtonModule } from '@angular/material/legacy-button'; -import { MatLegacyChipsModule } from '@angular/material/legacy-chips'; -import { MatLegacyTooltipModule } from '@angular/material/legacy-tooltip'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { TranslateModule } from '@ngx-translate/core'; import { InputModule } from '../input/input.module'; import { StringListComponent } from './string-list.component'; @@ -16,11 +16,11 @@ import { StringListComponent } from './string-list.component'; InputModule, FormsModule, ReactiveFormsModule, - MatLegacyChipsModule, + MatChipsModule, TranslateModule, MatIconModule, - MatLegacyTooltipModule, - MatLegacyButtonModule, + MatTooltipModule, + MatButtonModule, ], exports: [StringListComponent], }) diff --git a/console/src/app/modules/table-actions/table-actions.component.html b/console/src/app/modules/table-actions/table-actions.component.html index 5032f4dace..df19103af0 100644 --- a/console/src/app/modules/table-actions/table-actions.component.html +++ b/console/src/app/modules/table-actions/table-actions.component.html @@ -5,12 +5,12 @@ diff --git a/console/src/app/modules/table-actions/table-actions.component.scss b/console/src/app/modules/table-actions/table-actions.component.scss index 0604b7ad8b..30018229b8 100644 --- a/console/src/app/modules/table-actions/table-actions.component.scss +++ b/console/src/app/modules/table-actions/table-actions.component.scss @@ -1,19 +1,14 @@ -@use '@angular/material' as mat; - @mixin table-actions-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)); .cnsl-table-action-wrapper { - position: relative; height: 36px; .cnsl-table-action { - position: absolute; - right: 0; display: flex; background-color: $card-background-color; transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); @@ -25,6 +20,9 @@ box-shadow: 0 0 3px #0000001a; height: 36px; align-items: center; + width: fit-content; + float: right; + overflow: hidden; button { height: 36px; @@ -32,6 +30,12 @@ display: flex; align-items: center; justify-content: center; + + &.more-button { + font-size: 1rem; + line-height: 1.5rem; + padding: 0; + } } button:only-of-type { diff --git a/console/src/app/modules/table-actions/table-actions.module.ts b/console/src/app/modules/table-actions/table-actions.module.ts index ad92bcc814..2d249d70f2 100644 --- a/console/src/app/modules/table-actions/table-actions.module.ts +++ b/console/src/app/modules/table-actions/table-actions.module.ts @@ -1,9 +1,9 @@ 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 { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu'; -import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { TranslateModule } from '@ngx-translate/core'; import { TableActionsComponent } from './table-actions.component'; diff --git a/console/src/app/modules/theme-setting/theme-setting.component.html b/console/src/app/modules/theme-setting/theme-setting.component.html index 37f09ad1bf..4ed050be7e 100644 --- a/console/src/app/modules/theme-setting/theme-setting.component.html +++ b/console/src/app/modules/theme-setting/theme-setting.component.html @@ -1,13 +1,34 @@ - +
+ + +
diff --git a/console/src/app/modules/theme-setting/theme-setting.component.scss b/console/src/app/modules/theme-setting/theme-setting.component.scss index c477935803..0950d84a4e 100644 --- a/console/src/app/modules/theme-setting/theme-setting.component.scss +++ b/console/src/app/modules/theme-setting/theme-setting.component.scss @@ -1,12 +1,57 @@ -@use '@angular/material' as mat; - @mixin theme-setting($theme) { $primary: map-get($theme, primary); $background: map-get($theme, background); + $foreground: map-get($theme, foreground); $is-dark-theme: map-get($theme, is-dark); $back: map-get($background, background); - .theme-setting-button { - background-color: if($is-dark-theme, #ffffff10, #fff) !important; + .theme-flex { + display: flex; + align-items: center; + border: 1px solid if($is-dark-theme, #ffffff20, #00000020); + border-radius: 50vw; + padding: 0.25rem; + + .theme-setting-button { + background-color: transparent; + border-radius: 50vw; + display: flex; + align-items: center; + justify-content: center; + height: 2rem; + width: 2rem; + border: none; + cursor: pointer; + padding: 0; + + .moon, + .sun { + color: map-get($foreground, text); + fill: transparent; + height: 1rem; + width: 1rem; + opacity: 0.7; + } + + .sun { + height: 1.5rem; + width: 1.5rem; + } + + &:hover { + .moon, + .sun { + opacity: 1; + } + } + + &.active { + background-color: if($is-dark-theme, #ffffff10, #00000010) !important; + .moon, + .sun { + opacity: 1; + } + } + } } } diff --git a/console/src/app/modules/theme-setting/theme-setting.module.ts b/console/src/app/modules/theme-setting/theme-setting.module.ts index 6efa4f45f8..b440a3cfb2 100644 --- a/console/src/app/modules/theme-setting/theme-setting.module.ts +++ b/console/src/app/modules/theme-setting/theme-setting.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; -import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu'; +import { MatButtonModule } from '@angular/material/button'; +import { MatMenuModule } from '@angular/material/menu'; import { TranslateModule } from '@ngx-translate/core'; import { ThemeSettingComponent } from './theme-setting.component'; diff --git a/console/src/app/modules/top-view/top-view.component.html b/console/src/app/modules/top-view/top-view.component.html index 63e85e962d..65e68dec7a 100644 --- a/console/src/app/modules/top-view/top-view.component.html +++ b/console/src/app/modules/top-view/top-view.component.html @@ -18,7 +18,7 @@
- + info_outline
@@ -29,13 +29,15 @@ - add - {{ 'GRANTS.ADD_BTN' | translate }} - +
+ add + {{ 'GRANTS.ADD_BTN' | translate }} + +
- - + +
+ + +
- - + +
+ + +
- - diff --git a/console/src/app/modules/user-grants/user-grants.component.scss b/console/src/app/modules/user-grants/user-grants.component.scss index 5e9a315996..fca43cf99c 100644 --- a/console/src/app/modules/user-grants/user-grants.component.scss +++ b/console/src/app/modules/user-grants/user-grants.component.scss @@ -1,5 +1,3 @@ -@use '@angular/material' as mat; - @mixin user-grants-theme($theme) { $foreground: map-get($theme, foreground); $is-dark-theme: map-get($theme, is-dark); diff --git a/console/src/app/modules/user-grants/user-grants.component.ts b/console/src/app/modules/user-grants/user-grants.component.ts index 4003458657..f3c5521fae 100644 --- a/console/src/app/modules/user-grants/user-grants.component.ts +++ b/console/src/app/modules/user-grants/user-grants.component.ts @@ -1,8 +1,8 @@ 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 { MatLegacyInput as MatInput } from '@angular/material/legacy-input'; -import { MatLegacyTable as MatTable } from '@angular/material/legacy-table'; +import { MatDialog } from '@angular/material/dialog'; +import { MatInput } from '@angular/material/input'; +import { MatTable } from '@angular/material/table'; import { Router } from '@angular/router'; import { tap } from 'rxjs/operators'; import { enterAnimations } from 'src/app/animations'; diff --git a/console/src/app/modules/user-grants/user-grants.module.ts b/console/src/app/modules/user-grants/user-grants.module.ts index 3bdb7464ad..d076ec28ad 100644 --- a/console/src/app/modules/user-grants/user-grants.module.ts +++ b/console/src/app/modules/user-grants/user-grants.module.ts @@ -1,13 +1,13 @@ 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 { 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 { 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 { RouterModule } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; import { HasRoleModule } from 'src/app/directives/has-role/has-role.module'; diff --git a/console/src/app/modules/warn-dialog/warn-dialog.component.html b/console/src/app/modules/warn-dialog/warn-dialog.component.html index 17c21f28b6..56370d8944 100644 --- a/console/src/app/modules/warn-dialog/warn-dialog.component.html +++ b/console/src/app/modules/warn-dialog/warn-dialog.component.html @@ -1,13 +1,16 @@ -{{ data.titleKey | translate: data.titleParam }} +

+ {{ data.titleKey | translate: data.titleParam }} +

+

{{ data.descriptionKey | translate: data.descriptionParam }}

- {{ - data.warnSectionKey | translate - }} + + {{ data.warnSectionKey | translate }} +

{{ data.hintKey | translate: { value: data.confirmation } }}

@@ -16,7 +19,8 @@
-
+ +
diff --git a/console/src/app/modules/warn-dialog/warn-dialog.component.scss b/console/src/app/modules/warn-dialog/warn-dialog.component.scss index 5308d2266d..3e9d17ae7c 100644 --- a/console/src/app/modules/warn-dialog/warn-dialog.component.scss +++ b/console/src/app/modules/warn-dialog/warn-dialog.component.scss @@ -1,6 +1,6 @@ -.title { - font-size: 1.2rem; - margin-top: 0; +h1 { + font-size: 1.5rem; + margin: 0; } .icon-wrapper { diff --git a/console/src/app/modules/warn-dialog/warn-dialog.component.ts b/console/src/app/modules/warn-dialog/warn-dialog.component.ts index 701fe8f398..5a0037525e 100644 --- a/console/src/app/modules/warn-dialog/warn-dialog.component.ts +++ b/console/src/app/modules/warn-dialog/warn-dialog.component.ts @@ -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 { InfoSectionType } from '../info-section/info-section.component'; diff --git a/console/src/app/modules/warn-dialog/warn-dialog.module.ts b/console/src/app/modules/warn-dialog/warn-dialog.module.ts index 3100984cb9..d8e5024d78 100644 --- a/console/src/app/modules/warn-dialog/warn-dialog.module.ts +++ b/console/src/app/modules/warn-dialog/warn-dialog.module.ts @@ -1,15 +1,16 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } 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 { MatDialogModule } from '@angular/material/dialog'; import { InfoSectionModule } from '../info-section/info-section.module'; import { InputModule } from '../input/input.module'; import { WarnDialogComponent } from './warn-dialog.component'; @NgModule({ declarations: [WarnDialogComponent], - imports: [CommonModule, FormsModule, TranslateModule, InfoSectionModule, MatButtonModule, InputModule], + imports: [CommonModule, FormsModule, MatDialogModule, TranslateModule, InfoSectionModule, MatButtonModule, InputModule], }) export class WarnDialogModule {} diff --git a/console/src/app/pages/actions/action-table/action-table.component.html b/console/src/app/pages/actions/action-table/action-table.component.html index 3d5ed09cb0..1f68faa6f4 100644 --- a/console/src/app/pages/actions/action-table/action-table.component.html +++ b/console/src/app/pages/actions/action-table/action-table.component.html @@ -7,38 +7,43 @@ [selection]="selection" >
- -
- - - - - +
+ - - - - - + +
+ + 		+
+ + + + + + + + +
- -
- - + +
+ + +
+ - diff --git a/console/src/app/pages/actions/actions.component.scss b/console/src/app/pages/actions/actions.component.scss index 104c37257d..df06575c2c 100644 --- a/console/src/app/pages/actions/actions.component.scss +++ b/console/src/app/pages/actions/actions.component.scss @@ -1,5 +1,3 @@ -@use '@angular/material' as mat; - @mixin actions-theme($theme) { $foreground: map-get($theme, foreground); $background: map-get($theme, background); diff --git a/console/src/app/pages/actions/actions.component.ts b/console/src/app/pages/actions/actions.component.ts index bc1dcc43b8..7d5ac14ca1 100644 --- a/console/src/app/pages/actions/actions.component.ts +++ b/console/src/app/pages/actions/actions.component.ts @@ -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'; diff --git a/console/src/app/pages/actions/actions.module.ts b/console/src/app/pages/actions/actions.module.ts index 64a93c160d..c5da8663fa 100644 --- a/console/src/app/pages/actions/actions.module.ts +++ b/console/src/app/pages/actions/actions.module.ts @@ -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'; diff --git a/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.scss b/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.scss index dce51a6de5..022729aef8 100644 --- a/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.scss +++ b/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.scss @@ -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; diff --git a/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.ts b/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.ts index 46d0232b86..7038acbb61 100644 --- a/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.ts +++ b/console/src/app/pages/actions/add-action-dialog/add-action-dialog.component.ts @@ -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'; diff --git a/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.html b/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.html index 63f2df1537..2a8c36bb63 100644 --- a/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.html +++ b/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.html @@ -22,6 +22,7 @@
+ diff --git a/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.scss b/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.scss index 1c37381905..06a9a313ae 100644 --- a/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.scss +++ b/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.scss @@ -9,9 +9,12 @@ .action { display: flex; - justify-content: space-between; margin-top: 1rem; + .fill-space { + flex: 1; + } + .ok-button { margin-left: 0.5rem; } diff --git a/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.ts b/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.ts index 49f4a98d16..0b8cffd940 100644 --- a/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.ts +++ b/console/src/app/pages/actions/add-flow-dialog/add-flow-dialog.component.ts @@ -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'; diff --git a/console/src/app/pages/app-create/app-create.component.scss b/console/src/app/pages/app-create/app-create.component.scss index 4050c25873..d8d3127bd8 100644 --- a/console/src/app/pages/app-create/app-create.component.scss +++ b/console/src/app/pages/app-create/app-create.component.scss @@ -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; } } diff --git a/console/src/app/pages/app-create/app-create.module.ts b/console/src/app/pages/app-create/app-create.module.ts index 502446297d..fa7a0aa4de 100644 --- a/console/src/app/pages/app-create/app-create.module.ts +++ b/console/src/app/pages/app-create/app-create.module.ts @@ -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'; diff --git a/console/src/app/pages/events/events.component.scss b/console/src/app/pages/events/events.component.scss index d80824d327..ee275a38ce 100644 --- a/console/src/app/pages/events/events.component.scss +++ b/console/src/app/pages/events/events.component.scss @@ -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; diff --git a/console/src/app/pages/events/events.component.ts b/console/src/app/pages/events/events.component.ts index d5e1a6ef14..41f520a7a4 100644 --- a/console/src/app/pages/events/events.component.ts +++ b/console/src/app/pages/events/events.component.ts @@ -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'; diff --git a/console/src/app/pages/events/events.module.ts b/console/src/app/pages/events/events.module.ts index b22a12dca4..b1ba802f39 100644 --- a/console/src/app/pages/events/events.module.ts +++ b/console/src/app/pages/events/events.module.ts @@ -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, diff --git a/console/src/app/pages/failed-events/failed-events.component.ts b/console/src/app/pages/failed-events/failed-events.component.ts index cb764c24a9..c3f5fedb46 100644 --- a/console/src/app/pages/failed-events/failed-events.component.ts +++ b/console/src/app/pages/failed-events/failed-events.component.ts @@ -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'; diff --git a/console/src/app/pages/failed-events/failed-events.module.ts b/console/src/app/pages/failed-events/failed-events.module.ts index 8fc8b7a5ef..39954791e6 100644 --- a/console/src/app/pages/failed-events/failed-events.module.ts +++ b/console/src/app/pages/failed-events/failed-events.module.ts @@ -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'; diff --git a/console/src/app/pages/home/home.component.scss b/console/src/app/pages/home/home.component.scss index 68a8a8742c..8dac8e43c5 100644 --- a/console/src/app/pages/home/home.component.scss +++ b/console/src/app/pages/home/home.component.scss @@ -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); diff --git a/console/src/app/pages/home/home.module.ts b/console/src/app/pages/home/home.module.ts index 8dbbb5daef..5184b40112 100644 --- a/console/src/app/pages/home/home.module.ts +++ b/console/src/app/pages/home/home.module.ts @@ -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'; diff --git a/console/src/app/pages/iam-views/iam-views.component.ts b/console/src/app/pages/iam-views/iam-views.component.ts index 91913e5cb7..41e5b87037 100644 --- a/console/src/app/pages/iam-views/iam-views.component.ts +++ b/console/src/app/pages/iam-views/iam-views.component.ts @@ -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'; diff --git a/console/src/app/pages/iam-views/iam-views.module.ts b/console/src/app/pages/iam-views/iam-views.module.ts index 3662f87ace..13c30ba8df 100644 --- a/console/src/app/pages/iam-views/iam-views.module.ts +++ b/console/src/app/pages/iam-views/iam-views.module.ts @@ -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'; diff --git a/console/src/app/pages/instance/instance-members/instance-members.component.html b/console/src/app/pages/instance/instance-members/instance-members.component.html index c3181671f1..e6a58e2270 100644 --- a/console/src/app/pages/instance/instance-members/instance-members.component.html +++ b/console/src/app/pages/instance/instance-members/instance-members.component.html @@ -2,7 +2,7 @@

{{ 'IAM.MEMBER.DESCRIPTION' | translate }} - + info_outline

- diff --git a/console/src/app/pages/instance/instance-members/instance-members.component.scss b/console/src/app/pages/instance/instance-members/instance-members.component.scss index bdf7cb3cf8..7647171923 100644 --- a/console/src/app/pages/instance/instance-members/instance-members.component.scss +++ b/console/src/app/pages/instance/instance-members/instance-members.component.scss @@ -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; diff --git a/console/src/app/pages/instance/instance-members/instance-members.component.spec.ts b/console/src/app/pages/instance/instance-members/instance-members.component.spec.ts index 4f55067766..204bb8803f 100644 --- a/console/src/app/pages/instance/instance-members/instance-members.component.spec.ts +++ b/console/src/app/pages/instance/instance-members/instance-members.component.spec.ts @@ -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'; diff --git a/console/src/app/pages/instance/instance-members/instance-members.component.ts b/console/src/app/pages/instance/instance-members/instance-members.component.ts index cbfa759df3..2fb9755d41 100644 --- a/console/src/app/pages/instance/instance-members/instance-members.component.ts +++ b/console/src/app/pages/instance/instance-members/instance-members.component.ts @@ -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'; diff --git a/console/src/app/pages/instance/instance-members/instance-members.module.ts b/console/src/app/pages/instance/instance-members/instance-members.module.ts index 3515590ac5..46fda95a90 100644 --- a/console/src/app/pages/instance/instance-members/instance-members.module.ts +++ b/console/src/app/pages/instance/instance-members/instance-members.module.ts @@ -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'; diff --git a/console/src/app/pages/instance/instance.component.scss b/console/src/app/pages/instance/instance.component.scss index ea9a2c1a1c..4c8cf2338e 100644 --- a/console/src/app/pages/instance/instance.component.scss +++ b/console/src/app/pages/instance/instance.component.scss @@ -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); diff --git a/console/src/app/pages/instance/instance.component.ts b/console/src/app/pages/instance/instance.component.ts index 3202efac38..a0f7cc1a8d 100644 --- a/console/src/app/pages/instance/instance.component.ts +++ b/console/src/app/pages/instance/instance.component.ts @@ -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'; diff --git a/console/src/app/pages/instance/instance.module.ts b/console/src/app/pages/instance/instance.module.ts index 594ff853b2..c4a67540ef 100644 --- a/console/src/app/pages/instance/instance.module.ts +++ b/console/src/app/pages/instance/instance.module.ts @@ -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'; diff --git a/console/src/app/pages/org-create/org-create.component.scss b/console/src/app/pages/org-create/org-create.component.scss index d29ffc3a45..861ff34bd0 100644 --- a/console/src/app/pages/org-create/org-create.component.scss +++ b/console/src/app/pages/org-create/org-create.component.scss @@ -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; } } diff --git a/console/src/app/pages/org-create/org-create.component.ts b/console/src/app/pages/org-create/org-create.component.ts index 200ff4941c..7b0fc73e7b 100644 --- a/console/src/app/pages/org-create/org-create.component.ts +++ b/console/src/app/pages/org-create/org-create.component.ts @@ -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, diff --git a/console/src/app/pages/org-create/org-create.module.ts b/console/src/app/pages/org-create/org-create.module.ts index ec9cf3f0c1..889142e8b7 100644 --- a/console/src/app/pages/org-create/org-create.module.ts +++ b/console/src/app/pages/org-create/org-create.module.ts @@ -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'; diff --git a/console/src/app/pages/orgs/org-detail/org-detail.component.ts b/console/src/app/pages/orgs/org-detail/org-detail.component.ts index 92a8854285..81413bafef 100644 --- a/console/src/app/pages/orgs/org-detail/org-detail.component.ts +++ b/console/src/app/pages/orgs/org-detail/org-detail.component.ts @@ -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'; diff --git a/console/src/app/pages/orgs/org-members/org-members.component.html b/console/src/app/pages/orgs/org-members/org-members.component.html index 029b22cc65..02e93aef48 100644 --- a/console/src/app/pages/orgs/org-members/org-members.component.html +++ b/console/src/app/pages/orgs/org-members/org-members.component.html @@ -2,7 +2,7 @@

{{ 'ORG.MEMBER.DESCRIPTION' | translate }} - + info_outline

- diff --git a/console/src/app/pages/orgs/org-members/org-members.component.scss b/console/src/app/pages/orgs/org-members/org-members.component.scss index bdf7cb3cf8..7647171923 100644 --- a/console/src/app/pages/orgs/org-members/org-members.component.scss +++ b/console/src/app/pages/orgs/org-members/org-members.component.scss @@ -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; diff --git a/console/src/app/pages/orgs/org-members/org-members.component.spec.ts b/console/src/app/pages/orgs/org-members/org-members.component.spec.ts index da05aa1db9..4a6238fea9 100644 --- a/console/src/app/pages/orgs/org-members/org-members.component.spec.ts +++ b/console/src/app/pages/orgs/org-members/org-members.component.spec.ts @@ -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'; diff --git a/console/src/app/pages/orgs/org-members/org-members.component.ts b/console/src/app/pages/orgs/org-members/org-members.component.ts index 89c6a1d620..1c18519110 100644 --- a/console/src/app/pages/orgs/org-members/org-members.component.ts +++ b/console/src/app/pages/orgs/org-members/org-members.component.ts @@ -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'; diff --git a/console/src/app/pages/orgs/org-members/org-members.module.ts b/console/src/app/pages/orgs/org-members/org-members.module.ts index 84d9ecbf05..12288ed3d7 100644 --- a/console/src/app/pages/orgs/org-members/org-members.module.ts +++ b/console/src/app/pages/orgs/org-members/org-members.module.ts @@ -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'; diff --git a/console/src/app/pages/orgs/org.module.ts b/console/src/app/pages/orgs/org.module.ts index d2857329fe..ae36a626ef 100644 --- a/console/src/app/pages/orgs/org.module.ts +++ b/console/src/app/pages/orgs/org.module.ts @@ -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'; diff --git a/console/src/app/pages/projects/apps/additional-origins/additional-origins.component.scss b/console/src/app/pages/projects/apps/additional-origins/additional-origins.component.scss index dbc5be916a..b103818bfe 100644 --- a/console/src/app/pages/projects/apps/additional-origins/additional-origins.component.scss +++ b/console/src/app/pages/projects/apps/additional-origins/additional-origins.component.scss @@ -8,7 +8,7 @@ } button { - margin-bottom: 14px; + margin-bottom: 0.5rem; margin-right: -0.5rem; } } diff --git a/console/src/app/pages/projects/apps/app-create/app-create.component.scss b/console/src/app/pages/projects/apps/app-create/app-create.component.scss index cb2172d660..8d070f403d 100644 --- a/console/src/app/pages/projects/apps/app-create/app-create.component.scss +++ b/console/src/app/pages/projects/apps/app-create/app-create.component.scss @@ -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; } } diff --git a/console/src/app/pages/projects/apps/app-create/app-create.component.ts b/console/src/app/pages/projects/apps/app-create/app-create.component.ts index 7c9af17e78..d8e920a758 100644 --- a/console/src/app/pages/projects/apps/app-create/app-create.component.ts +++ b/console/src/app/pages/projects/apps/app-create/app-create.component.ts @@ -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'; diff --git a/console/src/app/pages/projects/apps/app-detail/app-detail.component.html b/console/src/app/pages/projects/apps/app-detail/app-detail.component.html index e3884b6166..f624128983 100644 --- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.html +++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.html @@ -282,17 +282,17 @@

ClockSkew

+ + > {{ 'APP.OIDC.CLOCKSKEW' | translate }} diff --git a/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss b/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss index 25409024e4..f97a914ebd 100644 --- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss +++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss @@ -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; } } diff --git a/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts b/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts index da77b9677a..49b5eea676 100644 --- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts +++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts @@ -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, diff --git a/console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.ts b/console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.ts index 8b1436b716..1d7475cb04 100644 --- a/console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.ts +++ b/console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.ts @@ -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', diff --git a/console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.html b/console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.html index 98973a8e21..1d68497e60 100644 --- a/console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.html +++ b/console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.html @@ -1,8 +1,9 @@

{{ 'APP.OIDC.CLIENTSECRET' | translate }}

-

{{ 'APP.OIDC.CLIENTSECRET_DESCRIPTION' | translate }}

+

{{ 'APP.OIDC.CLIENTSECRET_DESCRIPTION' | translate }}

+
ClientId: {{ data.clientId }}