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
2025-12-13 16:53:05 +00:00 · 2021-07-28 14:59:52 +02:00
parent fb06aed238
commit 7d3c768d8b
47 changed files with 963 additions and 588 deletions
--- a/console/src/app/pages/home/home.component.html
+++ b/console/src/app/pages/home/home.component.html
@@ -4,7 +4,7 @@
        <p class="wlc_stnce">{{'HOME.WELCOMESENTENCE' | translate}}</p>
    </div>

-    <div class="container">
+    <div class="gridcontainer">
        <ng-template appHasRole [appHasRole]="['iam.write']">
            <a matRipple *ngIf="!firstStepsDismissed" class="onboard" [routerLink]="['/firststeps']">
                <p class="first-steps">{{'ONBOARDING.HEADER' | translate}}</p>
@@ -17,7 +17,7 @@
            </a>
        </ng-template>

-        <a matRipple *ngIf="!firstStepsDismissed" class="quickstart" target="_blank"
+        <a matRipple *ngIf="!quickstartsDismissed" class="quickstart" target="_blank"
            href="https://docs.zitadel.ch/docs/quickstarts/introduction">
            <p class="first-steps">{{'HOME.QUICKSTARTS.LABEL' | translate}}</p>
            <h2>{{'HOME.QUICKSTARTS.TITLE' | translate}}</h2>
@@ -35,7 +35,7 @@
        </a>

        <ng-template appHasRole [appHasRole]="['iam.write']">
-            <app-card class="item">
+            <app-card class="griditem" [nomargin]="true">
                <div class="top">
                    <h2>
                        <i class="icon las la-gem"></i>
@@ -66,7 +66,7 @@
            </app-card>
        </ng-template>

-        <app-card class="item">
+        <app-card class="griditem" [nomargin]="true">
            <div class="top">
                <h2> <i class="icon las la-user-circle"></i>
                    {{'HOME.SECURITYANDPRIVACY'| translate}}</h2>
@@ -83,7 +83,7 @@
        </app-card>

        <ng-template appHasRole [appHasRole]="['project.read']">
-            <app-card class="item">
+            <app-card class="griditem" [nomargin]="true">
                <div class="top">
                    <h2>
                        <i class="icon las la-layer-group"></i>
@@ -104,7 +104,7 @@
        </ng-template>

        <ng-template appHasRole [appHasRole]="['org.read']">
-            <app-card class="item">
+            <app-card class="griditem" [nomargin]="true">
                <div class="top">
                    <h2> <i class="icon las la-archway"></i>
                        {{'HOME.PROTECTION'| translate}}</h2>
@@ -132,7 +132,7 @@
        </ng-template>

        <ng-template appHasRole [appHasRole]="['user.read']">
-            <app-card class="item">
+            <app-card class="griditem" [nomargin]="true">
                <div class="top">
                    <h2>
                        <i class="las la-users"></i>
--- 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;
--- 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;
+  }
 }
--- 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 @@
    <h1>{{'APP.PAGES.CREATE_OIDC_DESC_TITLE' | translate}}</h1>
    <p class="desc">{{'APP.PAGES.CREATE_OIDC_DESC_SUB' | translate}}</p>

-    <mat-progress-bar class="progress-bar" color="accent" *ngIf="loading" mode="indeterminate"></mat-progress-bar>
+    <mat-progress-bar class="progress-bar" color="primary" *ngIf="loading" mode="indeterminate"></mat-progress-bar>

    <mat-checkbox class="proswitch" color="primary" [(ngModel)]="devmode">
        {{'APP.OIDC.PROSWITCH' | translate}}
--- 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 @@
        <i class="show list view las la-th-list"></i>
    </button>
 </div>
-<div class="container">
-    <mat-progress-bar *ngIf="loading" class="spinner" color="accent" mode="indeterminate"></mat-progress-bar>
+<div class="granted-project-grid-container">
+    <mat-progress-bar *ngIf="loading" class="spinner" color="primary" mode="indeterminate"></mat-progress-bar>

    <p class="n-items" *ngIf="!loading && selection.selected.length > 0">{{'PROJECT.PAGES.PINNED' | translate}}</p>

@@ -28,7 +28,7 @@
    </div>

 </div>
-<div class="container">
+<div class="granted-project-grid-container">
    <p class="n-items" *ngIf="!loading && notPinned.length > 0">{{'PROJECT.PAGES.ALL' | translate}}</p>

    <div class="item card" *ngFor="let item of notPinned; index as i"
--- a/console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.scss
+++ b/console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.scss
@@ -1,9 +1,16 @@
+@mixin granted-project-grid-theme($theme) {
+  $foreground: map-get($theme, foreground);
+
+  .view-toggle {
+    border-bottom: 1px solid map-get($foreground, divider);
+  }
+}
+
 .view-toggle {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-bottom: .5rem;
-  border-bottom: 1px solid #2d2e30;

  .anim-list {
    display: flex;
@@ -22,7 +29,7 @@
  margin: 1rem;
 }

-.container {
+.granted-project-grid-container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;
--- a/console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.html
+++ b/console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.html
@@ -4,8 +4,8 @@
    </button>
 </div>

-<div class="container">
-    <mat-progress-bar *ngIf="loading" class="spinner" color="accent" mode="indeterminate"></mat-progress-bar>
+<div class="owned-project-grid-container">
+    <mat-progress-bar *ngIf="loading" class="spinner" color="primary" mode="indeterminate"></mat-progress-bar>

    <p class="n-items" *ngIf="!loading && selection.selected.length > 0">{{'PROJECT.PAGES.PINNED' | translate}}</p>

@@ -31,7 +31,7 @@
    </div>

 </div>
-<div class="container">
+<div class="owned-project-grid-container">
    <p class="n-items" *ngIf="!loading && notPinned.length > 0">{{'PROJECT.PAGES.ALL' | translate}}</p>

    <div class="item card" *ngFor="let item of notPinned; index as i" (click)="navigateToProject(item.id, $event)"
--- a/console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.scss
+++ b/console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.scss
@@ -1,9 +1,16 @@
+@mixin owned-project-grid-theme($theme) {
+  $foreground: map-get($theme, foreground);
+
+  .view-toggle {
+    border-bottom: 1px solid map-get($foreground, divider);
+  }
+}
+
 .view-toggle {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-bottom: .5rem;
-  border-bottom: 1px solid #2d2e30;

  .anim-list {
    display: flex;
@@ -22,7 +29,7 @@
  margin: 1rem;
 }

-.container {
+.owned-project-grid-container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;
--- a/console/src/app/pages/users/user-create-machine/user-create-machine.component.html
+++ b/console/src/app/pages/users/user-create-machine/user-create-machine.component.html
@@ -1,6 +1,6 @@
 <app-detail-layout [backRouterLink]="[ '/users/list/machines']" title="{{ 'USER.CREATE.TITLE' | translate }}"
    description="{{ 'USER.CREATE.DESCRIPTION' | translate }}">
-    <mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
+    <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>

    <form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="form">
        <div class="content">
--- 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 @@
 <app-detail-layout [backRouterLink]="[ '/users/list/humans']" title="{{ 'USER.CREATE.TITLE' | translate }}"
    description="{{ 'USER.CREATE.DESCRIPTION' | translate }}">
-    <mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
+    <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>

    <form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="form">
        <div class="content">
--- 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 @@
                <app-theme-setting></app-theme-setting>
            </div>
        </div>
-        <mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
+        <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>

        <span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>

--- 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);
  }
 }
--- 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;
-}
--- 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;
--- 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 @@
            </ng-template>
        </div>

-        <mat-progress-bar *ngIf="loading" color="accent" mode="indeterminate"></mat-progress-bar>
+        <mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>

        <span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>