feat(console): organization overview table, table, org context filtering, fix grpc error log, cleanup pipes (#796)

* chore(deps-dev): bump @angular/cli from 10.0.8 to 10.1.3 in /console (#785)

Bumps [@angular/cli](https://github.com/angular/angular-cli) from 10.0.8 to 10.1.3.
- [Release notes](https://github.com/angular/angular-cli/releases)
- [Commits](https://github.com/angular/angular-cli/compare/v10.0.8...v10.1.3)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @angular-devkit/build-angular in /console (#784)

Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1000.8 to 0.1001.3.
- [Release notes](https://github.com/angular/angular-cli/releases)
- [Commits](https://github.com/angular/angular-cli/commits)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Max Peintner <max@caos.ch>

* chore(deps-dev): bump @angular/language-service in /console (#783)

Bumps [@angular/language-service](https://github.com/angular/angular/tree/HEAD/packages/language-service) from 10.1.0 to 10.1.3.
- [Release notes](https://github.com/angular/angular/releases)
- [Changelog](https://github.com/angular/angular/blob/master/CHANGELOG.md)
- [Commits](https://github.com/angular/angular/commits/10.1.3/packages/language-service)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump stylelint from 13.7.1 to 13.7.2 in /console (#782)

Bumps [stylelint](https://github.com/stylelint/stylelint) from 13.7.1 to 13.7.2.
- [Release notes](https://github.com/stylelint/stylelint/releases)
- [Changelog](https://github.com/stylelint/stylelint/blob/master/CHANGELOG.md)
- [Commits](https://github.com/stylelint/stylelint/compare/13.7.1...13.7.2)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump karma from 5.2.1 to 5.2.3 in /console (#781)

Bumps [karma](https://github.com/karma-runner/karma) from 5.2.1 to 5.2.3.
- [Release notes](https://github.com/karma-runner/karma/releases)
- [Changelog](https://github.com/karma-runner/karma/blob/master/CHANGELOG.md)
- [Commits](https://github.com/karma-runner/karma/compare/v5.2.1...v5.2.3)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump moment from 2.27.0 to 2.29.0 in /console (#780)

Bumps [moment](https://github.com/moment/moment) from 2.27.0 to 2.29.0.
- [Release notes](https://github.com/moment/moment/releases)
- [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md)
- [Commits](https://github.com/moment/moment/compare/2.27.0...2.29.0)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @types/node from 14.6.4 to 14.11.2 in /console (#778)

Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 14.6.4 to 14.11.2.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump prettier from 2.1.1 to 2.1.2 in /console (#757)

Bumps [prettier](https://github.com/prettier/prettier) from 2.1.1 to 2.1.2.
- [Release notes](https://github.com/prettier/prettier/releases)
- [Changelog](https://github.com/prettier/prettier/blob/master/CHANGELOG.md)
- [Commits](https://github.com/prettier/prettier/compare/2.1.1...2.1.2)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump ts-protoc-gen from 0.12.0 to 0.13.0 in /console (#737)

Bumps [ts-protoc-gen](https://github.com/improbable-eng/ts-protoc-gen) from 0.12.0 to 0.13.0.
- [Release notes](https://github.com/improbable-eng/ts-protoc-gen/releases)
- [Changelog](https://github.com/improbable-eng/ts-protoc-gen/blob/master/CHANGELOG.md)
- [Commits](https://github.com/improbable-eng/ts-protoc-gen/compare/0.12.0...0.13.0)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump jasmine-spec-reporter in /console (#762)

Bumps [jasmine-spec-reporter](https://github.com/bcaudan/jasmine-spec-reporter) from 5.0.2 to 6.0.0.
- [Release notes](https://github.com/bcaudan/jasmine-spec-reporter/releases)
- [Changelog](https://github.com/bcaudan/jasmine-spec-reporter/blob/master/CHANGELOG.md)
- [Commits](https://github.com/bcaudan/jasmine-spec-reporter/compare/v5.0.2...v6.0.0)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Max Peintner <max@caos.ch>

* fix: package

* change html lang to translation lang

* disable detail view org idp

* catch errorcode 16 in auth response interceptor

* new icons

* refactor pipes, idp table config

* fix router guard

* lint

* allowed commonjs deps

* Update console/src/assets/i18n/en.json

Co-authored-by: Florian Forster <florian@caos.ch>

* Update console/src/assets/i18n/de.json

Co-authored-by: Florian Forster <florian@caos.ch>

* clear table warning

* org overview table, header filter

* toolbar filter

* user table filter

* fix org filter themed color, reject error

* org context filter

* button cleanup

* commonjs deps, remove a11y module

* replace progressbar with spinner

* dynamic user, org filter

* ts lint, scss lint

* cleanup table, row highlighting

* lint

* fix i18n description, refresh idp list in login p

* remove async from grpc services, fix external idp

* remove external idp

* fix theme toggle

* change iam policy header i18n

* sticky action columns

* lint

* add i18n filter to user, remove unused org code

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>

console/angular.json

@@ -34,9 +34,7 @@
             "scripts": [],
             "allowedCommonJsDependencies": [
                 "@angular/common/locales/de",
-                "src/app/proto/generated/*.js",
+                "src/app/proto/generated/**",
-                "src/app/proto/generated/**/*.js",
-                "src/app/proto/generated/auth_pb",
                 "file-saver",
                 "qrcode"
              ]

console/src/app/animations.ts

@@ -77,6 +77,38 @@ export const navAnimations: Array<AnimationTriggerMetadata> = [
     ]),
 ];
 
+
+export const enterAnimations: Array<AnimationTriggerMetadata> = [
+    trigger('appearfade', [
+        transition(':enter', [
+            style({
+                transform: 'scale(.9) translateY(-10%)',
+                opacity: 0,
+            }),
+            animate(
+                '100ms ease-in-out',
+                style({
+                    transform: 'scale(1) translateY(0%)',
+                    opacity: 1,
+                }),
+            ),
+        ]),
+        transition(':leave', [
+            style({
+                transform: 'scale(1) translateY(0%)',
+                opacity: 1,
+            }),
+            animate(
+                '100ms ease-in-out',
+                style({
+                    transform: 'scale(.9) translateY(-10%)',
+                    opacity: 0,
+                }),
+            ),
+        ]),
+    ]),
+];
+
 export const routeAnimations: AnimationTriggerMetadata = trigger('routeAnimations', [
     transition('HomePage => AddPage', [
         style({ transform: 'translateX(100%)', opacity: 0.5 }),

console/src/app/app.component.html

@@ -12,22 +12,31 @@
                 </ng-template>
             </a>
 
-            <button (click)="loadOrgs()" *ngIf="profile?.id && org" mat-button
+            <button (click)="loadOrgs()" *ngIf="profile?.id && org" mat-button [matMenuTriggerFor]="menu"
-                [matMenuTriggerFor]="menu">{{org?.name ? org.name : 'NO NAME'}}
+                (menuOpened)="focusFilter()">{{org?.name ? org.name : 'NO NAME'}}
                 <mat-icon>
                     arrow_drop_down</mat-icon>
             </button>
 
-            <mat-menu #menu="matMenu">
+            <mat-menu class="menu" #menu="matMenu">
-                <mat-progress-bar *ngIf="orgLoading" color="accent" mode="indeterminate"></mat-progress-bar>
+                <div class="spinner-w">
-                <button class="show-all" mat-menu-item
+                    <mat-spinner diameter="20" *ngIf="orgLoading" color="accent">
-                    [routerLink]="[ '/org/overview' ]">{{'MENU.SHOWORGS' | translate}}</button>
+                    </mat-spinner>
+                </div>
+
+                <mat-form-field class="filter-form" appearance="fill">
+                    <input autocomplete="off" matInput (click)="$event.stopPropagation()" (keyup)="applyFilter($event)"
+                        placeholder="{{'ORG.PAGES.FILTERPLACEHOLDER' | translate}}" #input>
+                </mat-form-field>
 
                 <button [ngClass]="{'active': temporg.id === org?.id}" [disabled]="!temporg.id"
                     *ngFor="let temporg of orgs" mat-menu-item (click)="setActiveOrg(temporg)">
                     {{temporg?.name ? temporg.name : 'NO NAME'}}
                 </button>
 
+                <button class="show-all" mat-menu-item
+                    [routerLink]="[ '/org/overview' ]">{{'MENU.SHOWORGS' | translate}}</button>
+
                 <ng-template appHasRole [appHasRole]="['org.create','iam.write']">
                     <button mat-menu-item [routerLink]="[ '/org/create' ]">
                         <mat-icon class="avatar">add</mat-icon>

console/src/app/app.component.scss

@@ -1,3 +1,4 @@
+@import '~@angular/material/theming';
 
 .root-header {
   position: fixed;
@@ -159,13 +160,6 @@
         margin-bottom: 1rem;
       }
     }
-
-    .primary-button {
-      margin: 1rem;
-      border-radius: 1.5rem;
-      height: 2.5rem;
-      padding: 0 1rem;
-    }
   }
 
   .content {
@@ -229,3 +223,35 @@
     flex: 1;
   }
 }
+
+@mixin textvar($theme) {
+  .filter-form {
+    margin: 0 .5rem;
+    /* stylelint-disable */
+
+    $foreground: map-get($theme, foreground);
+    color: mat-color($foreground, text) !important;
+  }
+
+  .show-all {
+    $primary: map-get($theme, primary);
+    color: mat-color($primary, 300) !important;
+    border-bottom: 2px solid #8795a1;
+    margin-bottom: .5rem;
+  }
+  /* stylelint-enable */
+}
+
+.menu {
+  position: relative;
+
+  .spinner-w {
+    top: 1rem;
+    left: 0;
+    right: 0;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}

console/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { DOCUMENT, ViewportScroller } from '@angular/common';
-import { Component, HostBinding, Inject, OnDestroy, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostBinding, Inject, OnDestroy, ViewChild } from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
 import { MatDrawer } from '@angular/material/sidenav';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -11,7 +11,13 @@ import { Observable, of, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { accountCard, navAnimations, routeAnimations, toolbarAnimation } from './animations';
-import { Org, UserProfileView } from './proto/generated/auth_pb';
+import {
+    MyProjectOrgSearchKey,
+    MyProjectOrgSearchQuery,
+    Org,
+    SearchMethod,
+    UserProfileView,
+} from './proto/generated/auth_pb';
 import { AuthenticationService } from './services/authentication.service';
 import { GrpcAuthService } from './services/grpc-auth.service';
 import { ManagementService } from './services/mgmt.service';
@@ -32,6 +38,7 @@ import { UpdateService } from './services/update.service';
 })
 export class AppComponent implements OnDestroy {
     @ViewChild('drawer') public drawer!: MatDrawer;
+    @ViewChild('input', { static: false }) input!: ElementRef;
     public isHandset$: Observable<boolean> = this.breakpointObserver
         .observe('(max-width: 599px)')
         .pipe(map(result => {
@@ -172,9 +179,17 @@ export class AppComponent implements OnDestroy {
         this.orgSub.unsubscribe();
     }
 
-    public loadOrgs(): void {
+    public loadOrgs(filter?: string): void {
+        let query;
+        if (filter) {
+            query = new MyProjectOrgSearchQuery();
+            query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
+            query.setKey(MyProjectOrgSearchKey.MYPROJECTORGSEARCHKEY_ORG_NAME);
+            query.setValue(filter);
+        }
+
         this.orgLoading = true;
-        this.authService.SearchMyProjectOrgs(10, 0).then(res => {
+        this.authService.SearchMyProjectOrgs(10, 0, query ? [query] : undefined).then(res => {
             this.orgs = res.toObject().resultList;
             this.orgLoading = false;
         }).catch(error => {
@@ -207,7 +222,6 @@ export class AppComponent implements OnDestroy {
             this.profile = userprofile;
             const lang = userprofile.preferredLanguage.match(/en|de/) ? userprofile.preferredLanguage : 'en';
             this.translate.use(lang);
-            console.log(this.document.documentElement.lang);
             this.document.documentElement.lang = lang;
         });
     }
@@ -231,5 +245,18 @@ export class AppComponent implements OnDestroy {
             }
         });
     }
+
+    public applyFilter(event: Event): void {
+        const filterValue = (event.target as HTMLInputElement).value;
+        this.loadOrgs(
+            filterValue.trim().toLowerCase(),
+        );
+    }
+
+    focusFilter(): void {
+        setTimeout(() => {
+            this.input.nativeElement.focus();
+        }, 0);
+    }
 }
 

console/src/app/app.module.ts

@@ -7,9 +7,12 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -104,8 +107,11 @@ const authConfig: AuthConfig = {
         MatSidenavModule,
         MatCardModule,
         OutsideClickModule,
+        MatFormFieldModule,
+        MatInputModule,
         HasRolePipeModule,
         MatProgressBarModule,
+        MatProgressSpinnerModule,
         MatToolbarModule,
         MatMenuModule,
         MatSnackBarModule,

console/src/app/modules/add-member-dialog/member-create-dialog.component.scss

@@ -18,8 +18,4 @@
   .ok-button {
     margin-left: .5rem;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }

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

@@ -103,11 +103,9 @@ export class ChangesComponent implements OnInit {
             this._loading.next(true);
 
             return from(col).pipe(
+                take(1),
                 tap((res: Changes) => {
-                    let values = res.toObject().changesList;
+                    const values = res.toObject().changesList;
-                    // If prepending, reverse the batch order
-                    values = false ? values.reverse() : values;
-
                     // update source with new values, done loading
                     this._data.next(values);
 
@@ -118,12 +116,11 @@ export class ChangesComponent implements OnInit {
                         this._done.next(true);
                     }
                 }),
-                catchError(err => {
+                catchError(_ => {
                     this._loading.next(false);
                     this.bottom = true;
                     return of([]);
                 }),
-                take(1),
             ).subscribe();
         }
     }

console/src/app/modules/idp-create/idp-create.component.scss

@@ -25,7 +25,6 @@
 
   .add-line-btn {
     margin-bottom: 1rem;
-    border-radius: .5rem;
   }
 }
 
@@ -55,7 +54,6 @@
   margin-top: 3rem;
   display: block;
   padding: .5rem 4rem;
-  border-radius: .5rem;
 
   @media only screen and (max-width: 450px) {
     margin-top: 1rem;

console/src/app/modules/idp-table/idp-table.component.html

@@ -16,7 +16,7 @@
             *ngIf="selection.hasValue() && serviceType!=PolicyComponentServiceType.MGMT" [disabled]="disabled">
             <i class="las la-trash"></i>
         </button>
-        <a class="add-button" [routerLink]="createRouterLink" color="primary" mat-raised-button [disabled]="disabled"
+        <a [routerLink]="createRouterLink" color="primary" mat-raised-button [disabled]="disabled"
             *ngIf="serviceType!=PolicyComponentServiceType.MGMT">
             <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
         </a>
@@ -85,14 +85,14 @@
 
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row"
+            <tr class="highlight"
                 [ngClass]="{'disabled': serviceType==PolicyComponentServiceType.MGMT && row?.providerType == IdpProviderType.IDPPROVIDERTYPE_SYSTEM}"
                 mat-row *matRowDef="let row; columns: displayedColumns;"
                 [routerLink]="serviceType==PolicyComponentServiceType.ADMIN ? routerLinkForRow(row): null">
             </tr>
 
         </table>
-        <mat-paginator #paginator class="paginator" [length]="idpResult?.totalResult || 0" [pageSize]="10"
-            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
     </div>
+    <mat-paginator #paginator class="paginator" [length]="idpResult?.totalResult || 0" [pageSize]="10"
+        [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
 </app-refresh-table>

console/src/app/modules/idp-table/idp-table.component.scss

@@ -19,14 +19,6 @@
         padding-right: 0;
       }
     }
-
-    .data-row {
-      cursor: pointer;
-
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
   }
 }
 
@@ -38,10 +30,6 @@ tr {
   }
 }
 
-.add-button {
-  border-radius: .5rem;
-}
-
 .avatar {
   height: 30px;
   width: 30px;

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

@@ -33,7 +33,6 @@
   margin-bottom: 4rem;
   display: block;
   padding: .5rem 4rem;
-  border-radius: .5rem;
 
   @media only screen and (max-width: 450px) {
     margin-top: 1rem;

console/src/app/modules/policies/login-policy/add-idp-dialog/add-idp-dialog.component.scss

@@ -18,8 +18,4 @@
   .ok-button {
     margin-left: .5rem;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }

console/src/app/modules/policies/login-policy/login-policy.component.html

@@ -1,5 +1,5 @@
 <app-detail-layout [backRouterLink]="backroutes" [title]="'ORG.POLICY.LOGIN_POLICY.TITLECREATE' | translate"
-    [description]="serviceType==PolicyComponentServiceType.MGMT ? 'ORG.POLICY.LOGIN_POLICY.DESCRIPTIONCREATEMGMT' : PolicyComponentServiceType.ADMIN ? 'ORG.POLICY.LOGIN_POLICY.DESCRIPTIONCREATEADMIN' : '' | translate">
+    [description]="(serviceType==PolicyComponentServiceType.MGMT ? 'ORG.POLICY.LOGIN_POLICY.DESCRIPTIONCREATEMGMT' : PolicyComponentServiceType.ADMIN ? 'ORG.POLICY.LOGIN_POLICY.DESCRIPTIONCREATEADMIN' : '') | translate">
     <ng-container *ngIf="(['policy.delete'] | hasRole | async) && serviceType == PolicyComponentServiceType.MGMT">
         <!--<button matTooltip="{{'ORG.POLICY.DELETE' | translate}}" color="warn" (click)="deletePolicy()"
             mat-stroked-button>

console/src/app/modules/policies/login-policy/login-policy.component.scss

@@ -1,8 +1,3 @@
-
-button {
-  border-radius: .5rem;
-}
-
 .content {
   padding-top: 1rem;
   display: flex;
@@ -39,7 +34,6 @@ button {
     margin-top: 3rem;
     display: block;
     padding: .5rem 4rem;
-    border-radius: .5rem;
   }
 }
 

console/src/app/modules/policies/login-policy/login-policy.component.ts

@@ -11,11 +11,11 @@ import {
     IdpView as AdminIdpView,
 } from 'src/app/proto/generated/admin_pb';
 import {
-  IdpProviderType,
+    IdpProviderType,
-  IdpProviderView as MgmtIdpProviderView,
+    IdpProviderView as MgmtIdpProviderView,
-  IdpView as MgmtIdpView,
+    IdpView as MgmtIdpView,
-  LoginPolicy,
+    LoginPolicy,
-  LoginPolicyView, OrgDomainView,
+    LoginPolicyView,
 } from 'src/app/proto/generated/management_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
@@ -151,7 +151,9 @@ export class LoginPolicyComponent implements OnDestroy {
 
         dialogRef.afterClosed().subscribe(resp => {
             if (resp && resp.idp && resp.type) {
-                this.addIdp(resp.idp, resp.type);
+                this.addIdp(resp.idp, resp.type).then(() => {
+                    this.getData();
+                });
             }
         });
     }
@@ -177,15 +179,15 @@ export class LoginPolicyComponent implements OnDestroy {
         }
     }
 
-  public get backroutes(): string[] {
+    public get backroutes(): string[] {
-    switch (this.serviceType) {
+        switch (this.serviceType) {
-      case PolicyComponentServiceType.MGMT:
+            case PolicyComponentServiceType.MGMT:
-        return  ['/org'];
+                return ['/org'];
-      case PolicyComponentServiceType.ADMIN:
+            case PolicyComponentServiceType.ADMIN:
-        return  ['/iam'];
+                return ['/iam'];
-        break;
+                break;
+        }
+        return [];
     }
-    return [];
-  }
 
 }

console/src/app/modules/policies/password-age-policy/password-age-policy.component.scss

@@ -1,8 +1,3 @@
-
-button {
-  border-radius: .5rem;
-}
-
 .content {
   padding-top: 1rem;
   display: flex;
@@ -39,6 +34,5 @@ button {
     margin-top: 3rem;
     display: block;
     padding: .5rem 4rem;
-    border-radius: .5rem;
   }
 }

console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.scss

@@ -1,8 +1,3 @@
-
-button {
-  border-radius: .5rem;
-}
-
 .content {
   padding-top: 1rem;
   display: flex;
@@ -39,6 +34,5 @@ button {
     margin-top: 3rem;
     display: block;
     padding: .5rem 4rem;
-    border-radius: .5rem;
   }
 }

console/src/app/modules/policies/password-iam-policy/password-iam-policy.component.scss

@@ -1,8 +1,3 @@
-
-button {
-  border-radius: .5rem;
-}
-
 .content {
   padding-top: 1rem;
   display: flex;
@@ -39,6 +34,5 @@ button {
     margin-top: 3rem;
     display: block;
     padding: .5rem 4rem;
-    border-radius: .5rem;
   }
 }

console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.component.scss

@@ -1,8 +1,4 @@
 
-button {
-  border-radius: .5rem;
-}
-
 .content {
   padding-top: 1rem;
   display: flex;
@@ -39,6 +35,5 @@ button {
     margin-top: 3rem;
     display: block;
     padding: .5rem 4rem;
-    border-radius: .5rem;
   }
 }

console/src/app/modules/project-members/project-members.component.html

@@ -13,8 +13,7 @@
         </ng-template>
         <ng-template appHasRole actions
             [appHasRole]="['project.member.write:'+project.projectId,'project.member.write']">
-            <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
+            <a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
-                mat-raised-button>
                 <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
             </a>
         </ng-template>
@@ -84,7 +83,7 @@
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+                <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
                 </tr>
             </table>
 

console/src/app/modules/project-members/project-members.component.scss

@@ -2,10 +2,6 @@
   margin-right: .5rem;
 }
 
-.add-button {
-  border-radius: .5rem;
-}
-
 .table-wrapper {
   overflow-x: auto;
 
@@ -31,12 +27,6 @@
       width: 40px;
     }
 
-    .data-row {
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
-
     .selection {
       width: 50px;
       max-width: 50px;

console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.scss

@@ -19,8 +19,4 @@
   .ok-button {
     margin-left: .5rem;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }

console/src/app/modules/project-roles/project-roles.component.html

@@ -9,8 +9,8 @@
         </button>
     </ng-template>
     <ng-template appHasRole [appHasRole]="['project.role.write:' + projectId, 'project.role.write']" actions>
-        <a *ngIf="actionsVisible" [disabled]="disabled" class="rounded-button"
+        <a *ngIf="actionsVisible" [disabled]="disabled" [routerLink]="[ '/projects', projectId, 'roles', 'create']"
-            [routerLink]="[ '/projects', projectId, 'roles', 'create']" color="primary" mat-raised-button>
+            color="primary" mat-raised-button>
             <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
         </a>
     </ng-template>
@@ -57,7 +57,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
 
         <mat-paginator #paginator [length]="dataSource.totalResult" [pageSize]="50"

console/src/app/modules/project-roles/project-roles.component.scss

@@ -1,8 +1,3 @@
-
-.rounded-button {
-  border-radius: .5rem;
-}
-
 .icon-button {
   margin-right: .5rem;
 }
@@ -31,12 +26,6 @@
       width: 40px;
     }
 
-    .data-row {
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
-
     .selection {
       width: 50px;
       max-width: 50px;

console/src/app/modules/refresh-table/refresh-table.component.html

@@ -13,9 +13,12 @@
     </div>
     <span class="fill-space"></span>
     <mat-spinner class="spinner" *ngIf="loading" diameter="20"></mat-spinner>
+    <ng-content select="[actions]"></ng-content>
+
     <button mat-icon-button (click)="emitRefresh()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
         <mat-icon>refresh</mat-icon>
     </button>
-    <ng-content select="[actions]"></ng-content>
 </div>
-<ng-content></ng-content>
+<div class="table-wrapper">
+    <ng-content></ng-content>
+</div>

console/src/app/modules/refresh-table/refresh-table.component.scss

@@ -30,3 +30,8 @@
     margin-right: .5rem;
   }
 }
+
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}

console/src/app/modules/user-grants/user-grants.component.html

@@ -6,7 +6,7 @@
         <i class="las la-trash"></i>
     </button>
     <a *ngIf="allowCreate && context !== UserGrantContext.USER" matTooltip="{{'GRANTS.ADD' | translate}}" actions
-        color="primary" class="add-button" color="primary" mat-raised-button [routerLink]="routerLink">
+        color="primary" color="primary" mat-raised-button [routerLink]="routerLink">
         <mat-icon class="icon">add</mat-icon>{{ 'GRANTS.ADD_BTN' | translate }}
     </a>
 
@@ -106,7 +106,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="element-row">
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
             </tr>
         </table>
 

console/src/app/modules/user-grants/user-grants.component.scss

@@ -1,8 +1,3 @@
-
-.add-button {
-  border-radius: .5rem;
-}
-
 .table-wrapper {
   overflow: auto;
 

console/src/app/modules/warn-dialog/warn-dialog.component.scss

@@ -18,8 +18,4 @@
   .fill-space {
     flex: 1;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }

console/src/app/pages/iam/failed-events/failed-events.component.html

@@ -34,9 +34,9 @@
                 </td>
             </ng-container>
 
-            <ng-container matColumnDef="actions">
+            <ng-container matColumnDef="actions" stickyEnd>
-                <th mat-header-cell *matHeaderCellDef> {{ 'IAM.FAILEDEVENTS.ACTIONS' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef></th>
-                <td mat-cell *matCellDef="let event">
+                <td class="back" mat-cell *matCellDef="let event">
                     <button color="warn" mat-icon-button matTooltip="{{'IAM.FAILEDEVENTS.DELETE' | translate}}"
                         (click)="cancelEvent(event.viewName, event.database, event.failedSequence)">
                         <i class="las la-minus-circle"></i>
@@ -45,7 +45,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="eventDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: eventDisplayedColumns;"></tr>
+            <tr class="highlight" mat-row *matRowDef="let row; columns: eventDisplayedColumns;"></tr>
         </table>
         <mat-paginator class="paginator" [pageSize]="10" #paginator [pageSizeOptions]="[10, 20, 100, 250]">
         </mat-paginator>

console/src/app/pages/iam/failed-events/failed-events.component.scss

@@ -27,6 +27,18 @@
   }
 }
 
+tr {
+  button {
+    visibility: hidden;
+  }
+
+  &:hover {
+    button {
+      visibility: visible;
+    }
+  }
+}
+
 .pointer {
   outline: none;
   cursor: pointer;

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

@@ -12,8 +12,7 @@
             </button>
         </ng-template>
         <ng-template appHasRole actions [appHasRole]="['iam.member.write']">
-            <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
+            <a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
-                mat-raised-button>
                 <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
             </a>
         </ng-template>
@@ -76,7 +75,7 @@
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+                <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
                 </tr>
             </table>
 

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

@@ -1,7 +1,3 @@
-.add-button {
-  border-radius: .5rem;
-}
-
 .table-wrapper {
   overflow: auto;
   width: 100%;
@@ -28,12 +24,6 @@
       width: 40px;
     }
 
-    .data-row {
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
-
     .selection {
       width: 50px;
       max-width: 50px;

console/src/app/pages/iam/iam-policy-grid/iam-policy-grid.component.html

@@ -1,6 +1,6 @@
-<h1>{{'ORG.POLICY.TITLE' | translate}}</h1>
+<h1>{{'IAM.POLICY.TITLE' | translate}}</h1>
 
-<p class="top-desc">{{'ORG.POLICY.DESCRIPTION' | translate}}</p>
+<p class="top-desc">{{'IAM.POLICY.DESCRIPTION' | translate}}</p>
 
 <div class="row-lyt">
     <ng-template appHasRole [appHasRole]="['policy.read']">

console/src/app/pages/iam/iam-policy-grid/iam-policy-grid.component.scss

@@ -70,7 +70,6 @@ h1 {
 
     button {
       margin-right: 1rem;
-      border-radius: .5rem;
     }
   }
 }

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

@@ -2,22 +2,20 @@
     <app-refresh-table *ngIf="dataSource" (refreshed)="loadViews()" [dataSize]="dataSource.data.length"
         [loading]="loading$ | async">
 
-        <table [dataSource]="dataSource" mat-table class="table" aria-label="Elements">
+        <table [dataSource]="dataSource" mat-table class="table" aria-label="Elements" matSort>
             <ng-container matColumnDef="viewName">
-                <th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.VIEWNAME' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'IAM.VIEWS.VIEWNAME' | translate }} </th>
                 <td mat-cell *matCellDef="let view"> {{view.viewName}} </td>
             </ng-container>
 
             <ng-container matColumnDef="database">
-                <th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.DATABASE' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'IAM.VIEWS.DATABASE' | translate }} </th>
                 <td mat-cell *matCellDef="let view"> {{view.database}} </td>
             </ng-container>
 
             <ng-container matColumnDef="sequence">
                 <th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.SEQUENCE' | translate }} </th>
-                <td mat-cell *matCellDef="let view">
+                <td mat-cell *matCellDef="let view"> {{view.processedSequence}} </td>
-                    <span>{{view?.processedSequence}}</span>
-                </td>
             </ng-container>
 
             <ng-container matColumnDef="timestamp">
@@ -27,8 +25,8 @@
                 </td>
             </ng-container>
 
-            <ng-container matColumnDef="actions">
+            <ng-container matColumnDef="actions" stickyEnd>
-                <th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.ACTIONS' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef></th>
                 <td mat-cell *matCellDef="let view">
                     <button mat-icon-button matTooltip="{{'IAM.VIEWS.CLEAR' | translate}}"
                         (click)="cancelView(view.viewName, view.database)">
@@ -38,7 +36,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
         <mat-paginator class="paginator" [pageSize]="10" #paginator [pageSizeOptions]="[10, 20, 100, 250]">
         </mat-paginator>

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

@@ -27,6 +27,18 @@
   }
 }
 
+tr {
+  button {
+    visibility: hidden;
+  }
+
+  &:hover {
+    button {
+      visibility: visible;
+    }
+  }
+}
+
 .pointer {
   outline: none;
   cursor: pointer;

console/src/app/pages/iam/iam-views/iam-views.component.ts

@@ -1,10 +1,14 @@
 import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 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 { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
 import { View } from 'src/app/proto/generated/admin_pb';
 import { AdminService } from 'src/app/services/admin.service';
+import { ToastService } from 'src/app/services/toast.service';
 
 @Component({
     selector: 'app-iam-views',
@@ -12,6 +16,8 @@ import { AdminService } from 'src/app/services/admin.service';
     styleUrls: ['./iam-views.component.scss'],
 })
 export class IamViewsComponent implements AfterViewInit {
+    @ViewChild(MatSort) sort!: MatSort;
+
     @ViewChild(MatPaginator) public paginator!: MatPaginator;
     public dataSource!: MatTableDataSource<View.AsObject>;
 
@@ -19,7 +25,7 @@ export class IamViewsComponent implements AfterViewInit {
 
     private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
     public loading$: Observable<boolean> = this.loadingSubject.asObservable();
-    constructor(private adminService: AdminService) {
+    constructor(private adminService: AdminService, private dialog: MatDialog, private toast: ToastService) {
         this.loadViews();
     }
 
@@ -38,10 +44,31 @@ export class IamViewsComponent implements AfterViewInit {
         ).subscribe(views => {
             this.dataSource = new MatTableDataSource(views);
             this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
         });
     }
 
     public cancelView(viewname: string, db: string): void {
-        this.adminService.ClearView(viewname, db);
+
+        const dialogRef = this.dialog.open(WarnDialogComponent, {
+            data: {
+                confirmKey: 'ACTIONS.CLEAR',
+                cancelKey: 'ACTIONS.CANCEL',
+                titleKey: 'IAM.VIEWS.DIALOG.VIEW_CLEAR_TITLE',
+                descriptionKey: 'IAM.VIEWS.DIALOG.VIEW_CLEAR_DESCRIPTION',
+            },
+            width: '400px',
+        });
+
+        dialogRef.afterClosed().subscribe(resp => {
+            if (resp) {
+                this.adminService.ClearView(viewname, db).then(() => {
+                    this.toast.showInfo('IAM.VIEWS.CLEARED', true);
+                    this.loadViews();
+                }).catch(error => {
+                    this.toast.showError(error);
+                });
+            }
+        });
     }
 }

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

@@ -63,6 +63,7 @@ import { IamComponent } from './iam.component';
         SharedModule,
         RefreshTableModule,
         HasRolePipeModule,
+        MatSortModule,
     ],
 })
 export class IamModule { }

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

@@ -85,7 +85,6 @@ h1 {
         margin-top: 3rem;
         display: block;
         padding: .5rem 4rem;
-        border-radius: .5rem;
       }
     }
 
@@ -138,7 +137,6 @@ h1 {
 
   .small-button {
     display: block;
-    border-radius: .5rem;
   }
 
   .fill-space {
@@ -148,7 +146,6 @@ h1 {
   .big-button {
     display: block;
     padding: .5rem 4rem;
-    border-radius: .5rem;
   }
 }
 

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

@@ -19,8 +19,4 @@
   .ok-button {
     margin-left: .5rem;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }

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

@@ -4,7 +4,6 @@
 
   button {
     margin: 1rem .5rem;
-    border-radius: .5rem;
     display: block;
   }
 }
@@ -34,8 +33,4 @@
   .ok-button {
     margin-left: .5rem;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }

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

@@ -21,8 +21,8 @@
                         mat-icon-button (click)="removeDomain(domain.domain)"><i class="las la-trash"></i></button>
                 </div>
                 <p class="new-desc">{{'ORG.PAGES.ORGDOMAIN_VERIFICATION' | translate}}</p>
-                <button [disabled]="(canwrite$ | async) == false" class="add-button" matTooltip="Add domain"
+                <button [disabled]="(canwrite$ | async) == false" matTooltip="Add domain" mat-raised-button
-                    mat-raised-button color="primary" (click)="addNewDomain()">{{'ORG.DOMAINS.NEW' | translate}}
+                    color="primary" (click)="addNewDomain()">{{'ORG.DOMAINS.NEW' | translate}}
                 </button>
             </app-card>
         </ng-container>
@@ -58,4 +58,4 @@
             </mat-tab>
         </mat-tab-group>
     </div>
-</app-meta-layout>
+</app-meta-layout>

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

@@ -41,7 +41,6 @@
   }
 
   .verify-btn {
-    border-radius: .5rem;
     font-size: 13px;
   }
 
@@ -50,10 +49,6 @@
   }
 }
 
-.add-button {
-  border-radius: .5rem;
-}
-
 .new-desc {
   font-size: 14px;
   color: #818a8a;

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

@@ -1,62 +0,0 @@
-<div class="max-width-container">
-    <h1>{{ 'ORG.PAGES.LIST' | translate }}</h1>
-    <p class="top-desc">{{'ORG.PAGES.LISTDESCRIPTION' | translate}}</p>
-
-    <div class="view-toggle">
-        <div class="anim-list" *ngIf="selection.selected.length > 0">
-        </div>
-        <button disabled mat-icon-button>
-            <mat-icon></mat-icon>
-        </button>
-    </div>
-
-    <div class="container">
-        <p class="n-items" *ngIf="!loading && selection.selected.length > 0">{{'PROJECT.PAGES.PINNED' | translate}}</p>
-
-        <div matTooltip="{{'ORG.PAGES.SELECTORGTOOLTIP' | translate}}" class="item card"
-            *ngFor="let org of selection.selected; index as i" (click)="selectOrg(org, $event)"
-            [ngClass]="{ active: activeOrg?.id === org?.id }">
-            <div class="text-part">
-                <span class="description">{{org.id}}</span>
-
-                <span class="name" *ngIf="org.name">{{ org.name }}</span>
-                <span class="name" *ngIf="!org.name">No Name</span>
-                <span class="fill-space"></span>
-                <div class="icons">
-                </div>
-            </div>
-            <button [ngClass]="{ selected: selection.isSelected(org)}" (click)="selection.toggle(org)"
-                class="edit-button" mat-icon-button>
-                <mat-icon>push_pin_outline</mat-icon>
-            </button>
-        </div>
-    </div>
-    <div class="container">
-        <p class="n-items" *ngIf="!loading && notPinned.length > 0">{{'PROJECT.PAGES.ALL' | translate}}</p>
-
-        <div matTooltip="{{'ORG.PAGES.SELECTORGTOOLTIP' | translate}}" class="item card"
-            *ngFor="let org of notPinned; index as i" (click)="selectOrg(org, $event)"
-            [ngClass]="{ active: activeOrg?.id === org?.id }">
-            <div class="text-part">
-                <span class="description">{{org.id}}</span>
-
-                <span class="name" *ngIf="org.name">{{ org.name }}</span>
-                <span class="name" *ngIf="!org.name">No Name</span>
-                <span class="fill-space"></span>
-                <div class="icons">
-                </div>
-            </div>
-            <button [ngClass]="{ selected: selection.isSelected(org)}" (click)="selection.toggle(org)"
-                class="edit-button" mat-icon-button>
-                <mat-icon>push_pin_outline</mat-icon>
-            </button>
-        </div>
-
-        <ng-template appHasRole [appHasRole]="['iam.write']">
-            <div class="card add-org-button" [routerLink]="[ '/org/create' ]">
-                <mat-icon class="icon">add</mat-icon>
-                <span>Add new organization</span>
-            </div>
-        </ng-template>
-    </div>
-</div>

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

@@ -1,251 +0,0 @@
-h1 {
-  margin-top: 0;
-}
-
-.top-desc {
-  color: #8795a1;
-}
-
-.view-toggle {
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-  padding-bottom: .5rem;
-  border-bottom: 1px solid #2d2e30;
-
-  .anim-list {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  button {
-    &.left-button {
-      margin-right: 1rem;
-    }
-  }
-}
-
-.container {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 -1rem;
-  box-sizing: border-box;
-
-  .item {
-    position: relative;
-    z-index: 100;
-    margin: 1rem;
-    flex-basis: 230px;
-    display: flex;
-    text-decoration: none;
-    overflow: hidden;
-    cursor: pointer;
-    padding-top: 0;
-    padding-right: 0;
-    padding-bottom: 0;
-    padding-left: 1rem;
-    border-radius: .5rem;
-    box-sizing: border-box;
-    min-height: 130px;
-
-    * {
-      box-sizing: border-box;
-    }
-
-    &.active {
-      border: 2px solid #38649d;
-    }
-
-    .selection-icon {
-      opacity: 0;
-      position: absolute;
-      top: -12px;
-      left: -12px;
-    }
-
-    img {
-      height: 50px;
-      width: 50px;
-      margin: 1rem;
-    }
-
-    .text-part {
-      position: relative;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      // justify-content: center;
-      min-height: 70px;
-      padding: .5rem 0;
-
-      .top {
-        font-size: .8rem;
-        margin-bottom: 0;
-        margin-top: .5rem;
-      }
-
-      .name {
-        margin-top: 1rem;
-        font-size: 1.2rem;
-        margin-bottom: .5rem;
-      }
-
-      .description {
-        font-size: .8rem;
-        margin-top: .5rem;
-      }
-
-      .created {
-        font-size: .8rem;
-      }
-
-      .organization {
-        display: flex;
-        align-items: center;
-        margin-top: 1rem;
-
-        .org_avatar {
-          height: 25px;
-          width: 25px;
-          border-radius: 50%;
-          margin: 0;
-          margin-right: 1rem;
-        }
-      }
-
-      .fill-space {
-        flex: 1;
-      }
-
-      .icons {
-        margin-top: 1rem;
-        transition: all .3s;
-        display: flex;
-        align-items: center;
-
-        .current {
-          height: 10px;
-          font-size: 14px;
-          width: 10px;
-          border-radius: 50%;
-          background-color: rgb(144, 212, 210);
-          display: flex;
-          margin: .5rem 0;
-          align-items: center;
-          box-sizing: border-box;
-
-          span {
-            margin-left: 1.5rem;
-            text-transform: uppercase;
-            color: rgb(144, 212, 210);
-          }
-        }
-
-        .icon {
-          opacity: 0;
-          margin-right: 3px;
-          font-size: 1.3rem;
-          height: 1.4rem;
-          color: #8795a1;
-        }
-      }
-    }
-
-    .edit-button {
-      opacity: 0;
-      user-select: none;
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      margin: 0;
-      margin-bottom: .25rem;
-      color: #8795a1;
-
-      &:hover {
-        opacity: 1;
-        color: white;
-      }
-
-      &.selected {
-        opacity: 1;
-      }
-    }
-
-    &:hover {
-      .edit-button {
-        opacity: 1;
-      }
-
-      .text-part {
-        .icons {
-          .icon {
-            opacity: 1;
-          }
-        }
-      }
-    }
-
-    &.selected {
-      .text-part {
-        .icons {
-          opacity: 1;
-        }
-      }
-
-      .edit-button {
-        opacity: 1;
-      }
-    }
-
-    @media only screen and (max-width: 450px) {
-      flex-basis: 100%;
-    }
-  }
-
-  .add-org-button {
-    z-index: 100;
-    flex-basis: 230px;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    min-height: 130px;
-    border-radius: .5rem;
-    margin: 1rem;
-    box-sizing: border-box;
-
-    .icon {
-      display: flex;
-      justify-content: center;
-      align-self: center;
-      margin-bottom: 1rem;
-      height: 2.5rem;
-      line-height: 2.5rem;
-      font-size: 2.5rem;
-    }
-
-    &:hover {
-      background-color: #ffffff25;
-
-      .icon,
-      span {
-        &.disabled {
-          color: gray;
-        }
-      }
-    }
-
-    @media only screen and (max-width: 450px) {
-      flex-basis: 100%;
-    }
-  }
-}
-
-.n-items {
-  padding: 0 1rem;
-  font-size: .8rem;
-  color: #8795a1;
-  flex-basis: 100%;
-}

console/src/app/pages/orgs/org-grid/org-grid.component.ts

@@ -1,112 +0,0 @@
-import { SelectionModel } from '@angular/cdk/collections';
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { Observable, of } from 'rxjs';
-import { switchMap, take } from 'rxjs/operators';
-import { Org } from 'src/app/proto/generated/auth_pb';
-import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
-import { ToastService } from 'src/app/services/toast.service';
-
-@Component({
-    selector: 'app-org-grid',
-    templateUrl: './org-grid.component.html',
-    styleUrls: ['./org-grid.component.scss'],
-})
-export class OrgGridComponent {
-    public activeOrg!: Org.AsObject;
-    public orgList: Org.AsObject[] = [];
-
-    public selection: SelectionModel<Org.AsObject> = new SelectionModel<Org.AsObject>(true, []);
-    public selectedIndex: number = -1;
-    public loading: boolean = false;
-
-    public notPinned: Array<Org.AsObject> = [];
-
-    constructor(
-        private userService: GrpcAuthService,
-        private toast: ToastService,
-        private router: Router,
-    ) {
-        this.loading = true;
-        this.getData(10, 0);
-
-        this.userService.GetActiveOrg().then(org => this.activeOrg = org);
-
-        this.selection.changed.subscribe(selection => {
-            this.setPrefixedItem('pinned-orgs', JSON.stringify(
-                this.selection.selected.map(item => item.id),
-            )).pipe(take(1)).subscribe(() => {
-                selection.added.forEach(element => {
-                    const index = this.notPinned.findIndex(item => item.id === element.id);
-                    this.notPinned.splice(index, 1);
-                });
-
-                this.notPinned.push(...selection.removed);
-            });
-        });
-    }
-
-    public reorganizeItems(): void {
-        this.getPrefixedItem('pinned-orgs').pipe(take(1)).subscribe(storageEntry => {
-            if (storageEntry) {
-                const array: string[] = JSON.parse(storageEntry);
-                const toSelect: Org.AsObject[] = this.orgList.filter((item, index) => {
-                    if (array.includes(item.id)) {
-                        // this.notPinned.splice(index, 1);
-                        return true;
-                    }
-                });
-                this.selection.select(...toSelect);
-
-                const toNotPinned: Org.AsObject[] = this.orgList.filter((item, index) => {
-                    if (!array.includes(item.id)) {
-                        return true;
-                    }
-                });
-                this.notPinned = toNotPinned;
-            }
-        });
-    }
-
-    private getPrefixedItem(key: string): Observable<string | null> {
-        return this.userService.user.pipe(
-            take(1),
-            switchMap(user => {
-                return of(localStorage.getItem(`${user.id}:${key}`));
-            }),
-        );
-    }
-
-    private setPrefixedItem(key: string, value: any): Observable<void> {
-        return this.userService.user.pipe(
-            take(1),
-            switchMap(user => {
-                return of(localStorage.setItem(`${user.id}:${key}`, value));
-            }),
-        );
-    }
-
-    private getData(limit: number, offset: number): void {
-        this.userService.SearchMyProjectOrgs(limit, offset).then(res => {
-            this.orgList = res.toObject().resultList;
-
-            this.notPinned = Object.assign([], this.orgList);
-            this.reorganizeItems();
-            this.loading = false;
-        }).catch(error => {
-            this.toast.showError(error);
-            this.loading = false;
-        });
-    }
-
-    public selectOrg(item: Org.AsObject, event?: any): void {
-        if (event && !event.target.classList.contains('mat-icon')) {
-            this.userService.setActiveOrg(item);
-            this.routeToOrg(item);
-        }
-    }
-
-    public routeToOrg(item: Org.AsObject): void {
-        this.router.navigate(['/orgs', item.id]);
-    }
-}

console/src/app/pages/orgs/org-list/org-list-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { OrgListComponent } from './org-list.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: OrgListComponent,
+    },
+
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule],
+})
+export class OrgListRoutingModule { }

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

@@ -0,0 +1,56 @@
+<div class="max-width-container">
+    <h1>{{ 'ORG.PAGES.LIST' | translate }}</h1>
+    <p class="top-desc">{{'ORG.PAGES.LISTDESCRIPTION' | translate}}</p>
+
+    <app-refresh-table *ngIf="dataSource" (refreshed)="refresh()" [dataSize]="dataSource.data.length"
+        [loading]="loading$ | async">
+
+        <mat-form-field @appearfade *ngIf="orgSearchKey != undefined" actions class="filter">
+            <mat-label>{{'ORG.PAGES.FILTER' | translate}}</mat-label>
+            <input matInput (keyup)="applyFilter($event)" placeholder="{{'ORG.PAGES.FILTERPLACEHOLDER' | translate}}"
+                #input>
+        </mat-form-field>
+
+        <table [dataSource]="dataSource" mat-table class="table" matSort aria-label="Elements">
+
+            <ng-container matColumnDef="select">
+                <th class="selection" mat-header-cell *matHeaderCellDef>
+                    {{'ORG.PAGES.ACTIVE' | translate}}
+                </th>
+                <td class="selection" mat-cell *matCellDef="let row">
+                    <mat-radio-button (change)="selectOrg(row)" color="primary" (click)="$event.stopPropagation()"
+                        [checked]="row.id == activeOrg.id">
+                    </mat-radio-button>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="id">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'ORG.PAGES.ID' | translate }} </th>
+                <td mat-cell *matCellDef="let org"> {{org.id}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="name">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header
+                    [ngClass]="{'search-active': this.orgSearchKey == MyProjectOrgSearchKey.MYPROJECTORGSEARCHKEY_ORG_NAME}">
+                    {{ 'ORG.PAGES.NAME' | translate }}
+                    <template [ngTemplateOutlet]="templateRef"
+                        [ngTemplateOutletContext]="{key: MyProjectOrgSearchKey.MYPROJECTORGSEARCHKEY_ORG_NAME}"></template>
+                </th>
+                <td mat-cell *matCellDef="let org"> {{org.name}} </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        </table>
+        <mat-paginator class="paginator" [pageSize]="10" #paginator [pageSizeOptions]="[10, 20, 100, 250]">
+        </mat-paginator>
+    </app-refresh-table>
+</div>
+
+<ng-template #templateRef let-key="key">
+    <button class="search-button" mat-icon-button
+        (click)="this.orgSearchKey != key ? this.orgSearchKey = key : this.orgSearchKey = undefined">
+        <mat-icon *ngIf="this.orgSearchKey != key">search</mat-icon>
+        <mat-icon *ngIf="this.orgSearchKey == key">search_off</mat-icon>
+    </button>
+</ng-template>

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

@@ -0,0 +1,53 @@
+h1 {
+  margin-top: 0;
+}
+
+.top-desc {
+  color: #8795a1;
+}
+
+.table,
+.paginator {
+  width: 100%;
+
+  td,
+  th {
+    padding: 0 1rem;
+
+    &:first-child {
+      padding-left: 0;
+      padding-right: 1rem;
+    }
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+
+  .selection {
+    width: 50px;
+    max-width: 50px;
+  }
+}
+
+.pointer {
+  outline: none;
+  cursor: pointer;
+}
+
+.filter {
+  margin-left: 1rem;
+}
+
+th {
+  .search-button {
+    visibility: hidden;
+  }
+
+  &:hover,
+  &.search-active {
+    .search-button {
+      visibility: visible;
+    }
+  }
+}

console/src/app/pages/orgs/org-list/org-list.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { OrgGridComponent } from './org-grid.component';
+import { OrgListComponent } from './org-list.component';
 
-describe('OrgGridComponent', () => {
+describe('OrgListComponent', () => {
-    let component: OrgGridComponent;
+    let component: OrgListComponent;
-    let fixture: ComponentFixture<OrgGridComponent>;
+    let fixture: ComponentFixture<OrgListComponent>;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [OrgGridComponent],
+            declarations: [OrgListComponent],
         })
             .compileComponents();
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(OrgGridComponent);
+        fixture = TestBed.createComponent(OrgListComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });

console/src/app/pages/orgs/org-list/org-list.component.ts

@@ -0,0 +1,83 @@
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+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 { enterAnimations } from 'src/app/animations';
+import { MyProjectOrgSearchKey, MyProjectOrgSearchQuery, Org, SearchMethod } from 'src/app/proto/generated/auth_pb';
+import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
+
+@Component({
+    selector: 'app-org-list',
+    templateUrl: './org-list.component.html',
+    styleUrls: ['./org-list.component.scss'],
+    animations: [
+        enterAnimations,
+    ],
+})
+export class OrgListComponent implements AfterViewInit {
+    public orgSearchKey: MyProjectOrgSearchKey | undefined = undefined;
+
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
+    @ViewChild(MatSort) sort!: MatSort;
+
+    public dataSource!: MatTableDataSource<Org.AsObject>;
+    public displayedColumns: string[] = ['select', 'id', 'name'];
+    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+    public activeOrg!: Org.AsObject;
+    public MyProjectOrgSearchKey: any = MyProjectOrgSearchKey;
+
+    constructor(
+        private authService: GrpcAuthService,
+    ) {
+        this.loadOrgs(10, 0);
+
+        this.authService.GetActiveOrg().then(org => this.activeOrg = org);
+    }
+
+    public ngAfterViewInit(): void {
+        this.loadOrgs(10, 0);
+    }
+
+    public loadOrgs(limit: number, offset: number, filter?: string): void {
+        this.loadingSubject.next(true);
+        let query;
+        if (filter) {
+            query = new MyProjectOrgSearchQuery();
+            query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
+            query.setKey(MyProjectOrgSearchKey.MYPROJECTORGSEARCHKEY_ORG_NAME);
+            query.setValue(filter);
+        }
+
+        from(this.authService.SearchMyProjectOrgs(limit, offset, query ? [query] : undefined)).pipe(
+            map(resp => {
+                return resp.toObject().resultList;
+            }),
+            catchError(() => of([])),
+            finalize(() => this.loadingSubject.next(false)),
+        ).subscribe(views => {
+            this.dataSource = new MatTableDataSource(views);
+            this.dataSource.paginator = this.paginator;
+            this.dataSource.sort = this.sort;
+        });
+    }
+
+    public selectOrg(item: Org.AsObject, event?: any): void {
+        this.authService.setActiveOrg(item);
+    }
+
+    public refresh(): void {
+        this.loadOrgs(this.paginator.length, this.paginator.pageSize * this.paginator.pageIndex);
+    }
+
+    public applyFilter(event: Event): void {
+        const filterValue = (event.target as HTMLInputElement).value;
+        this.loadOrgs(
+            this.paginator.pageSize,
+            this.paginator.pageIndex * this.paginator.pageSize,
+            filterValue.trim().toLowerCase(),
+        );
+    }
+}

console/src/app/pages/orgs/org-list/org-list.module.ts

@@ -0,0 +1,42 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+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 { TranslateModule } from '@ngx-translate/core';
+import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.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 { OrgListRoutingModule } from './org-list-routing.module';
+import { OrgListComponent } from './org-list.component';
+
+@NgModule({
+    declarations: [OrgListComponent],
+    imports: [
+        CommonModule,
+        OrgListRoutingModule,
+        MatTableModule,
+        TranslateModule,
+        RefreshTableModule,
+        TimestampToDatePipeModule,
+        LocalizedDatePipeModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatIconModule,
+        MatButtonModule,
+        MatTooltipModule,
+        MatRadioModule,
+        MatFormFieldModule,
+        MatInputModule,
+        FormsModule,
+    ],
+})
+export class OrgListModule { }

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

@@ -9,8 +9,7 @@
             </button>
         </ng-template>
         <ng-template appHasRole actions [appHasRole]="['org.member.write:'+org?.id,'org.member.write']">
-            <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
+            <a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
-                mat-raised-button>
                 <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
             </a>
         </ng-template>
@@ -73,7 +72,7 @@
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+                <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
                 </tr>
             </table>
 

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

@@ -24,12 +24,6 @@
       width: 40px;
     }
 
-    .data-row {
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
-
     .selection {
       width: 50px;
       max-width: 50px;
@@ -37,10 +31,6 @@
   }
 }
 
-.add-button {
-  border-radius: .5rem;
-}
-
 .pointer {
   outline: none;
   cursor: pointer;

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

@@ -5,7 +5,6 @@ import { PolicyComponentServiceType, PolicyComponentType } from 'src/app/modules
 
 import { OrgCreateComponent } from './org-create/org-create.component';
 import { OrgDetailComponent } from './org-detail/org-detail.component';
-import { OrgGridComponent } from './org-grid/org-grid.component';
 
 const routes: Routes = [
     {
@@ -82,7 +81,7 @@ const routes: Routes = [
     },
     {
         path: 'overview',
-        component: OrgGridComponent,
+        loadChildren: () => import('./org-list/org-list.module').then(m => m.OrgListModule),
     },
 ];
 

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

@@ -25,12 +25,11 @@ import { ChangesModule } from '../../modules/changes/changes.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';
-import { OrgGridComponent } from './org-grid/org-grid.component';
 import { OrgsRoutingModule } from './orgs-routing.module';
 import { PolicyGridComponent } from './policy-grid/policy-grid.component';
 
 @NgModule({
-    declarations: [OrgDetailComponent, OrgGridComponent, PolicyGridComponent, DomainVerificationComponent],
+    declarations: [OrgDetailComponent, PolicyGridComponent, DomainVerificationComponent],
     imports: [
         CommonModule,
         HasRolePipeModule,

console/src/app/pages/orgs/policy-grid/policy-grid.component.scss

@@ -70,7 +70,6 @@ h1 {
 
     button {
       margin-right: 1rem;
-      border-radius: .5rem;
     }
   }
 }

console/src/app/pages/projects/apps/app-create/app-create.component.scss

@@ -142,7 +142,6 @@ p.desc {
     margin-top: 3rem;
     display: block;
     padding: .5rem 4rem;
-    border-radius: .5rem;
     float: right;
   }
 }

console/src/app/pages/projects/apps/app-detail/app-detail.component.html

@@ -42,8 +42,7 @@
     </app-card>
 
     <app-card title="{{ 'APP.OIDC.TITLE' | translate }}" *ngIf="app && app.oidcConfig">
-        <div class="card-actions" card-actions
+        <div card-actions *ngIf="app?.oidcConfig?.authMethodType !== OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE">
-            *ngIf="app?.oidcConfig?.authMethodType !== OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE">
             <button mat-stroked-button
                 (click)="regenerateOIDCClientSecret()">{{'APP.OIDC.REGENERATESECRET' | translate}}</button>
         </div>

console/src/app/pages/projects/apps/app-detail/app-detail.component.scss

@@ -33,12 +33,6 @@
   font-size: 14px;
 }
 
-.card-actions {
-  button {
-    border-radius: .5rem;
-  }
-}
-
 .compliance .problem {
   font-size: 14px;
 }
@@ -109,7 +103,6 @@
   margin: 0 -.5rem;
 
   .submit-button {
-    border-radius: .5rem;
     margin: 0 .5rem;
   }
 }

console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.scss

@@ -18,10 +18,6 @@
   .ok-button {
     margin-left: .5rem;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }
 
 .flex {

console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.html

@@ -63,7 +63,7 @@
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
+                <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"
                     [routerLink]="['/granted-projects', row.projectId, 'grant', row.id]"></tr>
 
             </table>

console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.scss

@@ -6,7 +6,6 @@
 
   .icon-button {
     display: block;
-    border-radius: .5rem;
   }
 }
 
@@ -33,14 +32,6 @@
       }
     }
 
-    .data-row {
-      cursor: pointer;
-
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
-
     .selection {
       width: 50px;
       max-width: 50px;

console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.html

@@ -1,8 +1,8 @@
 <app-refresh-table [loading]="dataSource.loading$ | async" [selection]="selection" (refreshed)="refreshPage()"
     [dataSize]="dataSource.totalResult" [timestamp]="dataSource?.viewTimestamp">
     <ng-template appHasRole [appHasRole]="['project.app.write']" actions>
-        <a [disabled]="disabled" class="add-button" [routerLink]="[ '/projects', projectId, 'apps', 'create']"
+        <a [disabled]="disabled" [routerLink]="[ '/projects', projectId, 'apps', 'create']" color="primary"
-            color="primary" mat-raised-button>
+            mat-raised-button>
             <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
         </a>
     </ng-template>
@@ -31,7 +31,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
 
         <mat-paginator class="paginator" #paginator [length]="dataSource.totalResult" [pageSize]="25"

console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.scss

@@ -19,14 +19,6 @@
       }
     }
 
-    .data-row {
-      cursor: pointer;
-
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
-
     .selection {
       width: 50px;
       max-width: 50px;

console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html

@@ -23,11 +23,11 @@
 
             <button mat-stroked-button color="warn"
                 [disabled]="isZitadel || (['project.write', 'project.write:'+ project.projectId]| hasRole | async) == false"
-                *ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE" class="state-button"
+                *ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE"
                 (click)="changeState(ProjectState.PROJECTSTATE_INACTIVE)">{{'PROJECT.TABLE.DEACTIVATE' | translate}}</button>
             <button mat-stroked-button color="warn"
                 [disabled]="isZitadel || (['project.write', 'project.write:'+ project.projectId]| hasRole | async) == false"
-                *ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE" class="state-button"
+                *ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE"
                 (click)="changeState(ProjectState.PROJECTSTATE_ACTIVE)">{{'PROJECT.TABLE.ACTIVATE' | translate}}</button>
 
             <div class="full-width">

console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.scss

@@ -9,10 +9,6 @@
     flex: 1;
   }
 
-  .state-button {
-    border-radius: .5rem;
-  }
-
   a {
     display: block;
   }

console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.html

@@ -10,7 +10,7 @@
     </ng-template>
     <ng-template appHasRole [appHasRole]="['project.grant.member.write:'+projectId,'project.grant.member.write']"
         actions>
-        <a [disabled]="disabled" color="primary" class="rounded-button" color="primary" mat-raised-button
+        <a [disabled]="disabled" color="primary" color="primary" mat-raised-button
             [routerLink]="[ '/projects', projectId, 'grants', 'create']">
             <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
         </a>
@@ -71,7 +71,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row" mat-row *matRowDef="let grant; columns: displayedColumns;" class="element-row">
+            <tr class="highlight" mat-row *matRowDef="let grant; columns: displayedColumns;" class="element-row">
             </tr>
         </table>
 

console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.scss

@@ -1,7 +1,3 @@
-.rounded-button {
-  border-radius: .5rem;
-}
-
 .table-wrapper {
   overflow: auto;
 

console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.html

@@ -12,7 +12,7 @@
         [selection]="selection" [loading]="loading$ | async">
 
         <ng-template actions appHasRole [appHasRole]="['project.create']">
-            <a class="add-button" [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
+            <a [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
                 <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
             </a>
         </ng-template>
@@ -62,7 +62,7 @@
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
+                <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"
                     [routerLink]="['/projects', row.projectId]"></tr>
 
             </table>

console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.scss

@@ -41,14 +41,6 @@ h1 {
       }
     }
 
-    .data-row {
-      cursor: pointer;
-
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
-
     .selection {
       width: 50px;
       max-width: 50px;

console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.html

@@ -18,10 +18,9 @@
 
         <div>
             <button mat-stroked-button color="warn" *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_ACTIVE"
-                class="state-button"
                 (click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' | translate}}</button>
             <button mat-stroked-button color="warn"
-                *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_INACTIVE" class="state-button"
+                *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_INACTIVE"
                 (click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
         </div>
     </div>

console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.scss

@@ -29,10 +29,6 @@
   .fill-space {
     flex: 1;
   }
-
-  .state-button {
-    border-radius: .5rem;
-  }
 }
 
 .formfield {

console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss

@@ -9,8 +9,4 @@
   .ok-button {
     margin-left: .5rem;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }

console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.html

@@ -8,7 +8,7 @@
     </button>
     <a color="primary"
         [disabled]="(['project.grant.member.write','project.grant.member.write:' + grantId] | hasRole | async) == false"
-        class="add-button" (click)="openAddMember()" color="primary" mat-raised-button>
+        (click)="openAddMember()" color="primary" mat-raised-button>
         <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
     </a>
 
@@ -73,7 +73,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
             </tr>
         </table>
 

console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.scss

@@ -22,12 +22,6 @@
       width: 40px;
     }
 
-    .data-row {
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
-
     .selection {
       width: 50px;
       max-width: 50px;

console/src/app/pages/projects/project-grant-create/project-grant-create.component.scss

@@ -32,7 +32,6 @@
 .domain-button {
   margin-right: 1rem;
   margin-bottom: 1rem;
-  border-radius: .5rem;
 }
 
 .btn-container {
@@ -43,12 +42,10 @@
 
   .small-button {
     display: block;
-    border-radius: .5rem;
   }
 
   .big-button {
     display: block;
     padding: .5rem 4rem;
-    border-radius: .5rem;
   }
 }

console/src/app/pages/projects/project-role-create/project-role-create.component.scss

@@ -50,7 +50,6 @@
   margin-top: 3rem;
   display: block;
   padding: .5rem 4rem;
-  border-radius: .5rem;
 
   @media only screen and (max-width: 450px) {
     margin-top: 1rem;

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

@@ -28,7 +28,6 @@
     }
 
     button {
-      border-radius: .5rem;
       display: block;
       padding: .5rem 4rem;
     }

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

@@ -57,12 +57,10 @@
 
   .small-button {
     display: block;
-    border-radius: .5rem;
   }
 
   .big-button {
     display: block;
     padding: .5rem 4rem;
-    border-radius: .5rem;
   }
 }

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html

@@ -1,8 +1,15 @@
 <app-meta-layout>
     <div class="max-width-container">
-        <h1 class="h1">{{ 'USER.TITLE' | translate }}</h1>
+        <div class="header-row">
-        <p class="sub">{{'USER.DESCRIPTION' | translate}}</p>
+            <div>
+                <h1 class="h1">{{ 'USER.TITLE' | translate }}</h1>
+                <p class="sub">{{'USER.DESCRIPTION' | translate}}</p>
+            </div>
 
+            <div class="theme">
+                <app-theme-setting></app-theme-setting>
+            </div>
+        </div>
         <mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
 
         <span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
@@ -20,21 +27,21 @@
             </div>
         </app-card>
 
-        <div class="col" *ngIf="user">
+        <!-- <div class="col" *ngIf="user"> -->
-            <app-card class="app-card" title="{{ 'USER.PROFILE.TITLE' | translate }}">
+        <app-card *ngIf="user" class="app-card" title="{{ 'USER.PROFILE.TITLE' | translate }}">
-                <app-detail-form [genders]="genders" [languages]="languages" [username]="user.userName"
+            <app-detail-form [genders]="genders" [languages]="languages" [username]="user.userName" [user]="user.human"
-                    [user]="user.human" (changedLanguage)="changedLanguage($event)" (submitData)="saveProfile($event)">
+                (changedLanguage)="changedLanguage($event)" (submitData)="saveProfile($event)">
-                </app-detail-form>
+            </app-detail-form>
-            </app-card>
+        </app-card>
 
-            <app-card title="Theme" class="app-card theme-card">
+        <!-- <app-card title="Theme" class="app-card theme-card">
                 <app-theme-setting></app-theme-setting>
-            </app-card>
+            </app-card> -->
-        </div>
+        <!-- </div> -->
 
         <app-card *ngIf="user && user.human && user.id" title="{{ 'USER.EXTERNALIDP.TITLE' | translate }}"
-                  description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
+            description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
-          <app-external-idps [userId]="user.id" [service]="userService"></app-external-idps>
+            <app-external-idps [userId]="user.id" [service]="userService"></app-external-idps>
         </app-card>
 
         <app-card *ngIf="user" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
@@ -44,7 +51,7 @@
                     <span class="label">{{ 'USER.PROFILE.PASSWORD' | translate }}</span>
 
                     <span>*********</span>
-                    <div class="actions">
+                    <div>
                         <a [routerLink]="['password']" mat-icon-button>
                             <mat-icon class="icon">chevron_right</mat-icon>
                         </a>
@@ -69,7 +76,7 @@
                             </ng-container>
                         </div>
 
-                        <div class="actions">
+                        <div>
                             <button (click)="emailEditState = true" mat-icon-button>
                                 <mat-icon class="icon">edit</mat-icon>
                             </button>
@@ -84,9 +91,8 @@
                         <button (click)="emailEditState = false" mat-icon-button>
                             <mat-icon class="icon">close</mat-icon>
                         </button>
-                        <button *ngIf="user.human" [disabled]="!user.human.email" class="submit-button" type="button"
+                        <button *ngIf="user.human" [disabled]="!user.human.email" type="button" color="primary"
-                            color="primary" (click)="saveEmail()"
+                            (click)="saveEmail()" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
-                            mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
                     </ng-template>
                 </div>
 
@@ -110,7 +116,7 @@
                             </ng-container>
                         </div>
 
-                        <div class="actions">
+                        <div>
                             <button (click)="phoneEditState = true" mat-icon-button>
                                 <mat-icon class="icon">edit</mat-icon>
                             </button>
@@ -153,4 +159,4 @@
 
         <app-changes class="changes" [changeType]="ChangeType.MYUSER" [id]="user.id"></app-changes>
     </div>
-</app-meta-layout>
+</app-meta-layout>

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

@@ -1,10 +1,21 @@
-.h1 {
+.header-row {
-  margin-top: 0;
+  display: flex;
-}
+  justify-content: space-between;
-
+  align-items: center;
-.sub {
-  color: #8795a1;
   margin-bottom: 2rem;
+  flex-wrap: wrap;
+
+  .h1 {
+    margin-top: 0;
+  }
+
+  .sub {
+    color: #8795a1;
+  }
+
+  .theme {
+    min-width: 250px;
+  }
 }
 
 .login-name-row {
@@ -50,7 +61,7 @@
   .method-row {
     display: flex;
     align-items: center;
-    justify-content: space-evenly;
+    justify-content: space-between;
     padding: .5rem;
     border-bottom: 1px solid #ffffff20;
     flex-wrap: wrap;
@@ -65,20 +76,16 @@
       display: flex;
       justify-content: flex-end;
       align-items: center;
+      flex-direction: column;
     }
 
     .label {
-      flex: 1;
       font-size: .9rem;
       color: #8795a1;
     }
 
     .icon {
-      margin-right: .5rem;
+      margin: .5rem;
-    }
-
-    .submit-button {
-      border-radius: .5rem;
     }
 
     .verify {
@@ -110,13 +117,13 @@
     margin: .5rem;
   }
 
-  .theme-card {
+  //   .theme-card {
-    max-width: 300px;
+  //     max-width: 300px;
 
-    @media only screen and (max-width: 450px) {
+  //     @media only screen and (max-width: 450px) {
-      max-width: none;
+  //       max-width: none;
-    }
+  //     }
-  }
+  //   }
 }
 
 .side {

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.html

@@ -27,7 +27,7 @@
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
     </app-refresh-table>
     <div class="add-row">

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

@@ -4,7 +4,6 @@
   margin: -.5rem;
 
   .button {
-    border-radius: .5rem;
     margin: .5rem;
     margin-top: 1rem;
 

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

@@ -3,7 +3,7 @@
 @mixin theme-card($theme) {
   /* stylelint-disable */
   $primary: map-get($theme, primary);
-  $primary-dark: mat-color($primary, A800);
+  $primary-dark: mat-color($primary, A900);
   /* stylelint-enable */
 
   .theme-conent,

console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-setting.component.html

@@ -1,17 +1,13 @@
 <input type="checkbox" id="switch" (change)="change($event.target.checked)" [(checked)]="isDarkTheme">
 <div class="theme-app">
     <div class="theme-content">
-        <div class="circle">
-            <div class="crescent"></div>
-        </div>
-        <p class="heading">Choose a style</p>
-        <p class="desc">Pop or subtle. Day or night.<br>
-            Customize your interface
-        </p>
         <label for="switch">
             <div class="toggle"></div>
             <div class="names">
                 <p class="light">Light</p>
+                <div class="circle">
+                    <div class="crescent"></div>
+                </div>
                 <p class="dark">Dark</p>
             </div>
         </label>

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

@@ -1,5 +1,5 @@
-$dark-background: #2d2e30;
+$dark-background: #212224;
-$light-background: #fafafa;
+$light-background: rgb(220, 220, 220);
 
 :root {
   transition: none;
@@ -16,12 +16,12 @@ $light-background: #fafafa;
 }
 
 .circle {
+  z-index: 1;
   position: relative;
   border-radius: 100%;
-  width: 6rem;
+  width: 60px;
-  height: 6rem;
+  height: 60px;
   background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
-  margin: auto;
   box-shadow: 0 30px 60px rgba(0, 0, 0, .12);
 }
 
@@ -29,8 +29,8 @@ $light-background: #fafafa;
   position: absolute;
   border-radius: 100%;
   right: 0;
-  width: 4rem;
+  width: 40px;
-  height: 4rem;
+  height: 40px;
   background: $light-background;
   transform: scale(0);
   transform-origin: top right;
@@ -41,20 +41,9 @@ p {
   font-size: 90%;
 }
 
-.heading {
-  font-size: 100%;
-  font-weight: bolder;
-  margin: 2rem 0 .2rem 0;
-}
-
-.desc {
-  font-size: 14px;
-  color: #8795a1;
-}
-
 label,
 .toggle {
-  height: 2.8rem;
+  height: 45px;
   border-radius: 100px;
 }
 
@@ -63,7 +52,6 @@ label {
   background-color: rgba(0, 0, 0, .1);
   border-radius: 100px;
   position: relative;
-  margin: 1rem 0 1rem 0;
   cursor: pointer;
 }
 
@@ -78,33 +66,37 @@ label {
   font-weight: bolder;
   width: 65%;
   margin-left: 17.5%;
-  margin-top: .5%;
   position: absolute;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   user-select: none;
+  height: 60px;
+  transform: translateY(-7.5px);
 }
 
 [type="checkbox"] {
   display: none;
 }
 
-[type="checkbox"]:checked + .theme-app .toggle {
+[type="checkbox"]:checked {
-  transform: translateX(100%);
+  .toggle {
-  background-color: $dark-background;
+    transform: translateX(100%);
-}
+    background-color: $dark-background;
+  }
 
-[type="checkbox"]:checked + .theme-app .dark {
+  .light {
-  opacity: 1;
+    opacity: .5;
-}
+  }
 
-[type="checkbox"]:checked + .theme-app .light {
+  .dark {
-  opacity: .5;
+    opacity: 1;
-}
+  }
 
-[type="checkbox"]:checked + .theme-app {
+  .theme-app {
-  background-color: inherit;
+    background-color: inherit;
-  color: inherit;
+    color: inherit;
+  }
 }
 
 [type="checkbox"]:checked + .theme-app .crescent {
@@ -119,3 +111,8 @@ label {
 [type="checkbox"]:checked + .theme-app .main-circle {
   background: linear-gradient(40deg, #8983f7, #a3dafb 70%);
 }
+
+[type="checkbox"]:checked + .app .toggle {
+  transform: translateX(100%);
+  background-color: #34323d;
+}

console/src/app/pages/users/user-detail/detail-form-machine/detail-form-machine.component.html

@@ -23,7 +23,6 @@
         </mat-form-field>
     </div>
     <div class="btn-container">
-        <button class="submit-button" type="submit" color="primary"
+        <button type="submit" color="primary" mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
-            mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
     </div>
 </form>

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

@@ -14,8 +14,4 @@
 .btn-container {
   display: flex;
   justify-content: flex-end;
-
-  .submit-button {
-    border-radius: .5rem;
-  }
 }

console/src/app/pages/users/user-detail/external-idps/external-idps.component.html

@@ -1,49 +1,49 @@
 <app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
-                   [timestamp]="externalIdpResult?.viewTimestamp" [selection]="selection">
+    [timestamp]="externalIdpResult?.viewTimestamp" [selection]="selection">
 
-  <div class="table-wrapper">
+    <div class="table-wrapper">
-    <table class="table" mat-table [dataSource]="dataSource">
+        <table class="table" mat-table [dataSource]="dataSource">
-      <ng-container matColumnDef="select">
+            <ng-container matColumnDef="select">
-        <th mat-header-cell *matHeaderCellDef>
+                <th mat-header-cell *matHeaderCellDef>
-          <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
                         [checked]="selection.hasValue() && isAllSelected()"
                         [indeterminate]="selection.hasValue() && !isAllSelected()">
-          </mat-checkbox>
+                    </mat-checkbox>
-        </th>
+                </th>
-        <td mat-cell *matCellDef="let idp">
+                <td mat-cell *matCellDef="let idp">
-          <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
                         (change)="$event ? selection.toggle(idp) : null" [checked]="selection.isSelected(idp)">
-          </mat-checkbox>
+                    </mat-checkbox>
-        </td>
+                </td>
-      </ng-container>
+            </ng-container>
 
-      <ng-container matColumnDef="idpConfigId">
+            <ng-container matColumnDef="idpConfigId">
-        <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPCONFIGID' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPCONFIGID' | translate }} </th>
-        <td mat-cell *matCellDef="let idp"> {{idp?.idpConfigId}} </td>
+                <td mat-cell *matCellDef="let idp"> {{idp?.idpConfigId}} </td>
-      </ng-container>
+            </ng-container>
 
-      <ng-container matColumnDef="idpName">
+            <ng-container matColumnDef="idpName">
-        <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPNAME' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPNAME' | translate }} </th>
-        <td mat-cell *matCellDef="let idp"> {{idp?.idpName}} </td>
+                <td mat-cell *matCellDef="let idp"> {{idp?.idpName}} </td>
-      </ng-container>
+            </ng-container>
 
-      <ng-container matColumnDef="externalUserDisplayName">
+            <ng-container matColumnDef="externalUserDisplayName">
-        <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.USERDISPLAYNAME' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.USERDISPLAYNAME' | translate }} </th>
-        <td mat-cell *matCellDef="let idp"> {{idp?.externalUserDisplayName}} </td>
+                <td mat-cell *matCellDef="let idp"> {{idp?.externalUserDisplayName}} </td>
-      </ng-container>
+            </ng-container>
 
-      <ng-container matColumnDef="externalUserId">
+            <ng-container matColumnDef="externalUserId">
-        <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.EXTERNALUSERID' | translate }} </th>
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.EXTERNALUSERID' | translate }} </th>
-        <td mat-cell *matCellDef="let idp"> {{idp?.externalUserId}} </td>
+                <td mat-cell *matCellDef="let idp"> {{idp?.externalUserId}} </td>
-      </ng-container>
+            </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
-      </tr>
+            </tr>
 
-    </table>
+        </table>
-    <mat-paginator #paginator class="paginator" [length]="externalIdpResult?.totalResult || 0" [pageSize]="10"
+        <mat-paginator #paginator class="paginator" [length]="externalIdpResult?.totalResult || 0" [pageSize]="10"
-                   [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
+            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
-  </div>
+    </div>
 
-</app-refresh-table>
+</app-refresh-table>

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

@@ -19,21 +19,9 @@
         padding-right: 0;
       }
     }
-
-    .data-row {
-      cursor: pointer;
-
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
   }
 }
 
 tr {
   outline: none;
 }
-
-.add-button {
-  border-radius: .5rem;
-}

console/src/app/pages/users/user-detail/external-idps/external-idps.component.ts

@@ -1,75 +1,99 @@
-import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import { SelectionModel } from '@angular/cdk/collections';
-import {MatPaginator, PageEvent} from '@angular/material/paginator';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+import { ExternalIDPView as AuthExternalIDPView } from '../../../../proto/generated/auth_pb';
 import {
-  ExternalIDPSearchResponse,
+    ExternalIDPSearchResponse,
-  ExternalIDPView as MgmtExternalIDPView,
+    ExternalIDPView as MgmtExternalIDPView,
-  IdpView as MgmtIdpView,
 } from '../../../../proto/generated/management_pb';
-import {
+import { GrpcAuthService } from '../../../../services/grpc-auth.service';
-  ExternalIDPView as AuthExternalIDPView,
+import { ManagementService } from '../../../../services/mgmt.service';
-} from '../../../../proto/generated/auth_pb';
+import { ToastService } from '../../../../services/toast.service';
-import {BehaviorSubject, Observable} from 'rxjs';
-import {ManagementService} from '../../../../services/mgmt.service';
-import {ToastService} from '../../../../services/toast.service';
-import {SelectionModel} from '@angular/cdk/collections';
-import {GrpcAuthService} from '../../../../services/grpc-auth.service';
 
 @Component({
-  selector: 'app-external-idps',
+    selector: 'app-external-idps',
-  templateUrl: './external-idps.component.html',
+    templateUrl: './external-idps.component.html',
-  styleUrls: ['./external-idps.component.scss'],
+    styleUrls: ['./external-idps.component.scss'],
 })
 export class ExternalIdpsComponent implements OnInit {
-  @Input() service!: GrpcAuthService | ManagementService;
+    @Input() service!: GrpcAuthService | ManagementService;
-  @Input() userId!: string;
+    @Input() userId!: string;
-  @ViewChild(MatPaginator) public paginator!: MatPaginator;
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
-  public externalIdpResult!: ExternalIDPSearchResponse.AsObject;
+    public externalIdpResult!: ExternalIDPSearchResponse.AsObject;
-  public dataSource: MatTableDataSource<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>
+    public dataSource: MatTableDataSource<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>
-    = new MatTableDataSource<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>();
+        = new MatTableDataSource<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>();
-  public selection: SelectionModel<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>
+    public selection: SelectionModel<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>
-    = new SelectionModel<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>(true, []);
+        = new SelectionModel<MgmtExternalIDPView.AsObject | AuthExternalIDPView.AsObject>(true, []);
-  private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-  public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
-  @Input() public displayedColumns: string[] = [ 'idpConfigId', 'idpName', 'externalUserId', 'externalUserDisplayName'];
+    @Input() public displayedColumns: string[] = ['idpConfigId', 'idpName', 'externalUserId', 'externalUserDisplayName'];
 
-  constructor(private toast: ToastService) { }
+    constructor(private toast: ToastService) { }
 
-  ngOnInit(): void {
+    ngOnInit(): void {
-    this.getData(10, 0);
+        this.getData(10, 0);
-  }
+    }
 
-  public isAllSelected(): boolean {
+    public isAllSelected(): boolean {
-    const numSelected = this.selection.selected.length;
+        const numSelected = this.selection.selected.length;
-    const numRows = this.dataSource.data.length;
+        const numRows = this.dataSource.data.length;
-    return numSelected === numRows;
+        return numSelected === numRows;
-  }
+    }
 
-  public masterToggle(): void {
+    public masterToggle(): void {
-    this.isAllSelected() ?
+        this.isAllSelected() ?
-      this.selection.clear() :
+            this.selection.clear() :
-      this.dataSource.data.forEach(row => this.selection.select(row));
+            this.dataSource.data.forEach(row => this.selection.select(row));
-  }
+    }
 
-  public changePage(event: PageEvent): void {
+    public changePage(event: PageEvent): void {
-    this.getData(event.pageSize, event.pageIndex * event.pageSize);
+        this.getData(event.pageSize, event.pageIndex * event.pageSize);
-  }
+    }
 
-  private async getData(limit: number, offset: number): Promise<void> {
+    private async getData(limit: number, offset: number): Promise<void> {
-    this.loadingSubject.next(true);
+        this.loadingSubject.next(true);
 
-    this.service.SearchExternalIdps(this.userId, limit, offset).then(resp => {
+        let promise;
-      this.externalIdpResult = resp.toObject();
+        if (this.service instanceof ManagementService) {
-      this.dataSource.data = this.externalIdpResult.resultList;
+            promise = (this.service as ManagementService).SearchUserExternalIDPs(limit, offset, this.userId);
-      console.log(this.externalIdpResult.resultList);
+        } else if (this.service instanceof GrpcAuthService) {
-      this.loadingSubject.next(false);
+            promise = (this.service as GrpcAuthService).SearchMyExternalIdps(limit, offset);
-    }).catch((error: any) => {
+        }
-      this.toast.showError(error);
-      this.loadingSubject.next(false);
-    });
-  }
 
-  public refreshPage(): void {
+        if (promise) {
-    this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
+            promise.then(resp => {
-  }
+                this.externalIdpResult = resp.toObject();
+                this.dataSource.data = this.externalIdpResult.resultList;
+                console.log(this.externalIdpResult.resultList);
+                this.loadingSubject.next(false);
+            }).catch((error: any) => {
+                this.toast.showError(error);
+                this.loadingSubject.next(false);
+            });
+        }
+    }
+
+    public refreshPage(): void {
+        this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
+    }
+
+    public removeExternalIdp(idp: AuthExternalIDPView.AsObject | MgmtExternalIDPView.AsObject): void {
+        let promise;
+        if (this.service instanceof ManagementService) {
+            promise = (this.service as ManagementService).RemoveExternalIDP(idp.externalUserId, idp.idpConfigId, idp.userId);
+        } else if (this.service instanceof GrpcAuthService) {
+            promise = (this.service as GrpcAuthService).RemoveExternalIDP(idp.externalUserId, idp.idpConfigId);
+        }
+
+        if (promise) {
+            promise.then(_ => {
+                this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
+            }).catch((error: any) => {
+                this.toast.showError(error);
+            });
+        }
+    }
 }

console/src/app/pages/users/user-detail/machine-keys/add-key-dialog/add-key-dialog.component.scss

@@ -19,8 +19,4 @@
   .ok-button {
     margin-left: .5rem;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }

console/src/app/pages/users/user-detail/machine-keys/machine-keys.component.html

@@ -6,8 +6,8 @@
             mat-icon-button *ngIf="selection.hasValue()">
             <i class="las la-trash"></i>
         </button>
-        <a class="add-button" [disabled]="([('user.write:' + userId), 'user.write'] | hasRole | async) == false"
+        <a [disabled]="([('user.write:' + userId), 'user.write'] | hasRole | async) == false" color="primary"
-            color="primary" mat-raised-button (click)="openAddKey()">
+            mat-raised-button (click)="openAddKey()">
             <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
         </a>
     </ng-template>
@@ -54,7 +54,7 @@
 
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
+            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"
                 [routerLink]="row.id ? ['/users', row.id ]: null">
             </tr>
 

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

@@ -19,21 +19,9 @@
         padding-right: 0;
       }
     }
-
-    .data-row {
-      cursor: pointer;
-
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
   }
 }
 
 tr {
   outline: none;
 }
-
-.add-button {
-  border-radius: .5rem;
-}

console/src/app/pages/users/user-detail/machine-keys/show-key-dialog/show-key-dialog.component.scss

@@ -19,10 +19,6 @@
   .ok-button {
     margin-left: .5rem;
   }
-
-  button {
-    border-radius: .5rem;
-  }
 }
 
 .row {
@@ -52,5 +48,4 @@
 
 .download-button {
   margin-bottom: 1rem;
-  border-radius: .5rem;
 }

console/src/app/pages/users/user-detail/membership-detail/membership-detail.component.html

@@ -4,7 +4,7 @@
     <app-refresh-table class="refresh-table" (refreshed)="refreshPage()" [dataSize]="dataSource?.totalResult"
         [timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource?.loading$ | async">
 
-        <a actions color="primary" class="add-button" (click)="addMember()" color="primary" mat-raised-button>
+        <a actions color="primary" (click)="addMember()" color="primary" mat-raised-button>
             <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
         </a>
 
@@ -57,7 +57,7 @@
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
+                <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
                 </tr>
             </table>
 

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

@@ -1,7 +1,3 @@
-.add-button {
-  border-radius: .5rem;
-}
-
 .refresh-table {
   width: 100%;
 }
@@ -32,12 +28,6 @@
       width: 40px;
     }
 
-    .data-row {
-      &:hover {
-        background-color: #ffffff05;
-      }
-    }
-
     .selection {
       width: 50px;
       max-width: 50px;