Merge remote-tracking branch 'origin/master' into new-state-concept

apps/red-ui/src/app/app-routing.module.ts

@@ -1,6 +1,6 @@
 import { AuthErrorComponent } from '@components/auth-error/auth-error.component';
 import { AuthGuard } from './modules/auth/auth.guard';
-import { CompositeRouteGuard } from '@guards/composite-route.guard';
+import { CompositeRouteGuard, CustomRouteReuseStrategy } from '@iqser/common-ui';
 import { RedRoleGuard } from './modules/auth/red-role.guard';
 import { BaseScreenComponent } from '@components/base-screen/base-screen.component';
 import { RouteReuseStrategy, RouterModule } from '@angular/router';
@@ -8,7 +8,6 @@ import { NgModule } from '@angular/core';
 import { DownloadsListScreenComponent } from '@components/downloads-list-screen/downloads-list-screen.component';
 import { AppStateGuard } from '@state/app-state.guard';
 import { UserProfileScreenComponent } from '@components/user-profile/user-profile-screen.component';
-import { CustomRouteReuseStrategy } from '@utils/custom-route-reuse.strategy';
 
 const routes = [
     {

apps/red-ui/src/app/app.module.ts

@@ -14,7 +14,6 @@ import { ToastrModule } from 'ngx-toastr';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '@environments/environment';
 import { AuthModule } from './modules/auth/auth.module';
-import { LogoComponent } from '@components/logo/logo.component';
 import { AuthErrorComponent } from '@components/auth-error/auth-error.component';
 import { ToastComponent } from '@components/toast/toast.component';
 import { HttpCacheInterceptor } from '@redaction/red-cache';
@@ -55,15 +54,7 @@ function cleanupBaseUrl(baseUrl: string) {
 
 const screens = [BaseScreenComponent, DownloadsListScreenComponent, UserProfileScreenComponent];
 
-const components = [
+const components = [AppComponent, AuthErrorComponent, ToastComponent, NotificationsComponent, SpotlightSearchComponent, ...screens];
-    AppComponent,
-    LogoComponent,
-    AuthErrorComponent,
-    ToastComponent,
-    NotificationsComponent,
-    SpotlightSearchComponent,
-    ...screens
-];
 
 @NgModule({
     declarations: [...components],

apps/red-ui/src/app/components/base-screen/base-screen.component.html

@@ -1,87 +1,105 @@
 <iqser-help-mode *ngIf="userPreferenceService.areDevFeaturesEnabled"></iqser-help-mode>
 
-<div class="red-top-bar">
+<div class="top-bar">
-    <div class="top-bar-row">
+    <div *ngIf="!currentUser.isUser" class="menu-placeholder"></div>
-        <div *ngIf="!currentUser.isUser" class="menu-placeholder"></div>
 
-        <div *ngIf="currentUser.isUser" class="menu flex-2 breadcrumbs-container">
+    <div *ngIf="currentUser.isUser" class="menu visible-lt-lg">
-            <a *ngIf="(isDossiersView$ | async) === false" class="breadcrumb back" redactionNavigateLastDossiersScreen>
+        <button [matMenuTriggerFor]="menuNav" mat-flat-button>
-                <mat-icon svgIcon="red:expand"></mat-icon>
+            <mat-icon svgIcon="red:menu"></mat-icon>
-                {{ 'top-bar.navigation-items.back' | translate }}
+        </button>
+        <mat-menu #menuNav="matMenu">
+            <button mat-menu-item routerLink="/main/dossiers" translate="top-bar.navigation-items.dossiers"></button>
+            <button *ngIf="appStateService.activeDossier" [routerLink]="'/main/dossiers/' + appStateService.activeDossierId" mat-menu-item>
+                {{ appStateService.activeDossier.dossierName }}
+            </button>
+            <button
+                *ngIf="appStateService.activeFile"
+                [routerLink]="'/main/dossiers/' + appStateService.activeDossierId + '/file/' + appStateService.activeFile.fileId"
+                mat-menu-item
+            >
+                {{ appStateService.activeFile.filename }}
+            </button>
+        </mat-menu>
+    </div>
+
+    <div *ngIf="currentUser.isUser" class="menu flex-2 visible-lg breadcrumbs-container">
+        <a *ngIf="(isDossiersView$ | async) === false" class="breadcrumb back" redactionNavigateLastDossiersScreen>
+            <mat-icon svgIcon="iqser:expand"></mat-icon>
+            {{ 'top-bar.navigation-items.back' | translate }}
+        </a>
+
+        <ng-container *ngIf="isDossiersView$ | async">
+            <a
+                [routerLinkActiveOptions]="{ exact: true }"
+                class="breadcrumb"
+                routerLink="/main/dossiers"
+                routerLinkActive="active"
+                translate="top-bar.navigation-items.dossiers"
+            ></a>
+
+            <mat-icon *ngIf="appStateService.activeDossier" svgIcon="iqser:arrow-right"></mat-icon>
+
+            <a
+                *ngIf="appStateService.activeDossier"
+                [routerLinkActiveOptions]="{ exact: true }"
+                [routerLink]="'/main/dossiers/' + appStateService.activeDossierId"
+                class="breadcrumb"
+                routerLinkActive="active"
+            >
+                {{ appStateService.activeDossier.dossierName }}
             </a>
 
-            <ng-container *ngIf="isDossiersView$ | async">
+            <mat-icon *ngIf="appStateService.activeFile" svgIcon="iqser:arrow-right"></mat-icon>
-                <a
-                    [routerLinkActiveOptions]="{ exact: true }"
-                    class="breadcrumb"
-                    routerLink="/main/dossiers"
-                    routerLinkActive="active"
-                    translate="top-bar.navigation-items.dossiers"
-                ></a>
 
-                <ng-container *ngIf="dossiersService.activeDossier$ | async as activeDossier">
+            <a
-                    <mat-icon svgIcon="red:arrow-right"></mat-icon>
+                *ngIf="appStateService.activeFile"
-
+                [routerLink]="'/main/dossiers/' + appStateService.activeDossierId + '/file/' + appStateService.activeFile.fileId"
-                    <a
+                class="breadcrumb"
-                        [routerLinkActiveOptions]="{ exact: true }"
+                routerLinkActive="active"
-                        [routerLink]="activeDossier.routerLink"
+            >
-                        class="breadcrumb"
+                {{ appStateService.activeFile.filename }}
-                        routerLinkActive="active"
+            </a>
-                    >
+        </ng-container>
-                        {{ activeDossier.dossierName }}
+    </div>
-                    </a>
+
-                </ng-container>
+    <div class="center">
-
+        <iqser-hidden-action (action)="userPreferenceService.toggleDevFeatures()">
-                <ng-container *ngIf="appStateService.activeFile as activeFile">
+            <iqser-logo icon="red:logo"></iqser-logo>
-                    <mat-icon svgIcon="red:arrow-right"></mat-icon>
+        </iqser-hidden-action>
-
+        <div class="app-name">{{ titleService.getTitle() }}</div>
-                    <a [routerLink]="activeFile.routerLink" class="breadcrumb" routerLinkActive="active">
+    </div>
-                        {{ activeFile.filename }}
+
-                    </a>
+    <div class="menu right flex-2">
-                </ng-container>
+        <div class="buttons">
-            </ng-container>
+            <redaction-spotlight-search
-        </div>
+                *ngIf="(isSearchScreen$ | async) === false"
-
+                [actions]="searchActions"
-        <div class="center logo-wrapper">
+                [placeholder]="'search.placeholder' | translate"
-            <redaction-hidden-action (action)="userPreferenceService.toggleDevFeatures()">
+                iqserHelpMode="search"
-                <redaction-logo></redaction-logo>
+            ></redaction-spotlight-search>
-            </redaction-hidden-action>
+
-            <div class="app-name">{{ titleService.getTitle() }}</div>
+            <redaction-notifications iqserHelpMode="notifications"></redaction-notifications>
-        </div>
+        </div>
-
+        <redaction-user-button
-        <div class="menu right flex-2">
+            [matMenuTriggerFor]="userMenu"
-            <div class="buttons">
+            [showDot]="fileDownloadService.hasPendingDownloads"
-                <redaction-spotlight-search
+            [userId]="currentUser.id"
-                    *ngIf="(isSearchScreen$ | async) === false"
+            iqserHelpMode="user-menu"
-                    [actions]="searchActions"
+        ></redaction-user-button>
-                    [placeholder]="'search.placeholder' | translate"
+
-                    iqserHelpMode="search"
+        <mat-menu #userMenu="matMenu" xPosition="before">
-                ></redaction-spotlight-search>
+            <ng-container *ngFor="let item of userMenuItems; trackBy: trackByName">
-
+                <button (click)="(item.action)" *ngIf="item.show" [routerLink]="item.routerLink" mat-menu-item translate>
-                <redaction-notifications iqserHelpMode="notifications"></redaction-notifications>
+                    {{ item.name }}
-            </div>
+                </button>
-            <redaction-user-button
+            </ng-container>
-                [matMenuTriggerFor]="userMenu"
+
-                [showDot]="fileDownloadService.hasPendingDownloads"
+            <button (click)="userService.logout()" mat-menu-item>
-                [userId]="currentUser.id"
+                <mat-icon svgIcon="red:logout"></mat-icon>
-                iqserHelpMode="user-menu"
+                <span translate="top-bar.navigation-items.my-account.children.logout"> </span>
-            ></redaction-user-button>
+            </button>
-
+        </mat-menu>
-            <mat-menu #userMenu="matMenu" xPosition="before">
-                <ng-container *ngFor="let item of userMenuItems; trackBy: trackByName">
-                    <button (click)="(item.action)" *ngIf="item.show" [routerLink]="item.routerLink" mat-menu-item translate>
-                        {{ item.name }}
-                    </button>
-                </ng-container>
-
-                <button (click)="userService.logout()" mat-menu-item>
-                    <mat-icon svgIcon="red:logout"></mat-icon>
-                    <span translate="top-bar.navigation-items.my-account.children.logout"> </span>
-                </button>
-            </mat-menu>
-        </div>
     </div>
-    <div class="divider"></div>
 </div>
 
 <div *ngIf="userPreferenceService.areDevFeaturesEnabled" class="dev-mode" translate="dev-mode"></div>

apps/red-ui/src/app/components/base-screen/base-screen.component.scss

@@ -1,39 +1,3 @@
-@use 'variables';
-
-.dev-mode {
-    background-color: variables.$primary;
-    color: variables.$white;
-    font-size: 22px;
-    line-height: 16px;
-    text-align: center;
-    position: fixed;
-    top: 0;
-    z-index: 100;
-    right: 0;
-    height: 61px;
-    word-break: break-all;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-family: monospace;
-    width: 24px;
-    font-weight: bold;
-}
-
-.menu-placeholder {
-    display: flex;
-    flex: 2;
-}
-
-.buttons {
-    display: flex;
-    margin-right: 8px;
-
-    > *:not(:last-child) {
-        margin-right: 2px;
-    }
-}
-
 redaction-spotlight-search {
     margin-right: 16px !important;
 }

apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html

@@ -1,10 +1,7 @@
 <section>
-    <redaction-page-header
+    <iqser-page-header (closeAction)="routerHistoryService.navigateToLastDossiersScreen()" [showCloseButton]="true"></iqser-page-header>
-        (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
-        [showCloseButton]="true"
-    ></redaction-page-header>
 
-    <div class="red-content-inner">
+    <div class="content-inner">
         <div class="content-container">
             <iqser-table
                 [bulkActions]="bulkActions"

apps/red-ui/src/app/components/logo/logo.component.html

@@ -1 +0,0 @@
-<mat-icon svgIcon="red:logo"></mat-icon>

apps/red-ui/src/app/components/logo/logo.component.scss

@@ -1,10 +0,0 @@
-@use 'variables';
-
-:host {
-    color: variables.$primary;
-}
-
-mat-icon {
-    width: 28px;
-    height: 28px;
-}

apps/red-ui/src/app/components/logo/logo.component.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector: 'redaction-logo',
-    templateUrl: './logo.component.html',
-    styleUrls: ['./logo.component.scss']
-})
-export class LogoComponent {}

apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html

@@ -4,7 +4,7 @@
     [placeholder]="placeholder"
 ></iqser-input-with-action>
 
-<mat-menu #menu="matMenu" xPosition="after">
+<mat-menu #menu="matMenu" class="search-menu" xPosition="after">
     <ng-template matMenuContent>
         <div class="wrapper">
             <button

apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss

@@ -22,7 +22,7 @@
     width: 300px;
 }
 
-::ng-deep .mat-menu-content {
+::ng-deep.search-menu .mat-menu-content {
     padding: 8px !important;
 }
 

apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html

@@ -1,4 +1,4 @@
-<section class="red-content-inner">
+<section class="content-inner">
     <div class="content-container full-height">
         <div class="overlay-shadow"></div>
         <div class="dialog">

apps/red-ui/src/app/guards/composite-route.guard.ts

@@ -1,40 +0,0 @@
-import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
-import { Injectable, Injector } from '@angular/core';
-import { from, of } from 'rxjs';
-import { LoadingService } from '@iqser/common-ui';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class CompositeRouteGuard implements CanActivate {
-    constructor(protected readonly _injector: Injector, private readonly _loadingService: LoadingService) {}
-
-    async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
-        this._loadingService.start();
-
-        const routeGuards = route.data.routeGuards;
-
-        if (routeGuards) {
-            for (let i = 0; i < routeGuards.length; i++) {
-                const routeGuard = this._injector.get<CanActivate>(routeGuards[i]);
-                let canActivateResult = routeGuard.canActivate(route, state);
-                if (canActivateResult instanceof Promise) {
-                    canActivateResult = from(canActivateResult);
-                }
-                if (typeof canActivateResult === 'boolean' || canActivateResult instanceof UrlTree) {
-                    canActivateResult = of(canActivateResult);
-                }
-
-                const result = await canActivateResult.toPromise();
-                if (!result) {
-                    this._loadingService.stop();
-                    return false;
-                }
-            }
-        }
-
-        this._loadingService.stop();
-
-        return true;
-    }
-}

apps/red-ui/src/app/modules/admin/admin-routing.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { AuthGuard } from '../auth/auth.guard';
-import { CompositeRouteGuard } from '@guards/composite-route.guard';
+import { CompositeRouteGuard } from '@iqser/common-ui';
 import { RedRoleGuard } from '../auth/red-role.guard';
 import { AppStateGuard } from '@state/app-state.guard';
 import { DossierTemplatesListingScreenComponent } from './screens/dossier-template-listing/dossier-templates-listing-screen.component';

apps/red-ui/src/app/modules/admin/components/breadcrumbs/admin-breadcrumbs.component.html

@@ -7,7 +7,7 @@
     ></a>
 
     <ng-container *ngIf="appStateService.activeDossierTemplate">
-        <mat-icon svgIcon="red:arrow-right"></mat-icon>
+        <mat-icon svgIcon="iqser:arrow-right"></mat-icon>
         <a
             [class.active]="!appStateService.activeDictionaryType"
             [routerLink]="'/main/admin/dossier-templates/' + appStateService.activeDossierTemplateId"
@@ -18,7 +18,7 @@
     </ng-container>
 
     <ng-container *ngIf="appStateService.activeDictionary">
-        <mat-icon svgIcon="red:arrow-right"></mat-icon>
+        <mat-icon svgIcon="iqser:arrow-right"></mat-icon>
         <a
             [routerLink]="
                 '/main/admin/dossier-templates/' +

apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html

@@ -2,7 +2,7 @@
     <iqser-circle-button
         (action)="toggleCollapse.emit()"
         [tooltip]="'user-stats.expand' | translate"
-        icon="red:expand"
+        icon="iqser:expand"
         tooltipPosition="before"
     ></iqser-circle-button>
     <div class="all-caps-label" translate="user-stats.title"></div>
@@ -13,7 +13,7 @@
     <iqser-circle-button
         (action)="toggleCollapse.emit()"
         [tooltip]="'user-stats.collapse' | translate"
-        icon="red:collapse"
+        icon="iqser:collapse"
         tooltipPosition="before"
     ></iqser-circle-button>
 </div>

apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html

@@ -128,7 +128,7 @@
                     <div [translate]="'file-attributes-csv-import.csv-column'" class="all-caps-label"></div>
                     <iqser-circle-button
                         (click)="previewExpanded = !previewExpanded"
-                        [icon]="previewExpanded ? 'red:expand' : 'red:collapse'"
+                        [icon]="previewExpanded ? 'iqser:expand' : 'iqser:collapse'"
                     ></iqser-circle-button>
                 </div>
                 <div [class.hidden]="!previewExpanded" class="csv-part-content">

apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html

@@ -18,7 +18,7 @@
                 ></iqser-circle-button>
             </div>
         </div>
-        <div class="red-content-inner">
+        <div class="content-inner">
             <div class="content-container">
                 <iqser-table
                     [headerTemplate]="headerTemplate"

apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html

@@ -14,7 +14,7 @@
         </div>
     </div>
 
-    <div class="red-content-inner">
+    <div class="content-inner">
         <div class="overlay-shadow"></div>
 
         <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>

apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html

@@ -14,7 +14,7 @@
         </div>
     </div>
 
-    <div class="red-content-inner">
+    <div class="content-inner">
         <div class="overlay-shadow"></div>
 
         <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
@@ -71,7 +71,7 @@
                 *ngIf="currentUser.isAdmin"
                 [label]="'dictionary-listing.add-new' | translate"
                 [type]="iconButtonTypes.primary"
-                icon="red:plus"
+                icon="iqser:plus"
             ></iqser-icon-button>
         </div>
     </div>

apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html

@@ -48,7 +48,7 @@
         </div>
     </div>
 
-    <div class="flex red-content-inner">
+    <div class="flex content-inner">
         <div class="overlay-shadow"></div>
 
         <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>

apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html

@@ -4,13 +4,13 @@
     <redaction-admin-side-nav type="settings"></redaction-admin-side-nav>
 
     <div>
-        <redaction-page-header
+        <iqser-page-header
             (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
             [pageLabel]="'digital-signature' | translate"
             [showCloseButton]="currentUser.isUser"
-        ></redaction-page-header>
+        ></iqser-page-header>
 
-        <div class="red-content-inner">
+        <div class="content-inner">
             <div class="content-container">
                 <div class="content-container-content">
                     <form *ngIf="digitalSignatureForm" [formGroup]="digitalSignatureForm" autocomplete="off">
@@ -78,16 +78,16 @@
                                 (action)="saveDigitalSignature()"
                                 [disabled]="digitalSignatureForm.invalid"
                                 [label]="'digital-signature-screen.action.save' | translate"
-                                icon="iqser:check"
                                 [type]="iconButtonTypes.primary"
+                                icon="iqser:check"
                             ></iqser-icon-button>
 
                             <iqser-icon-button
                                 (action)="removeDigitalSignature()"
                                 *ngIf="digitalSignatureExists"
                                 [label]="'digital-signature-screen.action.delete' | translate"
-                                icon="red:trash"
                                 [type]="iconButtonTypes.primary"
+                                icon="red:trash"
                             ></iqser-icon-button>
 
                             <div

apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html

@@ -14,7 +14,7 @@
         </div>
     </div>
 
-    <div class="red-content-inner">
+    <div class="content-inner">
         <div class="overlay-shadow"></div>
 
         <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
@@ -59,7 +59,7 @@
             *ngIf="currentUser.isAdmin"
             [label]="'dossier-attributes-listing.add-new' | translate"
             [type]="iconButtonTypes.primary"
-            icon="red:plus"
+            icon="iqser:plus"
         ></iqser-icon-button>
     </div>
 </ng-template>

apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html

@@ -4,13 +4,13 @@
     <redaction-admin-side-nav type="settings"></redaction-admin-side-nav>
 
     <div>
-        <redaction-page-header
+        <iqser-page-header
             (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
             [pageLabel]="'dossier-templates' | translate"
             [showCloseButton]="currentUser.isUser"
-        ></redaction-page-header>
+        ></iqser-page-header>
 
-        <div class="red-content-inner">
+        <div class="content-inner">
             <div class="content-container">
                 <iqser-table
                     [bulkActions]="bulkActions"
@@ -56,7 +56,7 @@
             *ngIf="currentUser.isAdmin && userPreferenceService.areDevFeaturesEnabled"
             [label]="'dossier-templates-listing.add-new' | translate"
             [type]="iconButtonTypes.primary"
-            icon="red:plus"
+            icon="iqser:plus"
         ></iqser-icon-button>
     </div>
 </ng-template>

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html

@@ -14,7 +14,7 @@
         </div>
     </div>
 
-    <div class="red-content-inner">
+    <div class="content-inner">
         <div class="overlay-shadow"></div>
 
         <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
@@ -69,7 +69,7 @@
             *ngIf="currentUser.isAdmin"
             [label]="'file-attributes-listing.add-new' | translate"
             [type]="iconButtonTypes.primary"
-            icon="red:plus"
+            icon="iqser:plus"
         ></iqser-icon-button>
     </div>
 </ng-template>

apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.html

@@ -19,7 +19,7 @@
             </div>
         </div>
 
-        <div class="red-content-inner">
+        <div class="content-inner">
             <div class="content-container">
                 <div class="dialog mb-8">
                     <div class="dialog-header">
@@ -40,17 +40,17 @@
                                 </div>
 
                                 <div class="inline-input-group flex-align-items-center">
-                                    <mat-slide-toggle formControlName="forgotPasswordFunctionEnabled" color="primary"></mat-slide-toggle>
+                                    <mat-slide-toggle color="primary" formControlName="forgotPasswordFunctionEnabled"></mat-slide-toggle>
                                     <span class="ml-8" translate="general-config-screen.general.form.forgot-password"></span>
                                 </div>
                             </div>
                         </div>
                         <div class="dialog-actions">
                             <button
-                                type="submit"
                                 [disabled]="configForm.invalid || !generalConfigurationChanged"
                                 color="primary"
                                 mat-flat-button
+                                type="submit"
                             >
                                 {{ 'general-config-screen.actions.save' | translate }}
                             </button>

apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html

@@ -4,14 +4,14 @@
     <redaction-admin-side-nav type="settings"></redaction-admin-side-nav>
 
     <div>
-        <redaction-page-header
+        <iqser-page-header
             (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
             [buttonConfigs]="buttonConfigs"
             [pageLabel]="'license-information' | translate"
             [showCloseButton]="currentUser.isUser"
-        ></redaction-page-header>
+        ></iqser-page-header>
 
-        <div class="red-content-inner">
+        <div class="content-inner">
             <div class="content-container">
                 <div class="grid-container">
                     <div class="row">

apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.ts

@@ -3,8 +3,7 @@ import { LicenseReport, LicenseReportControllerService } from '@redaction/red-ui
 import { ConfigService } from '@services/config.service';
 import * as moment from 'moment';
 import { TranslateService } from '@ngx-translate/core';
-import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
+import { ButtonConfig, IconButtonTypes, LoadingService } from '@iqser/common-ui';
-import { ButtonConfig } from '@shared/components/page-header/models/button-config.model';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { UserService } from '@services/user.service';
 import { RouterHistoryService } from '@services/router-history.service';

apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html

@@ -14,7 +14,7 @@
         </div>
     </div>
 
-    <div class="red-content-inner">
+    <div class="content-inner">
         <div class="overlay-shadow"></div>
 
         <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>

apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html

@@ -14,7 +14,7 @@
         </div>
     </div>
 
-    <div class="red-content-inner">
+    <div class="content-inner">
         <div class="overlay-shadow"></div>
 
         <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
@@ -26,8 +26,8 @@
             <iqser-icon-button
                 (action)="save()"
                 [label]="'rules-screen.save-changes' | translate"
-                icon="iqser:check"
                 [type]="iconButtonTypes.primary"
+                icon="iqser:check"
             ></iqser-icon-button>
             <div (click)="revert()" class="all-caps-label cancel" translate="rules-screen.revert-changes"></div>
         </div>

apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html

@@ -1,13 +1,13 @@
 <section>
     <div class="overlay-shadow"></div>
 
-    <redaction-page-header
+    <iqser-page-header
         (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
         [pageLabel]="'trash.label' | translate"
         [showCloseButton]="true"
-    ></redaction-page-header>
+    ></iqser-page-header>
 
-    <div class="red-content-inner">
+    <div class="content-inner">
         <div class="content-container">
             <iqser-table
                 [bulkActions]="bulkActions"

apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html

@@ -17,7 +17,7 @@
                     *ngIf="currentUser.isUserAdmin"
                     [label]="'user-listing.add-new' | translate"
                     [type]="iconButtonTypes.primary"
-                    icon="red:plus"
+                    icon="iqser:plus"
                 ></iqser-icon-button>
                 <iqser-circle-button
                     *ngIf="currentUser.isUser"
@@ -30,7 +30,7 @@
             </div>
         </div>
 
-        <div class="red-content-inner">
+        <div class="content-inner">
             <div [class.extended]="collapsedDetails" class="content-container">
                 <iqser-table
                     [bulkActions]="bulkActions"

apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html

@@ -14,7 +14,7 @@
         </div>
     </div>
 
-    <div class="red-content-inner">
+    <div class="content-inner">
         <div class="overlay-shadow"></div>
 
         <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>

apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html

@@ -25,7 +25,7 @@
     *ngIf="permissionsService.canAddComment()"
     [placeholder]="'comments.add-comment' | translate"
     autocomplete="off"
-    icon="red:collapse"
+    icon="iqser:collapse"
     width="full"
 ></iqser-input-with-action>
 

apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html

@@ -32,7 +32,7 @@
             <mat-progress-bar [mode]="'indeterminate'" class="w-100"></mat-progress-bar>
         </div>
         <div class="flex-center">
-            <mat-icon class="red-white" svgIcon="red:read-only"></mat-icon>
+            <mat-icon class="primary-white" svgIcon="red:read-only"></mat-icon>
             <span class="read-only-text" translate="readonly"></span>
         </div>
     </div>

apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss

@@ -19,7 +19,7 @@
         height: 14px;
         width: 14px;
 
-        &.red-white {
+        &.primary-white {
             padding-right: 8px;
         }
     }

apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts

@@ -8,7 +8,7 @@ import { FileDataModel } from '@models/file/file-data.model';
 import { PermissionsService } from '@services/permissions.service';
 import { WebViewerInstance } from '@pdftron/webviewer';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 
 const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape'];
 const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
@@ -43,10 +43,10 @@ export class FileWorkloadComponent {
     @Output() readonly actionPerformed = new EventEmitter<string>();
     displayedPages: number[] = [];
     pagesPanelActive = true;
+    readonly displayedAnnotations$: Observable<Map<number, AnnotationWrapper[]>>;
     private _annotations$ = new BehaviorSubject<AnnotationWrapper[]>([]);
     @ViewChild('annotationsElement') private readonly _annotationsElement: ElementRef;
     @ViewChild('quickNavigation') private readonly _quickNavigationElement: ElementRef;
-    readonly displayedAnnotations$: Observable<Map<number, AnnotationWrapper[]>>;
 
     constructor(
         private readonly _permissionsService: PermissionsService,

apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.scss

@@ -1,3 +1,5 @@
+@use 'variables';
+
 .content-wrapper {
     padding-top: 20px;
     padding-bottom: 8px;
@@ -8,3 +10,14 @@ ul {
         padding-top: 4px;
     }
 }
+
+.default-table {
+    border-collapse: collapse;
+
+    th,
+    td {
+        padding: 8px;
+        text-align: left;
+        border: 1px solid variables.$separator;
+    }
+}

apps/red-ui/src/app/modules/dossier/dossiers-routing.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { CompositeRouteGuard } from '@guards/composite-route.guard';
+import { CompositeRouteGuard } from '@iqser/common-ui';
 import { AuthGuard } from '../auth/auth.guard';
 import { RedRoleGuard } from '../auth/red-role.guard';
 import { AppStateGuard } from '@state/app-state.guard';

apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss

@@ -1,5 +1,5 @@
 @use 'variables';
-@use 'red-components';
+@use 'common-components';
 @use 'common-texts';
 
 :host {

apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.html

@@ -83,7 +83,7 @@
 <ng-template #collapsible let-action="action" let-tooltip="tooltip">
     <iqser-circle-button
         (action)="toggleCollapse.emit()"
-        [icon]="'red:' + action"
+        [icon]="'iqser:' + action"
         [tooltip]="tooltip"
         tooltipPosition="before"
     ></iqser-circle-button>

apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html

@@ -1,8 +1,7 @@
 <section *ngIf="!!currentDossier">
-    <redaction-page-header
+    <iqser-page-header
         (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
         [actionConfigs]="actionConfigs"
-        [fileAttributeConfigs]="fileAttributeConfigs"
         [showCloseButton]="true"
         [viewModeSelection]="viewModeSelection"
     >
@@ -30,11 +29,11 @@
             icon="red:upload"
             tooltipPosition="below"
         ></iqser-circle-button>
-    </redaction-page-header>
+    </iqser-page-header>
 
     <div class="overlay-shadow"></div>
 
-    <div class="red-content-inner">
+    <div class="content-inner">
         <div [class.extended]="collapsedDetails" class="content-container">
             <iqser-table
                 (noDataAction)="fileInput.click()"

apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.ts

@@ -23,16 +23,18 @@ import { File } from '@models/file/file';
 import { UserService } from '@services/user.service';
 import { timer } from 'rxjs';
 import { tap } from 'rxjs/operators';
-import { convertFiles, Files, handleFileDrop, OnAttach, OnDetach } from '@utils/index';
+import { convertFiles, Files, handleFileDrop } from '@utils/index';
 import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
-import { ActionConfig } from '@shared/components/page-header/models/action-config.model';
 import {
+    ActionConfig,
     CircleButtonTypes,
     DefaultListingServices,
     ListingComponent,
     ListingModes,
     LoadingService,
     NestedFilter,
+    OnAttach,
+    OnDetach,
     TableColumnConfig,
     TableComponent,
     Toaster,

apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/config.service.ts

@@ -1,11 +1,10 @@
 import { Injectable, TemplateRef } from '@angular/core';
-import { IFilterGroup, keyChecker, NestedFilter, TableColumnConfig } from '@iqser/common-ui';
+import { ButtonConfig, IFilterGroup, keyChecker, NestedFilter, TableColumnConfig } from '@iqser/common-ui';
 import { Dossier } from '@state/model/dossier';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
 import { UserPreferenceService } from '@services/user-preference.service';
 import { UserService } from '@services/user.service';
-import { ButtonConfig } from '@shared/components/page-header/models/button-config.model';
 import { User } from '@models/user';
 import { fileStatusTranslations } from '../../translations/file-status-translations';
 import {
@@ -78,7 +77,7 @@ export class ConfigService {
                 label: _('dossier-listing.add-new'),
                 action: addDossier,
                 hide: !this._currentUser.isManager,
-                icon: 'red:plus',
+                icon: 'iqser:plus',
                 type: 'primary'
             }
         ];

apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.html

@@ -1,9 +1,9 @@
 <section>
-    <redaction-page-header [buttonConfigs]="buttonConfigs"></redaction-page-header>
+    <iqser-page-header [buttonConfigs]="buttonConfigs"></iqser-page-header>
 
     <div class="overlay-shadow"></div>
 
-    <div class="red-content-inner">
+    <div class="content-inner">
         <div class="content-container">
             <iqser-table
                 (noDataAction)="openAddDossierDialog()"

apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.ts

@@ -10,8 +10,8 @@ import { timer } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { Router } from '@angular/router';
 import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
-import { groupBy, OnAttach, OnDetach, StatusSorter } from '@utils/index';
+import { groupBy, StatusSorter } from '@utils/index';
-import { EntitiesService, FilterService, ListingComponent, SearchService, SortingService, TableComponent } from '@iqser/common-ui';
+import { DefaultListingServices, ListingComponent, OnAttach, OnDetach, TableComponent } from '@iqser/common-ui';
 import { fileStatusTranslations } from '../../../translations/file-status-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { ConfigService } from '../config.service';

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html

@@ -129,7 +129,7 @@
 
     <div class="overlay-shadow"></div>
 
-    <div class="red-content-inner">
+    <div class="content-inner">
         <div class="content-container">
             <redaction-pdf-viewer
                 (annotationSelected)="handleAnnotationSelected($event)"

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts

@@ -10,6 +10,8 @@ import {
     FilterService,
     INestedFilter,
     LoadingService,
+    OnAttach,
+    OnDetach,
     processFilters,
     Toaster
 } from '@iqser/common-ui';
@@ -32,7 +34,6 @@ import { download } from '@utils/file-download-utils';
 import { ViewMode } from '@models/file/view-mode';
 import { FileWorkloadComponent } from '../../components/file-workload/file-workload.component';
 import { DossiersDialogService } from '../../services/dossiers-dialog.service';
-import { OnAttach, OnDetach } from '@utils/custom-route-reuse.strategy';
 import { clearStamps, stampPDFPage } from '@utils/page-stamper';
 import { TranslateService } from '@ngx-translate/core';
 import { fileStatusTranslations } from '../../translations/file-status-translations';

apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html

@@ -1,15 +1,15 @@
 <section *ngIf="searchResults$ | async">
-    <redaction-page-header
+    <iqser-page-header
         (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
         [searchPlaceholder]="'search.placeholder' | translate"
         [searchPosition]="searchPositions.beforeFilters"
         [searchWidth]="600"
         [showCloseButton]="true"
-    ></redaction-page-header>
+    ></iqser-page-header>
 
     <div class="overlay-shadow"></div>
 
-    <div class="red-content-inner">
+    <div class="content-inner">
         <div class="content-container">
             <iqser-table
                 [hasScrollButton]="true"

apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts

@@ -6,6 +6,7 @@ import {
     ListingComponent,
     LoadingService,
     NestedFilter,
+    SearchPositions,
     TableColumnConfig
 } from '@iqser/common-ui';
 import { List, MatchedDocument, SearchControllerService, SearchResult } from '@redaction/red-ui-http';
@@ -14,7 +15,6 @@ import { debounceTime, map, skip, switchMap, tap } from 'rxjs/operators';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { fileStatusTranslations } from '../../translations/file-status-translations';
-import { SearchPositions } from '@shared/components/page-header/models/search-positions.type';
 import { TranslateService } from '@ngx-translate/core';
 import { RouterHistoryService } from '@services/router-history.service';
 import { DossiersService } from '../../services/dossiers.service';

apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html

@@ -15,7 +15,7 @@
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.open-document' | translate"
             [type]="buttonType"
-            icon="red:collapse"
+            icon="iqser:collapse"
         ></iqser-circle-button>
 
         <iqser-circle-button

apps/red-ui/src/app/modules/icons/icons.module.ts

@@ -15,14 +15,12 @@ export class IconsModule {
             'ai',
             'analyse',
             'approved',
-            'arrow-right',
             'arrow-up',
             'assign',
             'assign-me',
             'attribute',
             'calendar',
             'case-sensitive',
-            'collapse',
             'color-picker',
             'comment',
             'comment-fill',
@@ -34,7 +32,6 @@ export class IconsModule {
             'enter',
             'exclude-pages',
             'exit-fullscreen',
-            'expand',
             'folder',
             'fullscreen',
             'html-file',
@@ -53,11 +50,8 @@ export class IconsModule {
             'ocr',
             'page',
             'pages',
-            'plus',
             'preview',
             'put-back',
-            'radio-indeterminate',
-            'radio-selected',
             'read-only',
             'ready-for-approval',
             'reason',
@@ -66,8 +60,6 @@ export class IconsModule {
             'rule',
             'secret',
             'status',
-            'status-collapse',
-            'status-expand',
             'status-info',
             'template',
             'thumb-down',

apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.scss

@@ -1,6 +1,9 @@
 @use 'variables';
+@use 'common-buttons';
 
 :host {
+    @extend .user-button;
+
     button {
         padding: 0 10px 0 5px;
 

apps/red-ui/src/app/modules/shared/components/hidden-action/hidden-action.component.html

@@ -1,3 +0,0 @@
-<div (click)="countActions()">
-    <ng-content></ng-content>
-</div>

apps/red-ui/src/app/modules/shared/components/hidden-action/hidden-action.component.ts

@@ -1,25 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-    selector: 'redaction-hidden-action',
-    templateUrl: './hidden-action.component.html',
-    styleUrls: ['./hidden-action.component.scss']
-})
-export class HiddenActionComponent {
-    @Input() requiredClicks = 4;
-    @Output() action = new EventEmitter();
-    private _clickCount = 0;
-    private _clickCountTimeout: any;
-
-    countActions() {
-        this._clickCount += 1;
-        if (this._clickCount === this.requiredClicks) {
-            this._clickCount = 0;
-            this.action.emit();
-        }
-        clearTimeout(this._clickCountTimeout);
-        this._clickCountTimeout = setTimeout(() => {
-            this._clickCount = 0;
-        }, 1000);
-    }
-}

apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts

@@ -44,7 +44,7 @@ export class InitialsAvatarComponent extends AutoUnsubscribe implements OnChange
 
     private get _colorClass() {
         if (this._isCurrentUser) {
-            return 'red-white';
+            return 'primary-white';
         }
         if (this.disabled) {
             return 'inactive';
@@ -65,7 +65,7 @@ export class InitialsAvatarComponent extends AutoUnsubscribe implements OnChange
         if (isSystemUser) {
             this.displayName = 'System';
             this.initials = 'SY';
-            this.colorClass = 'red-white red';
+            this.colorClass = 'primary-white primary';
             return;
         }
 

apps/red-ui/src/app/modules/shared/components/page-header/models/action-config.model.ts

@@ -1,5 +0,0 @@
-import { BaseHeaderConfig } from './base-config.model';
-
-export interface ActionConfig extends BaseHeaderConfig {
-    readonly action: ($event: MouseEvent) => void;
-}

apps/red-ui/src/app/modules/shared/components/page-header/models/base-config.model.ts

@@ -1,5 +0,0 @@
-export interface BaseHeaderConfig {
-    readonly label: string;
-    readonly icon?: string;
-    readonly hide?: boolean;
-}

apps/red-ui/src/app/modules/shared/components/page-header/models/button-config.model.ts

@@ -1,6 +0,0 @@
-import { IconButtonType } from '@iqser/common-ui';
-import { ActionConfig } from '@shared/components/page-header/models/action-config.model';
-
-export interface ButtonConfig extends ActionConfig {
-    readonly type?: IconButtonType;
-}

apps/red-ui/src/app/modules/shared/components/page-header/models/search-positions.type.ts

@@ -1,6 +0,0 @@
-export const SearchPositions = {
-    beforeFilters: 'beforeFilters',
-    afterFilters: 'afterFilters'
-} as const;
-
-export type SearchPosition = keyof typeof SearchPositions;

apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html

@@ -1,64 +0,0 @@
-<div class="page-header">
-    <div *ngIf="pageLabel" class="breadcrumb">{{ pageLabel }}</div>
-
-    <div *ngIf="filters$ | async as filters" class="filters" iqserHelpMode="filters">
-        <div *ngIf="filters.length && searchPosition !== searchPositions.beforeFilters" translate="filters.filter-by"></div>
-
-        <ng-container *ngIf="searchPosition === searchPositions.beforeFilters" [ngTemplateOutlet]="searchBar"></ng-container>
-
-        <ng-container *ngFor="let config of filters; trackBy: trackByLabel">
-            <iqser-popup-filter *ngIf="!config.hide" [primaryFiltersSlug]="config.slug"></iqser-popup-filter>
-        </ng-container>
-
-        <ng-container *ngIf="searchPosition === searchPositions.afterFilters" [ngTemplateOutlet]="searchBar"></ng-container>
-
-        <div (click)="resetFilters()" *ngIf="showResetFilters$ | async" class="reset-filters" translate="reset-filters"></div>
-    </div>
-
-    <div *ngIf="showCloseButton || actionConfigs || buttonConfigs || viewModeSelection" class="actions">
-        <ng-container [ngTemplateOutlet]="viewModeSelection"></ng-container>
-
-        <ng-container *ngFor="let config of buttonConfigs; trackBy: trackByLabel">
-            <iqser-icon-button
-                (action)="config.action($event)"
-                *ngIf="!config.hide"
-                [icon]="config.icon"
-                [label]="config.label | translate"
-                [type]="config.type"
-                iqserHelpMode="new-dossier"
-            ></iqser-icon-button>
-        </ng-container>
-
-        <ng-container *ngFor="let config of actionConfigs; trackBy: trackByLabel">
-            <iqser-circle-button
-                (action)="config.action($event)"
-                *ngIf="!config.hide"
-                [icon]="config.icon"
-                [tooltip]="config.label"
-                tooltipPosition="below"
-            ></iqser-circle-button>
-        </ng-container>
-
-        <!-- Extra custom actions here -->
-        <ng-content></ng-content>
-
-        <iqser-circle-button
-            (action)="closeAction.emit()"
-            *ngIf="showCloseButton"
-            [class.ml-6]="actionConfigs"
-            [tooltip]="'common.close' | translate"
-            icon="iqser:close"
-            tooltipPosition="below"
-        ></iqser-circle-button>
-    </div>
-</div>
-
-<ng-template #searchBar>
-    <iqser-input-with-action
-        *ngIf="searchPlaceholder && searchService"
-        [(value)]="searchService.searchValue"
-        [class.mr-8]="searchPosition === searchPositions.beforeFilters"
-        [placeholder]="searchPlaceholder"
-        [width]="searchWidth"
-    ></iqser-input-with-action>
-</ng-template>

apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.scss

@@ -1,5 +0,0 @@
-@import '../../../../../assets/styles/variables';
-
-.ml-6 {
-    margin-left: 6px;
-}

apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.ts

@@ -1,54 +0,0 @@
-import { Component, EventEmitter, Input, Optional, Output, TemplateRef } from '@angular/core';
-import { ActionConfig } from '@shared/components/page-header/models/action-config.model';
-import { ButtonConfig } from '@shared/components/page-header/models/button-config.model';
-import { FilterService, IconButtonTypes, IListable, SearchService } from '@iqser/common-ui';
-import { distinctUntilChanged, map } from 'rxjs/operators';
-import { combineLatest, Observable, of } from 'rxjs';
-import { SearchPosition, SearchPositions } from '@shared/components/page-header/models/search-positions.type';
-import { IFileAttributeConfig } from '@redaction/red-ui-http';
-
-@Component({
-    selector: 'redaction-page-header',
-    templateUrl: './page-header.component.html',
-    styleUrls: ['./page-header.component.scss']
-})
-export class PageHeaderComponent<T extends IListable> {
-    readonly searchPositions = SearchPositions;
-    readonly iconButtonTypes = IconButtonTypes;
-
-    @Input() pageLabel: string;
-    @Input() showCloseButton: boolean;
-    @Input() actionConfigs: readonly ActionConfig[];
-    @Input() buttonConfigs: readonly ButtonConfig[];
-    @Input() fileAttributeConfigs: readonly IFileAttributeConfig[];
-    @Input() viewModeSelection: TemplateRef<unknown>;
-    @Input() searchPlaceholder: string;
-    @Input() searchWidth: number | 'full';
-    @Input() searchPosition: SearchPosition = SearchPositions.afterFilters;
-    @Output() readonly closeAction = new EventEmitter();
-
-    readonly filters$ = this.filterService?.filterGroups$.pipe(map(all => all.filter(f => f.icon)));
-    readonly showResetFilters$ = this._showResetFilters$;
-
-    constructor(@Optional() readonly filterService: FilterService, @Optional() readonly searchService: SearchService<T>) {}
-
-    get _showResetFilters$(): Observable<boolean> {
-        if (!this.filterService) {
-            return of(false);
-        }
-
-        return combineLatest([this.filterService.showResetFilters$, this.searchService.valueChanges$]).pipe(
-            map(([showResetFilters, searchValue]) => showResetFilters || !!searchValue),
-            distinctUntilChanged()
-        );
-    }
-
-    resetFilters(): void {
-        this.filterService.reset();
-        this.searchService.reset();
-    }
-
-    trackByLabel<K extends { label?: string }>(index: number, item: K): string {
-        return item.label;
-    }
-}

apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.html

@@ -20,9 +20,9 @@
         [class.large-spacing]="largeSpacing"
         [size]="32"
         [tooltip]="'dossier-details.assign-members' | translate"
-        class="member"
-        icon="red:plus"
         [type]="circleButtonTypes.primary"
+        class="member"
+        icon="iqser:plus"
     ></iqser-circle-button>
 </div>
 <div (click)="toggleExpandedTeam()" *ngIf="expandedTeam" class="all-caps-label see-less pointer" translate="dossier-details.see-less"></div>

apps/red-ui/src/app/modules/shared/shared.module.ts

@@ -11,7 +11,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AnnotationIconComponent } from './components/annotation-icon/annotation-icon.component';
 import { SimpleDoughnutChartComponent } from './components/simple-doughnut-chart/simple-doughnut-chart.component';
 import { DictionaryAnnotationIconComponent } from './components/dictionary-annotation-icon/dictionary-annotation-icon.component';
-import { HiddenActionComponent } from './components/hidden-action/hidden-action.component';
 import { ConfirmationDialogComponent } from './dialogs/confirmation-dialog/confirmation-dialog.component';
 import { CommonUiModule } from '@iqser/common-ui';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
@@ -22,7 +21,6 @@ import { DictionaryManagerComponent } from './components/dictionary-manager/dict
 import { SideNavComponent } from './components/side-nav/side-nav.component';
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
 import { AssignUserDropdownComponent } from './components/assign-user-dropdown/assign-user-dropdown.component';
-import { PageHeaderComponent } from './components/page-header/page-header.component';
 import { DatePipe } from './pipes/date.pipe';
 import { LongPressDirective } from './directives/long-press.directive';
 import { NamePipe } from './pipes/name.pipe';
@@ -37,13 +35,11 @@ const components = [
     AnnotationIconComponent,
     SimpleDoughnutChartComponent,
     DictionaryAnnotationIconComponent,
-    HiddenActionComponent,
     ConfirmationDialogComponent,
     SelectComponent,
     SideNavComponent,
     DictionaryManagerComponent,
     AssignUserDropdownComponent,
-    PageHeaderComponent,
     TypeFilterComponent,
     TeamMembersComponent,
 

apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html

@@ -3,7 +3,7 @@
         <div class="title flex-1">
             {{ 'upload-status.dialog.title' | translate: { len: uploadService.files.length } }}
         </div>
-        <iqser-circle-button [icon]="'red:status-' + (collapsed ? 'expand' : 'collapse')"></iqser-circle-button>
+        <iqser-circle-button [icon]="'iqser:status-' + (collapsed ? 'expand' : 'collapse')"></iqser-circle-button>
         <iqser-circle-button (action)="closeDialog()" icon="iqser:close"></iqser-circle-button>
     </div>
     <div [hidden]="collapsed" class="upload-download-list">
@@ -43,16 +43,16 @@
                         (action)="uploadItem(model)"
                         *ngIf="model.error && !model.sizeError"
                         [tooltip]="'upload-status.dialog.actions.re-upload' | translate"
+                        [type]="circleButtonTypes.dark"
                         icon="iqser:refresh"
                         tooltipPosition="before"
-                        [type]="circleButtonTypes.dark"
                     ></iqser-circle-button>
                     <iqser-circle-button
                         (action)="cancelItem(model)"
                         [tooltip]="'upload-status.dialog.actions.cancel' | translate"
+                        [type]="circleButtonTypes.dark"
                         icon="iqser:close"
                         tooltipPosition="before"
-                        [type]="circleButtonTypes.dark"
                     ></iqser-circle-button>
                 </div>
             </div>

apps/red-ui/src/app/utils/custom-route-reuse.strategy.ts

@@ -1,83 +0,0 @@
-import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
-import { Debounce } from '@iqser/common-ui';
-
-export interface OnAttach {
-    ngOnAttach(previousRoute: ActivatedRouteSnapshot);
-}
-
-export interface OnDetach {
-    ngOnDetach();
-}
-
-interface RouteStorageObject {
-    handle: DetachedRouteHandle;
-    previousRoute: ActivatedRouteSnapshot;
-}
-
-export class CustomRouteReuseStrategy implements RouteReuseStrategy {
-    private _storedRoutes: { [key: string]: RouteStorageObject } = {};
-
-    private static _removeTooltips(): void {
-        while (document.getElementsByTagName('mat-tooltip-component').length > 0) {
-            document.getElementsByTagName('mat-tooltip-component')[0].remove();
-        }
-    }
-
-    shouldDetach(route: ActivatedRouteSnapshot): boolean {
-        return !!route.routeConfig.data?.reuse && !!this._getKey(route);
-    }
-
-    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
-        if (handle === null) {
-            return;
-        }
-        CustomRouteReuseStrategy._removeTooltips();
-
-        const element: any = handle;
-
-        if (element?.componentRef?.instance?.ngOnDetach) {
-            this._onDetach(element.componentRef?.instance);
-        }
-
-        this._storedRoutes[this._getKey(route)] = {
-            handle: element as DetachedRouteHandle,
-            previousRoute: route
-        };
-    }
-
-    shouldAttach(route: ActivatedRouteSnapshot): boolean {
-        return !!this._storedRoutes[this._getKey(route)];
-    }
-
-    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
-        const key = this._getKey(route);
-        const element: any = this._storedRoutes[key]?.handle;
-
-        if (element?.componentRef?.instance?.ngOnAttach) {
-            this._onAttach(element.componentRef?.instance, this._storedRoutes[key].previousRoute);
-        }
-
-        return element as DetachedRouteHandle;
-    }
-
-    shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
-        return future.routeConfig === current.routeConfig || this._getKey(future) === this._getKey(current);
-    }
-
-    private _getKey(route: ActivatedRouteSnapshot): string {
-        return route.pathFromRoot
-            .map((el: ActivatedRouteSnapshot) => (el.routeConfig ? el.routeConfig.path + JSON.stringify(el.params) : ''))
-            .filter(str => str.length > 0)
-            .join('');
-    }
-
-    @Debounce()
-    private _onAttach(instance: OnAttach, previousRoute?: ActivatedRouteSnapshot) {
-        instance.ngOnAttach(previousRoute);
-    }
-
-    @Debounce()
-    private _onDetach(instance: OnDetach) {
-        instance.ngOnDetach();
-    }
-}

apps/red-ui/src/app/utils/index.ts

@@ -4,7 +4,6 @@ export * from './sorters/super-type-sorter';
 
 export * from './api-path-interceptor';
 export * from './configuration.initializer';
-export * from './custom-route-reuse.strategy';
 export * from './date-inputs-utils';
 export * from './file-download-utils';
 export * from './file-drop-utils';

apps/red-ui/src/assets/icons/general/arrow-right.svg

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px"
-     xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd" id="right_expandable" stroke="none" stroke-width="1">
-        <polygon fill="currentColor" id="Fill-1"
-                 points="7 9 10 5 4 5"
-                 transform="translate(7.000000, 7.000000) rotate(-90.000000) translate(-7.000000, -7.000000) "></polygon>
-    </g>
-</svg>

apps/red-ui/src/assets/icons/general/collapse.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px"
-     xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd" id="Dossiers-&amp;-Documents" stroke="none" stroke-width="1">
-        <g id="04.-Document-Hover" transform="translate(-1400.000000, -137.000000)">
-            <rect height="980" width="1440" x="0" y="0"></rect>
-            <g fill="currentColor" fill-rule="nonzero" id="Dossier-details"
-               transform="translate(1111.000000, 127.000000)">
-                <g id="Group-6" transform="translate(279.000000, 0.000000)">
-                    <g id="status" transform="translate(10.000000, 10.000000)">
-                        <polygon id="Path"
-                                 points="9.17 3.5 8.19 4.48 9.94 6.3 1.4 6.3 1.4 7.7 9.94 7.7 8.19 9.52 9.17 10.5 12.6 7"></polygon>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

apps/red-ui/src/assets/icons/general/expand.svg

@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px"
-     xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd" id="Dossiers-&amp;-Documents" stroke="none" stroke-width="1">
-        <g id="04.-Collapsed-Details" transform="translate(-1403.000000, -137.000000)">
-            <rect height="980" width="1440" x="0" y="0"></rect>
-            <rect height="1500" id="Rectangle" width="60" x="1380" y="111"></rect>
-            <g id="Group-6" transform="translate(1393.000000, 127.000000)">
-                <rect height="34" id="Rectangle" rx="17" width="34" x="0" y="0"></rect>
-                <g fill="currentColor"
-                   fill-rule="nonzero"
-                   id="status"
-                   transform="translate(17.000000, 17.000000) scale(-1, 1) translate(-17.000000, -17.000000) translate(10.000000, 10.000000)">
-                    <polygon id="Path"
-                             points="9.17 3.5 8.19 4.48 9.94 6.3 1.4 6.3 1.4 7.7 9.94 7.7 8.19 9.52 9.17 10.5 12.6 7"></polygon>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

apps/red-ui/src/assets/icons/general/plus.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px"
-     xmlns="http://www.w3.org/2000/svg">
-    <g fill="currentColor" fill-rule="evenodd" id="plus_white" stroke="none" stroke-width="1">
-        <polygon fill-rule="nonzero" id="Path"
-                 points="78 45 55 45 55 22 45 22 45 45 22 45 22 55 45 55 45 78 55 78 55 55 78 55"></polygon>
-    </g>
-</svg>

apps/red-ui/src/assets/icons/general/radio-indeterminate.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px"
-     xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd" id="Bulk-Actions" stroke="none" stroke-width="1">
-        <g id="01.-Bulk-Actions" transform="translate(-10.000000, -127.000000)">
-            <rect fill="none" height="980" width="1440" x="0" y="0"></rect>
-            <polygon fill="none" id="Rectangle" points="0 112 1086 112 1086 162 0 162"></polygon>
-            <g fill="currentColor" id="intermediary_selection"
-               transform="translate(10.000000, 127.000000)">
-                <path
-                    d="M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M14,8.9 L6,8.9 C5.44771525,8.9 5,9.34771525 5,9.9 L5,9.9 L5,10.1 C5,10.6522847 5.44771525,11.1 6,11.1 L6,11.1 L14,11.1 C14.5522847,11.1 15,10.6522847 15,10.1 L15,10.1 L15,9.9 C15,9.34771525 14.5522847,8.9 14,8.9 L14,8.9 Z"></path>
-            </g>
-        </g>
-    </g>
-</svg>

apps/red-ui/src/assets/icons/general/radio-selected.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px"
-     xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd" id="Bulk-Actions" stroke="none" stroke-width="1">
-        <g id="01.-Bulk-Actions" transform="translate(-10.000000, -209.000000)">
-            <rect fill="none" height="980" width="1440" x="0" y="0"></rect>
-            <g fill="none" id="Entry" transform="translate(0.000000, 194.000000)">
-                <polygon id="Rectangle" points="0 0 1086 0 1086 50 0 50"></polygon>
-            </g>
-            <g fill="currentColor" id="Radio_selected" transform="translate(10.000000, 209.000000)">
-                <path
-                    d="M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M13.6545842,6.07220062 L8.50054373,11.3199291 L6.58289039,9.38262084 C6.34328715,9.14059736 5.95224003,9.14059736 5.71263679,9.38262084 L5.06605523,10.0357335 C4.82983344,10.2743414 4.82983344,10.6586767 5.06605523,10.8972846 L8.06804104,13.9295935 C8.30826653,14.1722455 8.70055256,14.1715218 8.93988111,13.9279851 L15.1747747,7.58346184 C15.4094976,7.34461174 15.4087908,6.96150162 15.1731882,6.72351919 L14.5266067,6.07040651 C14.2863095,5.82768204 13.8938806,5.82848943 13.6545842,6.07220062 Z"
-                    id="radio_selected"></path>
-            </g>
-        </g>
-    </g>
-</svg>

apps/red-ui/src/assets/icons/general/status-collapse.svg

@@ -1,41 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="15px" version="1.1" viewBox="0 0 15 15" width="15px" xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-        <path
-            d="M1028,576 L1412,576 C1416.41828,576 1420,579.581722 1420,584 L1420,873 C1420,877.418278 1416.41828,881 1412,881 L1028,881 C1023.58172,881 1020,877.418278 1020,873 L1020,584 C1020,579.581722 1023.58172,576 1028,576 Z"
-            id="path-1"></path>
-        <filter filterUnits="objectBoundingBox" height="117.7%" id="filter-3" width="113.5%"
-                x="-6.8%" y="-7.9%">
-            <feMorphology in="SourceAlpha" operator="dilate" radius="2.5"
-                          result="shadowSpreadOuter1"></feMorphology>
-            <feOffset dx="0" dy="3" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1"
-                            stdDeviation="6"></feGaussianBlur>
-            <feColorMatrix in="shadowBlurOuter1"
-                           type="matrix"
-                           values="0 0 0 0 0.156862745   0 0 0 0 0.196078431   0 0 0 0 0.254901961  0 0 0 0.1428069 0"></feColorMatrix>
-        </filter>
-    </defs>
-    <g fill="none" fill-rule="evenodd" id="File-Upload-&amp;-Download-Overlays" stroke="none"
-       stroke-width="1">
-        <g id="Document-Upload---Hover" transform="translate(-1360.000000, -592.000000)">
-            <rect height="900" width="1440" x="0" y="0"></rect>
-            <g id="Dossier-details" transform="translate(1111.000000, 127.000000)">
-                <g id="Group-4" transform="translate(0.000000, 145.000000)"></g>
-            </g>
-            <g id="Rectangle">
-                <use fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
-                <use fill-rule="evenodd" xlink:href="#path-1"></use>
-            </g>
-            <g id="Group-6-Copy">
-                <g id="status" transform="translate(1352.000000, 584.000000)">
-                    <g transform="translate(15.500000, 15.500000) rotate(90.000000) translate(-15.500000, -15.500000) translate(8.000000, 8.000000)">
-                        <polygon fill="currentColor" fill-rule="nonzero" id="Path"
-                                 points="9.825 3.75 8.775 4.8 10.65 6.75 1.5 6.75 1.5 8.25 10.65 8.25 8.775 10.2 9.825 11.25 13.5 7.5"></polygon>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

apps/red-ui/src/assets/icons/general/status-expand.svg

@@ -1,58 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="15px" version="1.1" viewBox="0 0 15 15" width="15px" xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-        <path
-            d="M8,0 L392,0 C396.418278,-8.11624501e-16 400,3.581722 400,8 L400,40 C400,44.418278 396.418278,48 392,48 L8,48 C3.581722,48 5.41083001e-16,44.418278 0,40 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 Z"
-            id="path-1"></path>
-        <filter filterUnits="objectBoundingBox" height="212.5%" id="filter-3" width="113.5%"
-                x="-6.8%" y="-50.0%">
-            <feMorphology in="SourceAlpha" operator="dilate" radius="2.5"
-                          result="shadowSpreadOuter1"></feMorphology>
-            <feOffset dx="0" dy="3" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1"
-                            stdDeviation="6"></feGaussianBlur>
-            <feColorMatrix in="shadowBlurOuter1"
-                           type="matrix"
-                           values="0 0 0 0 0.156862745   0 0 0 0 0.196078431   0 0 0 0 0.254901961  0 0 0 0.1428069 0"></feColorMatrix>
-        </filter>
-    </defs>
-    <g fill="none" fill-rule="evenodd" id="File-Upload-&amp;-Download-Overlays" stroke="none"
-       stroke-width="1">
-        <g id="Document-Upload---Collapsed" transform="translate(-1359.000000, -847.000000)">
-            <rect height="900" width="1440" x="0" y="0"></rect>
-            <g fill="currentColor" font-family="Inter-Regular, Inter" font-size="16"
-               font-weight="normal" id="Dossier-details"
-               transform="translate(1111.000000, 127.000000)">
-                <g id="Group-4" transform="translate(0.000000, 145.000000)">
-                    <g id="Group-11" transform="translate(0.000000, 566.000000)">
-                        <text id="Description">
-                            <tspan x="0" y="16">Description</tspan>
-                        </text>
-                    </g>
-                </g>
-            </g>
-            <g id="Group-10" transform="translate(1020.000000, 832.000000)">
-                <g id="Group-8">
-                    <mask id="mask-2">
-                        <use xlink:href="#path-1"></use>
-                    </mask>
-                    <g id="Rectangle">
-                        <use fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
-                        <use fill-rule="evenodd" xlink:href="#path-1"></use>
-                    </g>
-                </g>
-                <g fill="currentColor"
-                   fill-rule="nonzero"
-                   id="Group-6-Copy"
-                   transform="translate(347.000000, 23.000000) rotate(180.000000) translate(-347.000000, -23.000000) translate(332.000000, 8.000000)">
-                    <g id="status"
-                       transform="translate(15.500000, 15.500000) rotate(90.000000) translate(-15.500000, -15.500000) translate(8.000000, 8.000000)">
-                        <polygon id="Path"
-                                 points="9.825 3.75 8.775 4.8 10.65 6.75 1.5 6.75 1.5 8.25 10.65 8.25 8.775 10.2 9.825 11.25 13.5 7.5"></polygon>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

apps/red-ui/src/assets/styles/red-autocomplete.scss

@@ -1,9 +0,0 @@
-@use 'common-mixins';
-
-.mat-autocomplete-panel {
-    @include common-mixins.scroll-bar;
-
-    .mat-option {
-        font-size: inherit;
-    }
-}

apps/red-ui/src/assets/styles/red-breadcrumbs.scss

@@ -1,42 +0,0 @@
-@use 'variables';
-@use 'common-mixins';
-
-.breadcrumbs-container {
-    display: flex;
-    align-items: center;
-
-    > *:not(:last-child) {
-        margin-right: 6px;
-    }
-
-    mat-icon {
-        width: 16px;
-        min-width: 16px;
-    }
-}
-
-.breadcrumb {
-    text-decoration: none;
-    color: variables.$accent;
-    font-weight: 600;
-    width: fit-content;
-    white-space: nowrap;
-
-    &.back {
-        display: flex !important;
-        justify-content: center;
-        align-items: center;
-
-        mat-icon {
-            margin-right: 8px;
-        }
-    }
-
-    &:last-child {
-        @include common-mixins.line-clamp(1);
-    }
-
-    &.active {
-        color: variables.$primary;
-    }
-}

apps/red-ui/src/assets/styles/red-checkbox.scss

@@ -1,37 +0,0 @@
-@use 'variables';
-
-.mat-checkbox .mat-checkbox-frame {
-    border: 1px solid variables.$grey-5;
-}
-
-.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
-.mat-checkbox-checked.mat-accent .mat-checkbox-background {
-    margin-top: 1px;
-    margin-left: 1px;
-    width: 18px;
-    height: 18px;
-}
-
-.mat-checkbox-layout {
-    align-items: center !important;
-
-    .mat-checkbox-inner-container {
-        margin-left: 0;
-    }
-
-    .mat-checkbox-label {
-        font-size: 13px;
-        color: variables.$accent;
-
-        display: flex;
-        align-items: center;
-
-        > *:not(:last-child) {
-            margin-right: 8px;
-        }
-    }
-}
-
-.mat-checkbox.error .mat-checkbox-label {
-    color: variables.$primary;
-}

apps/red-ui/src/assets/styles/red-components.scss

@@ -1,97 +1,6 @@
 @use 'variables';
 @use 'common-mixins';
 
-.oval,
-.square {
-    font-weight: 600;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 24px;
-    width: 24px;
-    min-width: 24px;
-    font-size: 10px;
-    line-height: 12px;
-    text-align: center;
-    text-transform: uppercase;
-    border: none;
-    box-sizing: border-box;
-
-    &.large {
-        height: 32px;
-        width: 32px;
-        font-size: 13px;
-    }
-
-    &.gray-dark {
-        background-color: variables.$grey-6;
-    }
-
-    &.gray-red {
-        background-color: variables.$grey-6;
-        color: variables.$primary;
-    }
-
-    &.lightgray-dark {
-        background-color: variables.$grey-4;
-    }
-
-    &.lightgray-red {
-        background-color: variables.$grey-4;
-        color: variables.$primary;
-    }
-
-    &.darkgray-white {
-        background-color: variables.$accent;
-        color: variables.$white;
-    }
-
-    &.lightgray-white {
-        background-color: variables.$grey-5;
-        color: variables.$white;
-    }
-
-    &.red-white {
-        background-color: variables.$primary;
-        color: variables.$white;
-    }
-
-    &.white-dark {
-        border: 1px solid variables.$grey-4;
-    }
-
-    &.inactive {
-        background-color: variables.$grey-6;
-        color: variables.$grey-7;
-    }
-}
-
-.oval {
-    border-radius: 50%;
-}
-
-.stats-subtitle {
-    display: flex;
-
-    > div {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: fit-content;
-
-        mat-icon {
-            width: 10px;
-            height: 10px;
-            line-height: 13px;
-            margin-right: 6px;
-        }
-
-        &:not(:last-child) {
-            margin-right: 12px;
-        }
-    }
-}
-
 .pill {
     padding: 2px 5px;
     border-radius: 9px;
@@ -183,11 +92,3 @@
     stroke: variables.$primary;
     background-color: variables.$primary;
 }
-
-.overlay-shadow {
-    @include common-mixins.inset-shadow;
-    position: fixed;
-    width: 100%;
-    height: 4px;
-    z-index: 2;
-}

apps/red-ui/src/assets/styles/red-controls.scss

@@ -1,49 +0,0 @@
-@use 'variables';
-
-.btn-group {
-    display: flex;
-    flex-direction: row;
-
-    .btn-group-btn {
-        cursor: pointer;
-        color: variables.$accent;
-        background: variables.$white;
-        font-family: Inter, sans-serif;
-        font-size: 13px;
-        line-height: 14px;
-        padding: 10px 14px;
-        transition: color 0.25s ease-in-out;
-        outline: none;
-        border: none;
-
-        &:hover {
-            color: variables.$black;
-        }
-
-        &.active {
-            color: variables.$light;
-            background: variables.$primary;
-            border-radius: 17px;
-        }
-
-        &.active:hover {
-            color: variables.$grey-3;
-        }
-    }
-}
-
-.icon-10 {
-    width: 10px;
-    height: 10px;
-}
-
-.noselect {
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-    -khtml-user-select: none; /* Konqueror HTML */
-    -moz-user-select: none; /* Old versions of Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none;
-    /* Non-prefixed version, currently
-                                     supported by Chrome, Edge, Opera and Firefox */
-}

apps/red-ui/src/assets/styles/red-fonts.scss

@@ -1,36 +0,0 @@
-/* inter-regular - latin */
-
-@font-face {
-    font-family: 'OpenSans Extrabold';
-    src: url('../font/OpenSans-ExtraBold.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Inter';
-    font-weight: 300;
-    src: url('../font/Inter-VariableFont.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Inter';
-    font-weight: 400;
-    src: url('../font/Inter-VariableFont.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Inter';
-    font-weight: 500;
-    src: url('../font/Inter-VariableFont.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Inter';
-    font-weight: 600;
-    src: url('../font/Inter-VariableFont.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Inter';
-    font-weight: 700;
-    src: url('../font/Inter-VariableFont.ttf') format('truetype');
-}

apps/red-ui/src/assets/styles/red-help-mode.scss

@@ -1,30 +0,0 @@
-@use 'variables';
-
-.help-mode-on-mouse-over {
-    z-index: 100;
-    position: absolute;
-    top: -5px;
-    left: -5px;
-    width: 100%;
-    height: 100%;
-    padding-right: 5px;
-    padding-bottom: 10px;
-    transition: all 0.25s;
-}
-
-.help-highlight,
-.help-mode-on-mouse-over:hover {
-    background: rgba(92, 229, 148, 0.5);
-    box-shadow: 0 0 0 2px variables.$green-2 inset;
-    cursor: help;
-}
-
-.help-mode-on-mouse-over-filters,
-.help-mode-on-mouse-over-quick-filters,
-.help-mode-on-mouse-over-new-dossier {
-    padding-right: 10px;
-}
-
-.help-mode-on-mouse-over-notifications {
-    padding-left: 4px;
-}

apps/red-ui/src/assets/styles/red-list.scss

@@ -1,12 +0,0 @@
-@use 'variables';
-
-.mat-list-item {
-    color: variables.$accent !important;
-    font-size: 13px !important;
-    line-height: 16px !important;
-}
-
-.list-50vh {
-    overflow-y: scroll;
-    max-height: 50vh;
-}

apps/red-ui/src/assets/styles/red-loading.scss

@@ -1,23 +0,0 @@
-.loading:after {
-    content: '.';
-    animation: dots 1s steps(5, end) infinite;
-}
-
-@keyframes dots {
-    0%,
-    20% {
-        color: rgba(40, 50, 65, 0);
-        text-shadow: 0.25em 0 0 rgba(40, 50, 65, 0), 0.5em 0 0 rgba(40, 50, 65, 0);
-    }
-    40% {
-        color: #283241;
-        text-shadow: 0.25em 0 0 rgba(40, 50, 65, 0), 0.5em 0 0 rgba(40, 50, 65, 0);
-    }
-    60% {
-        text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 rgba(40, 50, 65, 0);
-    }
-    80%,
-    100% {
-        text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 #283241;
-    }
-}

apps/red-ui/src/assets/styles/red-menu.scss

@@ -1,63 +0,0 @@
-@use 'variables';
-@use 'common-mixins';
-
-.mat-menu-panel {
-    border-radius: 8px !important;
-    box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
-    max-width: none !important;
-    min-width: 180px !important;
-    margin-top: 10px;
-    @include common-mixins.scroll-bar;
-
-    .mat-menu-content:not(:empty) {
-        padding-top: 8px;
-        padding-bottom: 24px;
-    }
-
-    &.padding-bottom-0 .mat-menu-content:not(:empty) {
-        padding-bottom: 0;
-    }
-
-    &.padding-bottom-8 .mat-menu-content:not(:empty) {
-        padding-bottom: 8px;
-    }
-
-    .mat-menu-item {
-        font-size: 13px;
-        color: variables.$accent;
-        padding: 0 8px;
-        margin: 0 8px 2px 8px;
-        border-radius: 4px;
-        width: -webkit-fill-available;
-
-        display: flex;
-        align-items: center;
-
-        > *:not(:last-child) {
-            margin-right: 8px;
-        }
-
-        .arrow-wrapper {
-            width: 16px;
-            text-align: center;
-
-            mat-icon {
-                width: 16px;
-                height: 16px;
-                margin: 0;
-            }
-        }
-
-        &.padding-left {
-            padding-left: 56px;
-        }
-
-        &:last-of-type {
-            margin-bottom: 0;
-        }
-
-        &:hover {
-            background-color: rgba(variables.$primary, 0.1);
-        }
-    }
-}

apps/red-ui/src/assets/styles/red-page-layout.scss

@@ -1,387 +0,0 @@
-@use 'variables';
-@use 'common-mixins';
-
-html,
-body {
-    margin: 0;
-    padding: 0;
-    height: 100vh;
-    font-family: 'Inter', sans-serif;
-    color: variables.$accent;
-    font-size: 13px;
-    line-height: 16px;
-}
-
-section.settings {
-    display: flex;
-
-    .page-header,
-    .red-content-inner {
-        width: calc(100vw - 200px);
-    }
-
-    redaction-admin-side-nav {
-        height: calc(100vh - 61px);
-    }
-}
-
-.page-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 24px;
-    height: 50px;
-    width: 100vw;
-    box-sizing: border-box;
-    background-color: variables.$white;
-    border-bottom: 1px solid variables.$separator;
-
-    .filters {
-        display: flex;
-        align-items: center;
-
-        > *:not(:last-child) {
-            margin-right: 2px;
-        }
-
-        > div:first-child {
-            margin-right: 8px;
-        }
-
-        form {
-            margin-left: 6px;
-
-            .iqser-input-group {
-                width: 250px;
-            }
-        }
-
-        .reset-filters {
-            margin-left: 12px;
-            color: variables.$primary;
-            cursor: pointer;
-        }
-    }
-
-    .actions {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-
-        > *:not(:last-child) {
-            margin-right: 2px;
-        }
-    }
-}
-
-.fullscreen {
-    .page-header {
-        position: absolute;
-        top: 0;
-    }
-
-    .red-content-inner {
-        height: calc(100% - 50px);
-    }
-
-    .overlay-shadow {
-        top: 50px;
-    }
-}
-
-.red-content-inner {
-    display: flex;
-    flex-direction: row;
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: calc(100% - 111px);
-    transition: height ease-in-out 0.2s;
-}
-
-.content-container {
-    overflow: hidden;
-    position: relative;
-    width: 100%;
-
-    .dialog {
-        border-radius: 8px;
-        margin-top: 40px;
-        margin-bottom: 70px;
-        background-color: variables.$white;
-        max-width: 650px;
-        height: fit-content;
-        box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19);
-        position: unset;
-
-        .heading-l {
-            margin-bottom: 16px;
-        }
-
-        .dialog-content {
-            display: flex;
-
-            .dialog-content-left {
-                min-width: 300px;
-                margin-right: 64px;
-            }
-
-            .link-action {
-                margin-top: 8px;
-            }
-        }
-    }
-
-    @media only screen and (max-width: 1600px) {
-        .user-column {
-            justify-content: center;
-            align-items: center;
-
-            redaction-initials-avatar .username {
-                display: none;
-            }
-        }
-    }
-}
-
-.right-container {
-    border-left: 1px solid variables.$grey-4;
-    box-sizing: border-box;
-    background: variables.$white;
-    overflow: hidden;
-    transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s;
-
-    &:hover {
-        overflow-y: auto;
-        @include common-mixins.scroll-bar;
-    }
-
-    .collapsed-wrapper {
-        display: none;
-    }
-
-    &.collapsed {
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-        width: 60px !important;
-        min-width: 60px !important;
-        display: flex;
-
-        div:not(.collapsed-wrapper) {
-            display: none;
-        }
-
-        .collapsed-wrapper {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            width: 60px;
-
-            div {
-                display: initial;
-            }
-
-            .all-caps-label {
-                transform: rotate(90deg) translateX(50%);
-                white-space: nowrap;
-                margin-top: 10px;
-            }
-        }
-    }
-}
-
-.flex {
-    display: flex !important;
-}
-
-.flex-end {
-    display: flex;
-    justify-content: flex-end;
-}
-
-.flex-center {
-    display: flex;
-    justify-content: center;
-}
-
-.flex-align-items-center {
-    display: flex;
-    align-items: center;
-}
-
-.flex-1 {
-    flex: 1;
-}
-
-.flex-2 {
-    flex: 2;
-}
-
-.mt-5 {
-    margin-top: 5px;
-}
-
-.mt-8 {
-    margin-top: 8px;
-}
-
-.mt-16 {
-    margin-top: 16px !important;
-}
-
-.mt-20 {
-    margin-top: 20px;
-}
-
-.mt-24 {
-    margin-top: 24px;
-}
-
-.mt-32 {
-    margin-top: 32px;
-}
-
-.mb-6 {
-    margin-bottom: 6px;
-}
-
-.mb-8 {
-    margin-bottom: 8px !important;
-}
-
-.mb-12 {
-    margin-bottom: 12px !important;
-}
-
-.ml-8 {
-    margin-left: 8px;
-}
-
-.ml-14 {
-    margin-left: 14px;
-}
-
-.ml-16 {
-    margin-left: 16px;
-}
-
-.mr-24 {
-    margin-right: 24px;
-}
-
-.pb-24 {
-    padding-bottom: 24px;
-}
-
-.pb-32 {
-    padding-bottom: 32px;
-}
-
-.w-100 {
-    min-width: 100px !important;
-    width: 100px !important;
-}
-
-.break-20 {
-    height: 20px;
-    background: transparent;
-    display: block;
-}
-
-.detail-row {
-    opacity: 1;
-    font-family: Inter, sans-serif;
-    font-size: 14px;
-    letter-spacing: 0;
-    line-height: 14px;
-    padding: 4px;
-}
-
-.red-top-bar {
-    height: 61px;
-    width: 100vw;
-    max-height: 61px;
-    display: flex;
-    flex-direction: column;
-
-    .top-bar-row {
-        height: 60px;
-        display: flex;
-        justify-content: space-between;
-        padding: 0 24px;
-
-        .center {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 0 50px;
-        }
-
-        .app-name {
-            font-family: 'OpenSans Extrabold', sans-serif;
-            margin-left: 10px;
-            height: 20px;
-            font-size: 13px;
-            font-weight: 800;
-            letter-spacing: 0;
-            line-height: 20px;
-            white-space: nowrap;
-        }
-
-        .menu {
-            display: flex;
-            align-items: center;
-            overflow: hidden;
-
-            &.right {
-                justify-content: flex-end;
-            }
-        }
-    }
-
-    .divider {
-        height: 1px;
-        opacity: 0.15;
-        background-color: variables.$accent;
-    }
-}
-
-.hidden {
-    display: none !important;
-}
-
-.not-visible {
-    visibility: hidden;
-}
-
-.pointer {
-    cursor: pointer;
-}
-
-.mr-4 {
-    margin-right: 4px !important;
-}
-
-.mr-8 {
-    margin-right: 8px !important;
-}
-
-.mr-16 {
-    margin-right: 16px;
-}
-
-.mr-34 {
-    margin-right: 34px;
-}
-
-.fit-content {
-    width: fit-content;
-}
-
-.d-flex {
-    display: flex;
-}
-
-.cdk-overlay-container {
-    z-index: 800;
-}

apps/red-ui/src/assets/styles/red-progress-bar.scss

@@ -1,16 +0,0 @@
-@use 'variables';
-
-.mat-progress-bar {
-    height: 6px;
-    border-radius: 3px;
-
-    .mat-progress-bar-buffer {
-        background-color: variables.$grey-4;
-    }
-
-    &.green {
-        .mat-progress-bar-fill::after {
-            background-color: variables.$green-2;
-        }
-    }
-}

apps/red-ui/src/assets/styles/red-select.scss

@@ -1,23 +0,0 @@
-@use 'variables';
-@use 'common-mixins';
-
-.mat-select-panel {
-    @include common-mixins.scroll-bar;
-
-    .mat-option {
-        &:hover:not(.mat-option-disabled),
-        &:focus:not(.mat-option-disabled) {
-            background-color: variables.$grey-6;
-        }
-
-        &.mat-selected:not(.mat-option-multiple) {
-            background-color: rgba(variables.$primary, 0.2);
-            color: variables.$accent;
-        }
-    }
-}
-
-.mat-form-field.no-label .mat-form-field-infix {
-    padding: 0 !important;
-    border-top: 0 !important;
-}

apps/red-ui/src/assets/styles/red-slider.scss

@@ -1,50 +0,0 @@
-@use 'variables';
-
-.mat-slider-horizontal {
-    width: 140px;
-    height: 32px !important;
-
-    .mat-slider-wrapper {
-        left: 0 !important;
-        top: 16px !important;
-    }
-
-    .mat-slider-track-wrapper,
-    .mat-slider-track-fill {
-        height: 6px !important;
-        border-radius: 3px;
-    }
-
-    // For disabled state
-    .mat-slider-track-fill {
-        background-color: variables.$primary;
-    }
-
-    .mat-slider-track-background {
-        height: 4px !important;
-        margin-top: 1px;
-        border-radius: 3px;
-        background-color: variables.$grey-4 !important;
-    }
-
-    .mat-slider-focus-ring {
-        display: none;
-    }
-}
-
-.mat-slider-thumb {
-    width: 16px !important;
-    height: 16px !important;
-    border-width: 0 !important;
-    background-color: variables.$primary !important;
-}
-
-.mat-slider:not(.mat-slider-disabled):not(.mat-slider-sliding) .mat-slider-thumb {
-    transform: scale(1) !important;
-}
-
-.mat-slider-horizontal.mat-slider-disabled {
-    .mat-slider-thumb {
-        transform: translateX(-3px);
-    }
-}

apps/red-ui/src/assets/styles/red-tables.scss

@@ -1,23 +0,0 @@
-@use 'variables';
-
-.default-table {
-    border-collapse: collapse;
-
-    th,
-    td {
-        padding: 8px;
-        text-align: left;
-        border: 1px solid variables.$separator;
-    }
-}
-
-.table-header-actions {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: flex-end;
-
-    > *:not(:last-child) {
-        margin-right: 10px;
-    }
-}

apps/red-ui/src/assets/styles/red-tabs.scss

@@ -1,29 +0,0 @@
-@use 'variables';
-
-.red-tab {
-    &:not(:last-child) {
-        margin-right: 2px;
-    }
-
-    height: 30px;
-    line-height: 30px;
-    padding: 0 14px;
-    border-radius: 17px;
-    transition: background-color 0.2s;
-    cursor: pointer;
-
-    &:not(.disabled):not(.active):hover {
-        background-color: variables.$grey-6;
-    }
-
-    &.active {
-        background-color: rgba(variables.$primary, 0.1);
-        font-weight: 600;
-        color: variables.$primary;
-    }
-
-    &.disabled {
-        color: rgba(variables.$accent, 0.3);
-        cursor: not-allowed;
-    }
-}

apps/red-ui/src/assets/styles/red-theme.scss

@@ -1,23 +1,4 @@
-@use 'red-fonts';
 @use '~ngx-toastr/toastr';
 @use 'red-material-theme';
-@use 'red-page-layout';
-@use 'red-select';
-@use 'red-autocomplete';
-@use 'red-list';
-@use 'red-checkbox';
-@use 'red-toggle';
-@use 'red-toggle-button';
-@use 'red-menu';
-@use 'red-tables';
 @use 'red-components';
-@use 'red-controls';
-@use 'red-toasts';
-@use 'red-tooltips';
-@use 'red-breadcrumbs';
 @use 'red-editor';
-@use 'red-slider';
-@use 'red-loading';
-@use 'red-progress-bar';
-@use 'red-tabs';
-@use 'red-help-mode';

apps/red-ui/src/assets/styles/red-toasts.scss

@@ -1,110 +0,0 @@
-@use 'variables';
-
-$toast-width: 400px;
-
-.toast-container .ngx-toastr,
-.inline-dialog-toast {
-    padding: 11px 16px;
-    border-radius: 8px;
-    background-image: none;
-    font-family: Inter, sans-serif;
-    font-size: 13px;
-    line-height: 18px;
-    width: $toast-width;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-shadow: none;
-
-    > *:not(:last-child) {
-        margin-right: 10px;
-    }
-
-    &:hover {
-        box-shadow: none;
-    }
-
-    .actions-wrapper {
-        margin-top: 24px;
-        display: flex;
-
-        > *:not(:last-child) {
-            margin-right: 24px;
-        }
-
-        a {
-            font-size: 11px;
-            font-weight: 600;
-            line-height: 14px;
-            color: variables.$accent;
-            text-transform: uppercase;
-            cursor: pointer;
-        }
-    }
-}
-
-.toast-top-right {
-    top: 128px;
-    right: calc(50% - #{$toast-width} / 2);
-}
-
-.toast-file-preview {
-    top: 160px;
-    right: 405px;
-}
-
-.toast-close-button {
-    position: initial;
-    opacity: 1;
-    text-shadow: none;
-
-    mat-icon {
-        width: 10px;
-    }
-
-    &:hover {
-        opacity: 1;
-    }
-}
-
-.toast-warning,
-.toast-success {
-    .toast-message {
-        color: variables.$accent;
-    }
-
-    .toast-close-button {
-        color: variables.$accent;
-    }
-}
-
-.toast-error,
-.toast-info {
-    .toast-close-button:hover {
-        color: variables.$white;
-    }
-}
-
-.toast-success {
-    background-color: variables.$green-2;
-}
-
-.toast-error {
-    background-color: variables.$primary;
-    color: variables.$white;
-}
-
-.toast-warning {
-    background-color: variables.$yellow-2;
-    color: variables.$accent;
-}
-
-.toast-info {
-    background-color: variables.$accent;
-}
-
-.inline-dialog-toast {
-    width: calc(100% - 96px);
-    margin-left: 32px;
-    margin-top: 14px;
-}

apps/red-ui/src/assets/styles/red-toggle-button.scss

@@ -1,23 +0,0 @@
-@use 'variables';
-
-.mat-button-toggle-standalone,
-.mat-button-toggle-group {
-    box-shadow: none;
-    border-radius: 100px !important;
-    width: fit-content;
-
-    .mat-button-toggle:not(.mat-button-toggle-checked) {
-        .mat-button-toggle-button {
-            background: variables.$grey-6;
-            color: variables.$grey-7;
-        }
-    }
-}
-
-.mat-button-toggle-disabled {
-    .mat-button-toggle-button {
-        cursor: not-allowed !important;
-    }
-
-    outline: none;
-}

apps/red-ui/src/assets/styles/red-toggle.scss

@@ -1,42 +0,0 @@
-@use 'variables';
-
-.mat-slide-toggle {
-    .mat-slide-toggle-bar {
-        height: 16px !important;
-        width: 30px !important;
-        border-radius: 16px !important;
-        background-color: variables.$grey-4;
-    }
-
-    .mat-slide-toggle-thumb-container {
-        top: 2px !important;
-        left: 2px !important;
-        height: 12px !important;
-        width: 12px !important;
-    }
-
-    .mat-slide-toggle-thumb {
-        height: 12px !important;
-        width: 12px !important;
-        box-shadow: none;
-        background-color: variables.$grey-2;
-    }
-
-    .mat-ripple {
-        display: none;
-    }
-
-    &.mat-primary.mat-checked {
-        .mat-slide-toggle-bar {
-            background-color: variables.$primary;
-        }
-
-        .mat-slide-toggle-thumb {
-            background-color: variables.$white;
-        }
-
-        .mat-slide-toggle-thumb-container {
-            transform: translate3d(14px, 0, 0);
-        }
-    }
-}

apps/red-ui/src/assets/styles/red-tooltips.scss

@@ -1,62 +0,0 @@
-@use 'variables';
-
-.mat-tooltip {
-    background-color: variables.$accent;
-    border-radius: 3px !important;
-    padding: 10px;
-    margin: 12px !important;
-    font-size: 11px;
-    line-height: 14px;
-    color: variables.$white !important;
-    position: relative;
-    overflow: visible !important;
-    text-align: center;
-
-    //&:after {
-    //    content: '';
-    //    position: absolute;
-    //    left: 50%;
-    //    margin-left: -5px;
-    //    width: 0;
-    //    height: 0;
-    //    z-index: 3000;
-    //    border-left: solid 5px transparent;
-    //    border-right: solid 5px transparent;
-    //    border-top: solid 6px $accent;
-    //}
-
-    &.small {
-        max-width: 160px;
-    }
-
-    &.warn {
-        background-color: variables.$yellow-2;
-        color: variables.$accent !important;
-
-        //&:after {
-        //    border-top: solid 6px $yellow-2;
-        //}
-    }
-}
-
-//
-//.mat-tooltip[style*='transform-origin: center top']:after {
-//    top: -6px;
-//    transform: rotate(180deg);
-//}
-//
-//.mat-tooltip[style*='transform-origin: center bottom']:after {
-//    top: 100%;
-//}
-//
-//.mat-tooltip[style*='transform-origin: right center']:after {
-//    top: 50%;
-//    left: 100%;
-//    transform: rotate(-90deg) translateY(3px) translateX(3px);
-//}
-//
-//.mat-tooltip[style*='transform-origin: left center']:after {
-//    top: 50%;
-//    left: 0;
-//    transform: rotate(90deg) translateY(3px) translateX(-3px);
-//}

apps/red-ui/src/styles.scss

@@ -16,6 +16,8 @@
     $iqser-btn-bg: vars.$btn-bg,
     $iqser-warn: vars.$warn,
     $iqser-white: vars.$white,
+    $iqser-black: vars.$black,
+    $iqser-light: vars.$light,
     $iqser-separator: vars.$separator,
     $iqser-quick-filter-border: vars.$quick-filter-border,
     $iqser-grey-2: vars.$grey-2,
@@ -23,6 +25,11 @@
     $iqser-grey-4: vars.$grey-4,
     $iqser-grey-5: vars.$grey-5,
     $iqser-grey-6: vars.$grey-6,
+    $iqser-grey-7: vars.$grey-7,
+    $iqser-green-1: vars.$green-1,
+    $iqser-green-2: vars.$green-2,
+    $iqser-yellow-1: vars.$yellow-1,
+    $iqser-yellow-2: vars.$yellow-2,
     $iqser-helpmode-primary: vars.$green-2
 );