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/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>