cleanup styles

console/src/app/modules/new-header/header-button/header-button.component.html

@@ -2,5 +2,5 @@
   <ng-content></ng-content>
 </span>
 <button class="header-button" matRipple [matRippleUnbounded]="false">
-  <ng-icon size="1.2rem" name="heroChevronUpDown"></ng-icon>
+  <ng-icon size="1.3rem" name="heroChevronUpDown"></ng-icon>
 </button>

console/src/app/modules/new-header/header-button/header-button.component.scss

@@ -3,27 +3,52 @@
   flex-direction: row;
   align-items: center;
   justify-content: stretch;
-  gap: 0.5rem;
+  gap: 0rem;
   padding-right: 0;
   height: 32px;
   max-height: 32px;
   cursor: pointer;
 }
 
-.header-text {
-  font-size: 1.1rem;
-}
-
 @mixin header-button-theme($theme) {
   $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
 
   .header-button {
+    height: 36px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
     border: 0;
     background: transparent;
-    border-radius: 4px;
+    border-radius: 6px;
-    padding: 0;
+    padding: 0 0.5rem;
-    height: 100%;
     cursor: pointer;
     color: map-get($foreground, text);
+
+    &:hover {
+      background-color: if($is-dark-theme, #ffffff10, #00000010);
+    }
+  }
+
+  .header-text {
+    height: 36px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    border: none;
+    color: map-get($foreground, text);
+    border-radius: 6px;
+    position: relative;
+    font-size: 14px;
+    padding: 0 0.75rem;
+    text-align: left;
+    background-color: transparent;
+    cursor: pointer;
+    transition: all ease 0.2s;
+
+    &:hover {
+      background-color: if($is-dark-theme, #ffffff10, #00000010);
+    }
   }
 }

console/src/app/modules/new-header/new-header.component.html

@@ -1,5 +1,4 @@
 <div class="new-header-wrapper">
-  <span *ngIf="!isHandset()" routerLink="/" class="new-header-title">CONSOLE</span>
   <ng-container *ngIf="myInstanceQuery.data()?.instance as instance">
     <ng-container *ngTemplateOutlet="slash"></ng-container>
     <cnsl-header-button

console/src/app/modules/new-header/new-header.component.scss

@@ -1,20 +1,35 @@
-.new-header-wrapper {
+@mixin new-header-theme($theme) {
-  padding-left: 5px;
+  $foreground: map-get($theme, foreground);
-  padding-right: 5px;
+  $is-dark-theme: map-get($theme, is-dark);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 5px;
-}
 
-.new-header-title {
+  .new-header-wrapper {
-  font-weight: 900;
+    padding-left: 5px;
-  letter-spacing: 3px;
+    padding-right: 5px;
-  font-size: 0.8rem;
+    display: flex;
-}
+    flex-direction: row;
+    align-items: center;
+    gap: 0;
+  }
 
-.new-header-breadcrumb {
+  .new-header-breadcrumb {
-  color: inherit;
+    height: 36px;
-  text-decoration: inherit;
+    box-sizing: border-box;
-  font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+    padding: 0 0.5rem;
+    border: none;
+    color: map-get($foreground, text);
+    position: relative;
+    font-size: 14px;
+    text-align: left;
+    background-color: transparent;
+    cursor: pointer;
+    transition: all ease 0.2s;
+    text-decoration: none;
+
+    &:hover {
+      background-color: if($is-dark-theme, #ffffff10, #00000010);
+    }
+  }
 }

console/src/component-themes.scss

@@ -81,6 +81,7 @@
 @import 'src/app/modules/new-header/organization-selector/organization-selector.component.scss';
 @import 'src/app/modules/new-header/instance-selector/instance-selector.component.scss';
 @import 'src/app/modules/new-header/header-dropdown/header-dropdown.component.scss';
+@import 'src/app/modules/new-header/new-header.component.scss';
 @import 'src/app/modules/new-header/header-button/header-button.component.scss';
 
 @mixin component-themes($theme) {
@@ -166,5 +167,6 @@
   @include organization-selector-theme($theme);
   @include instance-selector-theme($theme);
   @include header-dropdown-theme($theme);
+  @include new-header-theme($theme);
   @include header-button-theme($theme);
 }

pnpm-lock.yaml

@@ -118,9 +118,18 @@ importers:
       '@fortawesome/free-brands-svg-icons':
         specifier: ^6.7.2
         version: 6.7.2
+      '@ng-icons/core':
+        specifier: ^25.0.0
+        version: 25.6.1
+      '@ng-icons/heroicons':
+        specifier: ^25.0.0
+        version: 25.6.1
       '@ngx-translate/core':
         specifier: ^15.0.0
         version: 15.0.0(@angular/common@16.2.12(@angular/core@16.2.12(rxjs@7.8.2)(zone.js@0.13.3))(rxjs@7.8.2))(@angular/core@16.2.12(rxjs@7.8.2)(zone.js@0.13.3))(rxjs@7.8.2)
+      '@tanstack/angular-query-experimental':
+        specifier: ^5.75.4
+        version: 5.83.0(@angular/common@16.2.12(@angular/core@16.2.12(rxjs@7.8.2)(zone.js@0.13.3))(rxjs@7.8.2))(@angular/core@16.2.12(rxjs@7.8.2)(zone.js@0.13.3))
       '@zitadel/client':
         specifier: workspace:*
         version: link:../login/packages/zitadel-client
@@ -3471,6 +3480,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@ng-icons/core@25.6.1':
+    resolution: {integrity: sha512-o6vCttlzXvDZRYiOKOULr7fsX8gY/DwwxzBSrBQzwa/at+pC0xRoe6uczJ9Ato+y1EDWP/PlrEMAQfvokBA6tQ==}
+
+  '@ng-icons/heroicons@25.6.1':
+    resolution: {integrity: sha512-QGTIIl+S6/w2vQvYGP1zNLbNvJLLRS+1evlOPWZZzWow+77qRxs0E96CukSsjItBFUnLKvzuOfMBBcNtb2SIHQ==}
+
   '@ngtools/webpack@16.2.16':
     resolution: {integrity: sha512-4gm2allK0Pjy/Lxb9IGRnhEZNEOJSOTWwy09VOdHouV2ODRK7Tto2LgteaFJUUSLkuvWRsI7pfuA6yrz8KDfHw==}
     engines: {node: ^16.14.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
@@ -4929,6 +4944,18 @@ packages:
   '@tanem/svg-injector@10.1.68':
     resolution: {integrity: sha512-UkJajeR44u73ujtr5GVSbIlELDWD/mzjqWe54YMK61ljKxFcJoPd9RBSaO7xj02ISCWUqJW99GjrS+sVF0UnrA==}
 
+  '@tanstack/angular-query-experimental@5.83.0':
+    resolution: {integrity: sha512-MMB189P5EoJ9hKzn9dKdN3Auc531JPu/FWZZJk4qhkTDsuiyXh2BR0WRnD9PedLKn+bsL3rMyfzWUnbwGbhTIQ==}
+    peerDependencies:
+      '@angular/common': '>=16.0.0'
+      '@angular/core': '>=16.0.0'
+
+  '@tanstack/query-core@5.83.0':
+    resolution: {integrity: sha512-0M8dA+amXUkyz5cVUm/B+zSk3xkQAcuXuz5/Q/LveT4ots2rBpPTZOzd7yJa2Utsf8D2Upl5KyjhHRY+9lB/XA==}
+
+  '@tanstack/query-devtools@5.81.2':
+    resolution: {integrity: sha512-jCeJcDCwKfoyyBXjXe9+Lo8aTkavygHHsUHAlxQKKaDeyT0qyQNLKl7+UyqYH2dDF6UN/14873IPBHchcsU+Zg==}
+
   '@tanstack/react-virtual@3.13.12':
     resolution: {integrity: sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==}
     peerDependencies:
@@ -19192,6 +19219,14 @@ snapshots:
   '@next/swc-win32-x64-msvc@15.4.0-canary.86':
     optional: true
 
+  '@ng-icons/core@25.6.1':
+    dependencies:
+      tslib: 2.8.1
+
+  '@ng-icons/heroicons@25.6.1':
+    dependencies:
+      tslib: 2.8.1
+
   '@ngtools/webpack@16.2.16(@angular/compiler-cli@16.2.12(@angular/compiler@16.2.12(@angular/core@16.2.12(rxjs@7.8.2)(zone.js@0.13.3)))(typescript@5.1.6))(typescript@5.1.6)(webpack@5.94.0(@swc/core@1.12.14)(esbuild@0.18.17))':
     dependencies:
       '@angular/compiler-cli': 16.2.12(@angular/compiler@16.2.12(@angular/core@16.2.12(rxjs@7.8.2)(zone.js@0.13.3)))(typescript@5.1.6)
@@ -20524,6 +20559,17 @@ snapshots:
       content-type: 1.0.5
       tslib: 2.8.1
 
+  '@tanstack/angular-query-experimental@5.83.0(@angular/common@16.2.12(@angular/core@16.2.12(rxjs@7.8.2)(zone.js@0.13.3))(rxjs@7.8.2))(@angular/core@16.2.12(rxjs@7.8.2)(zone.js@0.13.3))':
+    dependencies:
+      '@angular/common': 16.2.12(@angular/core@16.2.12(rxjs@7.8.2)(zone.js@0.13.3))(rxjs@7.8.2)
+      '@angular/core': 16.2.12(rxjs@7.8.2)(zone.js@0.13.3)
+      '@tanstack/query-core': 5.83.0
+      '@tanstack/query-devtools': 5.81.2
+
+  '@tanstack/query-core@5.83.0': {}
+
+  '@tanstack/query-devtools@5.81.2': {}
+
   '@tanstack/react-virtual@3.13.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@tanstack/virtual-core': 3.13.12