fix(console): improve project counters, dark primary color change, smaller UI improvements (#4620)

* dark primary color change, project counter, link color improvements * update fallback colors * fallback colors Co-authored-by: Livio Spring <livio.a@gmail.com>
2025-02-28 19:07:26 +00:00 · 2022-11-17 08:43:53 +01:00 · 2022-11-17 08:43:53 +01:00 · 7db87f4646
commit 7db87f4646
parent dbb18342a1
15 changed files with 323 additions and 288 deletions
--- a/cmd/defaults.yaml
+++ b/cmd/defaults.yaml
@ -226,8 +226,6 @@ SAML:
    #  Company: ZITADEL
    #  EmailAddress: hi@zitadel.com

-
-
 Login:
  LanguageCookieName: zitadel.login.lang
  CSRFCookieName: zitadel.login.csrf
@ -318,7 +316,7 @@ Actions:
    # wildcard sub domains are currently unsupported
    DenyList:
      - localhost
-      - '127.0.0.1'
+      - "127.0.0.1"

 DefaultInstance:
  InstanceName:
@ -429,7 +427,7 @@ DefaultInstance:
    BackgroundColor: "#fafafa"
    WarnColor: "#cd3d56"
    FontColor: "#000000"
-    PrimaryColorDark: "#bbbafa"
+    PrimaryColorDark: "#2073c4"
    BackgroundColorDark: "#111827"
    WarnColorDark: "#ff3b5b"
    FontColorDark: "#ffffff"
--- a/console/src/app/modules/footer/footer.component.scss
+++ b/console/src/app/modules/footer/footer.component.scss
@ -3,7 +3,9 @@
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $accent: map-get($theme, accent);
-  $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);

  $warn-color: mat.get-color-from-palette($warn, 500);
  $accent-color: mat.get-color-from-palette($accent, 500);
@ -11,6 +13,7 @@
  $is-dark-theme: map-get($theme, is-dark);
  $back: map-get($background, background);
  $secondary-text: map-get($foreground, secondary-text);
+  $link-hover-color: if($is-dark-theme, $lighter-primary-color, $darker-primary-color);

  .footer-wrapper {
    padding: 2rem;
@ -46,7 +49,7 @@
          }

          &:hover {
-            color: $primary-color;
+            color: $link-hover-color;
          }
        }
      }
@ -114,7 +117,7 @@
          }

          &:hover {
-            color: $primary-color;
+            color: $link-hover-color;

            i {
              visibility: visible;
--- a/console/src/app/modules/nav-toggle/nav-toggle.component.html
+++ b/console/src/app/modules/nav-toggle/nav-toggle.component.html
@ -1,6 +1,11 @@
 <button class="nav-toggle" [ngClass]="{active}" (click)="clicked.emit()">
  <div class="c_label">
    <span> {{ label }} </span>
-    <small *ngIf="count" class="count">({{ count }})</small>
+    <div *ngIf="count && count < 100" class="count">
+      <span>{{ count }}</span>
+    </div>
+    <div *ngIf="count && count >= 100" class="count">
+      <span>99+</span>
+    </div>
  </div>
 </button>
--- a/console/src/app/modules/nav-toggle/nav-toggle.component.scss
+++ b/console/src/app/modules/nav-toggle/nav-toggle.component.scss
@ -31,6 +31,8 @@
    background: none;
    cursor: pointer;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+    box-sizing: border-box;
+    height: 27px;

    .c_label {
      display: flex;
@ -38,8 +40,19 @@
      text-align: center;

      .count {
-        display: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 17px;
+        width: 17px;
+        border-radius: 50%;
+        padding: 2px;
+        margin: -2px -9px -2px 8px;
        margin-left: 6px;
+        background-color: if($is-dark-theme, #ffffff20, #00000020);
+        line-height: 18px;
+        font-size: 11px;
+        transition: background 0.2s ease;
      }
    }

@ -63,7 +76,7 @@

      .c_label {
        .count {
-          display: inline-block;
+          background-color: if($is-dark-theme, #00000020, #ffffff20);
        }
      }
    }
--- a/console/src/app/modules/nav/nav.component.html
+++ b/console/src/app/modules/nav/nav.component.html
@ -121,14 +121,14 @@
                  >
                    <div class="c_label">
                      <span> {{ 'MENU.PROJECT' | translate }} </span>
-                      <small
-                        *ngIf="(mgmtService?.ownedProjectsCount | async) && (mgmtService?.grantedProjectsCount | async)"
-                        class="count"
-                        >({{
-                          ((mgmtService.ownedProjectsCount | async) ?? 0) +
-                            ((mgmtService.grantedProjectsCount | async) ?? 0)
-                        }})</small
-                      >
+                      <ng-container *ngIf="projectcounter | async as count">
+                        <div *ngIf="count < 100" class="count">
+                          <span>{{ count }}</span>
+                        </div>
+                        <div *ngIf="count >= 100" class="count">
+                          <span>99+</span>
+                        </div>
+                      </ng-container>
                    </div>
                  </a>
                </ng-template>
--- a/console/src/app/modules/nav/nav.component.scss
+++ b/console/src/app/modules/nav/nav.component.scss
@ -64,6 +64,8 @@
          margin: 0.25rem 2px;
          white-space: nowrap;
          position: relative;
+          box-sizing: border-box;
+          height: 27px;

          .c_label {
            display: flex;
@ -72,7 +74,18 @@

            .count {
              display: none;
+              align-items: center;
+              justify-content: center;
+              height: 17px;
+              width: 17px;
+              border-radius: 50%;
+              padding: 2px;
+              margin: -2px -9px -2px 8px;
              margin-left: 6px;
+              background-color: if($is-dark-theme, #ffffff20, #00000020);
+              line-height: 18px;
+              font-size: 11px;
+              transition: background 0.2s ease;
            }
          }

@ -97,6 +110,7 @@
            .c_label {
              .count {
                display: inline-block;
+                background-color: if($is-dark-theme, #00000020, #ffffff20);
              }
            }
          }
--- a/console/src/app/modules/nav/nav.component.ts
+++ b/console/src/app/modules/nav/nav.component.ts
@ -4,7 +4,7 @@ import { HttpClient } from '@angular/common/http';
 import { Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { Router } from '@angular/router';
-import { BehaviorSubject, map, Observable, Subject, take } from 'rxjs';
+import { BehaviorSubject, combineLatest, forkJoin, map, merge, Observable, Subject, switchMap, take } from 'rxjs';
 import { Org } from 'src/app/proto/generated/zitadel/org_pb';
 import { User } from 'src/app/proto/generated/zitadel/user_pb';
 import { AuthenticationService } from 'src/app/services/authentication.service';
@ -132,4 +132,15 @@ export class NavComponent implements OnDestroy {
  public openHelp() {
    this.shortcutService.openOverviewDialog();
  }
+
+  public get projectcounter(): Observable<number> {
+    return combineLatest({
+      owned: this.mgmtService.ownedProjectsCount,
+      granted: this.mgmtService.grantedProjectsCount,
+    }).pipe(
+      map(({ owned, granted }) => {
+        return (owned ?? 0) + (granted ?? 0);
+      }),
+    );
+  }
 }
--- 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);
--- 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;
      }
    }
--- 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 @@
 </cnsl-top-view>

 <div *ngIf="loading" class="max-width-container">
+  <div class="user-spinner-wrapper">
    <mat-progress-spinner diameter="25" color="primary" mode="indeterminate"></mat-progress-spinner>
+  </div>
 </div>

 <div class="max-width-container">
--- 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;
--- 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 {
--- 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,16 +15,16 @@ $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,
+  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,
@ -49,7 +49,7 @@ $lgn-dark-brand: (
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
-    )
+  ),
 );

 $lgn-light-brand: (
@ -87,43 +87,9 @@ $lgn-light-brand: (
    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,
@ -154,7 +120,7 @@ $lgn-warn: (
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
-    )
+  ),
 );

 $lgn-grey: (
@ -187,7 +153,7 @@ $lgn-grey: (
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $light-primary-text,
-    )
+  ),
 );

 $lgn-light-theme-background: (
@ -201,7 +167,8 @@ $lgn-light-theme-background: (
  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
+  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,
@ -209,16 +176,18 @@ $lgn-light-theme-background: (

 $lgn-dark-theme-background: (
  background: #212224,
-    hover:      rgba(white, 0.04), // TODO(kara): check style with Material Design UX
+  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),
+  input: rgba(black, 0.2),
  footer: #212224,
-    qrcode: white, // needs white background to recognize borders,
+  qrcode: white,
+  // needs white background to recognize borders,
  account-selector-hover: rgba(white, 0.02),
  account-selector-active: rgba(white, 0.05),
  google: #ffffff,
@ -232,7 +201,7 @@ $lgn-light-theme-foreground: (
  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
+  label: map-get($lgn-grey, 600),
  divider: $dark-dividers,
  disabled: $dark-disabled-text,
  disabled-button: rgba(black, 0.26),
@ -252,7 +221,7 @@ $lgn-dark-theme-foreground: (
  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,
+  label: map-get($lgn-grey, 600),
  divider: $light-dividers,
  disabled: $light-disabled-text,
  disabled-button: rgba(white, 0.3),
--- 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;
--- 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;