From 645ba1ab684737d78a5aac147f576d0c9ba00b5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 5 May 2021 15:04:50 +0300
Subject: [PATCH] Back navigates to last projects screen

---
 apps/red-ui/src/app/app.component.ts          |  3 +-
 .../base-screen/base-screen.component.html    | 10 +----
 .../base-screen/base-screen.component.ts      |  4 --
 .../downloads-list-screen.component.html      | 17 +++++---
 .../screens/audit/audit-screen.component.html | 32 +++++++--------
 .../digital-signature-screen.component.html   | 40 +++++++++----------
 .../license-information-screen.component.html | 30 +++++++-------
 .../rule-sets-listing-screen.component.html   | 38 +++++++++---------
 .../smtp-config-screen.component.html         | 30 +++++++-------
 .../user-listing-screen.component.html        | 28 ++++++-------
 ...navigate-last-projects-screen.directive.ts | 13 ++++++
 .../src/app/modules/shared/shared.module.ts   |  3 +-
 .../app/services/router-history.service.ts    | 22 ++++++++++
 apps/red-ui/src/assets/i18n/de.json           |  2 +-
 apps/red-ui/src/assets/i18n/en.json           |  2 +-
 .../src/assets/styles/red-breadcrumbs.scss    |  2 +-
 .../src/assets/styles/red-text-styles.scss    |  1 +
 17 files changed, 155 insertions(+), 122 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/shared/directives/navigate-last-projects-screen.directive.ts
 create mode 100644 apps/red-ui/src/app/services/router-history.service.ts

diff --git a/apps/red-ui/src/app/app.component.ts b/apps/red-ui/src/app/app.component.ts
index cc95d05e4..d8a314e3b 100644
--- a/apps/red-ui/src/app/app.component.ts
+++ b/apps/red-ui/src/app/app.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { AppLoadStateService } from './services/app-load-state.service';
+import { RouterHistoryService } from './services/router-history.service';
 
 @Component({
     selector: 'redaction-root',
@@ -7,5 +8,5 @@ import { AppLoadStateService } from './services/app-load-state.service';
     styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-    constructor(public appLoadStateService: AppLoadStateService) {}
+    constructor(public appLoadStateService: AppLoadStateService, private readonly _routerHistoryService: RouterHistoryService) {}
 }
diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
index f6dc56ebe..8ba2f7f19 100644
--- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html
+++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
@@ -28,15 +28,9 @@
                 *ngIf="projectsView"
                 [routerLinkActiveOptions]="{ exact: true }"
             ></a>
-            <a
-                class="breadcrumb back-to-projects"
-                routerLink="/main/projects"
-                routerLinkActive="active"
-                *ngIf="settingsView"
-                [routerLinkActiveOptions]="{ exact: true }"
-            >
+            <a class="breadcrumb back" redactionNavigateLastProjectsScreen *ngIf="!projectsView">
                 <mat-icon svgIcon="red:expand"></mat-icon>
-                {{ 'top-bar.navigation-items.back-to-projects' | translate }}
+                {{ 'top-bar.navigation-items.back' | translate }}
             </a>
             <ng-container *ngIf="projectsView">
                 <mat-icon class="primary" *ngIf="!appStateService.activeProject" svgIcon="red:arrow-down"></mat-icon>
diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.ts b/apps/red-ui/src/app/components/base-screen/base-screen.component.ts
index 687ef98e0..02cb60d9d 100644
--- a/apps/red-ui/src/app/components/base-screen/base-screen.component.ts
+++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.ts
@@ -45,10 +45,6 @@ export class BaseScreenComponent {
         return this._projectsView;
     }
 
-    get settingsView() {
-        return !this._projectsView;
-    }
-
     get showPendingDownloadsDot() {
         return this.fileDownloadService.hasPendingDownloads;
     }
diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
index 050fab273..03fc8d9f8 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
@@ -1,7 +1,12 @@
 <section>
     <div class="page-header">
         <div class="actions flex-1">
-            <redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
+            <redaction-circle-button
+                icon="red:close"
+                redactionNavigateLastProjectsScreen
+                tooltip="common.close"
+                tooltipPosition="below"
+            ></redaction-circle-button>
         </div>
     </div>
 
@@ -28,7 +33,7 @@
                 <!--      Table lines -->
                 <div *cdkVirtualFor="let download of fileDownloadService.downloads" class="table-item">
                     <div>
-                        <div class="table-item-title heading" [class.no-bold]="download.lastDownload">{{ download.filename }}</div>
+                        <div [class.no-bold]="download.lastDownload" class="table-item-title heading">{{ download.filename }}</div>
                     </div>
                     <div>
                         <div class="small-label">
@@ -46,17 +51,17 @@
                         </div>
                     </div>
                     <div class="actions-container">
-                        <div class="action-buttons" [class.active]="download.inProgress">
+                        <div [class.active]="download.inProgress" class="action-buttons">
                             <redaction-circle-button
-                                *ngIf="download.status === 'READY' && !download.inProgress"
                                 (action)="downloadItem(download)"
+                                *ngIf="download.status === 'READY' && !download.inProgress"
+                                icon="red:download"
                                 tooltip="downloads-list.actions.download"
                                 type="dark-bg"
-                                icon="red:download"
                             >
                             </redaction-circle-button>
 
-                            <redaction-circle-button (action)="deleteItem(download)" tooltip="downloads-list.actions.delete" type="dark-bg" icon="red:trash">
+                            <redaction-circle-button (action)="deleteItem(download)" icon="red:trash" tooltip="downloads-list.actions.delete" type="dark-bg">
                             </redaction-circle-button>
 
                             <mat-spinner *ngIf="download.inProgress" diameter="15"></mat-spinner>
diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
index 05d133535..dc51ab6e1 100644
--- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
@@ -9,12 +9,12 @@
 
             <div class="actions">
                 <redaction-circle-button
-                    class="ml-6"
                     *ngIf="permissionsService.isUser()"
-                    [routerLink]="['/main/projects/']"
+                    class="ml-6"
+                    icon="red:close"
+                    redactionNavigateLastProjectsScreen
                     tooltip="common.close"
                     tooltipPosition="below"
-                    icon="red:close"
                 ></redaction-circle-button>
             </div>
         </div>
@@ -26,8 +26,8 @@
                     </span>
                     <div class="actions-wrapper">
                         <redaction-pagination
-                            [settings]="{ currentPage: logs?.page || 0, totalPages: totalPages }"
                             (pageChanged)="pageChanged($event)"
+                            [settings]="{ currentPage: logs?.page || 0, totalPages: totalPages }"
                         ></redaction-pagination>
                         <div class="separator">·</div>
                         <form [formGroup]="filterForm">
@@ -46,18 +46,18 @@
                                         <mat-select-trigger>
                                             <redaction-initials-avatar
                                                 *ngIf="filterForm.get('userId').value !== ALL_USERS"
-                                                size="small"
                                                 [userId]="filterForm.get('userId').value"
                                                 [withName]="true"
+                                                size="small"
                                             ></redaction-initials-avatar>
                                             <div *ngIf="filterForm.get('userId').value === ALL_USERS" [translate]="ALL_USERS"></div>
                                         </mat-select-trigger>
                                         <mat-option *ngFor="let userId of userIds" [value]="userId">
                                             <redaction-initials-avatar
                                                 *ngIf="userId !== ALL_USERS"
-                                                size="small"
                                                 [userId]="userId"
                                                 [withName]="true"
+                                                size="small"
                                             ></redaction-initials-avatar>
                                             <div *ngIf="userId === ALL_USERS" [translate]="ALL_USERS"></div>
                                         </mat-option>
@@ -66,8 +66,8 @@
                             </div>
                             <div class="separator">·</div>
                             <div class="red-input-group datepicker-wrapper mr-20">
-                                <input placeholder="dd/mm/yy" [matDatepicker]="fromPicker" formControlName="from" />
-                                <mat-datepicker-toggle matSuffix [for]="fromPicker">
+                                <input [matDatepicker]="fromPicker" formControlName="from" placeholder="dd/mm/yy" />
+                                <mat-datepicker-toggle [for]="fromPicker" matSuffix>
                                     <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
                                 </mat-datepicker-toggle>
                                 <mat-datepicker #fromPicker></mat-datepicker>
@@ -76,8 +76,8 @@
                             <div class="mr-20" translate="audit-screen.to"></div>
 
                             <div class="red-input-group datepicker-wrapper">
-                                <input placeholder="dd/mm/yy" [matDatepicker]="toPicker" formControlName="to" />
-                                <mat-datepicker-toggle matSuffix [for]="toPicker">
+                                <input [matDatepicker]="toPicker" formControlName="to" placeholder="dd/mm/yy" />
+                                <mat-datepicker-toggle [for]="toPicker" matSuffix>
                                     <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
                                 </mat-datepicker-toggle>
                                 <mat-datepicker #toPicker></mat-datepicker>
@@ -87,17 +87,17 @@
                 </div>
 
                 <div class="table-header" redactionSyncWidth="table-item">
-                    <redaction-table-col-name label="audit-screen.table-col-names.message" column="message"></redaction-table-col-name>
-                    <redaction-table-col-name label="audit-screen.table-col-names.date" column="date"></redaction-table-col-name>
-                    <redaction-table-col-name label="audit-screen.table-col-names.user" column="user" class="user-column"></redaction-table-col-name>
-                    <redaction-table-col-name label="audit-screen.table-col-names.category" column="category"></redaction-table-col-name>
+                    <redaction-table-col-name column="message" label="audit-screen.table-col-names.message"></redaction-table-col-name>
+                    <redaction-table-col-name column="date" label="audit-screen.table-col-names.date"></redaction-table-col-name>
+                    <redaction-table-col-name class="user-column" column="user" label="audit-screen.table-col-names.user"></redaction-table-col-name>
+                    <redaction-table-col-name column="category" label="audit-screen.table-col-names.category"></redaction-table-col-name>
                     <div class="scrollbar-placeholder"></div>
                 </div>
 
                 <redaction-empty-state *ngIf="!logs?.totalHits" icon="red:document" screen="audit-screen"></redaction-empty-state>
 
                 <cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
-                    <div class="table-item" *cdkVirtualFor="let log of logs?.data">
+                    <div *cdkVirtualFor="let log of logs?.data" class="table-item">
                         <div>
                             {{ log.message }}
                         </div>
@@ -105,7 +105,7 @@
                             {{ log.recordDate | date: 'd MMM. yyyy, hh:mm a' }}
                         </div>
                         <div class="user-column">
-                            <redaction-initials-avatar size="small" [userId]="log.userId" [withName]="true"></redaction-initials-avatar>
+                            <redaction-initials-avatar [userId]="log.userId" [withName]="true" size="small"></redaction-initials-avatar>
                         </div>
                         <div>
                             {{ log.category }}
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
index cf3e4b47a..1802aeb11 100644
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
@@ -10,9 +10,9 @@
             <div class="actions">
                 <redaction-circle-button
                     *ngIf="permissionsService.isUser()"
-                    [routerLink]="['/main/projects/']"
                     class="ml-6"
                     icon="red:close"
+                    redactionNavigateLastProjectsScreen
                     tooltip="common.close"
                     tooltipPosition="below"
                 ></redaction-circle-button>
@@ -22,71 +22,71 @@
         <div class="red-content-inner">
             <div class="content-container">
                 <div class="content-container-content">
-                    <form [formGroup]="digitalSignatureForm" (keyup)="formChanged()" autocomplete="off" *ngIf="digitalSignatureForm">
-                        <input #fileInput (change)="fileChanged($event, fileInput)" hidden class="file-upload-input" type="file" />
+                    <form (keyup)="formChanged()" *ngIf="digitalSignatureForm" [formGroup]="digitalSignatureForm" autocomplete="off">
+                        <input #fileInput (change)="fileChanged($event, fileInput)" class="file-upload-input" hidden type="file" />
 
                         <redaction-empty-state
-                            *ngIf="!hasDigitalSignatureSet"
-                            screen="digital-signature-screen"
-                            buttonIcon="red:upload"
                             (action)="fileInput.click()"
+                            *ngIf="!hasDigitalSignatureSet"
+                            buttonIcon="red:upload"
+                            screen="digital-signature-screen"
                         ></redaction-empty-state>
 
-                        <div class="red-input-group required w-300" [class.hidden]="!hasDigitalSignatureSet">
+                        <div [class.hidden]="!hasDigitalSignatureSet" class="red-input-group required w-300">
                             <label translate="digital-signature-screen.certificate-name.label"></label>
                             <input
+                                [placeholder]="'digital-signature-screen.certificate-name.placeholder' | translate"
                                 formControlName="certificateName"
                                 name="certificateName"
-                                [placeholder]="'digital-signature-screen.certificate-name.placeholder' | translate"
                             />
                         </div>
 
-                        <div class="red-input-group required w-300" [class.hidden]="!hasDigitalSignatureSet" *ngIf="!digitalSignatureExists">
+                        <div *ngIf="!digitalSignatureExists" [class.hidden]="!hasDigitalSignatureSet" class="red-input-group required w-300">
                             <label translate="digital-signature-screen.password.label"></label>
-                            <input formControlName="keySecret" name="keySecret" [placeholder]="'digital-signature-screen.password.placeholder' | translate" />
+                            <input [placeholder]="'digital-signature-screen.password.placeholder' | translate" formControlName="keySecret" name="keySecret" />
                         </div>
 
-                        <div class="red-input-group w-300" [class.hidden]="!hasDigitalSignatureSet">
+                        <div [class.hidden]="!hasDigitalSignatureSet" class="red-input-group w-300">
                             <label translate="digital-signature-screen.reason.label"></label>
-                            <input formControlName="reason" name="reason" [placeholder]="'digital-signature-screen.reason.placeholder' | translate" />
+                            <input [placeholder]="'digital-signature-screen.reason.placeholder' | translate" formControlName="reason" name="reason" />
                         </div>
 
-                        <div class="red-input-group w-300" [class.hidden]="!hasDigitalSignatureSet">
+                        <div [class.hidden]="!hasDigitalSignatureSet" class="red-input-group w-300">
                             <label translate="digital-signature-screen.location.label"></label>
-                            <input formControlName="location" name="location" [placeholder]="'digital-signature-screen.location.placeholder' | translate" />
+                            <input [placeholder]="'digital-signature-screen.location.placeholder' | translate" formControlName="location" name="location" />
                         </div>
 
-                        <div class="red-input-group w-300" [class.hidden]="!hasDigitalSignatureSet">
+                        <div [class.hidden]="!hasDigitalSignatureSet" class="red-input-group w-300">
                             <label translate="digital-signature-screen.contact-info.label"></label>
                             <input
+                                [placeholder]="'digital-signature-screen.contact-info.placeholder' | translate"
                                 formControlName="contactInfo"
                                 name="contactInfo"
-                                [placeholder]="'digital-signature-screen.contact-info.placeholder' | translate"
                             />
                         </div>
 
-                        <div class="changes-box" [class.hidden]="!hasDigitalSignatureSet">
+                        <div [class.hidden]="!hasDigitalSignatureSet" class="changes-box">
                             <redaction-icon-button
+                                (action)="saveDigitalSignature()"
                                 [disabled]="digitalSignatureForm.invalid"
                                 icon="red:check"
-                                (action)="saveDigitalSignature()"
                                 text="digital-signature-screen.action.save"
                                 type="primary"
                             ></redaction-icon-button>
 
                             <redaction-icon-button
+                                (action)="removeDigitalSignature()"
                                 *ngIf="digitalSignatureExists"
                                 icon="red:trash"
-                                (action)="removeDigitalSignature()"
                                 text="digital-signature-screen.action.delete"
                                 type="primary"
                             ></redaction-icon-button>
 
                             <div
                                 (click)="loadDigitalSignatureAndInitializeForm()"
-                                translate="digital-signature-screen.action.reset"
                                 *ngIf="!digitalSignatureExists"
                                 class="all-caps-label cancel"
+                                translate="digital-signature-screen.action.reset"
                             ></div>
                         </div>
                     </form>
diff --git a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
index f8c7f3582..d4a664759 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
@@ -11,9 +11,9 @@
                 <button (click)="sendMail()" color="primary" mat-flat-button translate="license-info-screen.email-report"></button>
                 <redaction-circle-button
                     *ngIf="permissionsService.isUser()"
-                    [routerLink]="['/main/projects/']"
                     class="ml-6"
                     icon="red:close"
+                    redactionNavigateLastProjectsScreen
                     tooltip="common.close"
                     tooltipPosition="below"
                 ></redaction-circle-button>
@@ -88,7 +88,7 @@
                         <div>{{ currentInfo.numberOfAnalyzedPages }} ({{ analysisPercentageOfLicense | number: '1.0-2' }}%)</div>
                     </div>
 
-                    <div class="row" *ngIf="!!unlicensedInfo">
+                    <div *ngIf="!!unlicensedInfo" class="row">
                         <div translate="license-info-screen.unlicensed-analyzed"></div>
                         <div>{{ unlicensedInfo.numberOfAnalyzedPages }}</div>
                     </div>
@@ -101,21 +101,21 @@
                 </div>
 
                 <combo-chart-component
-                    [view]="[1000, 300]"
-                    [scheme]="comboBarScheme"
-                    [legend]="true"
-                    [colorSchemeLine]="lineChartScheme"
-                    [results]="barChart"
                     [animations]="true"
-                    [lineChart]="lineChartSeries"
-                    [xAxis]="true"
-                    [yAxis]="true"
-                    [showGridLines]="true"
-                    [showYAxisLabel]="true"
-                    [showRightYAxisLabel]="true"
-                    [yAxisLabel]="'license-info-screen.chart.pages-per-month' | translate"
-                    [yAxisLabelRight]="'license-info-screen.chart.total-pages' | translate"
+                    [colorSchemeLine]="lineChartScheme"
                     [legendTitle]="'license-info-screen.chart.legend' | translate"
+                    [legend]="true"
+                    [lineChart]="lineChartSeries"
+                    [results]="barChart"
+                    [scheme]="comboBarScheme"
+                    [showGridLines]="true"
+                    [showRightYAxisLabel]="true"
+                    [showYAxisLabel]="true"
+                    [view]="[1000, 300]"
+                    [xAxis]="true"
+                    [yAxisLabelRight]="'license-info-screen.chart.total-pages' | translate"
+                    [yAxisLabel]="'license-info-screen.chart.pages-per-month' | translate"
+                    [yAxis]="true"
                 >
                 </combo-chart-component>
             </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
index a20c7e523..ab8bf5626 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
@@ -9,10 +9,10 @@
 
             <redaction-circle-button
                 *ngIf="permissionsService.isUser()"
-                [routerLink]="['/main/projects/']"
+                icon="red:close"
+                redactionNavigateLastProjectsScreen
                 tooltip="common.close"
                 tooltipPosition="below"
-                icon="red:close"
             ></redaction-circle-button>
         </div>
 
@@ -35,39 +35,39 @@
                         <redaction-search-input [form]="searchForm" [placeholder]="'project-templates-listing.search'"></redaction-search-input>
 
                         <redaction-icon-button
+                            (action)="openAddRuleSetDialog()"
                             *ngIf="permissionsService.isAdmin() && userPreferenceService.areDevFeaturesEnabled"
                             icon="red:plus"
-                            (action)="openAddRuleSetDialog()"
                             text="project-templates-listing.add-new"
                             type="primary"
                         ></redaction-icon-button>
                     </div>
                 </div>
 
-                <div class="table-header" redactionSyncWidth="table-item" [class.no-data]="!allEntities.length">
+                <div [class.no-data]="!allEntities.length" class="table-header" redactionSyncWidth="table-item">
                     <div class="select-oval-placeholder"></div>
 
                     <redaction-table-col-name
-                        label="project-templates-listing.table-col-names.name"
+                        (toggleSort)="toggleSort($event)"
+                        [activeSortingOption]="sortingOption"
+                        [withSort]="true"
                         column="name"
+                        label="project-templates-listing.table-col-names.name"
+                    ></redaction-table-col-name>
+                    <redaction-table-col-name class="user-column" label="project-templates-listing.table-col-names.created-by"></redaction-table-col-name>
+                    <redaction-table-col-name
                         (toggleSort)="toggleSort($event)"
                         [activeSortingOption]="sortingOption"
                         [withSort]="true"
-                    ></redaction-table-col-name>
-                    <redaction-table-col-name label="project-templates-listing.table-col-names.created-by" class="user-column"></redaction-table-col-name>
-                    <redaction-table-col-name
-                        label="project-templates-listing.table-col-names.created-on"
                         column="dateAdded"
-                        (toggleSort)="toggleSort($event)"
-                        [activeSortingOption]="sortingOption"
-                        [withSort]="true"
+                        label="project-templates-listing.table-col-names.created-on"
                     ></redaction-table-col-name>
                     <redaction-table-col-name
-                        label="project-templates-listing.table-col-names.modified-on"
-                        column="dateModified"
                         (toggleSort)="toggleSort($event)"
                         [activeSortingOption]="sortingOption"
                         [withSort]="true"
+                        column="dateModified"
+                        label="project-templates-listing.table-col-names.modified-on"
                     ></redaction-table-col-name>
                     <div class="scrollbar-placeholder"></div>
                 </div>
@@ -82,11 +82,11 @@
 
                 <cdk-virtual-scroll-viewport [itemSize]="100" redactionHasScrollbar>
                     <div
-                        class="table-item pointer"
                         *cdkVirtualFor="let ruleSet of displayedEntities | sortBy: sortingOption.order:sortingOption.column"
                         [routerLink]="[ruleSet.ruleSetId, 'dictionaries']"
+                        class="table-item pointer"
                     >
-                        <div class="selection-column" (click)="toggleEntitySelected($event, ruleSet)">
+                        <div (click)="toggleEntitySelected($event, ruleSet)" class="selection-column">
                             <redaction-round-checkbox [active]="isEntitySelected(ruleSet)"></redaction-round-checkbox>
                         </div>
 
@@ -103,7 +103,7 @@
                         </div>
 
                         <div class="user-column">
-                            <redaction-initials-avatar [userId]="ruleSet.createdBy" [withName]="true"> </redaction-initials-avatar>
+                            <redaction-initials-avatar [userId]="ruleSet.createdBy" [withName]="true"></redaction-initials-avatar>
                         </div>
                         <div class="small-label">
                             {{ ruleSet.dateAdded | date: 'd MMM. yyyy' }}
@@ -114,9 +114,9 @@
                             </div>
 
                             <redaction-rule-set-actions
-                                class="actions-container"
-                                [ruleSetId]="ruleSet.ruleSetId"
                                 (loadRuleSetsData)="loadRuleSetsData()"
+                                [ruleSetId]="ruleSet.ruleSetId"
+                                class="actions-container"
                             ></redaction-rule-set-actions>
                         </div>
                         <div class="scrollbar-placeholder"></div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.html
index ff2e2a5eb..cc725dfe2 100644
--- a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.html
@@ -10,9 +10,9 @@
             <div class="actions">
                 <redaction-circle-button
                     *ngIf="permissionsService.isUser()"
-                    [routerLink]="['/main/projects/']"
                     class="ml-6"
                     icon="red:close"
+                    redactionNavigateLastProjectsScreen
                     tooltip="common.close"
                     tooltipPosition="below"
                 ></redaction-circle-button>
@@ -26,7 +26,7 @@
                         <div class="heading-l" translate="smtp-config-screen.title"></div>
                         <div translate="smtp-config-screen.subtitle"></div>
                     </div>
-                    <form [formGroup]="configForm" (submit)="save()">
+                    <form (submit)="save()" [formGroup]="configForm">
                         <div class="dialog-content">
                             <div class="dialog-content-left">
                                 <div class="red-input-group required">
@@ -34,8 +34,8 @@
                                     <input
                                         formControlName="host"
                                         name="host"
-                                        type="text"
                                         placeholder="{{ 'smtp-config-screen.form.host-placeholder' | translate }}"
+                                        type="text"
                                     />
                                 </div>
 
@@ -44,8 +44,8 @@
                                     <input
                                         formControlName="port"
                                         name="port"
-                                        type="number"
                                         placeholder="{{ 'smtp-config-screen.form.port-placeholder' | translate }}"
+                                        type="number"
                                     />
                                 </div>
 
@@ -54,8 +54,8 @@
                                     <input
                                         formControlName="from"
                                         name="from"
-                                        type="email"
                                         placeholder="{{ 'smtp-config-screen.form.from-placeholder' | translate }}"
+                                        type="email"
                                     />
                                 </div>
 
@@ -64,8 +64,8 @@
                                     <input
                                         formControlName="fromDisplayName"
                                         name="fromDisplayName"
-                                        type="text"
                                         placeholder="{{ 'smtp-config-screen.form.from-display-name-placeholder' | translate }}"
+                                        type="text"
                                     />
                                     <span class="hint" translate="smtp-config-screen.form.from-display-name-hint"></span>
                                 </div>
@@ -75,8 +75,8 @@
                                     <input
                                         formControlName="replyTo"
                                         name="replyTo"
-                                        type="text"
                                         placeholder="{{ 'smtp-config-screen.form.reply-to-placeholder' | translate }}"
+                                        type="text"
                                     />
                                 </div>
 
@@ -85,8 +85,8 @@
                                     <input
                                         formControlName="replyToDisplayName"
                                         name="replyToDisplayName"
-                                        type="text"
                                         placeholder="{{ 'smtp-config-screen.form.reply-to-display-name-placeholder' | translate }}"
+                                        type="text"
                                     />
                                 </div>
 
@@ -95,8 +95,8 @@
                                     <input
                                         formControlName="envelopeFrom"
                                         name="envelopeFrom"
-                                        type="text"
                                         placeholder="{{ 'smtp-config-screen.form.envelope-from-placeholder' | translate }}"
+                                        type="text"
                                     />
                                     <span class="hint" translate="smtp-config-screen.form.envelope-from-hint"></span>
                                 </div>
@@ -104,20 +104,20 @@
                             <div>
                                 <div class="red-input-group">
                                     <label translate="smtp-config-screen.form.ssl"></label>
-                                    <mat-slide-toggle formControlName="ssl" color="primary"></mat-slide-toggle>
+                                    <mat-slide-toggle color="primary" formControlName="ssl"></mat-slide-toggle>
                                 </div>
                                 <div class="red-input-group">
                                     <label translate="smtp-config-screen.form.starttls"></label>
-                                    <mat-slide-toggle formControlName="starttls" color="primary"></mat-slide-toggle>
+                                    <mat-slide-toggle color="primary" formControlName="starttls"></mat-slide-toggle>
                                 </div>
                                 <div class="red-input-group">
                                     <label translate="smtp-config-screen.form.auth"></label>
-                                    <mat-slide-toggle formControlName="auth" color="primary"></mat-slide-toggle>
+                                    <mat-slide-toggle color="primary" formControlName="auth"></mat-slide-toggle>
                                 </div>
                                 <div
-                                    class="link-action"
-                                    *ngIf="configForm.get('auth').value"
                                     (click)="openAuthConfigDialog(true)"
+                                    *ngIf="configForm.get('auth').value"
+                                    class="link-action"
                                     translate="smtp-config-screen.form.change-credentials"
                                 ></div>
                             </div>
@@ -128,9 +128,9 @@
                             </button>
 
                             <redaction-icon-button
+                                (action)="testConnection()"
                                 [disabled]="configForm.invalid"
                                 text="smtp-config-screen.actions.test-connection"
-                                (action)="testConnection()"
                                 type="show-bg"
                             ></redaction-icon-button>
                         </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
index 7342933b8..c5e2b5fd9 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
@@ -17,18 +17,18 @@
                     type="primary"
                 ></redaction-icon-button>
                 <redaction-circle-button
-                    class="ml-6"
                     *ngIf="permissionsService.isUser()"
-                    [routerLink]="['/main/projects/']"
+                    class="ml-6"
+                    icon="red:close"
+                    redactionNavigateLastProjectsScreen
                     tooltip="common.close"
                     tooltipPosition="below"
-                    icon="red:close"
                 ></redaction-circle-button>
             </div>
         </div>
 
         <div class="red-content-inner">
-            <div class="content-container" [class.extended]="collapsedDetails">
+            <div [class.extended]="collapsedDetails" class="content-container">
                 <div class="header-item">
                     <div class="select-all-container">
                         <redaction-round-checkbox
@@ -47,9 +47,9 @@
                             (action)="bulkDelete()"
                             [disabled]="!canDeleteSelected"
                             [tooltip]="canDeleteSelected ? 'user-listing.bulk.delete' : 'user-listing.bulk.delete-disabled'"
+                            icon="red:trash"
                             tooltipPosition="after"
                             type="dark-bg"
-                            icon="red:trash"
                         ></redaction-circle-button>
                     </ng-container>
 
@@ -63,7 +63,7 @@
 
                     <redaction-table-col-name label="user-listing.table-col-names.email"></redaction-table-col-name>
 
-                    <redaction-table-col-name label="user-listing.table-col-names.active" class="flex-center"></redaction-table-col-name>
+                    <redaction-table-col-name class="flex-center" label="user-listing.table-col-names.active"></redaction-table-col-name>
 
                     <redaction-table-col-name label="user-listing.table-col-names.roles"></redaction-table-col-name>
 
@@ -75,34 +75,34 @@
 
                 <cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
                     <!--      Table lines -->
-                    <div class="table-item" *cdkVirtualFor="let user of displayedEntities">
-                        <div class="selection-column" (click)="toggleEntitySelected($event, user)">
+                    <div *cdkVirtualFor="let user of displayedEntities" class="table-item">
+                        <div (click)="toggleEntitySelected($event, user)" class="selection-column">
                             <redaction-round-checkbox [active]="isEntitySelected(user)"></redaction-round-checkbox>
                         </div>
 
                         <div>
-                            <redaction-initials-avatar [user]="user" [withName]="true" [showYou]="true"></redaction-initials-avatar>
+                            <redaction-initials-avatar [showYou]="true" [user]="user" [withName]="true"></redaction-initials-avatar>
                         </div>
                         <div class="small-label">{{ user.email || '-' }}</div>
                         <div class="center">
-                            <mat-slide-toggle [checked]="userService.isActive(user)" color="primary" (toggleChange)="toggleActive(user)"></mat-slide-toggle>
+                            <mat-slide-toggle (toggleChange)="toggleActive(user)" [checked]="userService.isActive(user)" color="primary"></mat-slide-toggle>
                         </div>
                         <div class="small-label">{{ getDisplayRoles(user) }}</div>
                         <div class="actions-container">
                             <div class="action-buttons">
                                 <redaction-circle-button
                                     (action)="openAddEditUserDialog($event, user)"
+                                    icon="red:edit"
                                     tooltip="user-listing.action.edit"
                                     type="dark-bg"
-                                    icon="red:edit"
                                 >
                                 </redaction-circle-button>
                                 <redaction-circle-button
                                     (action)="openDeleteUserDialog([user], $event)"
+                                    [disabled]="user.userId === userService.userId"
+                                    icon="red:trash"
                                     tooltip="user-listing.action.delete"
                                     type="dark-bg"
-                                    icon="red:trash"
-                                    [disabled]="user.userId === userService.userId"
                                 >
                                 </redaction-circle-button>
                             </div>
@@ -112,7 +112,7 @@
                 </cdk-virtual-scroll-viewport>
             </div>
 
-            <div class="right-container" redactionHasScrollbar [class.collapsed]="collapsedDetails">
+            <div [class.collapsed]="collapsedDetails" class="right-container" redactionHasScrollbar>
                 <redaction-users-stats (toggleCollapse)="toggleCollapsedDetails()" [chartData]="chartData"></redaction-users-stats>
             </div>
         </div>
diff --git a/apps/red-ui/src/app/modules/shared/directives/navigate-last-projects-screen.directive.ts b/apps/red-ui/src/app/modules/shared/directives/navigate-last-projects-screen.directive.ts
new file mode 100644
index 000000000..a950afc44
--- /dev/null
+++ b/apps/red-ui/src/app/modules/shared/directives/navigate-last-projects-screen.directive.ts
@@ -0,0 +1,13 @@
+import { Directive, HostListener } from '@angular/core';
+import { RouterHistoryService } from '../../../services/router-history.service';
+
+@Directive({
+    selector: '[redactionNavigateLastProjectsScreen]'
+})
+export class NavigateLastProjectsScreenDirective {
+    constructor(private readonly _routerHistoryService: RouterHistoryService) {}
+
+    @HostListener('click') onClick() {
+        this._routerHistoryService.navigateToLastProjectsScreen();
+    }
+}
diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts
index 270a82db8..02df28aba 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -32,6 +32,7 @@ import { RoundCheckboxComponent } from './components/checkbox/round-checkbox.com
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MomentDateAdapter } from '@angular/material-moment-adapter';
 import { SelectComponent } from './components/select/select.component';
+import { NavigateLastProjectsScreenDirective } from './directives/navigate-last-projects-screen.directive';
 
 const buttons = [ChevronButtonComponent, CircleButtonComponent, FileDownloadBtnComponent, IconButtonComponent, UserButtonComponent];
 
@@ -57,7 +58,7 @@ const components = [
     ...buttons
 ];
 
-const utils = [HumanizePipe, SyncWidthDirective, HasScrollbarDirective];
+const utils = [HumanizePipe, SyncWidthDirective, HasScrollbarDirective, NavigateLastProjectsScreenDirective];
 
 const modules = [MatConfigModule, TranslateModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule];
 
diff --git a/apps/red-ui/src/app/services/router-history.service.ts b/apps/red-ui/src/app/services/router-history.service.ts
new file mode 100644
index 000000000..0c3a47c4e
--- /dev/null
+++ b/apps/red-ui/src/app/services/router-history.service.ts
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs/operators';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class RouterHistoryService {
+    private _lastProjectsScreen = '/main/projects';
+
+    constructor(private readonly _router: Router) {
+        this._router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
+            if (event.url.startsWith('/main/projects')) {
+                this._lastProjectsScreen = event.url;
+            }
+        });
+    }
+
+    public navigateToLastProjectsScreen() {
+        this._router.navigate([this._lastProjectsScreen]);
+    }
+}
diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json
index d86aa13b0..8cbd7726a 100644
--- a/apps/red-ui/src/assets/i18n/de.json
+++ b/apps/red-ui/src/assets/i18n/de.json
@@ -58,7 +58,7 @@
     "top-bar": {
         "navigation-items": {
             "projects": "Aktives Dossier",
-            "back-to-projects": "Zurück zu den Dossiers",
+            "back": "Zurück",
             "my-account": {
                 "children": {
                     "admin": "die Einstellungen",
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 86ad4dccf..309d67fab 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -58,7 +58,7 @@
     "top-bar": {
         "navigation-items": {
             "projects": "Active Dossier",
-            "back-to-projects": "Back to Dossiers",
+            "back": "Back",
             "my-account": {
                 "children": {
                     "admin": "Settings",
diff --git a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss
index dd9567bb3..bf602c541 100644
--- a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss
+++ b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss
@@ -22,7 +22,7 @@
     width: fit-content;
     white-space: nowrap;
 
-    &.back-to-projects {
+    &.back {
         display: flex !important;
         justify-content: center;
         align-items: center;
diff --git a/apps/red-ui/src/assets/styles/red-text-styles.scss b/apps/red-ui/src/assets/styles/red-text-styles.scss
index e44456a24..638892fbb 100644
--- a/apps/red-ui/src/assets/styles/red-text-styles.scss
+++ b/apps/red-ui/src/assets/styles/red-text-styles.scss
@@ -3,6 +3,7 @@
 
 a {
     color: $primary;
+    transition: color 0.1s;
 
     &:hover {
         color: lighten($primary, 10%);