From 7d3c768d8b3ebcfc4d1fb7970a84d98a7d46f006 Mon Sep 17 00:00:00 2001 From: Max Peintner Date: Wed, 28 Jul 2021 14:59:52 +0200 Subject: [PATCH] feat(console): apply private labeling settings (#2059) * fetch org design an calc palette * distinct theme deriv * calculate self theme * background palette, fix styles * component fixes, warn color * warn color * stylelint config, set warn color * lint * fallback theme * lint * granted, owned proejct grid * dynamic privacy policy, fix home layout, dismissables, info-section * lint * apply theme from settings * enable cache * fix: add primary tint --- console/.stylelintrc | 1 + console/angular.json | 8 +- console/package-lock.json | 14 + console/package.json | 2 + console/src/app/app.component.html | 36 +- console/src/app/app.component.ts | 541 ++++++++++-------- .../modules/app-card/app-card.component.scss | 6 +- .../app-auth-method-radio.component.scss | 2 +- .../app-type-radio.component.scss | 2 +- .../src/app/modules/card/card.component.html | 2 +- .../src/app/modules/card/card.component.scss | 5 +- .../src/app/modules/card/card.component.ts | 37 +- console/src/app/modules/card/card.scss | 16 +- .../modules/changes/changes.component.scss | 9 +- .../detail-layout.component.scss | 2 +- .../modules/features/features.component.html | 2 +- .../info-section/info-section.component.scss | 20 +- .../onboarding/onboarding.component.scss | 6 +- .../login-policy/login-policy.component.html | 4 +- .../login-policy/login-policy.component.scss | 5 - .../preview/preview.component.scss | 6 +- .../private-labeling-policy.component.html | 23 +- .../private-labeling-policy.component.scss | 37 +- .../private-labeling-policy.component.ts | 24 + .../src/app/pages/home/home.component.html | 14 +- .../src/app/pages/home/home.component.scss | 22 +- console/src/app/pages/home/home.component.ts | 44 +- .../apps/app-create/app-create.component.html | 2 +- .../granted-project-grid.component.html | 6 +- .../granted-project-grid.component.scss | 11 +- .../owned-project-grid.component.html | 6 +- .../owned-project-grid.component.scss | 11 +- .../user-create-machine.component.html | 2 +- .../user-create/user-create.component.html | 2 +- .../auth-user-detail.component.html | 2 +- .../theme-setting/theme-card.scss | 6 +- .../theme-setting.component.scss | 12 - .../memberships/memberships.component.scss | 7 +- .../user-detail/user-detail.component.html | 2 +- console/src/app/services/theme.service.ts | 78 ++- console/src/assets/i18n/de.json | 2 +- console/src/assets/i18n/en.json | 2 +- console/src/component-themes.scss | 4 + console/src/styles.scss | 431 ++++++++++---- console/src/styles/input.scss | 30 +- console/src/styles/sidenav-list.scss | 35 +- console/src/styles/table.scss | 10 +- 47 files changed, 963 insertions(+), 588 deletions(-) diff --git a/console/.stylelintrc b/console/.stylelintrc index d6b1e28b0a..0d92b73617 100644 --- a/console/.stylelintrc +++ b/console/.stylelintrc @@ -4,6 +4,7 @@ ], "extends": "stylelint-config-standard", "rules": { + "value-keyword-case": null, "at-rule-no-unknown": null, "no-descending-specificity": null, "at-rule-empty-line-before": [ diff --git a/console/angular.json b/console/angular.json index f842ede591..8e6760ea59 100644 --- a/console/angular.json +++ b/console/angular.json @@ -30,7 +30,9 @@ "styles": [ "src/styles.scss" ], - "scripts": [], + "scripts": [ + "./node_modules/tinycolor2/dist/tinycolor-min.js" + ], "allowedCommonJsDependencies": [ "@angular/common/locales/de", "src/app/proto/generated/**", @@ -132,7 +134,9 @@ "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css", "src/styles.scss" ], - "scripts": [] + "scripts": [ + "./node_modules/tinycolor2/dist/tinycolor-min.js" + ] } }, "lint": { diff --git a/console/package-lock.json b/console/package-lock.json index cf6b856321..f2b4fc7395 100644 --- a/console/package-lock.json +++ b/console/package-lock.json @@ -37,6 +37,7 @@ "ngx-color": "^7.2.0", "ngx-quicklink": "^0.2.6", "rxjs": "~6.6.7", + "tinycolor2": "^1.4.2", "ts-protoc-gen": "^0.14.0", "tslib": "^2.2.0", "uuid": "^8.3.2", @@ -17359,6 +17360,14 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, + "node_modules/tinycolor2": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", + "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==", + "engines": { + "node": "*" + } + }, "node_modules/tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -32825,6 +32834,11 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, + "tinycolor2": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", + "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", diff --git a/console/package.json b/console/package.json index cbca0835c3..89a56602d5 100644 --- a/console/package.json +++ b/console/package.json @@ -38,8 +38,10 @@ "libphonenumber-js": "^1.9.16", "moment": "^2.29.1", "ngx-color": "^7.2.0", + "ngx-image-cropper": "^3.3.5", "ngx-quicklink": "^0.2.6", "rxjs": "~6.6.7", + "tinycolor2": "^1.4.2", "ts-protoc-gen": "^0.14.0", "tslib": "^2.2.0", "uuid": "^8.3.2", diff --git a/console/src/app/app.component.html b/console/src/app/app.component.html index 1bc9818b6d..13d0a3d765 100644 --- a/console/src/app/app.component.html +++ b/console/src/app/app.component.html @@ -5,18 +5,20 @@ (click)="drawer.toggle()"> - - - - - - + + + + + + + - - - + + + + - diff --git a/console/src/app/modules/policies/login-policy/login-policy.component.scss b/console/src/app/modules/policies/login-policy/login-policy.component.scss index 258f4ccb09..e9b71f6fe8 100644 --- a/console/src/app/modules/policies/login-policy/login-policy.component.scss +++ b/console/src/app/modules/policies/login-policy/login-policy.component.scss @@ -95,11 +95,6 @@ padding: 2px; } - .meta-info { - font-size: 12px; - color: #fafafa; - } - .rm { color: #f44336; position: absolute; diff --git a/console/src/app/modules/policies/private-labeling-policy/preview/preview.component.scss b/console/src/app/modules/policies/private-labeling-policy/preview/preview.component.scss index 7e62a99413..64df8395db 100644 --- a/console/src/app/modules/policies/private-labeling-policy/preview/preview.component.scss +++ b/console/src/app/modules/policies/private-labeling-policy/preview/preview.component.scss @@ -19,7 +19,7 @@ .dashed { border: 2px dashed rgba(#697386, .5); - border-radius: 1rem; + border-radius: .5rem; padding: 100px 20px; .login-wrapper { @@ -74,16 +74,12 @@ } &.light { - background: #fff; - .login-wrapper *:not(.cnsl-label):not(.mat-button-wrapper) { color: #000; } } &.dark { - background: #212224; - .login-wrapper *:not(.cnsl-label):not(.mat-button-wrapper) { color: #fff; } diff --git a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html index 84e5fa2c75..cc69263561 100644 --- a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html +++ b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html @@ -66,7 +66,7 @@
-
+
remove_circle dark logo preview
@@ -90,11 +90,10 @@ (dropped)="onDropLogo(theme, $event)" [class.hovering]="isHoveringOverDarkLogo">
@@ -130,11 +129,10 @@ (dropped)="onDropIcon(theme, $event)" [class.hovering]="isHoveringOverDarkIcon"> @@ -219,11 +217,10 @@ (dropped)="onDropFont($event)" [class.hovering]="isHoveringOverFont"> diff --git a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss index 3432162a8a..86ff8455f3 100644 --- a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss +++ b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss @@ -6,6 +6,8 @@ $primary: map-get($theme, primary); $primary-color: mat.get-color-from-palette($primary, 500); $is-dark-theme: map-get($theme, is-dark); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); .policy { .header { @@ -157,8 +159,6 @@ margin-bottom: 2rem; .expansion { - background: if($is-dark-theme, #2d2e30, #fff) !important; - .header { justify-content: flex-start; } @@ -189,8 +189,7 @@ height: 150px; width: 100%; border-radius: .5rem; - background: if($is-dark-theme, #2d2e30, #fff); - border: 1px solid if($is-dark-theme, #4a4b4b, #ddd); + border: 1px solid map-get($foreground, divider); display: flex; justify-content: center; align-items: center; @@ -202,11 +201,8 @@ flex-direction: column; align-items: center; - .btn { + a { margin-bottom: .5rem; - } - - .btn:not[disabled] { cursor: pointer; } @@ -272,32 +268,29 @@ margin-bottom: 1rem; .img-wrapper { - flex: 1; position: relative; - min-height: 80px; - border: 1px solid if($is-dark-theme, #ffffff20, #00000020); - border-radius: .5rem; - max-width: 120px; + height: 80px; + width: 80px; + border-radius: 50vw; + background-color: #00000020; .dl-btn { z-index: 2; position: absolute; - top: -12px; - left: -12px; + top: 0; + left: 0; cursor: pointer; visibility: hidden; } .prev, .curr { - position: absolute; - top: 50%; - transform: translateY(-50%); + top: 0; left: 0; - max-height: 80px; - max-width: 120px; + width: 80px; + height: 80px; object-fit: contain; - border-radius: .5rem; + border-radius: 50%; } &:hover { @@ -412,7 +405,7 @@ position: absolute; top: .5rem; left: .5rem; - border-radius: 10px !important; + border-radius: 8px !important; z-index: 1; span { diff --git a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts index 5cf035c0ee..89e81315b0 100644 --- a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts +++ b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts @@ -22,6 +22,7 @@ import { AssetEndpoint, AssetService, AssetType } from 'src/app/services/asset.s import { GrpcAuthService } from 'src/app/services/grpc-auth.service'; import { ManagementService } from 'src/app/services/mgmt.service'; import { StorageService } from 'src/app/services/storage.service'; +import { ThemeService } from 'src/app/services/theme.service'; import { ToastService } from 'src/app/services/toast.service'; import { GridPolicy, PRIVATELABEL_POLICY } from '../../policy-grid/policies'; @@ -95,6 +96,7 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { private assetService: AssetService, private sanitizer: DomSanitizer, private storageService: StorageService, + private themeService: ThemeService, ) { const org: Org.AsObject | null = (this.storageService.getItem(ORG_STORAGE_KEY)); @@ -587,6 +589,7 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { if (data.policy) { this.data = data.policy; + this.applyToConsole(data.policy); this.loadImages(); } }); @@ -603,6 +606,7 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { if (data.policy) { this.data = data.policy; + this.applyToConsole(data.policy); this.loadImages(); } }); @@ -613,6 +617,26 @@ export class PrivateLabelingPolicyComponent implements OnDestroy { } } + private applyToConsole(labelpolicy: LabelPolicy.AsObject): void { + const darkPrimary = labelpolicy?.primaryColorDark || '#5282c1'; + const lightPrimary = labelpolicy?.primaryColor || '#5282c1'; + + const darkWarn = labelpolicy?.warnColorDark || '#F44336'; + const lightWarn = labelpolicy?.warnColor || '#F44336'; + + const darkBackground = labelpolicy?.backgroundColorDark || '#212224'; + const lightBackground = labelpolicy?.backgroundColor || '#fafafa'; + + this.themeService.savePrimaryColor(darkPrimary, true); + this.themeService.savePrimaryColor(lightPrimary, false); + + this.themeService.saveWarnColor(darkWarn, true); + this.themeService.saveWarnColor(lightWarn, false); + + this.themeService.saveBackgroundColor(darkBackground, true); + this.themeService.saveBackgroundColor(lightBackground, false); + } + public resetPolicy(): Promise { return (this.service as ManagementService).resetLabelPolicyToDefault().then(() => { this.toast.showInfo('POLICY.PRIVATELABELING.RESET', true); diff --git a/console/src/app/pages/home/home.component.html b/console/src/app/pages/home/home.component.html index 57be09be80..586ffe4b3a 100644 --- a/console/src/app/pages/home/home.component.html +++ b/console/src/app/pages/home/home.component.html @@ -4,7 +4,7 @@

{{'HOME.WELCOMESENTENCE' | translate}}

-
+

{{'ONBOARDING.HEADER' | translate}}

@@ -17,7 +17,7 @@ -

{{'HOME.QUICKSTARTS.LABEL' | translate}}

{{'HOME.QUICKSTARTS.TITLE' | translate}}

@@ -35,7 +35,7 @@ - +

@@ -66,7 +66,7 @@ - +

{{'HOME.SECURITYANDPRIVACY'| translate}}

@@ -83,7 +83,7 @@ - +

@@ -104,7 +104,7 @@ - +

{{'HOME.PROTECTION'| translate}}

@@ -132,7 +132,7 @@ - +

diff --git a/console/src/app/pages/home/home.component.scss b/console/src/app/pages/home/home.component.scss index f9e33b72a3..28cb13d8e5 100644 --- a/console/src/app/pages/home/home.component.scss +++ b/console/src/app/pages/home/home.component.scss @@ -18,21 +18,23 @@ } } - .container { - display: flex; - flex-wrap: wrap; - margin: -1rem; + .gridcontainer { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; justify-content: space-evenly; + @media only screen and (max-width: 899px) { + grid-template-columns: 1fr; + } + .onboard, .quickstart { text-decoration: none; cursor: pointer; box-sizing: border-box; - flex: 1 0 45%; position: relative; border-radius: .5rem; - margin: 1rem; padding: 1.5rem; box-shadow: 0 3px 8px 0 rgb(0 0 0 / 6%); @@ -96,12 +98,14 @@ } } - .item { - flex: 1 0 45%; - margin: 0 1rem; + .griditem { display: flex; flex-direction: column; + .card { + margin: 0 !important; + } + .top { h2 { margin-top: .5rem; diff --git a/console/src/app/pages/home/home.component.ts b/console/src/app/pages/home/home.component.ts index d7caf2ab83..b2cd776d9a 100644 --- a/console/src/app/pages/home/home.component.ts +++ b/console/src/app/pages/home/home.component.ts @@ -2,32 +2,32 @@ import { Component } from '@angular/core'; import { GrpcAuthService } from 'src/app/services/grpc-auth.service'; @Component({ - selector: 'app-home', - templateUrl: './home.component.html', - styleUrls: ['./home.component.scss'], + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.scss'], }) export class HomeComponent { - public dark: boolean = true; - public firstStepsDismissed: boolean = false; - public quickstartsDismissed: boolean = false; + public dark: boolean = true; + public firstStepsDismissed: boolean = false; + public quickstartsDismissed: boolean = false; - constructor(public authService: GrpcAuthService) { - const theme = localStorage.getItem('theme'); - this.dark = theme === 'dark-theme' ? true : theme === 'light-theme' ? false : true; + constructor(public authService: GrpcAuthService) { + const theme = localStorage.getItem('theme'); + this.dark = theme === 'dark-theme' ? true : theme === 'light-theme' ? false : true; - this.firstStepsDismissed = localStorage.getItem('firstStartDismissed') === 'true' ? true : false; - this.quickstartsDismissed = localStorage.getItem('quickstartsDismissed') === 'true' ? true : false; - } + this.firstStepsDismissed = localStorage.getItem('firstStartDismissed') === 'true' ? true : false; + this.quickstartsDismissed = localStorage.getItem('quickstartsDismissed') === 'true' ? true : false; + } - dismissFirstSteps(event: Event): void { - event.preventDefault(); - localStorage.setItem('firstStartDismissed', 'true'); - this.firstStepsDismissed = true; - } + dismissFirstSteps(event: Event): void { + event.preventDefault(); + localStorage.setItem('firstStartDismissed', 'true'); + this.firstStepsDismissed = true; + } - dismissQuickstarts(event: Event): void { - event.preventDefault(); - localStorage.setItem('quickstartsDismissed', 'true'); - this.firstStepsDismissed = true; - } + dismissQuickstarts(event: Event): void { + event.preventDefault(); + localStorage.setItem('quickstartsDismissed', 'true'); + this.quickstartsDismissed = true; + } } diff --git a/console/src/app/pages/projects/apps/app-create/app-create.component.html b/console/src/app/pages/projects/apps/app-create/app-create.component.html index 14ebe03196..bc66ef220f 100644 --- a/console/src/app/pages/projects/apps/app-create/app-create.component.html +++ b/console/src/app/pages/projects/apps/app-create/app-create.component.html @@ -9,7 +9,7 @@

{{'APP.PAGES.CREATE_OIDC_DESC_TITLE' | translate}}

{{'APP.PAGES.CREATE_OIDC_DESC_SUB' | translate}}

- + {{'APP.OIDC.PROSWITCH' | translate}} diff --git a/console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.html b/console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.html index 95ad644966..0ac06e293a 100644 --- a/console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.html +++ b/console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.html @@ -3,8 +3,8 @@
-
- +
+

{{'PROJECT.PAGES.PINNED' | translate}}

@@ -28,7 +28,7 @@
-
+

{{'PROJECT.PAGES.ALL' | translate}}

-
- +
+

{{'PROJECT.PAGES.PINNED' | translate}}

@@ -31,7 +31,7 @@
-
+

{{'PROJECT.PAGES.ALL' | translate}}

- +
diff --git a/console/src/app/pages/users/user-create/user-create.component.html b/console/src/app/pages/users/user-create/user-create.component.html index bd5f622180..64c86a1aba 100644 --- a/console/src/app/pages/users/user-create/user-create.component.html +++ b/console/src/app/pages/users/user-create/user-create.component.html @@ -1,6 +1,6 @@ - +
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html index d0fa290b90..8583345c71 100644 --- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html +++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html @@ -10,7 +10,7 @@
- + {{ 'USER.PAGES.NOUSER' | translate }} diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card.scss b/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card.scss index fbb40467b3..b9a5ccfc3b 100644 --- a/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card.scss +++ b/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card.scss @@ -3,12 +3,14 @@ @mixin theme-card($theme) { /* stylelint-disable */ $primary: map-get($theme, primary); - $primary-dark: mat.get-color-from-palette($primary, A900); + $background: map-get($theme, background); + $is-dark-theme: map-get($theme, is-dark); + $back: map-get($background, background); /* stylelint-enable */ .theme-conent, .crescent { - background-color: $primary-dark; + background-color: $back; transition: background-color .3s cubic-bezier(.645, .045, .355, 1); // cubic-bezier(.645, .045, .355, 1); } } diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-setting.component.scss b/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-setting.component.scss index 2e57d35d5f..b00ed30447 100644 --- a/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-setting.component.scss +++ b/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-setting.component.scss @@ -1,6 +1,3 @@ -$dark-background: #212224; -$light-background: rgb(220, 220, 220); - :root { transition: none; } @@ -31,7 +28,6 @@ $light-background: rgb(220, 220, 220); right: 0; width: 40px; height: 40px; - background: $light-background; transform: scale(0); transform-origin: top right; transition: transform .2s cubic-bezier(.645, .045, .355, 1); @@ -57,7 +53,6 @@ label { .toggle { position: absolute; - background-color: $light-background; box-shadow: 0 2px 15px rgba(0, 0, 0, .15); } @@ -82,7 +77,6 @@ label { [type="checkbox"]:checked { .toggle { transform: translateX(100%); - background-color: $dark-background; } .light { @@ -101,7 +95,6 @@ label { [type="checkbox"]:checked + .theme-app .crescent { transform: scale(1); - background: $dark-background; } [type="checkbox"]:checked + .theme-app .circle { @@ -111,8 +104,3 @@ label { [type="checkbox"]:checked + .theme-app .main-circle { background: linear-gradient(40deg, #8983f7, #a3dafb 70%); } - -[type="checkbox"]:checked + .app .toggle { - transform: translateX(100%); - background-color: #34323d; -} diff --git a/console/src/app/pages/users/user-detail/memberships/memberships.component.scss b/console/src/app/pages/users/user-detail/memberships/memberships.component.scss index 82ce60a381..bc5e21936c 100644 --- a/console/src/app/pages/users/user-detail/memberships/memberships.component.scss +++ b/console/src/app/pages/users/user-detail/memberships/memberships.component.scss @@ -3,9 +3,8 @@ @mixin membership-theme($theme) { /* stylelint-disable */ $primary: map-get($theme, primary); - $primary-dark: mat.get-color-from-palette($primary, A900); - $accent: map-get($theme, accent); - $accent-color: mat.get-color-from-palette($accent, 500); + $is-dark-theme: map-get($theme, is-dark); + $primary-color: mat.get-color-from-palette($primary, 500); /* stylelint-enable */ .membership-groups { @@ -91,7 +90,7 @@ font-size: 8px; border-radius: .5rem; transition: background-color .3s cubic-bezier(.645, .045, .355, 1); - background-color: $accent-color; + background-color: $primary-color; cursor: pointer; flex-direction: column; overflow: hidden; diff --git a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html index 5ea40d1be2..abd274ca46 100644 --- a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html +++ b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html @@ -24,7 +24,7 @@
- + {{ 'USER.PAGES.NOUSER' | translate }} diff --git a/console/src/app/services/theme.service.ts b/console/src/app/services/theme.service.ts index c7d26a3211..656d79ceb1 100644 --- a/console/src/app/services/theme.service.ts +++ b/console/src/app/services/theme.service.ts @@ -1,12 +1,80 @@ import { Injectable } from '@angular/core'; import { Observable, Subject } from 'rxjs'; +declare const tinycolor: any; + +export interface Color { + name: string; + hex: string; + darkContrast: boolean; +} + @Injectable() export class ThemeService { - private _darkTheme: Subject = new Subject(); - public isDarkTheme: Observable = this._darkTheme.asObservable(); + private _darkTheme: Subject = new Subject(); + public isDarkTheme: Observable = this._darkTheme.asObservable(); - setDarkTheme(isDarkTheme: boolean): void { - this._darkTheme.next(isDarkTheme); - } + private primaryColorPalette: Color[] = []; + private warnColorPalette: Color[] = []; + private backgroundColorPalette: Color[] = []; + + setDarkTheme(isDarkTheme: boolean): void { + this._darkTheme.next(isDarkTheme); + } + + public updateTheme(colors: Color[], type: string, theme: string): void { + colors.forEach(color => { + document.documentElement.style.setProperty( + `--theme-${theme}-${type}-${color.name}`, + color.hex, + ); + document.documentElement.style.setProperty( + `--theme-${theme}-${type}-contrast-${color.name}`, + color.darkContrast ? 'hsla(0, 0%, 0%, 0.87)' : '#ffffff', + ); + }); + } + + public savePrimaryColor(color: string, isDark: boolean): void { + this.primaryColorPalette = this.computeColors(color); + this.updateTheme(this.primaryColorPalette, 'primary', isDark ? 'dark' : 'light'); + } + + public saveWarnColor(color: string, isDark: boolean): void { + this.warnColorPalette = this.computeColors(color); + this.updateTheme(this.warnColorPalette, 'warn', isDark ? 'dark' : 'light'); + } + + public saveBackgroundColor(color: string, isDark: boolean): void { + this.backgroundColorPalette = this.computeColors(color); + this.updateTheme(this.backgroundColorPalette, 'background', isDark ? 'dark' : 'light'); + } + + private computeColors(hex: string): Color[] { + return [ + this.getColorObject(tinycolor(hex).lighten(52), '50'), + this.getColorObject(tinycolor(hex).lighten(37), '100'), + this.getColorObject(tinycolor(hex).lighten(26), '200'), + this.getColorObject(tinycolor(hex).lighten(12), '300'), + this.getColorObject(tinycolor(hex).lighten(6), '400'), + this.getColorObject(tinycolor(hex), '500'), + this.getColorObject(tinycolor(hex).darken(6), '600'), + this.getColorObject(tinycolor(hex).darken(12), '700'), + this.getColorObject(tinycolor(hex).darken(18), '800'), + this.getColorObject(tinycolor(hex).darken(24), '900'), + this.getColorObject(tinycolor(hex).lighten(50).saturate(30), 'A100'), + this.getColorObject(tinycolor(hex).lighten(30).saturate(30), 'A200'), + this.getColorObject(tinycolor(hex).lighten(10).saturate(15), 'A400'), + this.getColorObject(tinycolor(hex).lighten(5).saturate(5), 'A700'), + ]; + } + + private getColorObject(value: any, name: string): Color { + const c = tinycolor(value); + return { + name: name, + hex: c.toHexString(), + darkContrast: c.isLight(), + }; + } } diff --git a/console/src/assets/i18n/de.json b/console/src/assets/i18n/de.json index 2f13d9668b..c15e5f8809 100644 --- a/console/src/assets/i18n/de.json +++ b/console/src/assets/i18n/de.json @@ -670,7 +670,7 @@ "COLORS":"Farben", "FONT":"Schrift", "ADVANCEDBEHAVIOR":"Erweitertes Verhalten", - "DROP":"Bild hier ablegen", + "DROP":"Bild hier ablegen oder", "RELEASE":"Jetzt loslassen", "DROPFONT":"Fontdatei hier ablegen", "RELEASEFONT":"Jetzt loslassen", diff --git a/console/src/assets/i18n/en.json b/console/src/assets/i18n/en.json index 289212d3eb..f9acf189ab 100644 --- a/console/src/assets/i18n/en.json +++ b/console/src/assets/i18n/en.json @@ -670,7 +670,7 @@ "COLORS":"Colors", "FONT":"Font", "ADVANCEDBEHAVIOR":"Advanced Behavior", - "DROP":"Drop image here", + "DROP":"Drop image here or", "RELEASE":"Release", "DROPFONT":"Drop fontfile here", "RELEASEFONT":"Release", diff --git a/console/src/component-themes.scss b/console/src/component-themes.scss index e6659fbc53..5c94f31133 100644 --- a/console/src/component-themes.scss +++ b/console/src/component-themes.scss @@ -13,6 +13,8 @@ @import 'src/app/modules/app-card/app-card.component'; @import 'src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card'; @import 'src/app/pages/users/user-detail/memberships/memberships.component'; +@import 'src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component'; +@import 'src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component'; @import 'src/app/app.component.scss'; @import 'src/app/modules/form-field/form-field.component.scss'; @import 'src/app/modules/label/label.component.scss'; @@ -44,4 +46,6 @@ @include onboarding-theme($theme); @include tier-theme($theme); @include private-label-theme($theme); + @include owned-project-grid-theme($theme); + @include granted-project-grid-theme($theme); } diff --git a/console/src/styles.scss b/console/src/styles.scss index 3fe5f0a8dc..f4933b77bf 100644 --- a/console/src/styles.scss +++ b/console/src/styles.scss @@ -4,6 +4,7 @@ @use '~@angular/material' as mat; @import './component-themes'; +@import '~@angular/material/theming'; // Plus imports for other components in your app. @@ -22,131 +23,311 @@ --table-row-back: #363738; } -$caos-dark-brand: ( - 50: #fff, - 100: #dde6f3, - 200: #b4c9e4, - 300: #7fa3d1, - 400: #6992c9, - 500: #5282c1, - 600: #4072b4, - 700: #38649d, - 800: #305687, - 900: #284770, - A100: #fff, - A200: #dde6f3, - A300: #6992c9, - A400: #38649d, - A500: #666, - A600: #fff, - A700: #8795a1, - A800: #2d2e30, - A900: #212224, +$caos-dark-primary: ( + 50 : var(--theme-dark-primary-50), + 100 : var(--theme-dark-primary-100), + 200 : var(--theme-dark-primary-200), + 300 : var(--theme-dark-primary-300), + 400 : var(--theme-dark-primary-400), + 500 : var(--theme-dark-primary-500), + 600 : var(--theme-dark-primary-600), + 700 : var(--theme-dark-primary-700), + 800 : var(--theme-dark-primary-800), + 900 : var(--theme-dark-primary-900), + A100 : var(--theme-dark-primary-A100), + A200 : var(--theme-dark-primary-A200), + A400 : var(--theme-dark-primary-A400), + A700 : var(--theme-dark-primary-A700), 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: rgba(black, .87), - A200: rgba(black, .87), - A400: rgba(black, .87), - A700: white + 50: var(--theme-dark-primary-contrast-50), + 100: var(--theme-dark-primary-contrast-100), + 200: var(--theme-dark-primary-contrast-200), + 300: var(--theme-dark-primary-contrast-300), + 400: var(--theme-dark-primary-contrast-400), + 500: var(--theme-dark-primary-contrast-500), + 600: var(--theme-dark-primary-contrast-600), + 700: var(--theme-dark-primary-contrast-700), + 800: var(--theme-dark-primary-contrast-800), + 900: var(--theme-dark-primary-contrast-900), + A100: var(--theme-dark-primary-contrast-A100), + A200: var(--theme-dark-primary-contrast-A200), + A400: var(--theme-dark-primary-contrast-A400), + A700: var(--theme-dark-primary-contrast-A700) ) ); -$caos-light-brand: ( - 50: #eaedfa, - 100: #ccd2f2, - 200: #aab4ea, - 300: #8796e1, - 400: #6e80da, - 500: #5469d4, - 600: #4d61cf, - 700: #4356c9, - 800: #3a4cc3, - 900: #293bb9, - A100: #f9faff, - A200: #c6ccff, - A300: #939fff, - A400: #7a88ff, - A500:#333, - A600: #000, - A700: #8795a1, - A800: white, - A900: #fafafa, +$caos-light-primary: ( + 50 : var(--theme-light-primary-50), + 100 : var(--theme-light-primary-100), + 200 : var(--theme-light-primary-200), + 300 : var(--theme-light-primary-300), + 400 : var(--theme-light-primary-400), + 500 : var(--theme-light-primary-500), + 600 : var(--theme-light-primary-600), + 700 : var(--theme-light-primary-700), + 800 : var(--theme-light-primary-800), + 900 : var(--theme-light-primary-900), + A100 : var(--theme-light-primary-A100), + A200 : var(--theme-light-primary-A200), + A400 : var(--theme-light-primary-A400), + A700 : var(--theme-light-primary-A700), contrast: ( - 50: #3d4852, - 100: #3d4852, - 200: #3d4852, - 300: #3d4852, - 400: #3d4852, - 500: white, - 600: white, - 700: white, - 800: white, - 900: white, - A100: #3d4852, - A200: #3d4852, - A400: #3d4852, - A700: white + 50: var(--theme-light-primary-contrast-50), + 100: var(--theme-light-primary-contrast-100), + 200: var(--theme-light-primary-contrast-200), + 300: var(--theme-light-primary-contrast-300), + 400: var(--theme-light-primary-contrast-400), + 500: var(--theme-light-primary-contrast-500), + 600: var(--theme-light-primary-contrast-600), + 700: var(--theme-light-primary-contrast-700), + 800: var(--theme-light-primary-contrast-800), + 900: var(--theme-light-primary-contrast-900), + A100: var(--theme-light-primary-contrast-A100), + A200: var(--theme-light-primary-contrast-A200), + A400: var(--theme-light-primary-contrast-A400), + A700: var(--theme-light-primary-contrast-A700) ) ); -$caos-accent-color: ( - 50: #ebf4f2, - 100: #cce3de, - 200: #abd1c9, - 300: #89bfb3, - 400: #6fb1a2, - 500: #56a392, - 600: #4f9b8a, - 700: #45917f, - 800: #3c8875, - 900: #2b7763, - A100: #beffed, - A200: #8bffde, - A400: #58ffd0, - A700: #3effc9, +$caos-dark-background: ( + 50 : var(--theme-dark-background-50), + 100 : var(--theme-dark-background-100), + 200 : var(--theme-dark-background-200), + 300 : var(--theme-dark-background-300), + 400 : var(--theme-dark-background-400), + 500 : var(--theme-dark-background-500), + 600 : var(--theme-dark-background-600), + 700 : var(--theme-dark-background-700), + 800 : var(--theme-dark-background-800), + 900 : var(--theme-dark-background-900), + A100 : var(--theme-dark-background-A100), + A200 : var(--theme-dark-background-A200), + A400 : var(--theme-dark-background-A400), + A700 : var(--theme-dark-background-A700), 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: rgba(black, .87), - A200: rgba(black, .87), - A400: rgba(black, .87), - A700: white + 50: var(--theme-dark-background-contrast-50), + 100: var(--theme-dark-background-contrast-100), + 200: var(--theme-dark-background-contrast-200), + 300: var(--theme-dark-background-contrast-300), + 400: var(--theme-dark-background-contrast-400), + 500: var(--theme-dark-background-contrast-500), + 600: var(--theme-dark-background-contrast-600), + 700: var(--theme-dark-background-contrast-700), + 800: var(--theme-dark-background-contrast-800), + 900: var(--theme-dark-background-contrast-900), + A100: var(--theme-dark-background-contrast-A100), + A200: var(--theme-dark-background-contrast-A200), + A400: var(--theme-dark-background-contrast-A400), + A700: var(--theme-dark-background-contrast-A700) ) ); -// 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.define-palette($caos-light-brand); -$light-accent: mat.define-palette($caos-accent-color); -$light-warn: mat.define-palette(mat.$red-palette); +$caos-light-background: ( + 50 : var(--theme-light-background-50), + 100 : var(--theme-light-background-100), + 200 : var(--theme-light-background-200), + 300 : var(--theme-light-background-300), + 400 : var(--theme-light-background-400), + 500 : var(--theme-light-background-500), + 600 : var(--theme-light-background-600), + 700 : var(--theme-light-background-700), + 800 : var(--theme-light-background-800), + 900 : var(--theme-light-background-900), + A100 : var(--theme-light-background-A100), + A200 : var(--theme-light-background-A200), + A400 : var(--theme-light-background-A400), + A700 : var(--theme-light-background-A700), + contrast: + ( + 50: var(--theme-light-background-contrast-50), + 100: var(--theme-light-background-contrast-100), + 200: var(--theme-light-background-contrast-200), + 300: var(--theme-light-background-contrast-300), + 400: var(--theme-light-background-contrast-400), + 500: var(--theme-light-background-contrast-500), + 600: var(--theme-light-background-contrast-600), + 700: var(--theme-light-background-contrast-700), + 800: var(--theme-light-background-contrast-800), + 900: var(--theme-light-background-contrast-900), + A100: var(--theme-light-background-contrast-A100), + A200: var(--theme-light-background-contrast-A200), + A400: var(--theme-light-background-contrast-A400), + A700: var(--theme-light-background-contrast-A700) + ) +); -$dark-primary: mat.define-palette($caos-dark-brand); -$dark-accent: mat.define-palette(mat.$pink-palette); -$dark-warn: mat.define-palette(mat.$red-palette); +$caos-dark-warn: ( + 50 : var(--theme-dark-warn-50), + 100 : var(--theme-dark-warn-100), + 200 : var(--theme-dark-warn-200), + 300 : var(--theme-dark-warn-300), + 400 : var(--theme-dark-warn-400), + 500 : var(--theme-dark-warn-500), + 600 : var(--theme-dark-warn-600), + 700 : var(--theme-dark-warn-700), + 800 : var(--theme-dark-warn-800), + 900 : var(--theme-dark-warn-900), + A100 : var(--theme-dark-warn-A100), + A200 : var(--theme-dark-warn-A200), + A400 : var(--theme-dark-warn-A400), + A700 : var(--theme-dark-warn-A700), + contrast: + ( + 50: var(--theme-dark-warn-contrast-50), + 100: var(--theme-dark-warn-contrast-100), + 200: var(--theme-dark-warn-contrast-200), + 300: var(--theme-dark-warn-contrast-300), + 400: var(--theme-dark-warn-contrast-400), + 500: var(--theme-dark-warn-contrast-500), + 600: var(--theme-dark-warn-contrast-600), + 700: var(--theme-dark-warn-contrast-700), + 800: var(--theme-dark-warn-contrast-800), + 900: var(--theme-dark-warn-contrast-900), + A100: var(--theme-dark-warn-contrast-A100), + A200: var(--theme-dark-warn-contrast-A200), + A400: var(--theme-dark-warn-contrast-A400), + A700: var(--theme-dark-warn-contrast-A700) + ) +); -$light-theme: mat.define-light-theme($light-primary, $light-accent, $light-warn); -$dark-theme: mat.define-dark-theme($dark-primary, $dark-accent, $dark-warn); +$caos-light-warn: ( + 50 : var(--theme-light-warn-50), + 100 : var(--theme-light-warn-100), + 200 : var(--theme-light-warn-200), + 300 : var(--theme-light-warn-300), + 400 : var(--theme-light-warn-400), + 500 : var(--theme-light-warn-500), + 600 : var(--theme-light-warn-600), + 700 : var(--theme-light-warn-700), + 800 : var(--theme-light-warn-800), + 900 : var(--theme-light-warn-900), + A100 : var(--theme-light-warn-A100), + A200 : var(--theme-light-warn-A200), + A400 : var(--theme-light-warn-A400), + A700 : var(--theme-light-warn-A700), + contrast: + ( + 50: var(--theme-light-warn-contrast-50), + 100: var(--theme-light-warn-contrast-100), + 200: var(--theme-light-warn-contrast-200), + 300: var(--theme-light-warn-contrast-300), + 400: var(--theme-light-warn-contrast-400), + 500: var(--theme-light-warn-contrast-500), + 600: var(--theme-light-warn-contrast-600), + 700: var(--theme-light-warn-contrast-700), + 800: var(--theme-light-warn-contrast-800), + 900: var(--theme-light-warn-contrast-900), + A100: var(--theme-light-warn-contrast-A100), + A200: var(--theme-light-warn-contrast-A200), + A400: var(--theme-light-warn-contrast-A400), + A700: var(--theme-light-warn-contrast-A700) + ) +); + +$caos-dark-theme-background: ( + status-bar: map_get($caos-dark-background, 300), + app-bar: map_get($caos-dark-background, 500), + background: map_get($caos-dark-background, 500), + hover: rgba(black, .04), + card: map_get($caos-dark-background, 400), + dialog: white, + disabled-button: rgba(black, .12), + raised-button: white, + focused-button: $dark-focused, + selected-button: map_get($caos-dark-background, 300), + selected-disabled-button: map_get($caos-dark-background, 400), + disabled-button-toggle: map_get($caos-dark-background, 200), + unselected-chip: map_get($caos-dark-background, 300), + disabled-list-option: map_get($caos-dark-background, 200), + tooltip: map_get($mat-gray, 700), + infosection: map_get($caos-dark-background, 300), + warninfosection: #4f566b, + successinfosection: #4f566b +); + +$caos-light-theme-background: ( + status-bar: map_get($caos-light-background, 300), + app-bar: map_get($caos-light-background, 100), + background: map_get($caos-light-background, 500), + hover: rgba(black, .04), + card: map_get($caos-light-background, 400), + dialog: white, + disabled-button: rgba(black, .12), + raised-button: white, + focused-button: $light-focused, + selected-button: map_get($caos-light-background, 300), + selected-disabled-button: map_get($caos-light-background, 400), + disabled-button-toggle: map_get($caos-light-background, 200), + unselected-chip: map_get($caos-light-background, 300), + disabled-list-option: map_get($caos-light-background, 200), + tooltip: map_get($mat-gray, 700), + infosection: #e4e4e4, + warninfosection: #ffc1c1, + successinfosection: #cbf4c9 +); + +$caos-dark-theme-foreground: ( + base: white, + divider: $light-dividers, + dividers: $light-dividers, + disabled: $light-disabled-text, + disabled-button: rgba(white, .26), + disabled-text: $light-disabled-text, + elevation: black, + hint-text: $light-disabled-text, + secondary-text: $light-secondary-text, + icon: rgba(white, .54), + icons: rgba(white, .54), + text: rgba(white, .87), + slider-min: rgba(white, .87), + slider-off: rgba(white, .26), + slider-off-active: rgba(white, .38), + infosection: #f0f0f0, + warninfosection: #ffc1c1, + successinfosection: #cbf4c9 +); + +$caos-light-theme-foreground: ( + base: black, + divider: $dark-dividers, + dividers: $dark-dividers, + disabled: $dark-disabled-text, + disabled-button: rgba(black, .26), + disabled-text: $dark-disabled-text, + elevation: black, + hint-text: $dark-disabled-text, + secondary-text: $dark-secondary-text, + icon: rgba(black, .54), + icons: rgba(black, .54), + text: rgba(black, .87), + slider-min: rgba(black, .87), + slider-off: rgba(black, .26), + slider-off-active: rgba(black, .38), + infosection: #4a4a4a, + warninfosection: #620e0e, + successinfosection: #0e6245 +); + +$caos-dark-app-theme: ( + primary: mat-palette($caos-dark-primary), + accent: mat-palette($caos-dark-primary), + warn: mat-palette($caos-dark-warn), + is-dark: true, + foreground: $caos-dark-theme-foreground, + background: $caos-dark-theme-background +); + +$caos-light-app-theme: ( + primary: mat-palette($caos-light-primary), + accent: mat-palette($caos-light-primary), + warn: mat-palette($caos-light-warn), + is-dark: false, + foreground: $caos-light-theme-foreground, + background: $caos-light-theme-background +); $custom-typography: mat.define-typography-config($font-family: 'Lato'); @@ -157,8 +338,8 @@ $custom-typography: mat.define-typography-config($font-family: 'Lato'); // } // default theme -@include component-themes($dark-theme); -@include mat.all-component-themes($dark-theme); +@include component-themes($caos-dark-app-theme); +@include mat.all-component-themes($caos-dark-app-theme); .mat-dialog-container, .mat-raised-button, @@ -167,30 +348,31 @@ $custom-typography: mat.define-typography-config($font-family: 'Lato'); } .light-theme { - @include component-themes($light-theme); - @include mat.all-component-themes($light-theme); + @include component-themes($caos-light-app-theme); + @include mat.all-component-themes($caos-light-app-theme); --grey: #697386; - --color-main: #5469d4; + --color-main: var(--theme-light-primary-500); + $background: map-get($caos-light-app-theme, background); .sidenav, .main-container, .mat-dialog-container { - background-color: #fafafa; + background-color: map-get($background, background); transition: background-color .3s cubic-bezier(.645, .045, .355, 1); } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1); box-shadow: inset 0 0 6px rgba(0, 0, 0, .1); - background-color: #fafafa; + background-color: map-get($background, background); border-radius: 8px; } ::-webkit-scrollbar { width: 6px; height: 6px; - background-color: #fafafa; + background-color: map-get($background, background); } ::-webkit-scrollbar-thumb { @@ -200,27 +382,28 @@ $custom-typography: mat.define-typography-config($font-family: 'Lato'); } .root-header { - box-shadow: inset 0 -1px #e3e8ee; + box-shadow: inset 0 -1px map-get($caos-light-theme-foreground, divider); } } .dark-theme { - @include component-themes($dark-theme); - @include mat.all-component-themes($dark-theme); + @include component-themes($caos-dark-app-theme); + @include mat.all-component-themes($caos-dark-app-theme); - --color-main: #5282c1; + --color-main: var(--theme-dark-primary-500); + $background: map-get($caos-dark-app-theme, background); .sidenav, .main-container, .mat-dialog-container { - background-color: #212224; + background-color: map-get($background, background); transition: background-color .3s cubic-bezier(.645, .045, .355, 1); } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); - background-color: #2d2e30; + background-color: map-get($background, background); border-radius: 8px; transition: all .3s cubic-bezier(.645, .045, .355, 1) !important; } @@ -228,7 +411,7 @@ $custom-typography: mat.define-typography-config($font-family: 'Lato'); ::-webkit-scrollbar { width: 6px; height: 6px; - background-color: #2d2e30; + background-color: map-get($background, background); transition: all .3s cubic-bezier(.645, .045, .355, 1) !important; } @@ -240,7 +423,7 @@ $custom-typography: mat.define-typography-config($font-family: 'Lato'); } .root-header { - box-shadow: inset 0 -1px #303131; + box-shadow: inset 0 -1px map-get($caos-dark-theme-foreground, divider); } } // @include mat.checkbox-theme($candy-app-theme); diff --git a/console/src/styles/input.scss b/console/src/styles/input.scss index 95333b16a7..3f11e199cd 100644 --- a/console/src/styles/input.scss +++ b/console/src/styles/input.scss @@ -3,9 +3,6 @@ @mixin input-theme($theme) { /* stylelint-disable */ $primary: map-get($theme, primary); - $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); @@ -28,37 +25,38 @@ font-size: 1rem; border: none; border: 1px solid if($is-dark-theme, #403e3e, #00000040); - background-color:if($is-dark-theme, #00000020, #fafafa50); + background-color: if($is-dark-theme, #00000020, #fafafa50); border-radius: 4px; height: 40px; padding: 10px; - transition: border-color .2s ease-in-out; + transition: border-color .2s ease-in-out, background-color .3s cubic-bezier(.645, .045, .355, 1), + color .3s cubic-bezier(.645, .045, .355, 1); width: 100%; color: mat.get-color-from-palette($foreground, text); margin-bottom: 2px; &:hover { - border-color: if($is-dark-theme,#aeafb1, #1a1b1b); + border-color: if($is-dark-theme, #aeafb1, #1a1b1b); } &:active, &:focus { - border-color: $primary-color; + border-color: $primary-color; } &.ng-touched { - &.ng-invalid { - border-color: $warn-color; - } + &.ng-invalid { + border-color: $warn-color; + } } &[disabled] { - border-color: if($is-dark-theme,#36373850,#cccdce50); - color: if($is-dark-theme, #ffffff80 ,#00000061); + border-color: if($is-dark-theme, #36373850, #cccdce50); + color: if($is-dark-theme, #ffffff80, #00000061); - &::placeholder { - color: if($is-dark-theme, #ffffff80 ,#00000061); - } + &::placeholder { + color: if($is-dark-theme, #ffffff80, #00000061); + } } } @@ -70,7 +68,7 @@ .mat-paginator { .mat-select { - background-color: inherit; + background-color: inherit; } } } diff --git a/console/src/styles/sidenav-list.scss b/console/src/styles/sidenav-list.scss index bfc707c38a..35b72e23aa 100644 --- a/console/src/styles/sidenav-list.scss +++ b/console/src/styles/sidenav-list.scss @@ -3,36 +3,49 @@ @mixin sidenav-list-theme($theme) { /* stylelint-disable */ $primary: map-get($theme, primary); + $background: map-get($theme, background); $accent: map-get($theme, accent); $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.get-color-from-palette($primary, A800); $is-dark-theme: map-get($theme, is-dark); + $back: map-get($background, background); /* stylelint-enable */ .meta { - box-shadow: inset 1px 0 if($is-dark-theme, #303131, #e3e8ee); + box-shadow: inset 1px 0 map-get($foreground, divider); } .sidenav { - box-shadow: inset -1px 0 if($is-dark-theme, #303131, #e3e8ee); + box-shadow: inset -1px 0 map-get($foreground, divider); transition: all .3s cubic-bezier(.645, .045, .355, 1) !important; } .nav-item { color: mat.get-color-from-palette($foreground, text) !important; + transition: all .2s ease; + + i { + opacity: .6; + } &:hover { - background-color: if($is-dark-theme, $sec-dark, rgb(84 105 212 / 6%)); + // font-weight: 600; border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem; + + i { + opacity: 1; + } } &.active { color: $primary-color !important; - background-color: if($is-dark-theme, rgba($color: $primary-color, $alpha: .1), rgb(84 105 212 / 6%)) !important; + // background-color: if($is-dark-theme, rgba($color: $primary-color, $alpha: .1), rgb(84 105 212 / 6%)) !important; + + i { + opacity: 1; + } } .c_label { @@ -45,7 +58,7 @@ .mat-menu-content, .mat-menu-panel { - background-color: $primary-dark; + background-color: $back; border-radius: .5rem; @include mat.elevation(5); @@ -57,8 +70,7 @@ } .root-header { - box-shadow: inset 0 -1px #e3e8ee; - background-color: $primary-dark !important; + background-color: $back !important; transition: all .3s cubic-bezier(.645, .045, .355, 1); .slash { @@ -66,7 +78,6 @@ } .org-button { - border: 1px solid if($is-dark-theme, #303131, #e3e8ee); transition: all .3s cubic-bezier(.645, .045, .355, 1) !important; } } @@ -118,11 +129,11 @@ .divider { .span { - border-color: if($is-dark-theme, #303131, #e3e8ee); + border-color: map-get($foreground, divider); } .line { - background-color: if($is-dark-theme, #303131, #e3e8ee); + background-color: map-get($foreground, divider); } } } diff --git a/console/src/styles/table.scss b/console/src/styles/table.scss index e8ccb3bb19..7e0da76e81 100644 --- a/console/src/styles/table.scss +++ b/console/src/styles/table.scss @@ -3,14 +3,10 @@ @mixin table-theme($theme) { /* stylelint-disable */ $primary: map-get($theme, primary); - $warn: map-get($theme, warn); - $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); + $foreground: map-get($theme, foreground); + $background: map-get($theme, background); .mat-table, .mat-paginator { @@ -58,7 +54,7 @@ &:hover { td { - background: if($is-dark-theme, #292a2b, #f4f4f4); // rgba($inv-color, .05); + background: map-get($background, hover); } } }