TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-11 13:19:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

cleanup styles

Browse Source
This commit is contained in:
Max Peintner
2025-07-16 11:10:51 +02:00
parent 42a5c5af44
commit ed74963258
6 changed files with 114 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -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;
padding: 0;
height: 100%;
border-radius: 6px;
padding: 0 0.5rem;
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);
}
}
}

1
console/src/app/modules/new-header/new-header.component.html
View File

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

49
console/src/app/modules/new-header/new-header.component.scss
View File

@@ -1,20 +1,35 @@
.new-header-wrapper {
padding-left: 5px;
padding-right: 5px;
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
}
@mixin new-header-theme($theme) {
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
.new-header-title {
font-weight: 900;
letter-spacing: 3px;
font-size: 0.8rem;
}
.new-header-wrapper {
padding-left: 5px;
padding-right: 5px;
display: flex;
flex-direction: row;
align-items: center;
gap: 0;
}
.new-header-breadcrumb {
color: inherit;
text-decoration: inherit;
font-size: 1.1rem;
.new-header-breadcrumb {
height: 36px;
box-sizing: border-box;
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);
}
}
}

2
console/src/component-themes.scss
View File

@@ -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);
}

46
pnpm-lock.yaml generated
View File

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