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

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 @@
-
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 .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 @@
-
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 .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 @@
-
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @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-dark: mat-color($primary, A800);
-  $border-color: mat-color($primary, A700);
-  $border-selected-color: mat-color($primary, A600);
+  $primary-color: mat.get-color-from-palette($primary, 500);
+  $primary-dark: mat.get-color-from-palette($primary, A800);
+  $border-color: mat.get-color-from-palette($primary, A700);
+  $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-dark: mat-color($primary, A800);
+  $primary-color: mat.get-color-from-palette($primary, 500);
+  $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 @@
-
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @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',
-    WARN = 'WARN',
+  INFO = 'INFO',
+  SUCCESS = 'SUCCESS',
+  WARN = 'WARN',
 }
 
 @Component({
-    selector: 'cnsl-info-section',
-    templateUrl: './info-section.component.html',
-    styleUrls: ['./info-section.component.scss'],
+  selector: 'cnsl-info-section',
+  templateUrl: './info-section.component.html',
+  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 @@
-
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 @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">
-            <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>
+        <cnsl-zitadel-tier [features]="features" [iam]="true"></cnsl-zitadel-tier>
 
         <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],
-    imports: [
-        CommonModule,
-        IamRoutingModule,
-        ChangesModule,
-        CardModule,
-        MatAutocompleteModule,
-        MatChipsModule,
-        MatButtonModule,
-        HasRoleModule,
-        MatCheckboxModule,
-        MetaLayoutModule,
-        MatIconModule,
-        MatTableModule,
-        MatPaginatorModule,
-        InputModule,
-        MatSortModule,
-        MatTooltipModule,
-        ReactiveFormsModule,
-        MatProgressSpinnerModule,
-        FormsModule,
-        TranslateModule,
-        MatDialogModule,
-        ContributorsModule,
-        LocalizedDatePipeModule,
-        TimestampToDatePipeModule,
-        SharedModule,
-        RefreshTableModule,
-        HasRolePipeModule,
-        MatSortModule,
-        PolicyGridModule,
-    ],
+  declarations: [IamComponent, EventstoreComponent, IamViewsComponent, FailedEventsComponent],
+  imports: [
+    CommonModule,
+    IamRoutingModule,
+    ChangesModule,
+    CardModule,
+    MatAutocompleteModule,
+    MatChipsModule,
+    MatButtonModule,
+    HasRoleModule,
+    MatCheckboxModule,
+    MetaLayoutModule,
+    MatIconModule,
+    MatTableModule,
+    ZitadelTierModule,
+    MatPaginatorModule,
+    InputModule,
+    MatSortModule,
+    MatTooltipModule,
+    ReactiveFormsModule,
+    MatProgressSpinnerModule,
+    FormsModule,
+    TranslateModule,
+    MatDialogModule,
+    ContributorsModule,
+    LocalizedDatePipeModule,
+    TimestampToDatePipeModule,
+    SharedModule,
+    RefreshTableModule,
+    HasRolePipeModule,
+    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">
-                <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>
+            <cnsl-zitadel-tier [features]="features"></cnsl-zitadel-tier>
         </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 {