feat(console): angular 12, migrate grpc lib, ui element fixes (#1740)

* fix: is default

* fix: feature tile in org, iam, neutral color for info boxes

* lint

* consolidation, ui elements

* feat(console): angular 12, migrate deprecated grpc to @grpc/grpc-js (#1741)

* update cli core

* update material

* mig

* migrate grpc to grpc-js

* audit

* lint

* node lts version, ng12 deprecation

* rem comment

* disable inlinestyles

* fix iam feature link, binding

build/dockerfile

@@ -1,5 +1,5 @@
 ARG GO_VERSION=1.15.8
-ARG NODE_VERSION=15.8.0
+ARG NODE_VERSION=14.17.0
 ARG ENV=prod
 
 #######################

console/angular.json

@@ -22,7 +22,6 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets",
@@ -37,7 +36,22 @@
                 "src/app/proto/generated/**",
                 "file-saver",
                 "qrcode"
-             ]
+             ],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": {
+              "scripts": true,
+              "fonts": {
+                "inline": true
+              },
+              "styles": {
+                "minify": true,
+                "inlineCritical": false
+              }
+            },
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -47,7 +61,16 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "optimization": true,
+              "optimization": {
+                "scripts": true,
+                "fonts": {
+                  "inline": false
+                },
+                "styles": {
+                  "minify": true,
+                  "inlineCritical": false
+                }
+              },
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
@@ -68,19 +91,24 @@
               ],
               "serviceWorker": true,
               "ngswConfigPath": "ngsw-config.json"
-            }
+            },
-          }
+            "development": {}
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "console:build"
           },
           "configurations": {
             "production": {
               "browserTarget": "console:build:production"
+            },
+            "development": {
+              "browserTarget": "console:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -123,14 +151,17 @@
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
+            "protractorConfig": "e2e/protractor.conf.js"
-            "devServerTarget": "console:serve"
           },
           "configurations": {
             "production": {
               "devServerTarget": "console:serve:production"
+            },
+            "development": {
+              "devServerTarget": "console:serve:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         }
       }
     }

console/package.json

@@ -5,23 +5,24 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "prodbuild": "ng build --prod",
+    "prodbuild": "ng build --configuration production",
     "lint": "ng lint && stylelint './src/**/*.scss' --syntax scss"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~11.0.0",
+    "@angular/animations": "~12.0.0",
-    "@angular/cdk": "~11.0.0",
+    "@angular/cdk": "~12.0.0",
-    "@angular/common": "~11.0.0",
+    "@angular/common": "~12.0.0",
-    "@angular/compiler": "~11.0.0",
+    "@angular/compiler": "~12.0.0",
-    "@angular/core": "~11.0.0",
+    "@angular/core": "~12.0.0",
-    "@angular/forms": "~11.0.0",
+    "@angular/forms": "~12.0.0",
-    "@angular/material": "^11.0.0",
+    "@angular/material": "^12.0.0",
-    "@angular/material-moment-adapter": "^11.0.0",
+    "@angular/material-moment-adapter": "^12.0.0",
-    "@angular/platform-browser": "~11.0.0",
+    "@angular/platform-browser": "~12.0.0",
-    "@angular/platform-browser-dynamic": "~11.0.0",
+    "@angular/platform-browser-dynamic": "~12.0.0",
-    "@angular/router": "~11.0.0",
+    "@angular/router": "~12.0.0",
-    "@angular/service-worker": "~11.0.0",
+    "@angular/service-worker": "~12.0.0",
+    "@grpc/grpc-js": "^1.3.2",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@types/file-saver": "^2.0.2",
@@ -33,7 +34,6 @@
     "file-saver": "^2.0.5",
     "google-proto-files": "^2.4.0",
     "google-protobuf": "^3.15.8",
-    "grpc": "^1.24.5",
     "grpc-web": "^1.2.1",
     "libphonenumber-js": "^1.9.16",
     "moment": "^2.29.1",
@@ -42,14 +42,14 @@
     "ts-protoc-gen": "^0.14.0",
     "tslib": "^2.2.0",
     "uuid": "^8.3.2",
-    "zone.js": "~0.11.3"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1102.8",
+    "@angular-devkit/build-angular": "~12.0.0",
-    "@angular/cli": "~11.2.8",
+    "@angular/cli": "~12.0.0",
-    "@angular/compiler-cli": "~11.0.0",
+    "@angular/compiler-cli": "~12.0.0",
+    "@angular/language-service": "~12.0.0",
     "@types/jasmine": "~3.6.9",
-    "@angular/language-service": "~11.2.9",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^14.14.37",
     "codelyzer": "^6.0.0",
@@ -67,6 +67,6 @@
     "stylelint-scss": "^3.19.0",
     "ts-node": "~9.1.1",
     "tslint": "~6.1.3",
-    "typescript": "^4.0.7"
+    "typescript": "^4.2.4"
   }
 }

console/src/app/app.component.scss

@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 .root-header {
   position: fixed;
@@ -125,6 +125,12 @@
             margin: .5rem 1rem;
           }
 
+          .iam-i {
+            object-fit: contain;
+            max-height: 24px;
+            margin: .5rem 1rem;
+          }
+
           .label {
             margin-bottom: 0;
             font-size: 14px;
@@ -263,12 +269,12 @@
     margin: 0 .5rem;
     /* stylelint-disable */
     $foreground: map-get($theme, foreground);
-    color: mat-color($foreground, text) !important;
+    color: mat.get-color-from-palette($foreground, text) !important;
   }
 
   .show-all {
     $primary: map-get($theme, primary);
-    color: mat-color($primary, 300) !important;
+    color: mat.get-color-from-palette($primary, 300) !important;
     border-bottom: 2px solid var(--grey);
     margin-bottom: .5rem;
   }

console/src/app/modules/app-card/app-card.component.scss

@@ -1,12 +1,12 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin app-card-theme($theme) {
   /* stylelint-disable */
   $primary: map-get($theme, primary);
-  $primary-dark: mat-color($primary, A900);
+  $primary-dark: mat.get-color-from-palette($primary, A900);
   $accent: map-get($theme, accent);
   $is-dark-theme: map-get($theme, is-dark);
-  $accent-color: mat-color($primary, 500);
+  $accent-color: mat.get-color-from-palette($primary, 500);
   /* stylelint-enable */
 
   .cnsl-app-card {

console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss

@@ -1,5 +1,4 @@
-
+@use '~@angular/material' as mat;
-@import '~@angular/material/theming';
 
 .radio-button-wrapper {
   display: flex;
@@ -14,7 +13,7 @@
 
 @mixin app-auth-method-radio-theme($theme) {
   $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
   $is-dark-theme: map-get($theme, is-dark);
 
   input[type="radio"] {

console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.scss

@@ -1,5 +1,4 @@
-
+@use '~@angular/material' as mat;
-@import '~@angular/material/theming';
 
 .radio-button-wrapper {
   display: flex;
@@ -10,7 +9,7 @@
 
 @mixin app-type-radio-theme($theme) {
   $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
   $is-dark-theme: map-get($theme, is-dark);
 
   input[type="radio"] {

console/src/app/modules/avatar/avatar.component.scss

@@ -1,9 +1,8 @@
-
+@use '~@angular/material' as mat;
-@import '~@angular/material/theming';
 
 @mixin avatar-theme($theme) {
   $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
 
   .avatar-circle {
     border-radius: 50%;

console/src/app/modules/card/card.scss

@@ -1,12 +1,12 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin card-theme($theme) {
 /* stylelint-disable */
   $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
-  $primary-dark: mat-color($primary, A800);
+  $primary-dark: mat.get-color-from-palette($primary, A800);
-  $border-color: mat-color($primary, A700);
+  $border-color: mat.get-color-from-palette($primary, A700);
-  $border-selected-color: mat-color($primary, A600);
+  $border-selected-color: mat.get-color-from-palette($primary, A600);
 /* stylelint-enable */
 
   .card {

console/src/app/modules/changes/changes.component.scss

@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 .change-header {
   display: flex;
@@ -114,7 +114,7 @@
 
         /* stylelint-disable */
         $primary: map-get($theme, primary);
-        $primary-dark: mat-color($primary, A800);
+        $primary-dark: mat.get-color-from-palette($primary, A800);
         /* stylelint-enable */
 
         &.change-item-back {

console/src/app/modules/detail-layout/detail-layout.component.scss

@@ -1,13 +1,13 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin detail-layout-theme($theme) {
   /* stylelint-disable */
   $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
-  $primary-dark: mat-color($primary, A800);
+  $primary-dark: mat.get-color-from-palette($primary, A800);
   /* stylelint-enable */
 
-  $lighter-color: rgba(mat-color($primary, 300), .5);
+  $lighter-color: rgba(mat.get-color-from-palette($primary, 300), .5);
 
   .detail-container {
     width: 100%;

console/src/app/modules/features/features.component.html

@@ -7,7 +7,12 @@
 
     <div class="detail">
         <p class="title">{{'FEATURES.TIER.NAME' | translate}}</p>
-        <p>{{features?.tier?.name}}</p>
+        <p class="center">{{features?.tier?.name}}
+          <a class="ext" href="https://zitadel.ch/pricing"
+          target="_blank">
+            <i class="las la-external-link-alt"></i>
+          </a>
+        </p>
     </div>
 
     <ng-container *ngIf="serviceType === FeatureServiceType.MGMT">

console/src/app/modules/features/features.component.scss

@@ -30,6 +30,15 @@
     }
   }
 
+  .center {
+    display: flex;
+    align-items: center;
+
+    a {
+      margin-left: .5rem;
+    }
+  }
+
   img {
     height: 15px;
     width: auto;

console/src/app/modules/form-field/form-field.component.scss

@@ -1,9 +1,8 @@
-
+@use '~@angular/material' as mat;
-@import '~@angular/material/theming';
 
 @mixin cnsl-form-field-theme($theme) {
   $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
   $is-dark-theme: map-get($theme, is-dark);
 
   .ng-untouched {

console/src/app/modules/info-section/info-section.component.scss

@@ -1,8 +1,8 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin info-section-theme($theme) {
   $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
   $is-dark-theme: map-get($theme, is-dark);
 
   .info-section-row {
@@ -25,6 +25,15 @@
     }
 
     &.info {
+      background-color: if($is-dark-theme, #6d6f7382, #e4e4e4);
+      color: if($is-dark-theme, #f0f0f0, #4a4a4a);
+
+      .icon {
+        color: $primary-color;
+      }
+    }
+
+    &.success {
       background-color: if($is-dark-theme, #4f566b, #cbf4c9);
       color: if($is-dark-theme, #cbf4c9, #0e6245);
 

console/src/app/modules/info-section/info-section.component.ts

@@ -1,16 +1,17 @@
 import { Component, Input } from '@angular/core';
 
 enum InfoSectionType {
-    INFO = 'INFO',
+  INFO = 'INFO',
-    WARN = 'WARN',
+  SUCCESS = 'SUCCESS',
+  WARN = 'WARN',
 }
 
 @Component({
-    selector: 'cnsl-info-section',
+  selector: 'cnsl-info-section',
-    templateUrl: './info-section.component.html',
+  templateUrl: './info-section.component.html',
-    styleUrls: ['./info-section.component.scss'],
+  styleUrls: ['./info-section.component.scss'],
 })
 export class InfoSectionComponent {
 
-    @Input() type: InfoSectionType = InfoSectionType.INFO;
+  @Input() type: InfoSectionType = InfoSectionType.INFO;
 }

console/src/app/modules/label/label.component.scss

@@ -1,12 +1,11 @@
-
+@use '~@angular/material' as mat;
-@import '~@angular/material/theming';
 
 @mixin cnsl-label-theme($theme) {
   $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
   $is-dark-theme: map-get($theme, is-dark);
   $warn: map-get($theme, warn);
-  $warn-color: mat-color($warn, 500);
+  $warn-color: mat.get-color-from-palette($warn, 500);
 
   .cnsl-label {
     display: block;

console/src/app/modules/meta-layout/meta.scss

@@ -1,6 +1,3 @@
-
-@import '~@angular/material/theming';
-
 @mixin meta-theme($theme) {
   $is-dark-theme: map-get($theme, is-dark);
 

console/src/app/modules/onboarding/onboarding.component.scss

@@ -1,9 +1,9 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin onboarding-theme($theme) {
   /* stylelint-disable */
   $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
   $is-dark-theme: map-get($theme, is-dark);
   /* stylelint-enable */
 

console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.scss

@@ -1,3 +1,7 @@
 .full-width {
   width: 100%;
 }
+
+input {
+  max-width: 500px;
+}

console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss

@@ -8,6 +8,7 @@
 
 .target-desc {
   font-size: 14px;
+  display: block;
 
   a {
     color: #4072b4;
@@ -70,3 +71,8 @@
 .circle {
   margin-right: .5rem;
 }
+
+input {
+  max-width: 500px;
+  display: block;
+}

console/src/app/modules/zitadel-tier/zitadel-tier.component.html

@@ -0,0 +1,17 @@
+<div *ngIf="features" class="tier card">
+  <!-- <mat-icon class="icon">stars</mat-icon> -->
+  <img class="logo dark" alt="zitadel logo"
+                    src="../assets/images/zitadel-logo-solo-light-icon.svg" />
+  <img alt="zitadel logo" class="logo light" src="../assets/images/zitadel-logo-solo-dark-icon.svg" />
+  <div class="text" *ngIf="features.tier">
+      <p class="title"><strong>{{features.tier.name}}</strong></p>
+      <p>{{features.tier?.description}}</p>
+      <p class="state" [ngClass]="{'active': features.tier.state == FeaturesState.FEATURES_STATE_ACTIVE}">{{'FEATURES.TIERSTATES.'+features.tier.state | translate}}</p>
+      <p >{{features.tier?.statusInfo}}</p>
+  </div>
+  <span class="fill-space"></span>
+  <!-- <a *ngIf="['features.write'] | hasRole | async" class="ext" href="https://zitadel.ch/pricing"
+      target="_blank"><i class="las la-external-link-alt"></i></a> -->
+
+  <button mat-raised-button color="primary" [routerLink]="[ iam ? '/iam/features' : '/org/features']">{{'FEATURES.BTN-EDIT' | translate}}</button>
+</div>

console/src/app/modules/zitadel-tier/zitadel-tier.component.scss

@@ -0,0 +1,76 @@
+@mixin tier-theme($theme) {
+  $is-dark-theme: map-get($theme, is-dark);
+
+  .tier {
+    display: flex;
+    flex-direction: row;
+    padding: 1rem;
+    border-radius: .5rem;
+    margin-bottom: .5rem;
+
+    .ext {
+      margin-right: .5rem;
+      align-self: center;
+      color: inherit;
+    }
+
+    .logo {
+      margin-right: 1rem;
+      max-height: 40px;
+      object-fit: contain;
+      filter: grayscale(1);
+      transition: filter .3s ease;
+
+      &.dark {
+        display: if($is-dark-theme, inline-block, none);
+      }
+
+      &.light {
+        display: if($is-dark-theme, none, inline-block);
+      }
+    }
+
+    .text {
+      display: flex;
+      flex-direction: column;
+
+      p:not(.state) {
+        margin: 0;
+        font-size: 14px;
+      }
+
+      .title {
+        font-size: 16px;
+        margin-bottom: .5rem;
+      }
+
+      .state {
+        align-self: flex-start;
+        border-radius: 50vw;
+        padding: 2px .5rem;
+        letter-spacing: .05em;
+        font-size: 12px;
+        background-color: if($is-dark-theme, #4f566b, #e4e7e4);
+
+        &.active {
+          background-color: if($is-dark-theme, #4f566b, #cbf4c9);
+          color: if($is-dark-theme, #cbf4c9, #0e6245);
+        }
+
+        &.inactive {
+          color: if($is-dark-theme, #ffc1c1, #620e0e);
+          background-color: if($is-dark-theme, #4f566b, #ffc1c1);
+        }
+      }
+    }
+
+    .fill-space {
+      flex: 1;
+    }
+
+    button {
+      // min-width: 200px;
+      align-self: center;
+    }
+  }
+}

console/src/app/modules/zitadel-tier/zitadel-tier.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZitadelTierComponent } from './zitadel-tier.component';
+
+describe('ZitadelTierComponent', () => {
+  let component: ZitadelTierComponent;
+  let fixture: ComponentFixture<ZitadelTierComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ZitadelTierComponent],
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ZitadelTierComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

console/src/app/modules/zitadel-tier/zitadel-tier.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Features, FeaturesState } from 'src/app/proto/generated/zitadel/features_pb';
+
+@Component({
+  selector: 'cnsl-zitadel-tier',
+  templateUrl: './zitadel-tier.component.html',
+  styleUrls: ['./zitadel-tier.component.scss'],
+})
+export class ZitadelTierComponent implements OnInit {
+  @Input() public features!: Features.AsObject;
+  @Input() public iam: boolean = false;
+
+  FeaturesState: any = FeaturesState;
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

console/src/app/modules/zitadel-tier/zitadel-tier.module.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
+
+import { ZitadelTierComponent } from './zitadel-tier.component';
+
+
+
+@NgModule({
+  declarations: [
+    ZitadelTierComponent,
+  ],
+  imports: [
+    CommonModule,
+    RouterModule,
+    MatButtonModule,
+    MatIconModule,
+    HasRoleModule,
+    HasRolePipeModule,
+    TranslateModule,
+  ],
+  exports: [
+    ZitadelTierComponent,
+  ],
+})
+export class ZitadelTierModule { }

console/src/app/pages/iam/iam.component.html

@@ -5,19 +5,7 @@
 
         <h2>{{'FEATURES.TITLE' | translate}}</h2>
         <p class="top-desc">{{'FEATURES.DESCRIPTION' | translate}}</p>
-        <div *ngIf="features" class="tier">
+        <cnsl-zitadel-tier [features]="features" [iam]="true"></cnsl-zitadel-tier>
-            <mat-icon class="icon">stars</mat-icon>
-            <div class="text" *ngIf="features.tier">
-                <p class="title"><strong>{{features.tier.name}}</strong></p>
-                <p>{{features.tier?.description}}</p>
-                <p>{{'FEATURES.TIERSTATES.'+features.tier.state | translate}}</p>
-                <p>{{features.tier?.statusInfo}}</p>
-            </div>
-            <span class="fill-space"></span>
-            <a class="ext" href="https://zitadel.ch/pricing" target="_blank"><i
-                    class="las la-external-link-alt"></i></a>
-            <button mat-raised-button [routerLink]="['/iam','features']">{{'FEATURES.BTN-EDIT' | translate}}</button>
-        </div>
 
         <app-policy-grid [type]="PolicyGridType.IAM"></app-policy-grid>
     </div>

console/src/app/pages/iam/iam.component.scss

@@ -18,47 +18,3 @@ h2 {
   text-transform: uppercase;
   margin-top: 2rem;
 }
-
-.tier {
-  display: flex;
-  flex-direction: row;
-  padding: 1rem;
-  border-radius: .5rem;
-  color: white;
-  background-color: rgb(245, 203, 99);
-  margin-bottom: .5rem;
-
-  .ext {
-    margin-right: .5rem;
-    align-self: center;
-    color: inherit;
-  }
-
-  .icon {
-    margin-right: 1rem;
-    font-size: 2rem;
-  }
-
-  .text {
-    display: flex;
-    flex-direction: column;
-
-    p {
-      margin: 0;
-      font-size: 14px;
-    }
-
-    .title {
-      font-size: 16px;
-      margin-bottom: .5rem;
-    }
-  }
-
-  .fill-space {
-    flex: 1;
-  }
-
-  button {
-    min-width: 200px;
-  }
-}

console/src/app/pages/iam/iam.module.ts

@@ -22,6 +22,7 @@ import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module
 import { PolicyGridModule } from 'src/app/modules/policy-grid/policy-grid.module';
 import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
+import { ZitadelTierModule } from 'src/app/modules/zitadel-tier/zitadel-tier.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.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';
@@ -33,37 +34,38 @@ import { IamViewsComponent } from './iam-views/iam-views.component';
 import { IamComponent } from './iam.component';
 
 @NgModule({
-    declarations: [IamComponent, EventstoreComponent, IamViewsComponent, FailedEventsComponent],
+  declarations: [IamComponent, EventstoreComponent, IamViewsComponent, FailedEventsComponent],
-    imports: [
+  imports: [
-        CommonModule,
+    CommonModule,
-        IamRoutingModule,
+    IamRoutingModule,
-        ChangesModule,
+    ChangesModule,
-        CardModule,
+    CardModule,
-        MatAutocompleteModule,
+    MatAutocompleteModule,
-        MatChipsModule,
+    MatChipsModule,
-        MatButtonModule,
+    MatButtonModule,
-        HasRoleModule,
+    HasRoleModule,
-        MatCheckboxModule,
+    MatCheckboxModule,
-        MetaLayoutModule,
+    MetaLayoutModule,
-        MatIconModule,
+    MatIconModule,
-        MatTableModule,
+    MatTableModule,
-        MatPaginatorModule,
+    ZitadelTierModule,
-        InputModule,
+    MatPaginatorModule,
-        MatSortModule,
+    InputModule,
-        MatTooltipModule,
+    MatSortModule,
-        ReactiveFormsModule,
+    MatTooltipModule,
-        MatProgressSpinnerModule,
+    ReactiveFormsModule,
-        FormsModule,
+    MatProgressSpinnerModule,
-        TranslateModule,
+    FormsModule,
-        MatDialogModule,
+    TranslateModule,
-        ContributorsModule,
+    MatDialogModule,
-        LocalizedDatePipeModule,
+    ContributorsModule,
-        TimestampToDatePipeModule,
+    LocalizedDatePipeModule,
-        SharedModule,
+    TimestampToDatePipeModule,
-        RefreshTableModule,
+    SharedModule,
-        HasRolePipeModule,
+    RefreshTableModule,
-        MatSortModule,
+    HasRolePipeModule,
-        PolicyGridModule,
+    MatSortModule,
-    ],
+    PolicyGridModule,
+  ],
 })
 export class IamModule { }

console/src/app/pages/orgs/org-detail/org-detail.component.html

@@ -44,20 +44,7 @@
         <ng-container *ngIf="['features.read'] | hasRole | async">
             <h2>{{'FEATURES.TITLE' | translate}}</h2>
             <p class="top-desc">{{'FEATURES.DESCRIPTION' | translate}}</p>
-            <div *ngIf="features" class="tier">
+            <cnsl-zitadel-tier [features]="features"></cnsl-zitadel-tier>
-                <mat-icon class="icon">stars</mat-icon>
-                <div class="text" *ngIf="features.tier">
-                    <p class="title"><strong>{{features.tier.name}}</strong></p>
-                    <p>{{features.tier?.description}}</p>
-                    <p>{{'FEATURES.TIERSTATES.'+features.tier.state | translate}}</p>
-                    <p>{{features.tier?.statusInfo}}</p>
-                </div>
-                <span class="fill-space"></span>
-                <a *ngIf="['features.write'] | hasRole | async" class="ext" href="https://zitadel.ch/pricing"
-                    target="_blank"><i class="las la-external-link-alt"></i></a>
-
-                <button mat-raised-button [routerLink]="['features']">{{'FEATURES.BTN-EDIT' | translate}}</button>
-            </div>
         </ng-container>
 
         <ng-template appHasRole [appHasRole]="['policy.read']">

console/src/app/pages/orgs/org-detail/org-detail.component.scss

@@ -19,50 +19,6 @@ h2 {
   margin-bottom: 2rem;
 }
 
-.tier {
-  display: flex;
-  flex-direction: row;
-  padding: 1rem;
-  border-radius: .5rem;
-  color: white;
-  background-color: rgb(245, 203, 99);
-  margin-bottom: .5rem;
-
-  .ext {
-    margin-right: .5rem;
-    align-self: center;
-    color: inherit;
-  }
-
-  .icon {
-    margin-right: 1rem;
-    font-size: 2rem;
-  }
-
-  .text {
-    display: flex;
-    flex-direction: column;
-
-    p {
-      margin: 0;
-      font-size: 14px;
-    }
-
-    .title {
-      font-size: 16px;
-      margin-bottom: .5rem;
-    }
-  }
-
-  .fill-space {
-    flex: 1;
-  }
-
-  button {
-    min-width: 200px;
-  }
-}
-
 .domain {
   display: flex;
   align-items: center;

console/src/app/pages/orgs/orgs.module.ts

@@ -26,6 +26,7 @@ import { HasFeaturePipeModule } from 'src/app/pipes/has-feature-pipe/has-feature
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 
 import { ChangesModule } from '../../modules/changes/changes.module';
+import { ZitadelTierModule } from '../../modules/zitadel-tier/zitadel-tier.module';
 import { AddDomainDialogModule } from './org-detail/add-domain-dialog/add-domain-dialog.module';
 import { DomainVerificationComponent } from './org-detail/domain-verification/domain-verification.component';
 import { OrgDetailComponent } from './org-detail/org-detail.component';
@@ -63,6 +64,7 @@ import { OrgsRoutingModule } from './orgs-routing.module';
     CopyToClipboardModule,
     PolicyGridModule,
     FeaturesModule,
+    ZitadelTierModule,
   ],
 })
 export class OrgsModule { }

console/src/app/pages/projects/project-create/project-create.component.html

@@ -20,7 +20,7 @@
 
         <button color="primary" mat-raised-button class="continue-button" [disabled]="!project.name" cdkFocusInitial
             type="submit">
-            {{'CONTINUE' | translate}}
+            {{'ACTIONS.CONTINUE' | translate}}
         </button>
     </form>
 </div>

console/src/app/pages/user-grant-create/user-grant-create.component.html

@@ -3,7 +3,7 @@
         <button (click)="close()" mat-icon-button>
             <mat-icon>close</mat-icon>
         </button>
-        <span class="abort">{{ 'GRANTS.CREATE.TITLE' | translate }}</span><span class="abort-2">Step
+        <h1 class="abort">{{ 'GRANTS.CREATE.TITLE' | translate }}</h1><span class="abort-2">Step
             {{ currentCreateStep }} of
             {{ STEPS }}</span>
     </div>
@@ -17,7 +17,7 @@
         </p>
 
         <ng-container>
-            <h1>{{'PROJECT.GRANT.CREATE.SEL_USER' | translate}}</h1>
+            <h2>{{'PROJECT.GRANT.CREATE.SEL_USER' | translate}}</h2>
 
             <app-search-user-autocomplete class="block" singleOutput="true" [users]="user ? [user] : []"
                 (selectionChanged)="selectUser($event)"
@@ -26,7 +26,7 @@
         </ng-container>
 
         <ng-container *ngIf="context && (context == UserGrantContext.USER || context == UserGrantContext.NONE)">
-            <h1>{{'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate}}</h1>
+            <h2>{{'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate}}</h2>
 
             <app-search-project-autocomplete class="block" singleOutput="true"
                 (selectionChanged)="selectProject($event)">

console/src/app/pages/user-grant-create/user-grant-create.component.scss

@@ -1,4 +1,3 @@
-
 .container {
   padding: 4rem 4rem 2rem 4rem;
 
@@ -32,23 +31,6 @@
   display: block;
 }
 
-.column {
-  display: flex;
-  flex-direction: column;
-
-  .formfield {
-    width: 400px;
-
-    input {
-      font-size: 1.5rem;
-    }
-
-    &.autocomplete {
-      margin-top: 1rem;
-    }
-  }
-}
-
 .btn-container {
   display: flex;
   justify-content: space-between;
@@ -74,3 +56,9 @@
     margin: auto;
   }
 }
+
+h2 {
+  margin-top: 2.5rem;
+  margin-bottom: 1rem;
+  font-size: 2rem;
+}

console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card.scss

@@ -1,9 +1,9 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin theme-card($theme) {
   /* stylelint-disable */
   $primary: map-get($theme, primary);
-  $primary-dark: mat-color($primary, A900);
+  $primary-dark: mat.get-color-from-palette($primary, A900);
   /* stylelint-enable */
 
   .theme-conent,

console/src/app/pages/users/user-detail/memberships/memberships.component.scss

@@ -1,11 +1,11 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin membership-theme($theme) {
   /* stylelint-disable */
   $primary: map-get($theme, primary);
-  $primary-dark: mat-color($primary, A900);
+  $primary-dark: mat.get-color-from-palette($primary, A900);
   $accent: map-get($theme, accent);
-  $accent-color: mat-color($accent, 500);
+  $accent-color: mat.get-color-from-palette($accent, 500);
   /* stylelint-enable */
 
   .membership-groups {

console/src/assets/images/zitadel-logo-solo-dark-icon.svg

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 467 468" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,0,-492)">
+        <g id="zitadel-logo-solo-lightdesign" transform="matrix(0.564847,0,0,0.659318,-1282.85,492.925)">
+            <rect x="2271.15" y="0" width="826.773" height="708.241" style="fill:none;"/>
+            <g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5923.46,-2258.26)">
+                <path d="M1493.5,1056.38L1493.5,1037L1496.5,1037L1496.5,1061.62L1426.02,1020.38L1496.5,979.392L1496.5,1004L1493.5,1004L1493.5,984.608L1431.98,1020.39L1493.5,1056.38Z" style="fill:rgb(35,35,35);"/>
+            </g>
+            <g transform="matrix(31.0036,0,0,15.0393,-397275,-666.457)">
+                <g transform="matrix(-0.0429306,-0.282967,0.160219,-0.0758207,12884.5,137.392)">
+                    <path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:rgb(35,35,35);"/>
+                </g>
+                <g transform="matrix(0.160219,0.0758207,-0.0429306,0.282967,12878.9,10.8747)">
+                    <path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:rgb(35,35,35);"/>
+                </g>
+                <g transform="matrix(-0.117289,0.207146,-0.117289,-0.207146,12943.8,65.7)">
+                    <path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:rgb(35,35,35);"/>
+                </g>
+                <g transform="matrix(-0.160219,-0.0758207,0.0429306,-0.282967,12917.4,132.195)">
+                    <path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:rgb(35,35,35);"/>
+                </g>
+                <g transform="matrix(-0.117289,0.207146,0.117289,0.207146,12897.8,5.87512)">
+                    <path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:rgb(35,35,35);"/>
+                </g>
+                <g transform="matrix(-0.0429306,-0.282967,-0.160219,0.0758207,12936.8,97.6441)">
+                    <path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:rgb(35,35,35);"/>
+                </g>
+            </g>
+            <g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5928.43,-2257.12)">
+                <circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
+            </g>
+            <g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5884.5,-2116.69)">
+                <circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
+            </g>
+            <g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5855.22,-2023.06)">
+                <circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
+            </g>
+            <g transform="matrix(4.96737,-1.14029,1.331,4.25561,-6234.47,-2112.14)">
+                <circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
+            </g>
+            <g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5957.71,-2350.75)">
+                <circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
+            </g>
+            <g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5477.99,-831.33)">
+                <path d="M1499.26,757.787C1499.26,757.787 1497.37,756.489 1497,755.2C1496.71,754.182 1496.57,750.662 1496.54,750C1496.41,747.303 1499.21,745.644 1499.21,745.644L1490.01,745.835C1490.01,745.835 1493.15,745.713 1493.46,750C1493.51,750.661 1493.23,753.476 1493,755.2C1492.91,756.447 1491.2,757.668 1491.2,757.668L1499.26,757.787Z" style="fill:rgb(35,35,35);"/>
+            </g>
+            <g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5404.79,-597.271)">
+                <path d="M1495,760L1495,744" style="fill:none;"/>
+            </g>
+            <g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5404.79,-597.271)">
+                <path d="M1498.27,757.077C1498.27,757.077 1496.71,756.46 1496.65,754.8C1496.65,753.658 1496.64,753.281 1496.65,752.016C1496.62,751.334 1496.59,750.608 1496.65,749.949C1496.78,746.836 1498.5,746.156 1498.5,746.156L1491.46,745.931C1491.46,745.931 1493.37,746.719 1493.65,749.83C1493.71,750.489 1493.69,751.528 1493.65,752.209C1493.64,753.331 1493.64,753.413 1493.65,754.518C1493.68,756.334 1492.58,756.827 1492.58,756.827L1498.27,757.077Z" style="fill:rgb(35,35,35);"/>
+            </g>
+            <g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5770.62,-677.495)">
+                <path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
+            </g>
+            <g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5770.62,-677.495)">
+                <path d="M1500.86,762.056C1500.86,762.056 1499.86,760.4 1503.09,757.456C1504.91,755.797 1507.33,754.151 1509.98,752.255C1514.82,748.79 1520.68,744.94 1526.52,741.049C1531.45,737.766 1536.38,734.479 1540.82,731.68C1544.52,729.349 1547.85,727.296 1550.54,725.8C1551.07,725.506 1551.6,725.329 1552.05,725.029C1554.73,723.257 1556.85,724.968 1556.85,724.968L1552.23,716.282C1552.23,716.282 1551.99,719.454 1550,720.997C1549.57,721.333 1549.15,721.741 1548.67,722.12C1546.2,724.053 1542.99,726.344 1539.39,728.867C1535.06,731.898 1530.13,735.166 1525.19,738.438C1519.35,742.314 1513.52,746.234 1508.49,749.329C1505.74,751.023 1503.28,752.577 1501.13,753.598C1497.99,755.086 1495.28,753.617 1495.28,753.617L1500.86,762.056Z" style="fill:rgb(35,35,35);"/>
+            </g>
+            <g transform="matrix(4.96737,-1.14029,-1.16463,-3.72366,-3997,4993.28)">
+                <path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
+            </g>
+            <g transform="matrix(4.96737,-1.14029,-1.16463,-3.72366,-3997,4993.28)">
+                <path d="M1496.1,754.362C1496.1,754.362 1497.2,755.607 1501.13,753.598C1503.25,752.509 1505.74,751.023 1508.49,749.329C1513.52,746.234 1519.35,742.314 1525.19,738.438C1530.13,735.166 1534.94,731.832 1539.27,728.802C1542.87,726.279 1549.36,722.059 1549.81,721.75C1552.75,719.73 1552.18,718.196 1552.18,718.196L1555.28,724.152C1555.28,724.152 1553.77,722.905 1551.37,724.681C1550.93,725.006 1544.52,729.349 1540.82,731.68C1536.38,734.479 1531.45,737.766 1526.52,741.049C1520.68,744.94 1514.82,748.79 1509.98,752.255C1507.33,754.151 1504.89,755.771 1503.09,757.456C1499.47,760.841 1501.26,763.283 1501.26,763.283L1496.1,754.362Z" style="fill:rgb(35,35,35);"/>
+            </g>
+        </g>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,155.247,-155.247,-41.5984,201.516,76.8392)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(155.247,-41.5984,41.5984,155.247,110.08,195.509)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,-113.649,113.649,-113.649,258.31,215.618)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-155.247,41.5984,-41.5984,-155.247,220.914,144.546)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,113.649,113.649,113.649,206.837,124.661)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,-155.247,-155.247,41.5984,152.054,262.8)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>

console/src/assets/images/zitadel-logo-solo-light-icon.svg

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 467 467" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="zitadel-logo-solo-darkdesign" transform="matrix(0.564847,0,0,0.659318,-1282.85,0)">
+        <rect x="2271.15" y="0" width="826.773" height="708.241" style="fill:none;"/>
+        <g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5923.46,-2258.26)">
+            <path d="M1493.5,1056.38L1493.5,1037L1496.5,1037L1496.5,1061.62L1426.02,1020.38L1496.5,979.392L1496.5,1004L1493.5,1004L1493.5,984.608L1431.98,1020.39L1493.5,1056.38Z" style="fill:white;"/>
+        </g>
+        <g transform="matrix(31.0036,0,0,15.0393,-397275,-666.457)">
+            <g transform="matrix(-0.0429306,-0.282967,0.160219,-0.0758207,12884.5,137.392)">
+                <path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:white;"/>
+            </g>
+            <g transform="matrix(0.160219,0.0758207,-0.0429306,0.282967,12878.9,10.8747)">
+                <path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:white;"/>
+            </g>
+            <g transform="matrix(-0.117289,0.207146,-0.117289,-0.207146,12943.8,65.7)">
+                <path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:white;"/>
+            </g>
+            <g transform="matrix(-0.160219,-0.0758207,0.0429306,-0.282967,12917.4,132.195)">
+                <path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:white;"/>
+            </g>
+            <g transform="matrix(-0.117289,0.207146,0.117289,0.207146,12897.8,5.87512)">
+                <path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:white;"/>
+            </g>
+            <g transform="matrix(-0.0429306,-0.282967,-0.160219,0.0758207,12936.8,97.6441)">
+                <path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:white;"/>
+            </g>
+        </g>
+        <g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5928.43,-2257.12)">
+            <circle cx="1496" cy="1004" r="7" style="fill:white;"/>
+        </g>
+        <g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5884.5,-2116.69)">
+            <circle cx="1496" cy="1004" r="7" style="fill:white;"/>
+        </g>
+        <g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5855.22,-2023.06)">
+            <circle cx="1496" cy="1004" r="7" style="fill:white;"/>
+        </g>
+        <g transform="matrix(4.96737,-1.14029,1.331,4.25561,-6234.47,-2112.14)">
+            <circle cx="1496" cy="1004" r="7" style="fill:white;"/>
+        </g>
+        <g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5957.71,-2350.75)">
+            <circle cx="1496" cy="1004" r="7" style="fill:white;"/>
+        </g>
+        <g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5477.99,-831.33)">
+            <path d="M1499.26,757.787C1499.26,757.787 1497.37,756.489 1497,755.2C1496.71,754.182 1496.57,750.662 1496.54,750C1496.41,747.303 1499.21,745.644 1499.21,745.644L1490.01,745.835C1490.01,745.835 1493.15,745.713 1493.46,750C1493.51,750.661 1493.23,753.476 1493,755.2C1492.91,756.447 1491.2,757.668 1491.2,757.668L1499.26,757.787Z" style="fill:white;"/>
+        </g>
+        <g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5404.79,-597.271)">
+            <path d="M1495,760L1495,744" style="fill:none;"/>
+        </g>
+        <g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5404.79,-597.271)">
+            <path d="M1498.27,757.077C1498.27,757.077 1496.71,756.46 1496.65,754.8C1496.65,753.658 1496.64,753.281 1496.65,752.016C1496.62,751.334 1496.59,750.608 1496.65,749.949C1496.78,746.836 1498.5,746.156 1498.5,746.156L1491.46,745.931C1491.46,745.931 1493.37,746.719 1493.65,749.83C1493.71,750.489 1493.69,751.528 1493.65,752.209C1493.64,753.331 1493.64,753.413 1493.65,754.518C1493.68,756.334 1492.58,756.827 1492.58,756.827L1498.27,757.077Z" style="fill:white;"/>
+        </g>
+        <g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5770.62,-677.495)">
+            <path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
+        </g>
+        <g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5770.62,-677.495)">
+            <path d="M1500.86,762.056C1500.86,762.056 1499.86,760.4 1503.09,757.456C1504.91,755.797 1507.33,754.151 1509.98,752.255C1514.82,748.79 1520.68,744.94 1526.52,741.049C1531.45,737.766 1536.38,734.479 1540.82,731.68C1544.52,729.349 1547.85,727.296 1550.54,725.8C1551.07,725.506 1551.6,725.329 1552.05,725.029C1554.73,723.257 1556.85,724.968 1556.85,724.968L1552.23,716.282C1552.23,716.282 1551.99,719.454 1550,720.997C1549.57,721.333 1549.15,721.741 1548.67,722.12C1546.2,724.053 1542.99,726.344 1539.39,728.867C1535.06,731.898 1530.13,735.166 1525.19,738.438C1519.35,742.314 1513.52,746.234 1508.49,749.329C1505.74,751.023 1503.28,752.577 1501.13,753.598C1497.99,755.086 1495.28,753.617 1495.28,753.617L1500.86,762.056Z" style="fill:white;"/>
+        </g>
+        <g transform="matrix(4.96737,-1.14029,-1.16463,-3.72366,-3997,4993.28)">
+            <path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
+        </g>
+        <g transform="matrix(4.96737,-1.14029,-1.16463,-3.72366,-3997,4993.28)">
+            <path d="M1496.1,754.362C1496.1,754.362 1497.2,755.607 1501.13,753.598C1503.25,752.509 1505.74,751.023 1508.49,749.329C1513.52,746.234 1519.35,742.314 1525.19,738.438C1530.13,735.166 1534.94,731.832 1539.27,728.802C1542.87,726.279 1549.36,722.059 1549.81,721.75C1552.75,719.73 1552.18,718.196 1552.18,718.196L1555.28,724.152C1555.28,724.152 1553.77,722.905 1551.37,724.681C1550.93,725.006 1544.52,729.349 1540.82,731.68C1536.38,734.479 1531.45,737.766 1526.52,741.049C1520.68,744.94 1514.82,748.79 1509.98,752.255C1507.33,754.151 1504.89,755.771 1503.09,757.456C1499.47,760.841 1501.26,763.283 1501.26,763.283L1496.1,754.362Z" style="fill:white;"/>
+        </g>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,155.247,-155.247,-41.5984,201.516,76.8392)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(155.247,-41.5984,41.5984,155.247,110.08,195.509)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,-113.649,113.649,-113.649,258.31,215.618)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-155.247,41.5984,-41.5984,-155.247,220.914,144.546)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,113.649,113.649,113.649,206.837,124.661)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,-155.247,-155.247,41.5984,152.054,262.8)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>

console/src/component-themes.scss

@@ -17,6 +17,7 @@
 @import 'src/app/modules/form-field/form-field.component.scss';
 @import 'src/app/modules/label/label.component.scss';
 @import 'src/app/modules/meta-layout/meta.scss';
+@import 'src/app/modules/zitadel-tier/zitadel-tier.component.scss';
 @import 'src/app/modules/onboarding/onboarding.component.scss';
 
 @mixin component-themes($theme) {
@@ -40,4 +41,5 @@
   @include meta-theme($theme);
   @include info-section-theme($theme);
   @include onboarding-theme($theme);
+  @include tier-theme($theme);
 }

console/src/environments/environment.ts

@@ -13,4 +13,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

console/src/index.html

@@ -10,7 +10,7 @@
     <link href="https://fonts.googleapis.com/css?family=Manjari|Roboto+Slab&amp;display=swap" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
 
     <link rel="stylesheet"
         href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">

console/src/polyfills.ts

@@ -55,7 +55,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

console/src/styles.scss

@@ -1,7 +1,8 @@
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
 
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
+
 @import './component-themes';
 
 // Plus imports for other components in your app.
@@ -41,21 +42,22 @@ $caos-dark-brand: (
   A700: #8795a1,
   A800: #2d2e30,
   A900: #212224,
-  contrast: (
+  contrast:
-    50: $black-87-opacity,
+  (
-    100: $black-87-opacity,
+    50: rgba(black, .87),
-    200: $black-87-opacity,
+    100: rgba(black, .87),
-    300: $black-87-opacity,
+    200: rgba(black, .87),
-    400: $black-87-opacity,
+    300: rgba(black, .87),
+    400: rgba(black, .87),
     500: white,
     600: white,
     700: white,
     800: white,
     900: white,
-    A100: $black-87-opacity,
+    A100: rgba(black, .87),
-    A200: $black-87-opacity,
+    A200: rgba(black, .87),
-    A400: $black-87-opacity,
+    A400: rgba(black, .87),
-    A700: white,
+    A700: white
   )
 );
 
@@ -79,7 +81,8 @@ $caos-light-brand: (
   A700: #8795a1,
   A800: white,
   A900: #fafafa,
-  contrast: (
+  contrast:
+  (
     50: #3d4852,
     100: #3d4852,
     200: #3d4852,
@@ -93,7 +96,7 @@ $caos-light-brand: (
     A100: #3d4852,
     A200: #3d4852,
     A400: #3d4852,
-    A700: white,
+    A700: white
   )
 );
 
@@ -112,49 +115,47 @@ $caos-accent-color: (
   A200: #8bffde,
   A400: #58ffd0,
   A700: #3effc9,
-  contrast: (
+  contrast:
-    50: $black-87-opacity,
+  (
-    100: $black-87-opacity,
+    50: rgba(black, .87),
-    200: $black-87-opacity,
+    100: rgba(black, .87),
-    300: $black-87-opacity,
+    200: rgba(black, .87),
-    400: $black-87-opacity,
+    300: rgba(black, .87),
+    400: rgba(black, .87),
     500: white,
     600: white,
     700: white,
     800: white,
     900: white,
-    A100: $black-87-opacity,
+    A100: rgba(black, .87),
-    A200: $black-87-opacity,
+    A200: rgba(black, .87),
-    A400: $black-87-opacity,
+    A400: rgba(black, .87),
-    A700: white,
+    A700: white
   )
 );
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
 
-$light-primary: mat-palette($caos-light-brand);
+$light-primary: mat.define-palette($caos-light-brand);
-$light-accent: mat-palette($caos-accent-color);
+$light-accent: mat.define-palette($caos-accent-color);
-$light-warn: mat-palette($mat-red);
+$light-warn: mat.define-palette(mat.$red-palette);
 
-$dark-primary: mat-palette($caos-dark-brand);
+$dark-primary: mat.define-palette($caos-dark-brand);
-$dark-accent: mat-palette($mat-pink);
+$dark-accent: mat.define-palette(mat.$pink-palette);
-$dark-warn: mat-palette($mat-red);
+$dark-warn: mat.define-palette(mat.$red-palette);
 
-$light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);
+$light-theme: mat.define-light-theme($light-primary, $light-accent, $light-warn);
 
-$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
+$dark-theme: mat.define-dark-theme($dark-primary, $dark-accent, $dark-warn);
 
-$custom-typography:
+$custom-typography: mat.define-typography-config($font-family: 'Lato');
-  mat-typography-config(
-    $font-family: 'Lato'
-  );
 
-@include mat-core($custom-typography);
+@include mat.core($custom-typography);
 
 // default theme
 @include component-themes($dark-theme);
-@include angular-material-theme($dark-theme);
+@include mat.all-component-themes($dark-theme);
 
 .mat-dialog-container,
 .mat-raised-button,
@@ -164,7 +165,7 @@ $custom-typography:
 
 .light-theme {
   @include component-themes($light-theme);
-  @include angular-material-theme($light-theme);
+  @include mat.all-component-themes($light-theme);
 
   --grey: #697386;
   --color-main: #5469d4;
@@ -202,7 +203,7 @@ $custom-typography:
 
 .dark-theme {
   @include component-themes($dark-theme);
-  @include angular-material-theme($dark-theme);
+  @include mat.all-component-themes($dark-theme);
 
   --color-main: #5282c1;
 
@@ -239,7 +240,7 @@ $custom-typography:
     box-shadow: inset 0 -1px #303131;
   }
 }
-// @include mat-checkbox-theme($candy-app-theme);
+// @include mat.checkbox-theme($candy-app-theme);
 
 /* You can add global styles to this file, and also import other style files */
 
@@ -265,8 +266,13 @@ body {
     sans-serif;
 }
 
+h1 {
+  font-weight: 400;
+}
+
 h2 {
   font-size: 1.3rem;
+  font-weight: 400;
 }
 
 .mat-paginator .mat-select {

console/src/styles/error.scss

@@ -1,9 +1,8 @@
-
+@use '~@angular/material' as mat;
-@import '~@angular/material/theming';
 
 @mixin cnsl-error-theme($theme) {
   $warn: map-get($theme, warn);
-  $warn-color: mat-color($warn, 500);
+  $warn-color: mat.get-color-from-palette($warn, 500);
   $is-dark-theme: map-get($theme, is-dark);
 
   .cnsl-error {

console/src/styles/input.scss

@@ -1,15 +1,15 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin input-theme($theme) {
   /* stylelint-disable */
   $primary: map-get($theme, primary);
-  $primary-dark: mat-color($primary, A900);
+  $primary-dark: mat.get-color-from-palette($primary, A900);
-  $secondary-dark: mat-color($primary, A800);
+  $secondary-dark: mat.get-color-from-palette($primary, A800);
-  $inv-color: mat-color($primary, A600);
+  $inv-color: mat.get-color-from-palette($primary, A600);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
-  $primary-light-color: mat-color($primary, 200);
+  $primary-light-color: mat.get-color-from-palette($primary, 200);
   $warn: map-get($theme, warn);
-  $warn-color: mat-color($warn, 500);
+  $warn-color: mat.get-color-from-palette($warn, 500);
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
@@ -34,7 +34,7 @@
     padding: 10px;
     transition: border-color .2s ease-in-out;
     width: 100%;
-    color: mat-color($foreground, text);
+    color: mat.get-color-from-palette($foreground, text);
     margin-bottom: 2px;
 
     &:hover {

console/src/styles/link.scss

@@ -1,10 +1,10 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin link-theme($theme) {
   /* stylelint-disable */
   $primary: map-get($theme, primary);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
-  $primary-color-lighter: mat-color($primary, A300);
+  $primary-color-lighter: mat.get-color-from-palette($primary, A300);
 
   a {
       color: $primary-color;

console/src/styles/sidenav-list.scss

@@ -1,14 +1,14 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin sidenav-list-theme($theme) {
   /* stylelint-disable */
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
-  $accent-color: mat-color($accent, 500);
+  $accent-color: mat.get-color-from-palette($accent, 500);
-  $primary-dark: mat-color($primary, A900);
+  $primary-dark: mat.get-color-from-palette($primary, A900);
   $foreground: map-get($theme, foreground);
-  $sec-dark: mat-color($primary, A800);
+  $sec-dark: mat.get-color-from-palette($primary, A800);
   $is-dark-theme: map-get($theme, is-dark);
   /* stylelint-enable */
 
@@ -22,7 +22,7 @@
   }
 
   .nav-item {
-    color: mat-color($foreground, text) !important;
+    color: mat.get-color-from-palette($foreground, text) !important;
 
     &:hover {
       background-color: if($is-dark-theme, $sec-dark, rgb(84 105 212 / 6%));
@@ -48,7 +48,7 @@
     background-color: $primary-dark;
     border-radius: .5rem;
 
-    @include mat-elevation(5);
+    @include mat.elevation(5);
 
     .active {
       color: $primary-color !important;

console/src/styles/table.scss

@@ -1,14 +1,14 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @mixin table-theme($theme) {
   /* stylelint-disable */
   $primary: map-get($theme, primary);
   $warn: map-get($theme, warn);
-  $warn-color: mat-color($warn, 500);
+  $warn-color: mat.get-color-from-palette($warn, 500);
-  $primary-color: mat-color($primary, 500);
+  $primary-color: mat.get-color-from-palette($primary, 500);
-  $primary-dark: mat-color($primary, A900);
+  $primary-dark: mat.get-color-from-palette($primary, A900);
-  $secondary-dark: mat-color($primary, A800);
+  $secondary-dark: mat.get-color-from-palette($primary, A800);
-  $inv-color: mat-color($primary, A600);
+  $inv-color: mat.get-color-from-palette($primary, A600);
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
@@ -22,7 +22,7 @@
   .app-label {
     font-size: 12px;
     border-radius: 1rem;
-    color: mat-color($foreground, text);
+    color: mat.get-color-from-palette($foreground, text);
     white-space: nowrap;
     background-color: var(--grey);
     padding: 3px 1rem;

console/src/test.ts

@@ -1,6 +1,6 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';