mirror of
https://github.com/zitadel/zitadel.git
synced 2025-04-24 21:21:32 +00:00
feat(console): angular 12, migrate grpc lib, ui element fixes (#1740)
* fix: is default * fix: feature tile in org, iam, neutral color for info boxes * lint * consolidation, ui elements * feat(console): angular 12, migrate deprecated grpc to @grpc/grpc-js (#1741) * update cli core * update material * mig * migrate grpc to grpc-js * audit * lint * node lts version, ng12 deprecation * rem comment * disable inlinestyles * fix iam feature link, binding
This commit is contained in:
Max Peintner
GitHub
parent
4fde6df477
commit
74ff154b19
@ -1,5 +1,5 @@
|
||||
ARG GO_VERSION=1.15.8
|
||||
ARG NODE_VERSION=15.8.0
|
||||
ARG NODE_VERSION=14.17.0
|
||||
ARG ENV=prod
|
||||
|
||||
#######################
|
||||
|
||||
@ -22,7 +22,6 @@
|
||||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"aot": true,
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets",
|
||||
@ -37,7 +36,22 @@
|
||||
"src/app/proto/generated/**",
|
||||
"file-saver",
|
||||
"qrcode"
|
||||
]
|
||||
],
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"buildOptimizer": false,
|
||||
"sourceMap": true,
|
||||
"optimization": {
|
||||
"scripts": true,
|
||||
"fonts": {
|
||||
"inline": true
|
||||
},
|
||||
"styles": {
|
||||
"minify": true,
|
||||
"inlineCritical": false
|
||||
}
|
||||
},
|
||||
"namedChunks": true
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
@ -47,7 +61,16 @@
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"optimization": {
|
||||
"scripts": true,
|
||||
"fonts": {
|
||||
"inline": false
|
||||
},
|
||||
"styles": {
|
||||
"minify": true,
|
||||
"inlineCritical": false
|
||||
}
|
||||
},
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"namedChunks": false,
|
||||
@ -68,19 +91,24 @@
|
||||
],
|
||||
"serviceWorker": true,
|
||||
"ngswConfigPath": "ngsw-config.json"
|
||||
}
|
||||
}
|
||||
},
|
||||
"development": {}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "console:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "console:build:production"
|
||||
},
|
||||
"development": {
|
||||
"browserTarget": "console:build:development"
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
@ -123,14 +151,17 @@
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "e2e/protractor.conf.js",
|
||||
"devServerTarget": "console:serve"
|
||||
"protractorConfig": "e2e/protractor.conf.js"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"devServerTarget": "console:serve:production"
|
||||
},
|
||||
"development": {
|
||||
"devServerTarget": "console:serve:development"
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
27889
console/package-lock.json
generated
27889
console/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -5,23 +5,24 @@
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"prodbuild": "ng build --prod",
|
||||
"prodbuild": "ng build --configuration production",
|
||||
"lint": "ng lint && stylelint './src/**/*.scss' --syntax scss"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~11.0.0",
|
||||
"@angular/cdk": "~11.0.0",
|
||||
"@angular/common": "~11.0.0",
|
||||
"@angular/compiler": "~11.0.0",
|
||||
"@angular/core": "~11.0.0",
|
||||
"@angular/forms": "~11.0.0",
|
||||
"@angular/material": "^11.0.0",
|
||||
"@angular/material-moment-adapter": "^11.0.0",
|
||||
"@angular/platform-browser": "~11.0.0",
|
||||
"@angular/platform-browser-dynamic": "~11.0.0",
|
||||
"@angular/router": "~11.0.0",
|
||||
"@angular/service-worker": "~11.0.0",
|
||||
"@angular/animations": "~12.0.0",
|
||||
"@angular/cdk": "~12.0.0",
|
||||
"@angular/common": "~12.0.0",
|
||||
"@angular/compiler": "~12.0.0",
|
||||
"@angular/core": "~12.0.0",
|
||||
"@angular/forms": "~12.0.0",
|
||||
"@angular/material": "^12.0.0",
|
||||
"@angular/material-moment-adapter": "^12.0.0",
|
||||
"@angular/platform-browser": "~12.0.0",
|
||||
"@angular/platform-browser-dynamic": "~12.0.0",
|
||||
"@angular/router": "~12.0.0",
|
||||
"@angular/service-worker": "~12.0.0",
|
||||
"@grpc/grpc-js": "^1.3.2",
|
||||
"@ngx-translate/core": "^13.0.0",
|
||||
"@ngx-translate/http-loader": "^6.0.0",
|
||||
"@types/file-saver": "^2.0.2",
|
||||
@ -33,7 +34,6 @@
|
||||
"file-saver": "^2.0.5",
|
||||
"google-proto-files": "^2.4.0",
|
||||
"google-protobuf": "^3.15.8",
|
||||
"grpc": "^1.24.5",
|
||||
"grpc-web": "^1.2.1",
|
||||
"libphonenumber-js": "^1.9.16",
|
||||
"moment": "^2.29.1",
|
||||
@ -42,14 +42,14 @@
|
||||
"ts-protoc-gen": "^0.14.0",
|
||||
"tslib": "^2.2.0",
|
||||
"uuid": "^8.3.2",
|
||||
"zone.js": "~0.11.3"
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.1102.8",
|
||||
"@angular/cli": "~11.2.8",
|
||||
"@angular/compiler-cli": "~11.0.0",
|
||||
"@angular-devkit/build-angular": "~12.0.0",
|
||||
"@angular/cli": "~12.0.0",
|
||||
"@angular/compiler-cli": "~12.0.0",
|
||||
"@angular/language-service": "~12.0.0",
|
||||
"@types/jasmine": "~3.6.9",
|
||||
"@angular/language-service": "~11.2.9",
|
||||
"@types/jasminewd2": "~2.0.3",
|
||||
"@types/node": "^14.14.37",
|
||||
"codelyzer": "^6.0.0",
|
||||
@ -67,6 +67,6 @@
|
||||
"stylelint-scss": "^3.19.0",
|
||||
"ts-node": "~9.1.1",
|
||||
"tslint": "~6.1.3",
|
||||
"typescript": "^4.0.7"
|
||||
"typescript": "^4.2.4"
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
.root-header {
|
||||
position: fixed;
|
||||
@ -125,6 +125,12 @@
|
||||
margin: .5rem 1rem;
|
||||
}
|
||||
|
||||
.iam-i {
|
||||
object-fit: contain;
|
||||
max-height: 24px;
|
||||
margin: .5rem 1rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
@ -263,12 +269,12 @@
|
||||
margin: 0 .5rem;
|
||||
/* stylelint-disable */
|
||||
$foreground: map-get($theme, foreground);
|
||||
color: mat-color($foreground, text) !important;
|
||||
color: mat.get-color-from-palette($foreground, text) !important;
|
||||
}
|
||||
|
||||
.show-all {
|
||||
$primary: map-get($theme, primary);
|
||||
color: mat-color($primary, 300) !important;
|
||||
color: mat.get-color-from-palette($primary, 300) !important;
|
||||
border-bottom: 2px solid var(--grey);
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
@mixin app-card-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-dark: mat-color($primary, A900);
|
||||
$primary-dark: mat.get-color-from-palette($primary, A900);
|
||||
$accent: map-get($theme, accent);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
$accent-color: mat-color($primary, 500);
|
||||
$accent-color: mat.get-color-from-palette($primary, 500);
|
||||
/* stylelint-enable */
|
||||
|
||||
.cnsl-app-card {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
.radio-button-wrapper {
|
||||
display: flex;
|
||||
@ -14,7 +13,7 @@
|
||||
|
||||
@mixin app-auth-method-radio-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-color: mat-color($primary, 500);
|
||||
$primary-color: mat.get-color-from-palette($primary, 500);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
input[type="radio"] {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
.radio-button-wrapper {
|
||||
display: flex;
|
||||
@ -10,7 +9,7 @@
|
||||
|
||||
@mixin app-type-radio-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-color: mat-color($primary, 500);
|
||||
$primary-color: mat.get-color-from-palette($primary, 500);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
input[type="radio"] {
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
@mixin avatar-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-color: mat-color($primary, 500);
|
||||
$primary-color: mat.get-color-from-palette($primary, 500);
|
||||
|
||||
.avatar-circle {
|
||||
border-radius: 50%;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
@mixin card-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-color: mat-color($primary, 500);
|
||||
$primary-dark: mat-color($primary, A800);
|
||||
$border-color: mat-color($primary, A700);
|
||||
$border-selected-color: mat-color($primary, A600);
|
||||
$primary-color: mat.get-color-from-palette($primary, 500);
|
||||
$primary-dark: mat.get-color-from-palette($primary, A800);
|
||||
$border-color: mat.get-color-from-palette($primary, A700);
|
||||
$border-selected-color: mat.get-color-from-palette($primary, A600);
|
||||
/* stylelint-enable */
|
||||
|
||||
.card {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
.change-header {
|
||||
display: flex;
|
||||
@ -114,7 +114,7 @@
|
||||
|
||||
/* stylelint-disable */
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-dark: mat-color($primary, A800);
|
||||
$primary-dark: mat.get-color-from-palette($primary, A800);
|
||||
/* stylelint-enable */
|
||||
|
||||
&.change-item-back {
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
@mixin detail-layout-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-color: mat-color($primary, 500);
|
||||
$primary-dark: mat-color($primary, A800);
|
||||
$primary-color: mat.get-color-from-palette($primary, 500);
|
||||
$primary-dark: mat.get-color-from-palette($primary, A800);
|
||||
/* stylelint-enable */
|
||||
|
||||
$lighter-color: rgba(mat-color($primary, 300), .5);
|
||||
$lighter-color: rgba(mat.get-color-from-palette($primary, 300), .5);
|
||||
|
||||
.detail-container {
|
||||
width: 100%;
|
||||
|
||||
@ -7,7 +7,12 @@
|
||||
|
||||
<div class="detail">
|
||||
<p class="title">{{'FEATURES.TIER.NAME' | translate}}</p>
|
||||
<p>{{features?.tier?.name}}</p>
|
||||
<p class="center">{{features?.tier?.name}}
|
||||
<a class="ext" href="https://zitadel.ch/pricing"
|
||||
target="_blank">
|
||||
<i class="las la-external-link-alt"></i>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="serviceType === FeatureServiceType.MGMT">
|
||||
|
||||
@ -30,6 +30,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 15px;
|
||||
width: auto;
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
@mixin cnsl-form-field-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-color: mat-color($primary, 500);
|
||||
$primary-color: mat.get-color-from-palette($primary, 500);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
.ng-untouched {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
@mixin info-section-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-color: mat-color($primary, 500);
|
||||
$primary-color: mat.get-color-from-palette($primary, 500);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
.info-section-row {
|
||||
@ -25,6 +25,15 @@
|
||||
}
|
||||
|
||||
&.info {
|
||||
background-color: if($is-dark-theme, #6d6f7382, #e4e4e4);
|
||||
color: if($is-dark-theme, #f0f0f0, #4a4a4a);
|
||||
|
||||
.icon {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: if($is-dark-theme, #4f566b, #cbf4c9);
|
||||
color: if($is-dark-theme, #cbf4c9, #0e6245);
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
|
||||
|
||||
enum InfoSectionType {
|
||||
INFO = 'INFO',
|
||||
SUCCESS = 'SUCCESS',
|
||||
WARN = 'WARN',
|
||||
}
|
||||
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
@mixin cnsl-label-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-color: mat-color($primary, 500);
|
||||
$primary-color: mat.get-color-from-palette($primary, 500);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
$warn: map-get($theme, warn);
|
||||
$warn-color: mat-color($warn, 500);
|
||||
$warn-color: mat.get-color-from-palette($warn, 500);
|
||||
|
||||
.cnsl-label {
|
||||
display: block;
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin meta-theme($theme) {
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
@mixin onboarding-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-color: mat-color($primary, 500);
|
||||
$primary-color: mat.get-color-from-palette($primary, 500);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
/* stylelint-enable */
|
||||
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
|
||||
.target-desc {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
|
||||
a {
|
||||
color: #4072b4;
|
||||
@ -70,3 +71,8 @@
|
||||
.circle {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
input {
|
||||
max-width: 500px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
<div *ngIf="features" class="tier card">
|
||||
<!-- <mat-icon class="icon">stars</mat-icon> -->
|
||||
<img class="logo dark" alt="zitadel logo"
|
||||
src="../assets/images/zitadel-logo-solo-light-icon.svg" />
|
||||
<img alt="zitadel logo" class="logo light" src="../assets/images/zitadel-logo-solo-dark-icon.svg" />
|
||||
<div class="text" *ngIf="features.tier">
|
||||
<p class="title"><strong>{{features.tier.name}}</strong></p>
|
||||
<p>{{features.tier?.description}}</p>
|
||||
<p class="state" [ngClass]="{'active': features.tier.state == FeaturesState.FEATURES_STATE_ACTIVE}">{{'FEATURES.TIERSTATES.'+features.tier.state | translate}}</p>
|
||||
<p >{{features.tier?.statusInfo}}</p>
|
||||
</div>
|
||||
<span class="fill-space"></span>
|
||||
<!-- <a *ngIf="['features.write'] | hasRole | async" class="ext" href="https://zitadel.ch/pricing"
|
||||
target="_blank"><i class="las la-external-link-alt"></i></a> -->
|
||||
|
||||
<button mat-raised-button color="primary" [routerLink]="[ iam ? '/iam/features' : '/org/features']">{{'FEATURES.BTN-EDIT' | translate}}</button>
|
||||
</div>
|
||||
@ -0,0 +1,76 @@
|
||||
@mixin tier-theme($theme) {
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
.tier {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 1rem;
|
||||
border-radius: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
|
||||
.ext {
|
||||
margin-right: .5rem;
|
||||
align-self: center;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-right: 1rem;
|
||||
max-height: 40px;
|
||||
object-fit: contain;
|
||||
filter: grayscale(1);
|
||||
transition: filter .3s ease;
|
||||
|
||||
&.dark {
|
||||
display: if($is-dark-theme, inline-block, none);
|
||||
}
|
||||
|
||||
&.light {
|
||||
display: if($is-dark-theme, none, inline-block);
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
p:not(.state) {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.state {
|
||||
align-self: flex-start;
|
||||
border-radius: 50vw;
|
||||
padding: 2px .5rem;
|
||||
letter-spacing: .05em;
|
||||
font-size: 12px;
|
||||
background-color: if($is-dark-theme, #4f566b, #e4e7e4);
|
||||
|
||||
&.active {
|
||||
background-color: if($is-dark-theme, #4f566b, #cbf4c9);
|
||||
color: if($is-dark-theme, #cbf4c9, #0e6245);
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
color: if($is-dark-theme, #ffc1c1, #620e0e);
|
||||
background-color: if($is-dark-theme, #4f566b, #ffc1c1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
// min-width: 200px;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ZitadelTierComponent } from './zitadel-tier.component';
|
||||
|
||||
describe('ZitadelTierComponent', () => {
|
||||
let component: ZitadelTierComponent;
|
||||
let fixture: ComponentFixture<ZitadelTierComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ZitadelTierComponent],
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ZitadelTierComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,19 @@
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Features, FeaturesState } from 'src/app/proto/generated/zitadel/features_pb';
|
||||
|
||||
@Component({
|
||||
selector: 'cnsl-zitadel-tier',
|
||||
templateUrl: './zitadel-tier.component.html',
|
||||
styleUrls: ['./zitadel-tier.component.scss'],
|
||||
})
|
||||
export class ZitadelTierComponent implements OnInit {
|
||||
@Input() public features!: Features.AsObject;
|
||||
@Input() public iam: boolean = false;
|
||||
|
||||
FeaturesState: any = FeaturesState;
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
31
console/src/app/modules/zitadel-tier/zitadel-tier.module.ts
Normal file
31
console/src/app/modules/zitadel-tier/zitadel-tier.module.ts
Normal file
@ -0,0 +1,31 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
|
||||
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
|
||||
|
||||
import { ZitadelTierComponent } from './zitadel-tier.component';
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
ZitadelTierComponent,
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
HasRoleModule,
|
||||
HasRolePipeModule,
|
||||
TranslateModule,
|
||||
],
|
||||
exports: [
|
||||
ZitadelTierComponent,
|
||||
],
|
||||
})
|
||||
export class ZitadelTierModule { }
|
||||
@ -5,19 +5,7 @@
|
||||
|
||||
<h2>{{'FEATURES.TITLE' | translate}}</h2>
|
||||
<p class="top-desc">{{'FEATURES.DESCRIPTION' | translate}}</p>
|
||||
<div *ngIf="features" class="tier">
|
||||
<mat-icon class="icon">stars</mat-icon>
|
||||
<div class="text" *ngIf="features.tier">
|
||||
<p class="title"><strong>{{features.tier.name}}</strong></p>
|
||||
<p>{{features.tier?.description}}</p>
|
||||
<p>{{'FEATURES.TIERSTATES.'+features.tier.state | translate}}</p>
|
||||
<p>{{features.tier?.statusInfo}}</p>
|
||||
</div>
|
||||
<span class="fill-space"></span>
|
||||
<a class="ext" href="https://zitadel.ch/pricing" target="_blank"><i
|
||||
class="las la-external-link-alt"></i></a>
|
||||
<button mat-raised-button [routerLink]="['/iam','features']">{{'FEATURES.BTN-EDIT' | translate}}</button>
|
||||
</div>
|
||||
<cnsl-zitadel-tier [features]="features" [iam]="true"></cnsl-zitadel-tier>
|
||||
|
||||
<app-policy-grid [type]="PolicyGridType.IAM"></app-policy-grid>
|
||||
</div>
|
||||
|
||||
@ -18,47 +18,3 @@ h2 {
|
||||
text-transform: uppercase;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.tier {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 1rem;
|
||||
border-radius: .5rem;
|
||||
color: white;
|
||||
background-color: rgb(245, 203, 99);
|
||||
margin-bottom: .5rem;
|
||||
|
||||
.ext {
|
||||
margin-right: .5rem;
|
||||
align-self: center;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 1rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,6 +22,7 @@ import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module
|
||||
import { PolicyGridModule } from 'src/app/modules/policy-grid/policy-grid.module';
|
||||
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
|
||||
import { SharedModule } from 'src/app/modules/shared/shared.module';
|
||||
import { ZitadelTierModule } from 'src/app/modules/zitadel-tier/zitadel-tier.module';
|
||||
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.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';
|
||||
@ -47,6 +48,7 @@ import { IamComponent } from './iam.component';
|
||||
MetaLayoutModule,
|
||||
MatIconModule,
|
||||
MatTableModule,
|
||||
ZitadelTierModule,
|
||||
MatPaginatorModule,
|
||||
InputModule,
|
||||
MatSortModule,
|
||||
|
||||
@ -44,20 +44,7 @@
|
||||
<ng-container *ngIf="['features.read'] | hasRole | async">
|
||||
<h2>{{'FEATURES.TITLE' | translate}}</h2>
|
||||
<p class="top-desc">{{'FEATURES.DESCRIPTION' | translate}}</p>
|
||||
<div *ngIf="features" class="tier">
|
||||
<mat-icon class="icon">stars</mat-icon>
|
||||
<div class="text" *ngIf="features.tier">
|
||||
<p class="title"><strong>{{features.tier.name}}</strong></p>
|
||||
<p>{{features.tier?.description}}</p>
|
||||
<p>{{'FEATURES.TIERSTATES.'+features.tier.state | translate}}</p>
|
||||
<p>{{features.tier?.statusInfo}}</p>
|
||||
</div>
|
||||
<span class="fill-space"></span>
|
||||
<a *ngIf="['features.write'] | hasRole | async" class="ext" href="https://zitadel.ch/pricing"
|
||||
target="_blank"><i class="las la-external-link-alt"></i></a>
|
||||
|
||||
<button mat-raised-button [routerLink]="['features']">{{'FEATURES.BTN-EDIT' | translate}}</button>
|
||||
</div>
|
||||
<cnsl-zitadel-tier [features]="features"></cnsl-zitadel-tier>
|
||||
</ng-container>
|
||||
|
||||
<ng-template appHasRole [appHasRole]="['policy.read']">
|
||||
|
||||
@ -19,50 +19,6 @@ h2 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.tier {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 1rem;
|
||||
border-radius: .5rem;
|
||||
color: white;
|
||||
background-color: rgb(245, 203, 99);
|
||||
margin-bottom: .5rem;
|
||||
|
||||
.ext {
|
||||
margin-right: .5rem;
|
||||
align-self: center;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 1rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.domain {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -26,6 +26,7 @@ import { HasFeaturePipeModule } from 'src/app/pipes/has-feature-pipe/has-feature
|
||||
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
|
||||
|
||||
import { ChangesModule } from '../../modules/changes/changes.module';
|
||||
import { ZitadelTierModule } from '../../modules/zitadel-tier/zitadel-tier.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';
|
||||
@ -63,6 +64,7 @@ import { OrgsRoutingModule } from './orgs-routing.module';
|
||||
CopyToClipboardModule,
|
||||
PolicyGridModule,
|
||||
FeaturesModule,
|
||||
ZitadelTierModule,
|
||||
],
|
||||
})
|
||||
export class OrgsModule { }
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
<button color="primary" mat-raised-button class="continue-button" [disabled]="!project.name" cdkFocusInitial
|
||||
type="submit">
|
||||
{{'CONTINUE' | translate}}
|
||||
{{'ACTIONS.CONTINUE' | translate}}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@ -3,7 +3,7 @@
|
||||
<button (click)="close()" mat-icon-button>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
<span class="abort">{{ 'GRANTS.CREATE.TITLE' | translate }}</span><span class="abort-2">Step
|
||||
<h1 class="abort">{{ 'GRANTS.CREATE.TITLE' | translate }}</h1><span class="abort-2">Step
|
||||
{{ currentCreateStep }} of
|
||||
{{ STEPS }}</span>
|
||||
</div>
|
||||
@ -17,7 +17,7 @@
|
||||
</p>
|
||||
|
||||
<ng-container>
|
||||
<h1>{{'PROJECT.GRANT.CREATE.SEL_USER' | translate}}</h1>
|
||||
<h2>{{'PROJECT.GRANT.CREATE.SEL_USER' | translate}}</h2>
|
||||
|
||||
<app-search-user-autocomplete class="block" singleOutput="true" [users]="user ? [user] : []"
|
||||
(selectionChanged)="selectUser($event)"
|
||||
@ -26,7 +26,7 @@
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="context && (context == UserGrantContext.USER || context == UserGrantContext.NONE)">
|
||||
<h1>{{'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate}}</h1>
|
||||
<h2>{{'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate}}</h2>
|
||||
|
||||
<app-search-project-autocomplete class="block" singleOutput="true"
|
||||
(selectionChanged)="selectProject($event)">
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
.container {
|
||||
padding: 4rem 4rem 2rem 4rem;
|
||||
|
||||
@ -32,23 +31,6 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.formfield {
|
||||
width: 400px;
|
||||
|
||||
input {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
&.autocomplete {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -74,3 +56,9 @@
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
@mixin theme-card($theme) {
|
||||
/* stylelint-disable */
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-dark: mat-color($primary, A900);
|
||||
$primary-dark: mat.get-color-from-palette($primary, A900);
|
||||
/* stylelint-enable */
|
||||
|
||||
.theme-conent,
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
@mixin membership-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-dark: mat-color($primary, A900);
|
||||
$primary-dark: mat.get-color-from-palette($primary, A900);
|
||||
$accent: map-get($theme, accent);
|
||||
$accent-color: mat-color($accent, 500);
|
||||
$accent-color: mat.get-color-from-palette($accent, 500);
|
||||
/* stylelint-enable */
|
||||
|
||||
.membership-groups {
|
||||
|
||||
76
console/src/assets/images/zitadel-logo-solo-dark-icon.svg
Normal file
76
console/src/assets/images/zitadel-logo-solo-dark-icon.svg
Normal file
@ -0,0 +1,76 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 467 468" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(1,0,0,1,0,-492)">
|
||||
<g id="zitadel-logo-solo-lightdesign" transform="matrix(0.564847,0,0,0.659318,-1282.85,492.925)">
|
||||
<rect x="2271.15" y="0" width="826.773" height="708.241" style="fill:none;"/>
|
||||
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5923.46,-2258.26)">
|
||||
<path d="M1493.5,1056.38L1493.5,1037L1496.5,1037L1496.5,1061.62L1426.02,1020.38L1496.5,979.392L1496.5,1004L1493.5,1004L1493.5,984.608L1431.98,1020.39L1493.5,1056.38Z" style="fill:rgb(35,35,35);"/>
|
||||
</g>
|
||||
<g transform="matrix(31.0036,0,0,15.0393,-397275,-666.457)">
|
||||
<g transform="matrix(-0.0429306,-0.282967,0.160219,-0.0758207,12884.5,137.392)">
|
||||
<path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:rgb(35,35,35);"/>
|
||||
</g>
|
||||
<g transform="matrix(0.160219,0.0758207,-0.0429306,0.282967,12878.9,10.8747)">
|
||||
<path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:rgb(35,35,35);"/>
|
||||
</g>
|
||||
<g transform="matrix(-0.117289,0.207146,-0.117289,-0.207146,12943.8,65.7)">
|
||||
<path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:rgb(35,35,35);"/>
|
||||
</g>
|
||||
<g transform="matrix(-0.160219,-0.0758207,0.0429306,-0.282967,12917.4,132.195)">
|
||||
<path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:rgb(35,35,35);"/>
|
||||
</g>
|
||||
<g transform="matrix(-0.117289,0.207146,0.117289,0.207146,12897.8,5.87512)">
|
||||
<path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:rgb(35,35,35);"/>
|
||||
</g>
|
||||
<g transform="matrix(-0.0429306,-0.282967,-0.160219,0.0758207,12936.8,97.6441)">
|
||||
<path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:rgb(35,35,35);"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5928.43,-2257.12)">
|
||||
<circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5884.5,-2116.69)">
|
||||
<circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5855.22,-2023.06)">
|
||||
<circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-6234.47,-2112.14)">
|
||||
<circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5957.71,-2350.75)">
|
||||
<circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5477.99,-831.33)">
|
||||
<path d="M1499.26,757.787C1499.26,757.787 1497.37,756.489 1497,755.2C1496.71,754.182 1496.57,750.662 1496.54,750C1496.41,747.303 1499.21,745.644 1499.21,745.644L1490.01,745.835C1490.01,745.835 1493.15,745.713 1493.46,750C1493.51,750.661 1493.23,753.476 1493,755.2C1492.91,756.447 1491.2,757.668 1491.2,757.668L1499.26,757.787Z" style="fill:rgb(35,35,35);"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5404.79,-597.271)">
|
||||
<path d="M1495,760L1495,744" style="fill:none;"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5404.79,-597.271)">
|
||||
<path d="M1498.27,757.077C1498.27,757.077 1496.71,756.46 1496.65,754.8C1496.65,753.658 1496.64,753.281 1496.65,752.016C1496.62,751.334 1496.59,750.608 1496.65,749.949C1496.78,746.836 1498.5,746.156 1498.5,746.156L1491.46,745.931C1491.46,745.931 1493.37,746.719 1493.65,749.83C1493.71,750.489 1493.69,751.528 1493.65,752.209C1493.64,753.331 1493.64,753.413 1493.65,754.518C1493.68,756.334 1492.58,756.827 1492.58,756.827L1498.27,757.077Z" style="fill:rgb(35,35,35);"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5770.62,-677.495)">
|
||||
<path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5770.62,-677.495)">
|
||||
<path d="M1500.86,762.056C1500.86,762.056 1499.86,760.4 1503.09,757.456C1504.91,755.797 1507.33,754.151 1509.98,752.255C1514.82,748.79 1520.68,744.94 1526.52,741.049C1531.45,737.766 1536.38,734.479 1540.82,731.68C1544.52,729.349 1547.85,727.296 1550.54,725.8C1551.07,725.506 1551.6,725.329 1552.05,725.029C1554.73,723.257 1556.85,724.968 1556.85,724.968L1552.23,716.282C1552.23,716.282 1551.99,719.454 1550,720.997C1549.57,721.333 1549.15,721.741 1548.67,722.12C1546.2,724.053 1542.99,726.344 1539.39,728.867C1535.06,731.898 1530.13,735.166 1525.19,738.438C1519.35,742.314 1513.52,746.234 1508.49,749.329C1505.74,751.023 1503.28,752.577 1501.13,753.598C1497.99,755.086 1495.28,753.617 1495.28,753.617L1500.86,762.056Z" style="fill:rgb(35,35,35);"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,-1.16463,-3.72366,-3997,4993.28)">
|
||||
<path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,-1.16463,-3.72366,-3997,4993.28)">
|
||||
<path d="M1496.1,754.362C1496.1,754.362 1497.2,755.607 1501.13,753.598C1503.25,752.509 1505.74,751.023 1508.49,749.329C1513.52,746.234 1519.35,742.314 1525.19,738.438C1530.13,735.166 1534.94,731.832 1539.27,728.802C1542.87,726.279 1549.36,722.059 1549.81,721.75C1552.75,719.73 1552.18,718.196 1552.18,718.196L1555.28,724.152C1555.28,724.152 1553.77,722.905 1551.37,724.681C1550.93,725.006 1544.52,729.349 1540.82,731.68C1536.38,734.479 1531.45,737.766 1526.52,741.049C1520.68,744.94 1514.82,748.79 1509.98,752.255C1507.33,754.151 1504.89,755.771 1503.09,757.456C1499.47,760.841 1501.26,763.283 1501.26,763.283L1496.1,754.362Z" style="fill:rgb(35,35,35);"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,155.247,-155.247,-41.5984,201.516,76.8392)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||
<linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(155.247,-41.5984,41.5984,155.247,110.08,195.509)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||
<linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,-113.649,113.649,-113.649,258.31,215.618)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||
<linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-155.247,41.5984,-41.5984,-155.247,220.914,144.546)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||
<linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,113.649,113.649,113.649,206.837,124.661)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||
<linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,-155.247,-155.247,41.5984,152.054,262.8)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.5 KiB |
74
console/src/assets/images/zitadel-logo-solo-light-icon.svg
Normal file
74
console/src/assets/images/zitadel-logo-solo-light-icon.svg
Normal file
@ -0,0 +1,74 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 467 467" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g id="zitadel-logo-solo-darkdesign" transform="matrix(0.564847,0,0,0.659318,-1282.85,0)">
|
||||
<rect x="2271.15" y="0" width="826.773" height="708.241" style="fill:none;"/>
|
||||
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5923.46,-2258.26)">
|
||||
<path d="M1493.5,1056.38L1493.5,1037L1496.5,1037L1496.5,1061.62L1426.02,1020.38L1496.5,979.392L1496.5,1004L1493.5,1004L1493.5,984.608L1431.98,1020.39L1493.5,1056.38Z" style="fill:white;"/>
|
||||
</g>
|
||||
<g transform="matrix(31.0036,0,0,15.0393,-397275,-666.457)">
|
||||
<g transform="matrix(-0.0429306,-0.282967,0.160219,-0.0758207,12884.5,137.392)">
|
||||
<path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:white;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.160219,0.0758207,-0.0429306,0.282967,12878.9,10.8747)">
|
||||
<path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:white;"/>
|
||||
</g>
|
||||
<g transform="matrix(-0.117289,0.207146,-0.117289,-0.207146,12943.8,65.7)">
|
||||
<path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:white;"/>
|
||||
</g>
|
||||
<g transform="matrix(-0.160219,-0.0758207,0.0429306,-0.282967,12917.4,132.195)">
|
||||
<path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:white;"/>
|
||||
</g>
|
||||
<g transform="matrix(-0.117289,0.207146,0.117289,0.207146,12897.8,5.87512)">
|
||||
<path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:white;"/>
|
||||
</g>
|
||||
<g transform="matrix(-0.0429306,-0.282967,-0.160219,0.0758207,12936.8,97.6441)">
|
||||
<path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:white;"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5928.43,-2257.12)">
|
||||
<circle cx="1496" cy="1004" r="7" style="fill:white;"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5884.5,-2116.69)">
|
||||
<circle cx="1496" cy="1004" r="7" style="fill:white;"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5855.22,-2023.06)">
|
||||
<circle cx="1496" cy="1004" r="7" style="fill:white;"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-6234.47,-2112.14)">
|
||||
<circle cx="1496" cy="1004" r="7" style="fill:white;"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5957.71,-2350.75)">
|
||||
<circle cx="1496" cy="1004" r="7" style="fill:white;"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5477.99,-831.33)">
|
||||
<path d="M1499.26,757.787C1499.26,757.787 1497.37,756.489 1497,755.2C1496.71,754.182 1496.57,750.662 1496.54,750C1496.41,747.303 1499.21,745.644 1499.21,745.644L1490.01,745.835C1490.01,745.835 1493.15,745.713 1493.46,750C1493.51,750.661 1493.23,753.476 1493,755.2C1492.91,756.447 1491.2,757.668 1491.2,757.668L1499.26,757.787Z" style="fill:white;"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5404.79,-597.271)">
|
||||
<path d="M1495,760L1495,744" style="fill:none;"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5404.79,-597.271)">
|
||||
<path d="M1498.27,757.077C1498.27,757.077 1496.71,756.46 1496.65,754.8C1496.65,753.658 1496.64,753.281 1496.65,752.016C1496.62,751.334 1496.59,750.608 1496.65,749.949C1496.78,746.836 1498.5,746.156 1498.5,746.156L1491.46,745.931C1491.46,745.931 1493.37,746.719 1493.65,749.83C1493.71,750.489 1493.69,751.528 1493.65,752.209C1493.64,753.331 1493.64,753.413 1493.65,754.518C1493.68,756.334 1492.58,756.827 1492.58,756.827L1498.27,757.077Z" style="fill:white;"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5770.62,-677.495)">
|
||||
<path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5770.62,-677.495)">
|
||||
<path d="M1500.86,762.056C1500.86,762.056 1499.86,760.4 1503.09,757.456C1504.91,755.797 1507.33,754.151 1509.98,752.255C1514.82,748.79 1520.68,744.94 1526.52,741.049C1531.45,737.766 1536.38,734.479 1540.82,731.68C1544.52,729.349 1547.85,727.296 1550.54,725.8C1551.07,725.506 1551.6,725.329 1552.05,725.029C1554.73,723.257 1556.85,724.968 1556.85,724.968L1552.23,716.282C1552.23,716.282 1551.99,719.454 1550,720.997C1549.57,721.333 1549.15,721.741 1548.67,722.12C1546.2,724.053 1542.99,726.344 1539.39,728.867C1535.06,731.898 1530.13,735.166 1525.19,738.438C1519.35,742.314 1513.52,746.234 1508.49,749.329C1505.74,751.023 1503.28,752.577 1501.13,753.598C1497.99,755.086 1495.28,753.617 1495.28,753.617L1500.86,762.056Z" style="fill:white;"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,-1.16463,-3.72366,-3997,4993.28)">
|
||||
<path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
|
||||
</g>
|
||||
<g transform="matrix(4.96737,-1.14029,-1.16463,-3.72366,-3997,4993.28)">
|
||||
<path d="M1496.1,754.362C1496.1,754.362 1497.2,755.607 1501.13,753.598C1503.25,752.509 1505.74,751.023 1508.49,749.329C1513.52,746.234 1519.35,742.314 1525.19,738.438C1530.13,735.166 1534.94,731.832 1539.27,728.802C1542.87,726.279 1549.36,722.059 1549.81,721.75C1552.75,719.73 1552.18,718.196 1552.18,718.196L1555.28,724.152C1555.28,724.152 1553.77,722.905 1551.37,724.681C1550.93,725.006 1544.52,729.349 1540.82,731.68C1536.38,734.479 1531.45,737.766 1526.52,741.049C1520.68,744.94 1514.82,748.79 1509.98,752.255C1507.33,754.151 1504.89,755.771 1503.09,757.456C1499.47,760.841 1501.26,763.283 1501.26,763.283L1496.1,754.362Z" style="fill:white;"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,155.247,-155.247,-41.5984,201.516,76.8392)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||
<linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(155.247,-41.5984,41.5984,155.247,110.08,195.509)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||
<linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,-113.649,113.649,-113.649,258.31,215.618)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||
<linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-155.247,41.5984,-41.5984,-155.247,220.914,144.546)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||
<linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,113.649,113.649,113.649,206.837,124.661)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||
<linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,-155.247,-155.247,41.5984,152.054,262.8)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.0 KiB |
@ -17,6 +17,7 @@
|
||||
@import 'src/app/modules/form-field/form-field.component.scss';
|
||||
@import 'src/app/modules/label/label.component.scss';
|
||||
@import 'src/app/modules/meta-layout/meta.scss';
|
||||
@import 'src/app/modules/zitadel-tier/zitadel-tier.component.scss';
|
||||
@import 'src/app/modules/onboarding/onboarding.component.scss';
|
||||
|
||||
@mixin component-themes($theme) {
|
||||
@ -40,4 +41,5 @@
|
||||
@include meta-theme($theme);
|
||||
@include info-section-theme($theme);
|
||||
@include onboarding-theme($theme);
|
||||
@include tier-theme($theme);
|
||||
}
|
||||
|
||||
@ -13,4 +13,4 @@ export const environment = {
|
||||
* This import should be commented out in production mode because it will have a negative impact
|
||||
* on performance if an error is thrown.
|
||||
*/
|
||||
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
|
||||
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<link href="https://fonts.googleapis.com/css?family=Manjari|Roboto+Slab&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||
import 'zone.js'; // Included with Angular CLI.
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
// Custom Theming for Angular Material
|
||||
// For more information: https://material.angular.io/guide/theming
|
||||
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
@import './component-themes';
|
||||
|
||||
// Plus imports for other components in your app.
|
||||
@ -41,21 +42,22 @@ $caos-dark-brand: (
|
||||
A700: #8795a1,
|
||||
A800: #2d2e30,
|
||||
A900: #212224,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
contrast:
|
||||
(
|
||||
50: rgba(black, .87),
|
||||
100: rgba(black, .87),
|
||||
200: rgba(black, .87),
|
||||
300: rgba(black, .87),
|
||||
400: rgba(black, .87),
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: white,
|
||||
900: white,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: white,
|
||||
A100: rgba(black, .87),
|
||||
A200: rgba(black, .87),
|
||||
A400: rgba(black, .87),
|
||||
A700: white
|
||||
)
|
||||
);
|
||||
|
||||
@ -79,7 +81,8 @@ $caos-light-brand: (
|
||||
A700: #8795a1,
|
||||
A800: white,
|
||||
A900: #fafafa,
|
||||
contrast: (
|
||||
contrast:
|
||||
(
|
||||
50: #3d4852,
|
||||
100: #3d4852,
|
||||
200: #3d4852,
|
||||
@ -93,7 +96,7 @@ $caos-light-brand: (
|
||||
A100: #3d4852,
|
||||
A200: #3d4852,
|
||||
A400: #3d4852,
|
||||
A700: white,
|
||||
A700: white
|
||||
)
|
||||
);
|
||||
|
||||
@ -112,49 +115,47 @@ $caos-accent-color: (
|
||||
A200: #8bffde,
|
||||
A400: #58ffd0,
|
||||
A700: #3effc9,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
contrast:
|
||||
(
|
||||
50: rgba(black, .87),
|
||||
100: rgba(black, .87),
|
||||
200: rgba(black, .87),
|
||||
300: rgba(black, .87),
|
||||
400: rgba(black, .87),
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: white,
|
||||
900: white,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: white,
|
||||
A100: rgba(black, .87),
|
||||
A200: rgba(black, .87),
|
||||
A400: rgba(black, .87),
|
||||
A700: white
|
||||
)
|
||||
);
|
||||
// Define the palettes for your theme using the Material Design palettes available in palette.scss
|
||||
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
|
||||
// hue. Available color palettes: https://material.io/design/color/
|
||||
|
||||
$light-primary: mat-palette($caos-light-brand);
|
||||
$light-accent: mat-palette($caos-accent-color);
|
||||
$light-warn: mat-palette($mat-red);
|
||||
$light-primary: mat.define-palette($caos-light-brand);
|
||||
$light-accent: mat.define-palette($caos-accent-color);
|
||||
$light-warn: mat.define-palette(mat.$red-palette);
|
||||
|
||||
$dark-primary: mat-palette($caos-dark-brand);
|
||||
$dark-accent: mat-palette($mat-pink);
|
||||
$dark-warn: mat-palette($mat-red);
|
||||
$dark-primary: mat.define-palette($caos-dark-brand);
|
||||
$dark-accent: mat.define-palette(mat.$pink-palette);
|
||||
$dark-warn: mat.define-palette(mat.$red-palette);
|
||||
|
||||
$light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);
|
||||
$light-theme: mat.define-light-theme($light-primary, $light-accent, $light-warn);
|
||||
|
||||
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
|
||||
$dark-theme: mat.define-dark-theme($dark-primary, $dark-accent, $dark-warn);
|
||||
|
||||
$custom-typography:
|
||||
mat-typography-config(
|
||||
$font-family: 'Lato'
|
||||
);
|
||||
$custom-typography: mat.define-typography-config($font-family: 'Lato');
|
||||
|
||||
@include mat-core($custom-typography);
|
||||
@include mat.core($custom-typography);
|
||||
|
||||
// default theme
|
||||
@include component-themes($dark-theme);
|
||||
@include angular-material-theme($dark-theme);
|
||||
@include mat.all-component-themes($dark-theme);
|
||||
|
||||
.mat-dialog-container,
|
||||
.mat-raised-button,
|
||||
@ -164,7 +165,7 @@ $custom-typography:
|
||||
|
||||
.light-theme {
|
||||
@include component-themes($light-theme);
|
||||
@include angular-material-theme($light-theme);
|
||||
@include mat.all-component-themes($light-theme);
|
||||
|
||||
--grey: #697386;
|
||||
--color-main: #5469d4;
|
||||
@ -202,7 +203,7 @@ $custom-typography:
|
||||
|
||||
.dark-theme {
|
||||
@include component-themes($dark-theme);
|
||||
@include angular-material-theme($dark-theme);
|
||||
@include mat.all-component-themes($dark-theme);
|
||||
|
||||
--color-main: #5282c1;
|
||||
|
||||
@ -239,7 +240,7 @@ $custom-typography:
|
||||
box-shadow: inset 0 -1px #303131;
|
||||
}
|
||||
}
|
||||
// @include mat-checkbox-theme($candy-app-theme);
|
||||
// @include mat.checkbox-theme($candy-app-theme);
|
||||
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
|
||||
@ -265,8 +266,13 @@ body {
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.mat-paginator .mat-select {
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
@mixin cnsl-error-theme($theme) {
|
||||
$warn: map-get($theme, warn);
|
||||
$warn-color: mat-color($warn, 500);
|
||||
$warn-color: mat.get-color-from-palette($warn, 500);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
.cnsl-error {
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
@mixin input-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-dark: mat-color($primary, A900);
|
||||
$secondary-dark: mat-color($primary, A800);
|
||||
$inv-color: mat-color($primary, A600);
|
||||
$primary-color: mat-color($primary, 500);
|
||||
$primary-light-color: mat-color($primary, 200);
|
||||
$primary-dark: mat.get-color-from-palette($primary, A900);
|
||||
$secondary-dark: mat.get-color-from-palette($primary, A800);
|
||||
$inv-color: mat.get-color-from-palette($primary, A600);
|
||||
$primary-color: mat.get-color-from-palette($primary, 500);
|
||||
$primary-light-color: mat.get-color-from-palette($primary, 200);
|
||||
$warn: map-get($theme, warn);
|
||||
$warn-color: mat-color($warn, 500);
|
||||
$warn-color: mat.get-color-from-palette($warn, 500);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
padding: 10px;
|
||||
transition: border-color .2s ease-in-out;
|
||||
width: 100%;
|
||||
color: mat-color($foreground, text);
|
||||
color: mat.get-color-from-palette($foreground, text);
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:hover {
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
@mixin link-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-color: mat-color($primary, 500);
|
||||
$primary-color-lighter: mat-color($primary, A300);
|
||||
$primary-color: mat.get-color-from-palette($primary, 500);
|
||||
$primary-color-lighter: mat.get-color-from-palette($primary, A300);
|
||||
|
||||
a {
|
||||
color: $primary-color;
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
@mixin sidenav-list-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$primary-color: mat-color($primary, 500);
|
||||
$accent-color: mat-color($accent, 500);
|
||||
$primary-dark: mat-color($primary, A900);
|
||||
$primary-color: mat.get-color-from-palette($primary, 500);
|
||||
$accent-color: mat.get-color-from-palette($accent, 500);
|
||||
$primary-dark: mat.get-color-from-palette($primary, A900);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$sec-dark: mat-color($primary, A800);
|
||||
$sec-dark: mat.get-color-from-palette($primary, A800);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
/* stylelint-enable */
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
color: mat-color($foreground, text) !important;
|
||||
color: mat.get-color-from-palette($foreground, text) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: if($is-dark-theme, $sec-dark, rgb(84 105 212 / 6%));
|
||||
@ -48,7 +48,7 @@
|
||||
background-color: $primary-dark;
|
||||
border-radius: .5rem;
|
||||
|
||||
@include mat-elevation(5);
|
||||
@include mat.elevation(5);
|
||||
|
||||
.active {
|
||||
color: $primary-color !important;
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
@import '~@angular/material/theming';
|
||||
@use '~@angular/material' as mat;
|
||||
|
||||
@mixin table-theme($theme) {
|
||||
/* stylelint-disable */
|
||||
$primary: map-get($theme, primary);
|
||||
$warn: map-get($theme, warn);
|
||||
$warn-color: mat-color($warn, 500);
|
||||
$primary-color: mat-color($primary, 500);
|
||||
$primary-dark: mat-color($primary, A900);
|
||||
$secondary-dark: mat-color($primary, A800);
|
||||
$inv-color: mat-color($primary, A600);
|
||||
$warn-color: mat.get-color-from-palette($warn, 500);
|
||||
$primary-color: mat.get-color-from-palette($primary, 500);
|
||||
$primary-dark: mat.get-color-from-palette($primary, A900);
|
||||
$secondary-dark: mat.get-color-from-palette($primary, A800);
|
||||
$inv-color: mat.get-color-from-palette($primary, A600);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
.app-label {
|
||||
font-size: 12px;
|
||||
border-radius: 1rem;
|
||||
color: mat-color($foreground, text);
|
||||
color: mat.get-color-from-palette($foreground, text);
|
||||
white-space: nowrap;
|
||||
background-color: var(--grey);
|
||||
padding: 3px 1rem;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||
|
||||
import 'zone.js/dist/zone-testing';
|
||||
import 'zone.js/testing';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user