{
+ return combineLatest({
+ owned: this.mgmtService.ownedProjectsCount,
+ granted: this.mgmtService.grantedProjectsCount,
+ }).pipe(
+ map(({ owned, granted }) => {
+ return (owned ?? 0) + (granted ?? 0);
+ }),
+ );
+ }
}
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 805265505e..5a8940bbcb 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
@@ -20,7 +20,15 @@ import { AdminService } from 'src/app/services/admin.service';
import { AssetEndpoint, AssetService, AssetType } from 'src/app/services/asset.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { StorageKey, StorageLocation, StorageService } from 'src/app/services/storage.service';
-import { ThemeService } from 'src/app/services/theme.service';
+import {
+ BACKGROUND,
+ DARK_BACKGROUND,
+ DARK_PRIMARY,
+ DARK_WARN,
+ PRIMARY,
+ ThemeService,
+ WARN,
+} from 'src/app/services/theme.service';
import { ToastService } from 'src/app/services/toast.service';
import { InfoSectionType } from '../../info-section/info-section.component';
@@ -637,14 +645,14 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
}
private applyToConsole(labelpolicy: LabelPolicy.AsObject): void {
- const darkPrimary = labelpolicy?.primaryColorDark || '#bbbafa';
- const lightPrimary = labelpolicy?.primaryColor || '#5469d4';
+ const darkPrimary = labelpolicy?.primaryColorDark || DARK_PRIMARY;
+ const lightPrimary = labelpolicy?.primaryColor || PRIMARY;
- const darkWarn = labelpolicy?.warnColorDark || '#ff3b5b';
- const lightWarn = labelpolicy?.warnColor || '#cd3d56';
+ const darkWarn = labelpolicy?.warnColorDark || DARK_WARN;
+ const lightWarn = labelpolicy?.warnColor || WARN;
- const darkBackground = labelpolicy?.backgroundColorDark || '#111827';
- const lightBackground = labelpolicy?.backgroundColor || '#fafafa';
+ const darkBackground = labelpolicy?.backgroundColorDark || DARK_BACKGROUND;
+ const lightBackground = labelpolicy?.backgroundColor || BACKGROUND;
this.themeService.savePrimaryColor(darkPrimary, true);
this.themeService.savePrimaryColor(lightPrimary, false);
diff --git a/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss b/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss
index a20e4ca13f..78ecaee09a 100644
--- a/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss
+++ b/console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss
@@ -3,9 +3,16 @@
@mixin search-user-autocomplete-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
+ $lighter-primary-color: mat.get-color-from-palette($primary, 300);
+ $darker-primary-color: mat.get-color-from-palette($primary, 700);
+
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$secondary-text: map-get($foreground, secondary-text);
+ $is-dark-theme: map-get($theme, is-dark);
+
+ $link-hover-color: if($is-dark-theme, mat.get-color-from-palette($primary, 200), $primary-color);
+ $link-color: if($is-dark-theme, $lighter-primary-color, $primary-color);
.user-autocomplete-found {
margin: 0.5rem 0;
@@ -67,11 +74,12 @@
margin-top: 0.5rem;
a {
- color: $primary-color;
+ color: $link-color;
+ transition: color 0.2s ease;
&:hover {
cursor: pointer;
- color: mat.get-color-from-palette($primary, 400);
+ color: $link-hover-color;
text-decoration: underline;
}
}
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 bc4c1da4ba..1af8a87432 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
@@ -12,7 +12,9 @@
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss
index dd0410a521..404497483f 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss
@@ -88,6 +88,10 @@
}
}
+.user-spinner-wrapper {
+ margin: 1rem 0;
+}
+
.icon-button {
.icon {
font-size: 1.2rem;
diff --git a/console/src/app/services/theme.service.ts b/console/src/app/services/theme.service.ts
index 2064571a0d..858fea68f1 100644
--- a/console/src/app/services/theme.service.ts
+++ b/console/src/app/services/theme.service.ts
@@ -13,17 +13,17 @@ export interface Color {
contrastColor: string;
}
-const DARK_PRIMARY = '#bbbafa';
-const PRIMARY = '#5469d4';
+export const DARK_PRIMARY = '#2073c4';
+export const PRIMARY = '#5469d4';
-const DARK_WARN = '#ff3b5b';
-const WARN = '#cd3d56';
+export const DARK_WARN = '#ff3b5b';
+export const WARN = '#cd3d56';
-const DARK_BACKGROUND = '#111827';
-const BACKGROUND = '#fafafa';
+export const DARK_BACKGROUND = '#111827';
+export const BACKGROUND = '#fafafa';
-const DARK_TEXT = '#ffffff';
-const TEXT = '#000000';
+export const DARK_TEXT = '#ffffff';
+export const TEXT = '#000000';
@Injectable()
export class ThemeService {
diff --git a/internal/api/ui/login/static/resources/themes/scss/styles/theming/palette.scss b/internal/api/ui/login/static/resources/themes/scss/styles/theming/palette.scss
index 57c677ed1c..e8f5b424e9 100644
--- a/internal/api/ui/login/static/resources/themes/scss/styles/theming/palette.scss
+++ b/internal/api/ui/login/static/resources/themes/scss/styles/theming/palette.scss
@@ -15,251 +15,220 @@ $light-input-border: #00000040;
$light-input-border-hover: #1a1b1b;
$lgn-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,
- contrast: (
- 50: $dark-primary-text,
- 100: $dark-primary-text,
- 200: $dark-primary-text,
- 300: $dark-primary-text,
- 400: $dark-primary-text,
- 500: $light-primary-text,
- 600: $light-primary-text,
- 700: $light-primary-text,
- 800: $light-primary-text,
- 900: $light-primary-text,
- A100: $dark-primary-text,
- A200: $light-primary-text,
- A400: $light-primary-text,
- A700: $light-primary-text,
- )
+ 50: #f1f7fd,
+ 100: #afd1f2,
+ 200: #7fb5ea,
+ 300: #4192e0,
+ 400: #2782dc,
+ 500: #2073c4,
+ 600: #1c64aa,
+ 700: #17548f,
+ 800: #134575,
+ 900: #0f355b,
+ A100: #fff,
+ A200: #dde6f3,
+ A300: #6992c9,
+ A400: #38649d,
+ A500: #666,
+ A600: #fff,
+ A700: #8795a1,
+ A800: #2d2e30,
+ A900: #212224,
+ contrast: (
+ 50: $dark-primary-text,
+ 100: $dark-primary-text,
+ 200: $dark-primary-text,
+ 300: $dark-primary-text,
+ 400: $dark-primary-text,
+ 500: $light-primary-text,
+ 600: $light-primary-text,
+ 700: $light-primary-text,
+ 800: $light-primary-text,
+ 900: $light-primary-text,
+ A100: $dark-primary-text,
+ A200: $light-primary-text,
+ A400: $light-primary-text,
+ A700: $light-primary-text,
+ ),
);
-
+
$lgn-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,
- contrast: (
- 50: $dark-primary-text,
- 100: $dark-primary-text,
- 200: $dark-primary-text,
- 300: $dark-primary-text,
- 400: $dark-primary-text,
- 500: $light-primary-text,
- 600: $light-primary-text,
- 700: $light-primary-text,
- 800: $light-primary-text,
- 900: $light-primary-text,
- A100: $dark-primary-text,
- A200: $light-primary-text,
- A400: $light-primary-text,
- A700: $light-primary-text,
- )
+ 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,
+ contrast: (
+ 50: $dark-primary-text,
+ 100: $dark-primary-text,
+ 200: $dark-primary-text,
+ 300: $dark-primary-text,
+ 400: $dark-primary-text,
+ 500: $light-primary-text,
+ 600: $light-primary-text,
+ 700: $light-primary-text,
+ 800: $light-primary-text,
+ 900: $light-primary-text,
+ A100: $dark-primary-text,
+ A200: $light-primary-text,
+ A400: $light-primary-text,
+ A700: $light-primary-text,
+ ),
);
-
-// skip accent color for first gen theming
-// $lgn-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,
-// contrast: (
-// 50: $dark-primary-text,
-// 100: $dark-primary-text,
-// 200: $dark-primary-text,
-// 300: $dark-primary-text,
-// 400: $dark-primary-text,
-// 500: $light-primary-text,
-// 600: $light-primary-text,
-// 700: $light-primary-text,
-// 800: $light-primary-text,
-// 900: $light-primary-text,
-// A100: $dark-primary-text,
-// A200: $light-primary-text,
-// A400: $light-primary-text,
-// A700: $light-primary-text,
-// )
-// );
-
+
$lgn-warn: (
- 50: #ffebee,
- 100: #ffcdd2,
- 200: #ef9a9a,
- 300: #e57373,
- 400: #ef5350,
- 500: #f44336,
- 600: #e53935,
- 700: #d32f2f,
- 800: #c62828,
- 900: #b71c1c,
- A100: #ff8a80,
- A200: #ff5252,
- A400: #ff1744,
- A700: #d50000,
- contrast: (
- 50: $dark-primary-text,
- 100: $dark-primary-text,
- 200: $dark-primary-text,
- 300: $dark-primary-text,
- 400: $dark-primary-text,
- 500: $light-primary-text,
- 600: $light-primary-text,
- 700: $light-primary-text,
- 800: $light-primary-text,
- 900: $light-primary-text,
- A100: $dark-primary-text,
- A200: $light-primary-text,
- A400: $light-primary-text,
- A700: $light-primary-text,
- )
+ 50: #ffebee,
+ 100: #ffcdd2,
+ 200: #ef9a9a,
+ 300: #e57373,
+ 400: #ef5350,
+ 500: #f44336,
+ 600: #e53935,
+ 700: #d32f2f,
+ 800: #c62828,
+ 900: #b71c1c,
+ A100: #ff8a80,
+ A200: #ff5252,
+ A400: #ff1744,
+ A700: #d50000,
+ contrast: (
+ 50: $dark-primary-text,
+ 100: $dark-primary-text,
+ 200: $dark-primary-text,
+ 300: $dark-primary-text,
+ 400: $dark-primary-text,
+ 500: $light-primary-text,
+ 600: $light-primary-text,
+ 700: $light-primary-text,
+ 800: $light-primary-text,
+ 900: $light-primary-text,
+ A100: $dark-primary-text,
+ A200: $light-primary-text,
+ A400: $light-primary-text,
+ A700: $light-primary-text,
+ ),
);
-
+
$lgn-grey: (
- 50: #fafafa,
- 100: #f5f5f5,
- 200: #eeeeee,
- 300: #e0e0e0,
- 400: #bdbdbd,
- 500: #9e9e9e,
- 600: #757575,
- 700: #616161,
- 800: #424242,
- 900: #212121,
- A100: #ffffff,
- A200: #eeeeee,
- A400: #bdbdbd,
- A700: #616161,
- contrast: (
- 50: $dark-primary-text,
- 100: $dark-primary-text,
- 200: $dark-primary-text,
- 300: $dark-primary-text,
- 400: $dark-primary-text,
- 500: $dark-primary-text,
- 600: $light-primary-text,
- 700: $light-primary-text,
- 800: $light-primary-text,
- 900: $light-primary-text,
- A100: $dark-primary-text,
- A200: $dark-primary-text,
- A400: $dark-primary-text,
- A700: $light-primary-text,
- )
+ 50: #fafafa,
+ 100: #f5f5f5,
+ 200: #eeeeee,
+ 300: #e0e0e0,
+ 400: #bdbdbd,
+ 500: #9e9e9e,
+ 600: #757575,
+ 700: #616161,
+ 800: #424242,
+ 900: #212121,
+ A100: #ffffff,
+ A200: #eeeeee,
+ A400: #bdbdbd,
+ A700: #616161,
+ contrast: (
+ 50: $dark-primary-text,
+ 100: $dark-primary-text,
+ 200: $dark-primary-text,
+ 300: $dark-primary-text,
+ 400: $dark-primary-text,
+ 500: $dark-primary-text,
+ 600: $light-primary-text,
+ 700: $light-primary-text,
+ 800: $light-primary-text,
+ 900: $light-primary-text,
+ A100: $dark-primary-text,
+ A200: $dark-primary-text,
+ A400: $dark-primary-text,
+ A700: $light-primary-text,
+ ),
);
$lgn-light-theme-background: (
- background: map-get($lgn-grey, 50),
- hover: rgba(black, 0.04),
- disabled-button: rgba(black, 0.12),
- raised-button: white,
- focused-button: $dark-focused,
- selected-button: map-get($lgn-grey, 300),
- selected-disabled-button: map-get($lgn-grey, 400),
- tooltip: map-get($lgn-grey, 700),
- input: #fafafa50,
- footer: #fafafa,
- qrcode: #fafafa, // use black ground on white background because inverted qrcode colors are not allowed
- account-selector-hover: rgba(black, 0.02),
- account-selector-active: rgba(black, 0.05),
- google: #ffffff,
+ background: map-get($lgn-grey, 50),
+ hover: rgba(black, 0.04),
+ disabled-button: rgba(black, 0.12),
+ raised-button: white,
+ focused-button: $dark-focused,
+ selected-button: map-get($lgn-grey, 300),
+ selected-disabled-button: map-get($lgn-grey, 400),
+ tooltip: map-get($lgn-grey, 700),
+ input: #fafafa50,
+ footer: #fafafa,
+ qrcode: #fafafa,
+ // use black ground on white background because inverted qrcode colors are not allowed
+ account-selector-hover: rgba(black, 0.02),
+ account-selector-active: rgba(black, 0.05),
+ google: #ffffff,
);
-
+
$lgn-dark-theme-background: (
- background: #212224,
- hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX
- disabled-button: rgba(white, 0.12),
- raised-button: map-get($lgn-grey, 800),
- focused-button: $light-focused,
- selected-button: map-get($lgn-grey, 900),
- selected-disabled-button: map-get($lgn-grey, 800),
- tooltip: map-get($lgn-grey, 700),
- input: rgba(black, .2),
- footer: #212224,
- qrcode: white, // needs white background to recognize borders,
- account-selector-hover: rgba(white, 0.02),
- account-selector-active: rgba(white, 0.05),
- google: #ffffff,
+ background: #212224,
+ hover: rgba(white, 0.04),
+ // TODO(kara): check style with Material Design UX
+ disabled-button: rgba(white, 0.12),
+ raised-button: map-get($lgn-grey, 800),
+ focused-button: $light-focused,
+ selected-button: map-get($lgn-grey, 900),
+ selected-disabled-button: map-get($lgn-grey, 800),
+ tooltip: map-get($lgn-grey, 700),
+ input: rgba(black, 0.2),
+ footer: #212224,
+ qrcode: white,
+ // needs white background to recognize borders,
+ account-selector-hover: rgba(white, 0.02),
+ account-selector-active: rgba(white, 0.05),
+ google: #ffffff,
);
$lgn-light-theme-foreground: (
- footer-links: map-get($lgn-light-brand, 500),
- footer-line: #e3e8ee,
- base: black,
- input-border: $light-input-border,
- radio-border: $light-input-border,
- input-border-hover: $light-input-border-hover,
- input-placeholder: map-get($lgn-grey, 600),
- label: map-get($lgn-grey, 600),//#697386
- divider: $dark-dividers,
- disabled: $dark-disabled-text,
- disabled-button: rgba(black, 0.26),
- elevation: black,
- secondary-text: $dark-secondary-text,
- icon: rgba(black, 0.54),
- text: rgba(black, 0.87),
- qrcode: black,
- google-text: #8b8d8d,
+ footer-links: map-get($lgn-light-brand, 500),
+ footer-line: #e3e8ee,
+ base: black,
+ input-border: $light-input-border,
+ radio-border: $light-input-border,
+ input-border-hover: $light-input-border-hover,
+ input-placeholder: map-get($lgn-grey, 600),
+ label: map-get($lgn-grey, 600),
+ divider: $dark-dividers,
+ disabled: $dark-disabled-text,
+ disabled-button: rgba(black, 0.26),
+ elevation: black,
+ secondary-text: $dark-secondary-text,
+ icon: rgba(black, 0.54),
+ text: rgba(black, 0.87),
+ qrcode: black,
+ google-text: #8b8d8d,
);
-
+
$lgn-dark-theme-foreground: (
- footer-links: map-get($lgn-grey, 500),
- footer-line: #303131,
- base: white,
- input-border: $dark-input-border,
- radio-border: $dark-input-border,
- input-border-hover: $dark-input-border-hover,
- input-placeholder: map-get($lgn-grey, 600),
- label: map-get($lgn-grey, 600),// #8795a1,
- divider: $light-dividers,
- disabled: $light-disabled-text,
- disabled-button: rgba(white, 0.3),
- elevation: black,
- secondary-text: $light-secondary-text,
- icon: white,
- text: white,
- qrcode: black,
- google-text: #8b8d8d,
+ footer-links: map-get($lgn-grey, 500),
+ footer-line: #303131,
+ base: white,
+ input-border: $dark-input-border,
+ radio-border: $dark-input-border,
+ input-border-hover: $dark-input-border-hover,
+ input-placeholder: map-get($lgn-grey, 600),
+ label: map-get($lgn-grey, 600),
+ divider: $light-dividers,
+ disabled: $light-disabled-text,
+ disabled-button: rgba(white, 0.3),
+ elevation: black,
+ secondary-text: $light-secondary-text,
+ icon: white,
+ text: white,
+ qrcode: black,
+ google-text: #8b8d8d,
);
diff --git a/internal/api/ui/login/static/resources/themes/scss/styles/vars.scss b/internal/api/ui/login/static/resources/themes/scss/styles/vars.scss
index 6e81533922..597a8ee4df 100644
--- a/internal/api/ui/login/static/resources/themes/scss/styles/vars.scss
+++ b/internal/api/ui/login/static/resources/themes/scss/styles/vars.scss
@@ -117,16 +117,16 @@
}
.lgn-dark-theme {
- --zitadel-color-primary-50: #ffffff;
- --zitadel-color-primary-100: #dde6f3;
- --zitadel-color-primary-200: #b4c9e4;
- --zitadel-color-primary-300: #7fa3d1;
- --zitadel-color-primary-400: #6992c9;
- --zitadel-color-primary-500: #5282c1;
- --zitadel-color-primary-600: #4072b4;
- --zitadel-color-primary-700: #38649d;
- --zitadel-color-primary-800: #305687;
- --zitadel-color-primary-900: #284770;
+ --zitadel-color-primary-50: #f1f7fd;
+ --zitadel-color-primary-100: #afd1f2;
+ --zitadel-color-primary-200: #7fb5ea;
+ --zitadel-color-primary-300: #4192e0;
+ --zitadel-color-primary-400: #2782dc;
+ --zitadel-color-primary-500: #2073c4;
+ --zitadel-color-primary-600: #1c64aa;
+ --zitadel-color-primary-700: #17548f;
+ --zitadel-color-primary-800: #134575;
+ --zitadel-color-primary-900: #0f355b;
--zitadel-color-warn-50: #ffe7eb;
--zitadel-color-warn-100: #ffc4ce;
diff --git a/internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css b/internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css
index c7b0dccdc3..161b6da636 100644
--- a/internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css
+++ b/internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css
@@ -102,16 +102,16 @@
}
.lgn-dark-theme {
- --zitadel-color-primary-50: #ffffff;
- --zitadel-color-primary-100: #dde6f3;
- --zitadel-color-primary-200: #b4c9e4;
- --zitadel-color-primary-300: #7fa3d1;
- --zitadel-color-primary-400: #6992c9;
- --zitadel-color-primary-500: #5282c1;
- --zitadel-color-primary-600: #4072b4;
- --zitadel-color-primary-700: #38649d;
- --zitadel-color-primary-800: #305687;
- --zitadel-color-primary-900: #284770;
+ --zitadel-color-primary-50: #f1f7fd;
+ --zitadel-color-primary-100: #afd1f2;
+ --zitadel-color-primary-200: #7fb5ea;
+ --zitadel-color-primary-300: #4192e0;
+ --zitadel-color-primary-400: #2782dc;
+ --zitadel-color-primary-500: #2073c4;
+ --zitadel-color-primary-600: #1c64aa;
+ --zitadel-color-primary-700: #17548f;
+ --zitadel-color-primary-800: #134575;
+ --zitadel-color-primary-900: #0f355b;
--zitadel-color-warn-50: #ffe7eb;
--zitadel-color-warn-100: #ffc4ce;
--zitadel-color-warn-200: #ff9dad;