fix(console): horizontal toggle for users, projects, improve UI/UX (#4047)

* fix(console): horizontal toggle for users, projects * improve input contrast * toggles, profile UI fix * lint * fix safari styles * fix button placement redirects * style lint Co-authored-by: Livio Spring <livio.a@gmail.com>
2025-01-06 13:57:41 +00:00 · 2022-07-29 11:14:45 +02:00 · 2022-07-29 11:14:45 +02:00 · 5b284f8c9b
commit 5b284f8c9b
parent 9ed972f308
22 changed files with 358 additions and 159 deletions
--- a/console/src/app/modules/nav-toggle/nav-toggle.component.html
+++ b/console/src/app/modules/nav-toggle/nav-toggle.component.html
@ -0,0 +1,6 @@
+<button class="nav-toggle" [ngClass]="{active}" (click)="clicked.emit()">
+  <div class="c_label">
+    <span> {{ label }} </span>
+    <small *ngIf="count" class="count">({{ count }})</small>
+  </div>
+</button>
--- a/console/src/app/modules/nav-toggle/nav-toggle.component.scss
+++ b/console/src/app/modules/nav-toggle/nav-toggle.component.scss
@ -0,0 +1,71 @@
+@use '@angular/material' as mat;
+
+@mixin nav-toggle-theme($theme) {
+  $primary: map-get($theme, primary);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $accent: map-get($theme, accent);
+  $primary-color: mat.get-color-from-palette($primary, 500);
+
+  $warn-color: mat.get-color-from-palette($warn, 500);
+  $accent-color: mat.get-color-from-palette($accent, 500);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+  $back: map-get($background, background);
+
+  .nav-toggle {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    line-height: 14px;
+    padding: 0.4rem 12px;
+    color: mat.get-color-from-palette($foreground, text) !important;
+    transition: all 0.2s ease;
+    text-decoration: none;
+    border-radius: 50vw;
+    border: none;
+    font-weight: 400;
+    margin: 0.25rem 2px;
+    white-space: nowrap;
+    position: relative;
+    background: none;
+    cursor: pointer;
+    font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+
+    .c_label {
+      display: flex;
+      align-items: center;
+      text-align: center;
+
+      .count {
+        display: none;
+        margin-left: 6px;
+      }
+    }
+
+    &.external-link {
+      padding-right: 2rem;
+
+      i {
+        position: absolute;
+        right: 8px;
+        font-size: 1.2rem;
+      }
+    }
+
+    &:hover {
+      background: if($is-dark-theme, #ffffff40, #00000010);
+    }
+
+    &.active {
+      background-color: $primary-color;
+      color: mat.get-color-from-palette($foreground, toolbar-items) !important;
+
+      .c_label {
+        .count {
+          display: inline-block;
+        }
+      }
+    }
+  }
+}
--- a/console/src/app/modules/nav-toggle/nav-toggle.component.spec.ts
+++ b/console/src/app/modules/nav-toggle/nav-toggle.component.spec.ts
@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavToggleComponent } from './nav-toggle.component';
+
+describe('NavToggleComponent', () => {
+  let component: NavToggleComponent;
+  let fixture: ComponentFixture<NavToggleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavToggleComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NavToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/console/src/app/modules/nav-toggle/nav-toggle.component.ts
+++ b/console/src/app/modules/nav-toggle/nav-toggle.component.ts
@ -0,0 +1,14 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'cnsl-nav-toggle',
+  templateUrl: './nav-toggle.component.html',
+  styleUrls: ['./nav-toggle.component.scss'],
+})
+export class NavToggleComponent {
+  @Input() public label: string = '';
+  @Input() public count: number | null = 0;
+  @Input() public active: boolean = false;
+  @Output() public clicked: EventEmitter<void> = new EventEmitter<void>();
+  constructor() {}
+}
--- a/console/src/app/modules/nav-toggle/nav-toggle.module.ts
+++ b/console/src/app/modules/nav-toggle/nav-toggle.module.ts
@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { NavToggleComponent } from './nav-toggle.component';
+
+@NgModule({
+  declarations: [NavToggleComponent],
+  imports: [CommonModule, RouterModule],
+  exports: [NavToggleComponent],
+})
+export class NavToggleModule {}
--- a/console/src/app/modules/refresh-table/refresh-table.component.scss
+++ b/console/src/app/modules/refresh-table/refresh-table.component.scss
@ -7,9 +7,10 @@
    display: flex;
    align-items: center;
    padding-bottom: 0.5rem;
+    box-sizing: border-box;

    &.border-bottom {
-      padding-bottom: 0.5rem;
+      padding-bottom: 1rem;
      margin-bottom: 1rem;
      border-bottom: 1px solid map-get($foreground, divider);
    }
--- a/console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.scss
+++ b/console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.scss
@ -80,7 +80,7 @@
  min-width: 320px;

  .formfield {
-    flex: 1;
+    width: 500px;
  }

  button {
--- a/console/src/app/pages/projects/projects.component.html
+++ b/console/src/app/pages/projects/projects.component.html
@ -9,22 +9,21 @@
    <p class="sub cnsl-secondary-text max-width-description">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>

    <div class="projects-controls">
-      <div class="project-type-actions">
-        <button
-          class="type-button"
-          [ngClass]="{ active: (projectType$ | async) === ProjectType.PROJECTTYPE_OWNED }"
-          (click)="setType(ProjectType.PROJECTTYPE_OWNED)"
-        >
-          {{ 'PROJECT.PAGES.TYPE.OWNED' | translate }} ({{ (mgmtService?.ownedProjectsCount | async) ?? 0 }})
-        </button>
-        <button
-          class="type-button"
-          [ngClass]="{ active: (projectType$ | async) === ProjectType.PROJECTTYPE_GRANTED }"
-          (click)="setType(ProjectType.PROJECTTYPE_GRANTED)"
-        >
-          {{ 'PROJECT.PAGES.TYPE.GRANTED' | translate }} ({{ (mgmtService?.grantedProjectsCount | async) ?? 0 }})
-        </button>
+      <div class="project-toggle-group">
+        <cnsl-nav-toggle
+          label="{{ 'PROJECT.PAGES.TYPE.OWNED' | translate }}"
+          [count]="mgmtService.ownedProjectsCount | async"
+          (clicked)="setType(ProjectType.PROJECTTYPE_OWNED)"
+          [active]="(projectType$ | async) === ProjectType.PROJECTTYPE_OWNED"
+        ></cnsl-nav-toggle>
+        <cnsl-nav-toggle
+          label="{{ 'PROJECT.PAGES.TYPE.GRANTED' | translate }}"
+          [count]="mgmtService.grantedProjectsCount | async"
+          (clicked)="setType(ProjectType.PROJECTTYPE_GRANTED)"
+          [active]="(projectType$ | async) === ProjectType.PROJECTTYPE_GRANTED"
+        ></cnsl-nav-toggle>
      </div>
+
      <span class="fill-space"></span>
      <button class="grid-btn" (click)="grid = !grid" mat-icon-button [attr.data-e2e]="'toggle-grid'">
        <i *ngIf="grid" class="show list view las la-th-list"></i>
--- a/console/src/app/pages/projects/projects.component.scss
+++ b/console/src/app/pages/projects/projects.component.scss
@ -23,34 +23,33 @@

  .projects-controls {
    display: flex;
-    padding-bottom: 0.5rem;
+    align-items: center;
+    padding-bottom: 1rem;
    border-bottom: 1px solid map-get($foreground, dividers);

-    .project-type-actions {
+    .project-toggle-group {
      display: flex;
-      align-items: center;

-      .type-button {
-        border: none;
-        background: none;
-        text-align: left;
-        padding: 0.75rem 0;
-        opacity: 0.6;
-        font-size: 15px;
-        cursor: pointer;
-        color: map-get($foreground, text);
+      .toggle-row {
+        display: flex;
+        align-items: center;

-        &:first-child {
-          margin-right: 1rem;
+        i {
+          margin-right: 0.5rem;
        }

-        &:hover {
-          opacity: 1;
+        .info-i {
+          font-size: 1.2rem;
+          margin-left: 0.5rem;
+          margin-right: 0;
        }

-        &.active {
-          font-weight: 600;
-          opacity: 1;
+        .current-dot {
+          height: 8px;
+          width: 8px;
+          border-radius: 50%;
+          background-color: rgb(84, 142, 230);
+          margin-left: 0.5rem;
        }
      }
    }
--- a/console/src/app/pages/projects/projects.component.ts
+++ b/console/src/app/pages/projects/projects.component.ts
@ -13,6 +13,7 @@ import { ManagementService } from 'src/app/services/mgmt.service';
 export class ProjectsComponent {
  public zitadelProjectId: string = '';
  public projectType$: BehaviorSubject<any> = new BehaviorSubject(ProjectType.PROJECTTYPE_OWNED);
+  public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
  public ProjectType: any = ProjectType;
  public grid: boolean = true;
  constructor(
--- a/console/src/app/pages/projects/projects.module.ts
+++ b/console/src/app/pages/projects/projects.module.ts
@ -15,6 +15,7 @@ import { ActionKeysModule } from 'src/app/modules/action-keys/action-keys.module
 import { CardModule } from 'src/app/modules/card/card.module';
 import { FilterProjectModule } from 'src/app/modules/filter-project/filter-project.module';
 import { InputModule } from 'src/app/modules/input/input.module';
+import { NavToggleModule } from 'src/app/modules/nav-toggle/nav-toggle.module';
 import { PaginatorModule } from 'src/app/modules/paginator/paginator.module';
 import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
@ -55,6 +56,7 @@ import { ProjectsComponent } from './projects.component';
    LocalizedDatePipeModule,
    RefreshTableModule,
    MatRippleModule,
+    NavToggleModule,
  ],
 })
 export class ProjectsModule {}
--- a/console/src/app/pages/users/user-detail/detail-form/detail-form.component.html
+++ b/console/src/app/pages/users/user-detail/detail-form/detail-form.component.html
@ -1,62 +1,74 @@
 <form [formGroup]="profileForm" *ngIf="profileForm" (ngSubmit)="submitForm()">
-  <div class="user-form-content">
-    <div class="user-form-content inner">
-      <button [disabled]="user && disabled" class="camera-wrapper" type="button"
-        (click)="showEditImage ? openUploadDialog() : null">
+  <div class="user-top-content">
+    <div class="user-form-content">
+      <button
+        [disabled]="user && disabled"
+        class="camera-wrapper"
+        type="button"
+        (click)="showEditImage ? openUploadDialog() : null"
+      >
        <div class="i-wrapper" *ngIf="showEditImage">
          <i class="las la-camera"></i>
        </div>
-        <cnsl-avatar *ngIf="user && user.profile?.displayName && user.profile?.firstName && user.profile?.lastName"
-          class="avatar" [name]="user.profile?.displayName ?? ''" [avatarUrl]="user?.profile?.avatarUrl || ''"
-          [forColor]="preferredLoginName" [size]="80">
+        <cnsl-avatar
+          *ngIf="user && user.profile?.displayName && user.profile?.firstName && user.profile?.lastName"
+          class="avatar"
+          [name]="user.profile?.displayName ?? ''"
+          [avatarUrl]="user?.profile?.avatarUrl || ''"
+          [forColor]="preferredLoginName"
+          [size]="80"
+        >
        </cnsl-avatar>
      </button>

-      <div className="usernamediv">
+      <div class="usernamediv">
        <cnsl-form-field class="formfield">
          <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}</cnsl-label>
          <input cnslInput formControlName="userName" />
        </cnsl-form-field>
-        <button [disabled]="user && disabled" type="button" mat-stroked-button class="edit"
-          (click)="changeUsername()">{{'USER.PROFILE.CHANGEUSERNAME' |
-          translate}}</button>
+        <button [disabled]="user && disabled" type="button" mat-stroked-button class="edit" (click)="changeUsername()">
+          {{ 'USER.PROFILE.CHANGEUSERNAME' | translate }}
+        </button>
      </div>
    </div>
-    <cnsl-form-field class="formfield">
-      <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</cnsl-label>
-      <input cnslInput formControlName="firstName" />
-    </cnsl-form-field>
-    <cnsl-form-field class="formfield">
-      <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</cnsl-label>
-      <input cnslInput formControlName="lastName" />
-    </cnsl-form-field>
-    <cnsl-form-field class="formfield">
-      <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
-      <input cnslInput formControlName="nickName" />
-    </cnsl-form-field>
-    <cnsl-form-field class="formfield">
-      <cnsl-label>{{ 'USER.PROFILE.DISPLAYNAME' | translate }}</cnsl-label>
-      <input cnslInput formControlName="displayName" />
-    </cnsl-form-field>
-    <cnsl-form-field class="formfield">
-      <cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
-      <mat-select formControlName="gender">
-        <mat-option *ngFor="let gender of genders" [value]="gender">
-          {{ 'GENDERS.'+gender | translate }}
-        </mat-option>
-      </mat-select>
-    </cnsl-form-field>
-    <cnsl-form-field class="formfield">
-      <cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
-      <mat-select formControlName="preferredLanguage">
-        <mat-option *ngFor="let language of languages" [value]="language">
-          {{ 'LANGUAGES.'+language | translate }}
-        </mat-option>
-      </mat-select>
-    </cnsl-form-field>
+    <div class="user-grid">
+      <cnsl-form-field class="formfield">
+        <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</cnsl-label>
+        <input cnslInput formControlName="firstName" />
+      </cnsl-form-field>
+      <cnsl-form-field class="formfield">
+        <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</cnsl-label>
+        <input cnslInput formControlName="lastName" />
+      </cnsl-form-field>
+      <cnsl-form-field class="formfield">
+        <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
+        <input cnslInput formControlName="nickName" />
+      </cnsl-form-field>
+      <cnsl-form-field class="formfield">
+        <cnsl-label>{{ 'USER.PROFILE.DISPLAYNAME' | translate }}</cnsl-label>
+        <input cnslInput formControlName="displayName" />
+      </cnsl-form-field>
+      <cnsl-form-field class="formfield">
+        <cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
+        <mat-select formControlName="gender">
+          <mat-option *ngFor="let gender of genders" [value]="gender">
+            {{ 'GENDERS.' + gender | translate }}
+          </mat-option>
+        </mat-select>
+      </cnsl-form-field>
+      <cnsl-form-field class="formfield">
+        <cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
+        <mat-select formControlName="preferredLanguage">
+          <mat-option *ngFor="let language of languages" [value]="language">
+            {{ 'LANGUAGES.' + language | translate }}
+          </mat-option>
+        </mat-select>
+      </cnsl-form-field>
+    </div>
  </div>
  <div class="btn-container">
-    <button [disabled]="disabled" class="submit-button" type="submit" color="primary" mat-raised-button>{{
-      'ACTIONS.SAVE' | translate }}</button>
+    <button [disabled]="disabled" class="submit-button" type="submit" color="primary" mat-raised-button>
+      {{ 'ACTIONS.SAVE' | translate }}
+    </button>
  </div>
-</form>
+</form>
--- a/console/src/app/pages/users/user-detail/detail-form/detail-form.component.scss
+++ b/console/src/app/pages/users/user-detail/detail-form/detail-form.component.scss
@ -2,31 +2,28 @@
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
-  margin: 0 -.5rem;
+  margin: 0;
+  width: 100%;
+  align-items: center;

-  &.inner {
-    margin: 0;
-    width: 100%;
-    display: flex;
-    align-items: center;
+  .usernamediv {
+    margin-left: 0.5rem;
+    margin-bottom: 0.5rem;

-    .usernamediv {
-      margin-left: .5rem;
-      margin-bottom: .5rem;
+    .formfield {
+      margin: 0;
+      flex: 1;
+    }

-      .formfield {
-        margin: 0;
-        flex: 1;
-      }
-
-      .edit {
-        cursor: pointer !important;
-      }
+    .edit {
+      display: block;
+      margin-top: 0.5rem;
+      cursor: pointer !important;
    }
  }

  .camera-wrapper {
-    margin: 0 .5rem;
+    margin: 0 0.5rem;
    position: relative;
    border-radius: 50%;
    padding: 0;
@ -36,37 +33,49 @@
    justify-content: center;
    background: none;
    cursor: pointer;
-    transition: all .3s ease;
+    transition: all 0.3s ease;
+    overflow: hidden;

    .i-wrapper {
-      border-radius: 50%;
-      background-color: #00000050;
+      display: none;
+      background-color: #00000080;
      position: absolute;
-      top: 0;
      z-index: 1;
      left: 0;
      right: 0;
      bottom: 0;
-      display: flex;
      align-items: center;
      justify-content: center;
+      transition: all 0.2 ease;

      i {
-        font-size: 3rem;
+        font-size: 1.2rem;
+        margin: 0.25rem;
        color: white;
      }
    }

    &:hover {
      .i-wrapper {
-        background-color: #00000080;
+        display: inline;
      }
    }
  }

  .formfield {
    flex: 1 1 33%;
-    margin: 0 .5rem;
+    margin: 0 0.5rem;
+  }
+}
+
+.user-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+  margin: 0;
+
+  @media only screen and (min-width: 700px) {
+    grid-template-columns: 1fr 1fr;
  }
 }

@ -75,6 +84,6 @@
  justify-content: flex-end;

  .submit-button {
-    border-radius: .5rem;
+    border-radius: 0.5rem;
  }
 }
--- a/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.html
+++ b/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.html
@ -1,20 +1,26 @@
-<span class="title" mat-dialog-title>{{'USER.PROFILE.AVATAR.UPLOADTITLE' | translate}}</span>
+<span class="title" mat-dialog-title>{{ 'USER.PROFILE.AVATAR.UPLOADTITLE' | translate }}</span>
 <div mat-dialog-content>
-  <p class="desc cnsl-secondary-text">{{'USER.PROFILE.AVATAR.CURRENT' | translate}}</p>
+  <p class="desc cnsl-secondary-text">{{ 'USER.PROFILE.AVATAR.CURRENT' | translate }}</p>
  <div class="current-pic-wrapper">
    <img class="pic" [src]="data.profilePic" *ngIf="data.profilePic" />
    <span class="fill-space"></span>
-    <input #selectedFile style="display: none;" class="file-input" type="file" (change)="onDrop($event)">
-    <button class="btn" mat-raised-button color="primary" type="button"
-      (click)="selectedFile.click();">{{'USER.PROFILE.AVATAR.UPLOADBTN' | translate}}</button>
-    <button *ngIf="data.profilePic" matTooltip="{{'ACTIONS.DELETE' | translate}}" color="warn" (click)="deletePic()"
-      mat-icon-button>
-      <mat-icon>remove_circle</mat-icon>
+    <input #selectedFile style="display: none" class="file-input" type="file" (change)="onDrop($event)" />
+    <button class="btn" mat-raised-button color="primary" type="button" (click)="selectedFile.click()">
+      {{ 'USER.PROFILE.AVATAR.UPLOADBTN' | translate }}
+    </button>
+    <button
+      *ngIf="data.profilePic"
+      matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
+      color="warn"
+      (click)="deletePic()"
+      mat-icon-button
+    >
+      <i class="las la-minus-circle"></i>
    </button>
  </div>
 </div>
 <div mat-dialog-actions class="action">
  <button color="primary" mat-stroked-button class="ok-button" (click)="closeDialog()">
-    {{'ACTIONS.CLOSE' | translate}}
+    {{ 'ACTIONS.CLOSE' | translate }}
  </button>
-</div>
+</div>
--- a/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.ts
+++ b/console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.ts
@ -49,7 +49,9 @@ export class ProfilePictureComponent {
          this.data.profilePic = resp.user?.human?.profile?.avatarUrl ?? '';
        });
      })
-      .catch((error) => this.toast.showError(error));
+      .catch((error) => {
+        this.toast.showError(error.error, false);
+      });
  }

  public closeDialog(): void {
--- a/console/src/app/pages/users/user-list/user-list.module.ts
+++ b/console/src/app/pages/users/user-list/user-list.module.ts
@ -18,6 +18,7 @@ import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
 import { CardModule } from 'src/app/modules/card/card.module';
 import { FilterUserModule } from 'src/app/modules/filter-user/filter-user.module';
 import { InputModule } from 'src/app/modules/input/input.module';
+import { NavToggleModule } from 'src/app/modules/nav-toggle/nav-toggle.module';
 import { PaginatorModule } from 'src/app/modules/paginator/paginator.module';
 import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { TableActionsModule } from 'src/app/modules/table-actions/table-actions.module';
@ -49,6 +50,7 @@ import { UserTableComponent } from './user-table/user-table.component';
    TranslateModule,
    FilterUserModule,
    RouterModule,
+    NavToggleModule,
    RefreshTableModule,
    TableActionsModule,
    ActionKeysModule,
--- a/console/src/app/pages/users/user-list/user-table/user-table.component.html
+++ b/console/src/app/pages/users/user-list/user-table/user-table.component.html
@ -8,13 +8,17 @@
  [emitRefreshOnPreviousRoutes]="refreshOnPreviousRoutes"
  [showBorder]="true"
 >
-  <div leftActions class="user-table-left-actions">
-    <button class="type-button" [ngClass]="{ active: type === Type.TYPE_HUMAN }" (click)="setType(Type.TYPE_HUMAN)">
-      {{ 'USER.TABLE.TYPES.HUMAN' | translate }}
-    </button>
-    <button class="type-button" [ngClass]="{ active: type === Type.TYPE_MACHINE }" (click)="setType(Type.TYPE_MACHINE)">
-      {{ 'USER.TABLE.TYPES.MACHINE' | translate }}
-    </button>
+  <div leftActions class="user-toggle-group">
+    <cnsl-nav-toggle
+      label="{{ 'USER.TABLE.TYPES.HUMAN' | translate }}"
+      (clicked)="setType(Type.TYPE_HUMAN)"
+      [active]="type === Type.TYPE_HUMAN"
+    ></cnsl-nav-toggle>
+    <cnsl-nav-toggle
+      label="{{ 'USER.TABLE.TYPES.MACHINE' | translate }}"
+      (clicked)="setType(Type.TYPE_MACHINE)"
+      [active]="type === Type.TYPE_MACHINE"
+    ></cnsl-nav-toggle>
  </div>

  <ng-template cnslHasRole [hasRole]="['user.write']" actions>
--- a/console/src/app/pages/users/user-list/user-table/user-table.component.scss
+++ b/console/src/app/pages/users/user-list/user-table/user-table.component.scss
@ -4,31 +4,31 @@
  $foreground: map-get($theme, foreground);
  $is-dark-theme: map-get($theme, is-dark);

-  .user-table-left-actions {
+  .user-toggle-group {
    display: flex;
-    align-items: center;
+    margin: 0;
+    height: 100%;

-    .type-button {
-      border: none;
-      background: none;
-      text-align: left;
-      padding: 0.75rem 0;
-      opacity: 0.6;
-      font-size: 15px;
-      cursor: pointer;
-      color: map-get($foreground, text);
+    .toggle-row {
+      display: flex;
+      align-items: center;

-      &:first-child {
-        margin-right: 1rem;
+      i {
+        margin-right: 0.5rem;
      }

-      &:hover {
-        opacity: 1;
+      .info-i {
+        font-size: 1.2rem;
+        margin-left: 0.5rem;
+        margin-right: 0;
      }

-      &.active {
-        font-weight: 600;
-        opacity: 1;
+      .current-dot {
+        height: 8px;
+        width: 8px;
+        border-radius: 50%;
+        background-color: rgb(84, 142, 230);
+        margin-left: 0.5rem;
      }
    }
  }
--- a/console/src/app/services/toast.service.ts
+++ b/console/src/app/services/toast.service.ts
@ -33,15 +33,19 @@ export class ToastService {
    }
  }

-  public showError(grpcError: any): void {
-    const { message, code, metadata } = grpcError;
-    if (code !== 16) {
-      this.translate
-        .get('ACTIONS.CLOSE')
-        .pipe(take(1))
-        .subscribe((value) => {
-          this.showMessage(decodeURI(message), value, false);
-        });
+  public showError(error: any | string, isGrpc: boolean = true): void {
+    if (isGrpc) {
+      const { message, code, metadata } = error;
+      if (code !== 16) {
+        this.translate
+          .get('ACTIONS.CLOSE')
+          .pipe(take(1))
+          .subscribe((value) => {
+            this.showMessage(decodeURI(message), value, false);
+          });
+      }
+    } else {
+      this.showMessage(error as string, '', false);
    }
  }

--- a/console/src/component-themes.scss
+++ b/console/src/component-themes.scss
@ -12,6 +12,7 @@
@import 'src/app/modules/app-card/app-card.component';
@import 'src/app/modules/contributors/contributors.component';
@import 'src/app/modules/nav/nav.component';
+@import 'src/app/modules/nav-toggle/nav-toggle.component';
@import './styles/toast.scss';
@import 'src/app/modules/table-actions/table-actions.component';
@import 'src/app/modules/org-context/org-context.component.scss';
@ -62,6 +63,7 @@
  @include main-theme($theme);
  @include avatar-theme($theme);
  @include nav-theme($theme);
+  @include nav-toggle-theme($theme);
  @include header-theme($theme);
  @include app-type-radio-theme($theme);
  @include projects-theme($theme);
--- a/console/src/styles.scss
+++ b/console/src/styles.scss
@ -446,9 +446,18 @@ $custom-typography: mat.define-typography-config(
    }
  }

-  .mat-button-toggle-button {
+  .mat-button-toggle-group-appearance-standard {
+    border-color: map-get($foreground, divider);
+  }
+
+  .mat-button-toggle {
    background-color: mat.get-color-from-palette($background, cards);
    transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    &.mat-button-toggle-checked {
+      background-color: #00000010;
+    }
  }

  .main-container,
@ -509,9 +518,18 @@ $custom-typography: mat.define-typography-config(
    }
  }

-  .mat-button-toggle-button {
+  .mat-button-toggle-group-appearance-standard {
+    border-color: map-get($foreground, divider);
+  }
+
+  .mat-button-toggle {
    background-color: mat.get-color-from-palette($background, cards);
    transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    &.mat-button-toggle-checked {
+      background-color: mat.get-color-from-palette($background, background);
+    }
  }

  .main-container,
@ -601,3 +619,15 @@ i {
 .mat-checkbox-inner-container.mat-checkbox-inner-container-no-side-margin {
  margin-right: 0.5rem !important;
 }
+
+.mat-button-toggle-button {
+  display: flex;
+  height: 36px;
+  line-height: 36px !important;
+  align-items: center;
+  font-size: 14px !important;
+}
+
+.mat-button-toggle-label-content {
+  line-height: 36px;
+}
--- a/console/src/styles/input.scss
+++ b/console/src/styles/input.scss
@ -20,8 +20,8 @@
    transform: all 0.2 linear;
    font-size: 1rem;
    border: none;
-    border: 1px solid if($is-dark-theme, #f9f7f725, #1a191938);
-    background-color: if($is-dark-theme, #00000020, #00000004);
+    border: 1px solid if($is-dark-theme, #f9f7f775, #1a191954);
+    background-color: if($is-dark-theme, #00000040, #00000004);
    border-radius: 4px;
    height: 40px;
    padding: 10px;
@ -34,7 +34,7 @@
    margin-bottom: 2px;

    &:hover {
-      border-color: if($is-dark-theme, #aeafb1, #1a1b1b);
+      border-color: if($is-dark-theme, #e0e0e0, #1a1b1b);
    }

    &:active,