fix(console): hide granted project navigation if none, cache zitadel permissions, emit refresh on org change, cleanup contributors, styling (#511)

* fix iam member model

* fix org member model

* fix auth user loading

* copytoclipboard directive

* directive logs, load bar on init, create user

* typo

* welcome section, contributor spinner

* fix home link

* fix stepper flow

* show dialog on invalid token

* fix app table refresh, pin icons light theme

* cleanup contributor

* inherit parent color, animations

* use localized date pipe everywhere

* cmp styles refactor, dont show granted p if none

* fix navitem desc, fixed header

* change permissions, caching

* roles on org emit, use prom instead of hot obs

* dont calc 100vh

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

@@ -1,7 +1,8 @@
 <span class="header">{{ 'CHANGES.LISTTITLE' | translate }}</span>
 
-<div class="scroll-container" appScrollable (scrollPosition)="scrollHandler($event)">
-    <li class="item change-item-back" *ngFor="let event of data | async">
+<div class="scroll-container" appScrollable (scrollPosition)="scrollHandler($event)"
+    [@cardAnimation]="data && (data | async)?.length">
+    <li class="item change-item-back" *ngFor="let event of data | async" @animate>
         <span class="seq">
             {{event.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
         </span>

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

@@ -1,3 +1,6 @@
+@import '~@angular/material/theming';
+
+
 .header {
     display: block;
     margin-bottom: 1rem;
@@ -5,42 +8,53 @@
     margin-top: 1rem;
 }
 
-.scroll-container {
-    max-height: 60vh;
-    overflow-y: scroll;
+@mixin changes-theme($theme) {
 
-    .item {
-        box-sizing: border-box;
-        padding: .5rem;
-        margin: .25rem 0;
-        border-radius: .5rem;
-        display: flex;
-        flex-direction: column;
-        .editor {
-            color: #8795a1;
+    .scroll-container {
+        max-height: 60vh;
+        overflow-y: scroll;
+
+        .item {
+            box-sizing: border-box;
+            padding: .5rem;
+            margin: .25rem 0;
+            border-radius: .5rem;
+            display: flex;
+            flex-direction: column;
+            .editor {
+                color: #8795a1;
+                font-size: 12px;
+                align-self: flex-end;
+            }
+            .seq {
+                color: #8795a1;
+                font-size: 12px;
+                align-self: flex-end;
+            }
+
+            .desc {
+                overflow-x: auto;
+                font-size: 14px;
+            }
+
+            $primary: map-get($theme, primary);
+            $primary-dark: mat-color($primary, A800);
+            
+            &.change-item-back {
+                background-color: rgba($primary-dark, 0.93);
+                transition: background-color .4s ease-in-out;
+            }
+        }
+
+        .sp-wrapper {
+            padding: .5rem;
+            display: flex;
+            justify-content: center;
+        }
+
+        .end-container {
             font-size: 12px;
-            align-self: flex-end;
-        }
-        .seq {
             color: #8795a1;
-            font-size: 12px;
-            align-self: flex-end;
-        }
-
-        .desc {
-            overflow-x: auto;
-            font-size: 14px;
         }
     }
-
-    .sp-wrapper {
-        padding: .5rem;
-        display: flex;
-        justify-content: center;
-    }
-
-    .end-container {
-        font-size: 12px;
-        color: #8795a1;
-    }
-}
+}

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

@@ -1,3 +1,4 @@
+import { animate, animateChild, keyframes, query, stagger, style, transition, trigger } from '@angular/animations';
 import { Component, Input, OnInit } from '@angular/core';
 import { BehaviorSubject, from, Observable, of } from 'rxjs';
 import { catchError, scan, take, tap } from 'rxjs/operators';
@@ -16,6 +17,22 @@ export enum ChangeType {
     selector: 'app-changes',
     templateUrl: './changes.component.html',
     styleUrls: ['./changes.component.scss'],
+    animations: [
+        trigger('cardAnimation', [
+            transition('* => *', [
+                query('@animate', stagger('50ms', animateChild()), { optional: true }),
+            ]),
+        ]),
+        trigger('animate', [
+            transition(':enter', [
+                animate('.2s ease-in', keyframes([
+                    style({ opacity: 0 }),
+                    style({ opacity: .5, transform: 'scale(1.02)' }),
+                    style({ opacity: 1, transform: 'scale(1)' }),
+                ])),
+            ]),
+        ]),
+    ],
 })
 export class ChangesComponent implements OnInit {
     @Input() public changeType: ChangeType = ChangeType.USER;