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 <[email protected]>

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>

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

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);
+      }),
+    );
+  }
 }