From f2c1778eda863250cc15344e1ee87d49c1cca37d Mon Sep 17 00:00:00 2001
From: davidcanonieto <david.cano.nieto@gmail.com>
Date: Fri, 18 Oct 2019 17:35:01 +0100
Subject: [PATCH] [ADF-4595] Change demo-shell style classes prefix (#5132)

* [ADF-4595] Change demo-shell style classes prefix

* Change more files

* Trigger e2e tests

* Fix e2e selectors

* Fix e2e tests

* Fix e2e tests
---
 demo-shell/src/app/app.component.html         |   2 +-
 demo-shell/src/app/app.component.scss         |   2 +-
 .../app-layout/app-layout.component.html      |  22 +-
 .../app-layout/app-layout.component.scss      |  14 +-
 .../app-layout/app-layout.component.ts        |   2 +-
 .../form-demo/cloud-form-demo.component.html  |  14 +-
 .../form-demo/cloud-form-demo.component.scss  |  14 +-
 .../breadcrumb-demo.component.html            |   8 +-
 .../breadcrumb-demo.component.scss            |   6 +-
 .../card-view/card-view.component.html        |  14 +-
 .../card-view/card-view.component.scss        |   6 +-
 .../cloud/cloud-breadcrumb-component.html     |   4 +-
 .../cloud/cloud-breadcrumb-component.scss     |   4 +-
 .../cloud/cloud-filters-demo.component.scss   |   2 +-
 .../cloud/cloud-layout.component.html         |   2 +-
 .../cloud/cloud-layout.component.scss         |   4 +-
 .../community/community-cloud.component.html  |   2 +-
 .../community/community-cloud.component.ts    |   4 +-
 ...unity-process-details-cloud.component.html |   6 +-
 ...unity-process-details-cloud.component.scss |   2 +-
 .../community-processes-cloud.component.html  |   2 +-
 .../community-task-cloud.component.html       |   2 +-
 ...ommunity-task-details-cloud.component.scss |   2 +-
 .../people-groups-cloud-demo.component.html   |  54 ++---
 .../people-groups-cloud-demo.component.scss   |   4 +-
 .../process-details-cloud-demo.component.html |   6 +-
 .../process-details-cloud-demo.component.scss |   2 +-
 .../cloud/processes-cloud-demo.component.html |   2 +-
 .../shared/cloud-settings.component.html      |   2 +-
 .../shared/cloud-settings.component.scss      |   4 +-
 .../task-details-cloud-demo.component.scss    |   2 +-
 .../cloud/tasks-cloud-demo.component.html     |   2 +-
 .../config-editor.component.html              |   6 +-
 .../config-editor.component.scss              |   6 +-
 .../content-node-selector.component.html      |  38 ++--
 .../content-node-selector.component.scss      |   2 +-
 .../copy-content/datatable.component.html     |   2 +-
 .../name-column/name-column.component.ts      |   2 +-
 .../error/demo-error.component.html           |   4 +-
 .../error/demo-error.component.scss           |   2 +-
 .../file-view/file-view.component.scss        |   4 +-
 .../app/components/files/files.component.html |  76 +++----
 .../app/components/files/files.component.scss |  36 +--
 .../components/form/form-list.component.html  |   4 +-
 .../components/form/form-list.component.scss  |   6 +-
 .../form/form-loading.component.html          |   2 +-
 .../form/form-loading.component.scss          |   2 +-
 .../app/components/form/form.component.html   |  14 +-
 .../app/components/form/form.component.scss   |  14 +-
 .../header-data/header-data.component.html    |   2 +-
 .../header-data/header-data.component.scss    |   2 +-
 .../app/components/home/home.component.html   |  10 +-
 .../app/components/home/home.component.scss   |   8 +-
 .../app/components/login/login.component.html |  22 +-
 .../app/components/login/login.component.scss |  20 +-
 .../components/logout/logout.component.html   |  14 +-
 .../components/logout/logout.component.scss   |  10 +-
 .../notifications.component.html              |   2 +-
 .../notifications.component.scss              |   2 +-
 .../demo-permissions.component.html           |   2 +-
 .../demo-permissions.component.scss           |   2 +-
 .../app/components/pipes/pipes.component.html |  18 +-
 .../app/components/pipes/pipes.component.scss |   2 +-
 .../process-list-demo.component.html          |   4 +-
 .../process-list-demo.component.scss          |   6 +-
 .../process-attachments.component.html        |   6 +-
 .../process-service.component.html            |  60 ++---
 .../process-service.component.scss            |  28 +--
 .../task-attachments.component.html           |   6 +-
 .../report-issue/report-issue.component.html  |   8 +-
 .../report-issue/report-issue.component.scss  |   2 +-
 .../search/search-bar.component.scss          |   2 +-
 .../search/search-extended.component.html     |  12 +-
 .../search/search-extended.component.scss     |  41 ++--
 .../search/search-result.component.html       |  10 +-
 .../search/search-result.component.scss       |  14 +-
 .../shared-link-view.component.scss           |   2 +-
 .../shared-link-view.component.ts             |   2 +-
 .../components/social/social.component.html   |   8 +-
 .../components/social/social.component.scss   |   4 +-
 .../src/app/components/tag/tag.component.html |  10 +-
 .../src/app/components/tag/tag.component.scss |   4 +-
 .../task-list-demo.component.html             |   6 +-
 .../task-list-demo.component.scss             |   6 +-
 .../components/theme-picker/theme-picker.html |   2 +-
 demo-shell/src/custom-style-dev.scss          |   8 +-
 demo-shell/src/custom-style.scss              |   8 +-
 demo-shell/src/index.html                     | 208 ++++++++++--------
 e2e/pages/adf/cardViewComponentPage.ts        |  12 +-
 e2e/pages/adf/configEditorPage.ts             |   4 +-
 e2e/pages/adf/contentServicesPage.ts          |  26 +--
 .../peopleGroupCloudComponentPage.ts          |  34 +--
 .../process-services/taskListDemoPage.ts      |   2 +-
 e2e/pages/adf/navigationBarPage.ts            |  20 +-
 e2e/pages/adf/notificationPage.ts             |   2 +-
 e2e/pages/adf/permissionsPage.ts              |   2 +-
 .../process-services/processFiltersPage.ts    |   6 +-
 .../adf/process-services/taskDetailsPage.ts   |   2 +-
 e2e/pages/adf/searchResultsPage.ts            |   2 +-
 lib/core/comments/comments.component.ts       |   3 +-
 stylelint-config.json                         |   2 +-
 101 files changed, 576 insertions(+), 562 deletions(-)

diff --git a/demo-shell/src/app/app.component.html b/demo-shell/src/app/app.component.html
index 1fa3c352d9..955c66f6d2 100644
--- a/demo-shell/src/app/app.component.html
+++ b/demo-shell/src/app/app.component.html
@@ -1,4 +1,4 @@
-<div class="adf-demo-app-container">
+<div class="app-demo-app-container">
     <router-outlet></router-outlet>
     <router-outlet name="overlay"></router-outlet>
 </div>
diff --git a/demo-shell/src/app/app.component.scss b/demo-shell/src/app/app.component.scss
index fa75618d8f..126f79efe9 100644
--- a/demo-shell/src/app/app.component.scss
+++ b/demo-shell/src/app/app.component.scss
@@ -7,7 +7,7 @@ router-outlet[name='overlay'] + * {
     right: 0;
 }
 
-.adf-demo-app-container {
+.app-demo-app-container {
     height: 100%;
     width: 100%;
 }
diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.html b/demo-shell/src/app/components/app-layout/app-layout.component.html
index 27a250f4a6..3ffb4c6b82 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.html
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.html
@@ -8,11 +8,11 @@
                 [tooltip]="tooltip | translate" [showSidenavToggle]="showMenu" [color]="color" [position]="position"
                 (clicked)=toggleMenu($event)>
 
-                <div class="adf-app-layout-menu-spacer"></div>
+                <div class="app-layout-menu-spacer"></div>
 
                 <app-search-bar fxFlex="0 1 auto"></app-search-bar>
 
-                <div class="adf-header-delimiexpandedSidenavter"></div>
+                <div class="app-header-delimiexpandedSidenavter"></div>
 
                 <adf-userinfo [menuPositionX]="'before'" [menuPositionY]="'above'">
                 </adf-userinfo>
@@ -21,7 +21,7 @@
                 <button data-automation-id="language-menu-button" mat-icon-button [matMenuTriggerFor]="langMenu">
                     <mat-icon>language</mat-icon>
                 </button>
-                <mat-menu #langMenu="matMenu" class="adf-menu">
+                <mat-menu #langMenu="matMenu" class="app-menu">
                     <adf-language-menu></adf-language-menu>
                 </mat-menu>
 
@@ -33,13 +33,13 @@
 
     <adf-sidenav-layout-navigation>
         <ng-template let-isMenuMinimized="isMenuMinimized">
-            <mat-nav-list class="adf-sidenav-linklist">
+            <mat-nav-list class="app-sidenav-linklist">
                 <ng-container *ngFor="let link of links">
                     <ng-container *ngIf="link.children">
-                        <mat-list-item (click)="trigger.openMenu()" [attr.data-automation-id]="link.title | translate" class="adf-sidenav-link">
+                        <mat-list-item (click)="trigger.openMenu()" [attr.data-automation-id]="link.title | translate" class="app-sidenav-link">
                             <mat-icon matListIcon>{{link.icon}}</mat-icon>
                             <span matLine *ngIf="!isMenuMinimized()">{{link.title | translate }}</span>
-                            <mat-icon class="adf-sidenav-link__expand-button" [matMenuTriggerData]="{links: link.children}"
+                            <mat-icon class="app-sidenav-link__expand-button" [matMenuTriggerData]="{links: link.children}"
                                 rippleTrigger mat-icon-button #trigger="matMenuTrigger"
                                 [matMenuTriggerFor]="nestedMenu">arrow_right</mat-icon>
                         </mat-list-item>
@@ -47,15 +47,15 @@
 
                     <ng-container *ngIf="!link.children">
                         <mat-list-item [routerLink]="link.href"
-                            routerLinkActive="adf-sidenav-link--active" [routerLinkActiveOptions]="{ exact: true }"
-                            [attr.data-automation-id]="link.title | translate" class="adf-sidenav-link">
+                            routerLinkActive="app-sidenav-link--active" [routerLinkActiveOptions]="{ exact: true }"
+                            [attr.data-automation-id]="link.title | translate" class="app-sidenav-link">
                             <mat-icon matListIcon >{{link.icon}}</mat-icon>
                             <span matLine *ngIf="!isMenuMinimized()">{{link.title | translate }}</span>
                         </mat-list-item>
                     </ng-container>
                 </ng-container>
 
-                <mat-list-item adf-logout [enableRedirect]="enableRedirect" redirectUri="/logout" class="adf-sidenav-link" data-automation-id="Logout" >
+                <mat-list-item adf-logout [enableRedirect]="enableRedirect" redirectUri="/logout" class="app-sidenav-link" data-automation-id="Logout" >
                     <mat-icon matListIcon>exit_to_app</mat-icon>
                     <span matLine *ngIf="!isMenuMinimized()">Logout</span>
                 </mat-list-item>
@@ -76,9 +76,9 @@
 <mat-menu #nestedMenu="matMenu" xPosition="after" class="nestedMenu">
     <ng-template matMenuContent let-links="links">
         <button mat-menu-item *ngFor="let link of links"
-            class="adf-sidenav-link"
+            class="app-sidenav-link"
             [attr.data-automation-id]="link.title | translate"
-            routerLinkActive="adf-sidenav-link--active"
+            routerLinkActive="app-sidenav-link--active"
             [routerLink]="link.href"
             [routerLinkActiveOptions]="{ exact: true }">
 
diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.scss b/demo-shell/src/app/components/app-layout/app-layout.component.scss
index 06e57ba8d2..00426b723c 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.scss
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.scss
@@ -1,4 +1,4 @@
-@mixin adf-app-layout-theme($theme) {
+@mixin app-layout-theme($theme) {
     $primary: map-get($theme, primary);
     $minimumAppWidth: 320px;
 
@@ -14,17 +14,17 @@
         }
     }
 
-    .adf-app-layout {
+    .app-layout {
         display: flex;
         flex: 1;
         min-width: $minimumAppWidth;
         height: 100%;
 
-        .adf-sidenav-link--active {
+        .app-sidenav-link--active {
             color: mat-color($primary);
         }
 
-        .adf-sidenav-link {
+        .app-sidenav-link {
             .mat-list-text {
                 font-size: 14px;
                 white-space: nowrap;
@@ -33,7 +33,7 @@
             }
         }
 
-        .mat-nav-list .mat-list-item.adf-sidenav-link {
+        .mat-nav-list .mat-list-item.app-sidenav-link {
             height: 40px;
         }
 
@@ -47,7 +47,7 @@
             display: none;
         }
 
-        .adf-menu {
+        .app-menu {
             padding-top: 0;
         }
     }
@@ -63,7 +63,7 @@
         }
     }
 
-    [dir='rtl'] .adf-sidenav-link__expand-button {
+    [dir='rtl'] .app-sidenav-link__expand-button {
         transform: rotateY(180deg);
     }
 }
diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.ts b/demo-shell/src/app/components/app-layout/app-layout.component.ts
index 84a3186de6..68218f2329 100644
--- a/demo-shell/src/app/components/app-layout/app-layout.component.ts
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.ts
@@ -25,7 +25,7 @@ import { takeUntil } from 'rxjs/operators';
     templateUrl: 'app-layout.component.html',
     styleUrls: ['app-layout.component.scss'],
     host: {
-        'class': 'adf-app-layout'
+        'class': 'app-layout'
     },
     encapsulation: ViewEncapsulation.None
 })
diff --git a/demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.html b/demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.html
index 23e7bea30c..a86088732e 100644
--- a/demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.html
+++ b/demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.html
@@ -2,7 +2,7 @@
 
     <mat-tab-group>
         <mat-tab label="Form" class="form-cloud-render">
-            <div class="adf-form-container">
+            <div class="app-form-container">
                 <adf-cloud-form
                     [showRefreshButton]="false"
                     [form]="form"
@@ -11,7 +11,7 @@
                 </adf-cloud-form>
             </div>
 
-            <div class="adf-console" #console>
+            <div class="app-console" #console>
                 <h3>Error log:</h3>
                 <p *ngFor="let error of errorFields">Error {{ error.name }} {{error.validationSummary.message |
                     translate}}</p>
@@ -20,20 +20,20 @@
         <mat-tab label="Editor" class="form-cloud-editor">
             <ngx-monaco-editor
                 id="adf-form-config-editor"
-                class="adf-form-config-editor"
+                class="app-form-config-editor"
                 [options]="editorOptions"
                 [(ngModel)]="formConfig"
                 (onInit)="onInitFormEditor($event)">
             </ngx-monaco-editor>
-            <div class="adf-form-editor-buttons">
-                <button mat-raised-button id="adf-form-config-save" (click)="onSaveFormConfig()" color="primary">Save
+            <div class="app-form-editor-buttons">
+                <button mat-raised-button id="app-form-config-save" (click)="onSaveFormConfig()" color="primary">Save
                     form config
                 </button>
-                <button mat-raised-button id="adf-form-config-clear" (click)="onClearFormConfig()" color="primary">Clear
+                <button mat-raised-button id="app-form-config-clear" (click)="onClearFormConfig()" color="primary">Clear
                     form config
                 </button>
             </div>
-            <div class="adf-upload-config-button">
+            <div class="app-upload-config-button">
                 <a mat-raised-button color="primary" >
                     <mat-icon>file_upload</mat-icon>
                     <label for="upload-config-file">Upload JSON File</label>
diff --git a/demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.scss b/demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.scss
index 8dcba59cf8..ccc0b9271d 100644
--- a/demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.scss
+++ b/demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.scss
@@ -1,17 +1,17 @@
-.adf-form-container {
+.app-form-container {
     padding: 10px;
 }
 
-.adf-main-content {
+.app-main-content {
     padding: 0 15px;
 }
 
-.adf-card-view {
+.app-card-view {
     width: 30%;
     display: inline-block;
 }
 
-.adf-console {
+.app-console {
     width: 60%;
     display: inline-block;
     vertical-align: top;
@@ -31,16 +31,16 @@
     }
 }
 
-.adf-form-config-editor {
+.app-form-config-editor {
     height: 500px !important;
 }
 
-.adf-form-editor-buttons {
+.app-form-editor-buttons {
     display: flex;
     justify-content: space-evenly;
 }
 
-.adf-upload-config-button {
+.app-upload-config-button {
     display: flex;
     justify-content: center;
 
diff --git a/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.html b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.html
index 35d547f8cd..b03dd16d4d 100644
--- a/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.html
+++ b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.html
@@ -8,7 +8,7 @@
     <h2>1. Standalone (fixed size)</h2>
     <small>Component is used in the fixed-width layout</small>
 
-    <div class="adf-breadcrumb-container-restricted">
+    <div class="app-breadcrumb-container-restricted">
         <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
         </adf-breadcrumb>
     </div>
@@ -57,7 +57,7 @@
         Buttons do nothing and are present for layout purposes.
     </small>
 
-    <adf-toolbar class="adf-full-content-toolbar">
+    <adf-toolbar class="app-full-content-toolbar">
         <adf-toolbar-title fxFlex="0 1 auto">
             <adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
             </adf-breadcrumb>
@@ -79,11 +79,11 @@
     <h2>6. Dropdown Breadcrumb</h2>
 
     <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
-                             class="adf-files-breadcrumb"
+                             class="app-files-breadcrumb"
                              [target]="documentList">
     </adf-dropdown-breadcrumb>
 
-    <div class="adf-content">
+    <div class="app-content">
         <adf-document-list #documentList currentFolderId="-my-">
         </adf-document-list>
     </div>
diff --git a/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.scss b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.scss
index becb4df00b..693bedc97e 100644
--- a/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.scss
+++ b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.scss
@@ -1,13 +1,13 @@
-.adf-breadcrumb-container-restricted {
+.app-breadcrumb-container-restricted {
     width: 800px;
     max-width: 800px;
     border: 1px solid lightgray;
 }
 
-.adf-content {
+.app-content {
     margin: 10px 0;
 }
 
-.adf-full-content-toolbar .adf-toolbar-title .adf-breadcrumb {
+.app-full-content-toolbar .app-toolbar-title .app-breadcrumb {
     width: 0;
 }
diff --git a/demo-shell/src/app/components/card-view/card-view.component.html b/demo-shell/src/app/components/card-view/card-view.component.html
index 87c8edd452..672afa20c8 100644
--- a/demo-shell/src/app/components/card-view/card-view.component.html
+++ b/demo-shell/src/app/components/card-view/card-view.component.html
@@ -1,7 +1,7 @@
-<div class="adf-main-content">
+<div class="app-main-content">
     <h1>CardView Component</h1>
 
-    <mat-card class="adf-card-view">
+    <mat-card class="app-card-view">
         <adf-card-view
             [properties]="properties"
             [editable]="true"
@@ -10,30 +10,30 @@
         </adf-card-view>
     </mat-card>
 
-    <div class="adf-console" #console>
+    <div class="app-console" #console>
         <h3>Changes log:</h3>
         <p *ngFor="let log of logs">{{ log }}</p>
     </div>
 
 </div>
 
-<p class="adf-toggle">
+<p class="app-toggle">
     <mat-slide-toggle
-        id="adf-toggle-editable"
+        id="app-toggle-editable"
         [color]="'primary'"
         (change)="toggleEditable()"
         [checked]="isEditable">
         Editable
     </mat-slide-toggle><br>
     <mat-slide-toggle
-        id="adf-toggle-clear-date"
+        id="app-toggle-clear-date"
         [color]="'primary'"
         (change)="toggleClearDate()"
         [checked]="showClearDateAction">
         Show clear date icon
     </mat-slide-toggle><br>
     <mat-slide-toggle
-        id="adf-toggle-none-option"
+        id="app-toggle-none-option"
         [color]="'primary'"
         (change)="toggleNoneOption()"
         [checked]="showNoneOption">
diff --git a/demo-shell/src/app/components/card-view/card-view.component.scss b/demo-shell/src/app/components/card-view/card-view.component.scss
index ba481720c8..bbcfe4fead 100644
--- a/demo-shell/src/app/components/card-view/card-view.component.scss
+++ b/demo-shell/src/app/components/card-view/card-view.component.scss
@@ -1,13 +1,13 @@
-.adf-main-content {
+.app-main-content {
     padding: 0 15px;
 }
 
-.adf-card-view {
+.app-card-view {
     width: 30%;
     display: inline-block;
 }
 
-.adf-console {
+.app-console {
     width: 60%;
     display: inline-block;
     vertical-align: top;
diff --git a/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.html b/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.html
index 47ee00b867..8f536f0805 100644
--- a/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.html
+++ b/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.html
@@ -1,8 +1,8 @@
 <adf-toolbar>
   <div fxLayout="column" fxLayoutAlign="center">
     <div fxLayout="row">
-      <div class="adf-app-crumb">{{appName + ' >'}} </div>
-      <div class="adf-filter-crumb"> {{filterName | translate}}</div>
+      <div class="app-crumb">{{appName + ' >'}} </div>
+      <div class="app-filter-crumb"> {{filterName | translate}}</div>
     </div>
   </div>
 </adf-toolbar>
diff --git a/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.scss b/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.scss
index dc6af11d15..4eb5d73139 100644
--- a/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.scss
+++ b/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.scss
@@ -1,8 +1,8 @@
-.adf-app-crumb {
+.app-app-crumb {
   opacity: 0.5;
 }
 
-.adf-filter-crumb {
+.app-filter-crumb {
   opacity: 0.8;
   margin-left: 5px;
 }
diff --git a/demo-shell/src/app/components/cloud/cloud-filters-demo.component.scss b/demo-shell/src/app/components/cloud/cloud-filters-demo.component.scss
index 771d9ca8e5..8955bec48e 100644
--- a/demo-shell/src/app/components/cloud/cloud-filters-demo.component.scss
+++ b/demo-shell/src/app/components/cloud/cloud-filters-demo.component.scss
@@ -1,3 +1,3 @@
-adf-cloud-task-filters .adf-filters__entry, adf-cloud-process-filters .adf-filters__entry {
+app-cloud-task-filters .app-filters__entry, app-cloud-process-filters .app-filters__entry {
   padding-left: 0 !important;
 }
diff --git a/demo-shell/src/app/components/cloud/cloud-layout.component.html b/demo-shell/src/app/components/cloud/cloud-layout.component.html
index 806e7a617a..f22bedfd4f 100644
--- a/demo-shell/src/app/components/cloud/cloud-layout.component.html
+++ b/demo-shell/src/app/components/cloud/cloud-layout.component.html
@@ -1,4 +1,4 @@
-<mat-tab-group fxFill class="adf-cloud-layout-tab-body">
+<mat-tab-group fxFill class="app-cloud-layout-tab-body">
   <mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
     <div fxFill fxLayout>
       <adf-sidenav-layout fxFlex [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
diff --git a/demo-shell/src/app/components/cloud/cloud-layout.component.scss b/demo-shell/src/app/components/cloud/cloud-layout.component.scss
index 7c563b9ea9..11d5b44086 100644
--- a/demo-shell/src/app/components/cloud/cloud-layout.component.scss
+++ b/demo-shell/src/app/components/cloud/cloud-layout.component.scss
@@ -1,7 +1,7 @@
-.adf-cloud-layout-overflow {
+.app-cloud-layout-overflow {
   overflow: auto;
 }
 
-.adf-cloud-layout-tab-body .mat-tab-body-wrapper {
+.app-cloud-layout-tab-body .mat-tab-body-wrapper {
   height: 100%;
 }
diff --git a/demo-shell/src/app/components/cloud/community/community-cloud.component.html b/demo-shell/src/app/components/cloud/community/community-cloud.component.html
index 051349524a..b4419041eb 100644
--- a/demo-shell/src/app/components/cloud/community/community-cloud.component.html
+++ b/demo-shell/src/app/components/cloud/community/community-cloud.component.html
@@ -1,4 +1,4 @@
-<mat-tab-group fxFill class="adf-cloud-layout-tab-body">
+<mat-tab-group fxFill class="app-cloud-layout-tab-body">
     <mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
       <div fxFill fxLayout>
         <adf-sidenav-layout fxFlex [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
diff --git a/demo-shell/src/app/components/cloud/community/community-cloud.component.ts b/demo-shell/src/app/components/cloud/community/community-cloud.component.ts
index 40f92e73b4..52c434b18d 100644
--- a/demo-shell/src/app/components/cloud/community/community-cloud.component.ts
+++ b/demo-shell/src/app/components/cloud/community/community-cloud.component.ts
@@ -21,11 +21,11 @@ import { CloudLayoutService } from '../services/cloud-layout.service';
 
 @Component({
     templateUrl: './community-cloud.component.html',
-    styles: [`.adf-cloud-layout-overflow {
+    styles: [`.app-cloud-layout-overflow {
         overflow: auto;
       }
 
-      .adf-cloud-layout-tab-body .mat-tab-body-wrapper {
+      .app-cloud-layout-tab-body .mat-tab-body-wrapper {
         height: 100% !important;
       }
       `],
diff --git a/demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.html b/demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.html
index cc41129884..018bc50c78 100644
--- a/demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.html
+++ b/demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.html
@@ -5,11 +5,11 @@
 
 <h4 data-automation-id="process-details-header">Simple page to show the process instance: {{ processInstanceId }} of the app: {{ appName }}</h4>
 
-<div class="adf-process-cloud-container">
+<div class="app-process-cloud-container">
 
     <adf-cloud-task-list
         fxFlex
-        class="adf-cloud-layout-overflow"
+        class="app-cloud-layout-overflow"
         [appName]="''"
         [processInstanceId]="processInstanceId"
         (rowClick)="onRowClick($event)"
@@ -17,7 +17,7 @@
     </adf-cloud-task-list>
 
     <adf-cloud-process-header
-        class="adf-process-cloud-header"
+        class="app-process-cloud-header"
         [appName]="''"
         [processInstanceId]="processInstanceId">
     </adf-cloud-process-header>
diff --git a/demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.scss b/demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.scss
index 3ad46f3b2c..36e1b3e656 100644
--- a/demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.scss
+++ b/demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.scss
@@ -1,4 +1,4 @@
-.adf {
+.app {
     &-process-cloud-container {
         display: flex;
     }
diff --git a/demo-shell/src/app/components/cloud/community/community-processes-cloud.component.html b/demo-shell/src/app/components/cloud/community/community-processes-cloud.component.html
index fb5071c765..17c46f9942 100644
--- a/demo-shell/src/app/components/cloud/community/community-processes-cloud.component.html
+++ b/demo-shell/src/app/components/cloud/community/community-processes-cloud.component.html
@@ -12,7 +12,7 @@
         <adf-cloud-process-list #processCloud
             fxFlex
             [appName]="''"
-            class="adf-cloud-layout-overflow"
+            class="app-cloud-layout-overflow"
             [initiator]="editedFilter.initiator"
             [processDefinitionId]="editedFilter.processDefinitionId"
             [processDefinitionKey]="editedFilter.processDefinitionKey"
diff --git a/demo-shell/src/app/components/cloud/community/community-task-cloud.component.html b/demo-shell/src/app/components/cloud/community/community-task-cloud.component.html
index cf431267d5..74eae4b803 100644
--- a/demo-shell/src/app/components/cloud/community/community-task-cloud.component.html
+++ b/demo-shell/src/app/components/cloud/community/community-task-cloud.component.html
@@ -12,7 +12,7 @@
         <adf-cloud-task-list #taskCloud
             fxFlex
             [appName]="''"
-            class="adf-cloud-layout-overflow"
+            class="app-cloud-layout-overflow"
             [processDefinitionId]="editedFilter.processDefinitionId"
             [processInstanceId]="editedFilter.processInstanceId"
             [name]="editedFilter.taskName"
diff --git a/demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.scss b/demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.scss
index e3cc8d8c52..a4b9b86d0d 100644
--- a/demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.scss
+++ b/demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.scss
@@ -1,5 +1,5 @@
 
-.adf {
+.app {
 
     &-task-detail-container {
         display: flex;
diff --git a/demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.html b/demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.html
index 53c3560290..8ed88cfa84 100644
--- a/demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.html
+++ b/demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.html
@@ -1,4 +1,4 @@
-<mat-card class="adf-section">
+<mat-card class="app-section">
     <mat-card-title>
         {{ 'APP_LAYOUT.PEOPLE_CLOUD' | translate}}
     </mat-card-title>
@@ -6,31 +6,31 @@
     <mat-card-content>
         <br>
         <mat-radio-group (change)="onChangePeopleMode($event)">
-            <mat-radio-button checked="true" class="adf-people-single-mode" data-automation-id="adf-people-single-mode" value="{{ peopleSingleMode }}">{{
+            <mat-radio-button checked="true" class="app-people-single-mode" data-automation-id="app-people-single-mode" value="{{ peopleSingleMode }}">{{
                 'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
-            <mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-people-multiple-mode" value="{{ peopleMultipleMode }}">{{
+            <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-people-multiple-mode" value="{{ peopleMultipleMode }}">{{
                 'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
         </mat-radio-group>
-        <div class="people-control-options">
+        <div class="app-people-control-options">
             <mat-radio-group (change)="onChangePeopleFilterMode($event)">
-                <mat-radio-button checked="true" class="adf-people-single-mode" value="appName">{{
+                <mat-radio-button checked="true" class="app-people-single-mode" value="appName">{{
                     'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
-                <mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-people-filter-role" value="role">{{
+                <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-people-filter-role" value="role">{{
                     'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
             </mat-radio-group>
-            <mat-form-field *ngIf="!isPeopleAppNameSelected()" class="adf-preselect-value">
+            <mat-form-field *ngIf="!isPeopleAppNameSelected()" class="app-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ["ACTIVITI_ADMIN", "ACTIVITI_USER"]</mat-label>
-                <input matInput (input)="setPeopleRoles($event)" data-automation-id="adf-people-roles-input" />
+                <input matInput (input)="setPeopleRoles($event)" data-automation-id="app-people-roles-input" />
             </mat-form-field>
-            <mat-form-field *ngIf="isPeopleAppNameSelected()" class="adf-preselect-value">
+            <mat-form-field *ngIf="isPeopleAppNameSelected()" class="app-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
-                <input matInput (input)="setPeopleAppName($event)" data-automation-id="adf-people-app-input" />
+                <input matInput (input)="setPeopleAppName($event)" data-automation-id="app-people-app-input" />
             </mat-form-field>
-            <mat-form-field class="adf-preselect-value-full">
+            <mat-form-field class="app-preselect-value-full">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }} {{ DEFAULT_PEOPLE_PLACEHOLDER }}</mat-label>
-                <input matInput (input)="setPeoplePreselectValue($event)"  data-automation-id="adf-people-preselect-input" />
+                <input matInput (input)="setPeoplePreselectValue($event)"  data-automation-id="app-people-preselect-input" />
             </mat-form-field>
-            <mat-checkbox class="adf-preselect-value" (change)="onChangePeopleValidation($event)">{{
+            <mat-checkbox class="app-preselect-value" (change)="onChangePeopleValidation($event)">{{
                 'PEOPLE_GROUPS_CLOUD.PRESELECT_VALIDATION' | translate }}</mat-checkbox>
         </div>
         <div>
@@ -44,7 +44,7 @@
                 [mode]="peopleMode"></adf-cloud-people>
         </div>
 
-        <div class="adf-people-list" *ngIf="canShowPeopleList()">
+        <div class="app-people-list" *ngIf="canShowPeopleList()">
             <mat-list role="list">
                 <mat-list-item *ngFor="let item of preSelectUsers" role="listitem">
                     <mat-icon mat-list-icon>person</mat-icon>
@@ -55,7 +55,7 @@
     </mat-card-content>
 </mat-card>
 
-<mat-card class="adf-section">
+<mat-card class="app-section">
     <mat-card-title>
         {{ 'APP_LAYOUT.GROUPS_CLOUD' | translate}}
     </mat-card-title>
@@ -63,29 +63,29 @@
     <mat-card-content>
         <br>
         <mat-radio-group (change)="onChangeGroupsMode($event)">
-            <mat-radio-button checked="true" class="adf-people-single-mode" data-automation-id="adf-group-single-mode" value="{{ groupSingleMode }}">{{
+            <mat-radio-button checked="true" class="app-people-single-mode" data-automation-id="app-group-single-mode" value="{{ groupSingleMode }}">{{
                 'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
-            <mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-group-multiple-mode" value="{{ groupMultipleMode }}">{{
+            <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-group-multiple-mode" value="{{ groupMultipleMode }}">{{
                 'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
         </mat-radio-group>
-        <div class="groups-control-options">
+        <div class="app-groups-control-options">
             <mat-radio-group (change)="onChangeGroupsFilterMode($event)">
-                <mat-radio-button checked="true" class="adf-people-single-mode" value="appName">{{
+                <mat-radio-button checked="true" class="app-people-single-mode" value="appName">{{
                     'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
-                <mat-radio-button class="adf-people-multiple-mode" data-automation-id="adf-group-filter-role" value="role">{{
+                <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-group-filter-role" value="role">{{
                     'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
             </mat-radio-group>
-            <mat-form-field *ngIf="!isGroupAppNameSelected()" class="adf-preselect-value">
+            <mat-form-field *ngIf="!isGroupAppNameSelected()" class="app-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ["ACTIVITI_ADMIN", "ACTIVITI_USER"]</mat-label>
-                <input matInput (input)="setGroupRoles($event)" data-automation-id="adf-group-roles-input"/>
+                <input matInput (input)="setGroupRoles($event)" data-automation-id="app-group-roles-input"/>
             </mat-form-field>
-            <mat-form-field *ngIf="isGroupAppNameSelected()" class="adf-preselect-value">
+            <mat-form-field *ngIf="isGroupAppNameSelected()" class="app-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
-                <input matInput (input)="setGroupAppName($event)" data-automation-id="adf-group-app-input"/>
+                <input matInput (input)="setGroupAppName($event)" data-automation-id="app-group-app-input"/>
             </mat-form-field>
-            <mat-form-field class="adf-preselect-value-full">
+            <mat-form-field class="app-preselect-value-full">
                 <mat-label>Preselect: {{ DEFAULT_GROUP_PLACEHOLDER }}</mat-label>
-                <input matInput (input)="setGroupsPreselectValue($event)" data-automation-id="adf-group-preselect-input" />
+                <input matInput (input)="setGroupsPreselectValue($event)" data-automation-id="app-group-preselect-input" />
             </mat-form-field>
         </div>
         <div>
@@ -93,7 +93,7 @@
                 (selectGroup)="onSelectGroup($event)" (removeGroup)="onRemoveGroup($event)"></adf-cloud-group>
         </div>
 
-        <div class="adf-group-list" *ngIf="canShowGroupList()">
+        <div class="app-group-list" *ngIf="canShowGroupList()">
             <mat-list role="list">
                 <mat-list-item *ngFor="let item of preSelectGroup" role="listitem">
                     <mat-icon mat-list-icon>group</mat-icon>
diff --git a/demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.scss b/demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.scss
index 99098e7061..bc3ca57840 100644
--- a/demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.scss
+++ b/demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.scss
@@ -1,4 +1,4 @@
-.adf {
+.app {
     &-section {
         mat-card-title {
             font-size:18px;
@@ -14,7 +14,7 @@
 
         mat-card-content {
 
-            .adf-preselect-value {
+            .app-preselect-value {
                 margin-right: 15px;
                 min-width: 25%;
 
diff --git a/demo-shell/src/app/components/cloud/process-details-cloud-demo.component.html b/demo-shell/src/app/components/cloud/process-details-cloud-demo.component.html
index 4cd466d5f5..e777e9aa04 100644
--- a/demo-shell/src/app/components/cloud/process-details-cloud-demo.component.html
+++ b/demo-shell/src/app/components/cloud/process-details-cloud-demo.component.html
@@ -5,11 +5,11 @@
 
 <h4 data-automation-id="process-details-header">Simple page to show the process instance: {{ processInstanceId }} of the app: {{ appName }}</h4>
 
-<div class="adf-process-cloud-container">
+<div class="app-process-cloud-container">
 
     <adf-cloud-task-list
         fxFlex
-        class="adf-cloud-layout-overflow"
+        class="app-cloud-layout-overflow"
         [appName]="appName"
         [processInstanceId]="processInstanceId"
         (rowClick)="onRowClick($event)"
@@ -17,7 +17,7 @@
     </adf-cloud-task-list>
 
     <adf-cloud-process-header
-        class="adf-process-cloud-header"
+        class="app-process-cloud-header"
         [appName]="appName"
         [processInstanceId]="processInstanceId">
     </adf-cloud-process-header>
diff --git a/demo-shell/src/app/components/cloud/process-details-cloud-demo.component.scss b/demo-shell/src/app/components/cloud/process-details-cloud-demo.component.scss
index f5e062505b..91e2fbe20d 100644
--- a/demo-shell/src/app/components/cloud/process-details-cloud-demo.component.scss
+++ b/demo-shell/src/app/components/cloud/process-details-cloud-demo.component.scss
@@ -1,4 +1,4 @@
- .adf {
+ .app {
     &-process-cloud-container {
         display: flex;
     }
diff --git a/demo-shell/src/app/components/cloud/processes-cloud-demo.component.html b/demo-shell/src/app/components/cloud/processes-cloud-demo.component.html
index 70dfb611ac..b4442e2172 100644
--- a/demo-shell/src/app/components/cloud/processes-cloud-demo.component.html
+++ b/demo-shell/src/app/components/cloud/processes-cloud-demo.component.html
@@ -11,7 +11,7 @@
     <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
         <adf-cloud-process-list #processCloud
             fxFlex
-            class="adf-cloud-layout-overflow"
+            class="app-cloud-layout-overflow"
             [appName]="editedFilter.appName"
             [initiator]="editedFilter.initiator"
             [processDefinitionId]="editedFilter.processDefinitionId"
diff --git a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.html b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.html
index e94b535709..4a4d2076df 100644
--- a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.html
+++ b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.html
@@ -1,4 +1,4 @@
-<div fxFlex fxLayout="column" class="adf-settings-container">
+<div fxFlex fxLayout="column" class="app-settings-container">
     <mat-slide-toggle [color]="'primary'" [checked]="multiselect" (change)="toggleMultiselect()" data-automation-id="multiSelection">
         {{ 'SETTINGS_CLOUD.MULTISELECTION' | translate }}
     </mat-slide-toggle>
diff --git a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss
index 5f275cf564..887fdd7773 100644
--- a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss
+++ b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss
@@ -1,7 +1,7 @@
-.adf-settings-container {
+.app-settings-container {
     padding: 20px 30px;
 }
 
-.adf-settings-container mat-form-field {
+.app-settings-container mat-form-field {
     max-width: 200px;
 }
diff --git a/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.scss b/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.scss
index e3cc8d8c52..a4b9b86d0d 100644
--- a/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.scss
+++ b/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.scss
@@ -1,5 +1,5 @@
 
-.adf {
+.app {
 
     &-task-detail-container {
         display: flex;
diff --git a/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html b/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html
index 640e8c3892..aafe6f4950 100644
--- a/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html
+++ b/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html
@@ -11,7 +11,7 @@
     <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
         <adf-cloud-task-list #taskCloud
             fxFlex
-            class="adf-cloud-layout-overflow"
+            class="app-cloud-layout-overflow"
             [appName]="editedFilter.appName"
             [processDefinitionId]="editedFilter.processDefinitionId"
             [processInstanceId]="editedFilter.processInstanceId"
diff --git a/demo-shell/src/app/components/config-editor/config-editor.component.html b/demo-shell/src/app/components/config-editor/config-editor.component.html
index facbb68c94..7681121354 100644
--- a/demo-shell/src/app/components/config-editor/config-editor.component.html
+++ b/demo-shell/src/app/components/config-editor/config-editor.component.html
@@ -1,5 +1,5 @@
 <div>
-    <mat-nav-list class="adf-list-confgurations">
+    <mat-nav-list class="app-list-confgurations">
 
         <mat-list-item  (click)="appConfigClick()">
             <a matLine id="adf-app-conf">App Config Editor</a>
@@ -32,12 +32,12 @@
 
     <div>
         <ngx-monaco-editor id="adf-code-configuration-editor"
-                           class="adf-file-editor"
+                           class="app-file-editor"
                            [options]="editorOptions"
                            [(ngModel)]="code"
                            (onInit)="onInit($event)">
         </ngx-monaco-editor>
-        <div class="adf-list-confgurations-buttons">
+        <div class="app-list-confgurations-buttons">
             <button mat-raised-button id="adf-configuration-save" (click)="onSave()" color="primary">
                 Save
             </button>
diff --git a/demo-shell/src/app/components/config-editor/config-editor.component.scss b/demo-shell/src/app/components/config-editor/config-editor.component.scss
index 904c629480..c5f1324046 100644
--- a/demo-shell/src/app/components/config-editor/config-editor.component.scss
+++ b/demo-shell/src/app/components/config-editor/config-editor.component.scss
@@ -1,15 +1,15 @@
-.adf-file-editor {
+.app-file-editor {
     height: 500px;
     width: 65%;
     float: left;
 }
 
-.adf-list-confgurations {
+.app-list-configurations {
     float: left;
     width: 30%;
 }
 
-.adf-list-confgurations-buttons {
+.app-list-configurations-buttons {
     width: 200px;
     margin-left:  30%;
     float: left;
diff --git a/demo-shell/src/app/components/content-node-selector/content-node-selector.component.html b/demo-shell/src/app/components/content-node-selector/content-node-selector.component.html
index 41812d1e8d..ac68e6acc8 100644
--- a/demo-shell/src/app/components/content-node-selector/content-node-selector.component.html
+++ b/demo-shell/src/app/components/content-node-selector/content-node-selector.component.html
@@ -8,13 +8,13 @@
                     <h2>Plain picker</h2>
                 </mat-panel-title>
                 <mat-panel-description>
-                    <label class="adf-content-node-selector-demo-basic-label">
+                    <label class="app-content-node-selector-demo-basic-label">
                         dropdownHideMyFiles: {{dropdownHideMyFiles}}
                     </label>
                 </mat-panel-description>
             </mat-expansion-panel-header>
 
-            <div class="adf-content-node-selector-demo-basic-table">
+            <div class="app-content-node-selector-demo-basic-table">
                 <adf-content-node-selector-panel
                     [currentFolderId]="'-root-'">
                 </adf-content-node-selector-panel>
@@ -26,13 +26,13 @@
                     <h2>Hide My files</h2>
                 </mat-panel-title>
                 <mat-panel-description>
-                    <label class="adf-content-node-selector-demo-basic-label">
+                    <label class="app-content-node-selector-demo-basic-label">
                         My Files site will be hided from dropdown
                     </label>
                 </mat-panel-description>
             </mat-expansion-panel-header>
 
-            <div class="adf-content-node-selector-demo-basic-table">
+            <div class="app-content-node-selector-demo-basic-table">
                 <adf-content-node-selector-panel
                     [currentFolderId]="'-root-'"
                     [dropdownHideMyFiles]="true">
@@ -45,7 +45,7 @@
                     <h2>Custom Site List</h2>
                 </mat-panel-title>
                 <mat-panel-description>
-                    <label class="adf-content-node-selector-demo-basic-label">
+                    <label class="app-content-node-selector-demo-basic-label">
                         Adding a custom site list
                     </label>
                 </mat-panel-description>
@@ -54,7 +54,7 @@
             <div>
                 <mat-list>
                     <h3 mat-subheader>Add Site</h3>
-                    <form class="adf-content-node-selector-demo-example-form">
+                    <form class="app-content-node-selector-demo-example-form">
                         <mat-form-field>
                             <label>Site Guid</label>
                             <input matInput [(ngModel)]="customSideGuid" [ngModelOptions]="{standalone: true}">
@@ -79,7 +79,7 @@
             </div>
 
 
-            <div class="adf-content-node-selector-demo-basic-table">
+            <div class="app-content-node-selector-demo-basic-table">
                 <adf-content-node-selector-panel
                     [currentFolderId]="'-root-'"
                     [dropdownSiteList]="customSites">
@@ -92,7 +92,7 @@
                         <h2>Row Filtering</h2>
                     </mat-panel-title>
                     <mat-panel-description>
-                        <label class="adf-content-node-selector-demo-basic-label">
+                        <label class="app-content-node-selector-demo-basic-label">
                             Will automatically filter the row on the list
                         </label>
                     </mat-panel-description>
@@ -105,7 +105,7 @@
                     Slide Folders
                 </mat-slide-toggle>
 
-                <div class="adf-content-node-selector-demo-basic-table">
+                <div class="app-content-node-selector-demo-basic-table">
                     <adf-content-node-selector-panel
                         [rowFilter]="rowFilterFunction"
                         [currentFolderId]="'-root-'">
@@ -118,7 +118,7 @@
                         <h2>Exclude Site Content</h2>
                     </mat-panel-title>
                     <mat-panel-description>
-                        <label class="adf-content-node-selector-demo-basic-label">
+                        <label class="app-content-node-selector-demo-basic-label">
                             The exclude site content is filtered out from the list
                         </label>
                     </mat-panel-description>
@@ -137,7 +137,7 @@
                     Show Folders
                 </mat-slide-toggle>
 
-                <div class="adf-content-node-selector-demo-basic-table">
+                <div class="app-content-node-selector-demo-basic-table">
                     <adf-content-node-selector-panel
                         [rowFilter]="rowFilterFunction"
                         [excludeSiteContent]="excludeSiteContentList"
@@ -151,7 +151,7 @@
                         <h2>Custom Image Resolving</h2>
                     </mat-panel-title>
                     <mat-panel-description>
-                        <label class="adf-content-node-selector-demo-basic-label">
+                        <label class="app-content-node-selector-demo-basic-label">
                             A function to manage the way folder/file icons and thumbnails are resolved
                         </label>
                     </mat-panel-description>
@@ -161,7 +161,7 @@
                     Add Custom Images Resolver
                 </mat-slide-toggle>
 
-                <div class="adf-content-node-selector-demo-basic-table">
+                <div class="app-content-node-selector-demo-basic-table">
                     <adf-content-node-selector-panel
                         [imageResolver]="customImageResolver"
                         [currentFolderId]="'-root-'">
@@ -174,12 +174,12 @@
                     <h2>Set Page Size</h2>
                 </mat-panel-title>
                 <mat-panel-description>
-                    <label class="adf-content-node-selector-demo-basic-label">
+                    <label class="app-content-node-selector-demo-basic-label">
                         Number of items shown per page in the list. actual page {{actualPageSize}}
                     </label>
                 </mat-panel-description>
             </mat-expansion-panel-header>
-            <div class="adf-content-node-selector-demo-basic-table">
+            <div class="app-content-node-selector-demo-basic-table">
                 <adf-content-node-selector-panel
                     [currentFolderId]="'-root-'"
                     [pageSize]="actualPageSize"
@@ -193,14 +193,14 @@
                     <h2>Is Valid Selection Function </h2>
                 </mat-panel-title>
                 <mat-panel-description>
-                    <label class="adf-content-node-selector-demo-basic-label">
+                    <label class="app-content-node-selector-demo-basic-label">
                         Function used to decide if the selected node has permission to be selected
                     </label>
                 </mat-panel-description>
             </mat-expansion-panel-header>
             <label>Only folder starting with the letter 'a' or 'A' are valid selections</label>
             <label>Actual Selection is : {{validSelection}}</label>
-            <div class="adf-content-node-selector-demo-basic-table">
+            <div class="app-content-node-selector-demo-basic-table">
                 <adf-content-node-selector-panel
                     (select)="onNodeSelect($event)"
                     [isSelectionValid]="customIsValidFunction"
@@ -214,13 +214,13 @@
                     <h2>BreadCrumb Transform Function </h2>
                 </mat-panel-title>
                 <mat-panel-description>
-                    <label class="adf-content-node-selector-demo-basic-label">
+                    <label class="app-content-node-selector-demo-basic-label">
                         Transformation to be performed on the chosen/folder node before building the breadcrumb UI
                     </label>
                 </mat-panel-description>
             </mat-expansion-panel-header>
             <label>Folder starting with letter 'd' or 'D' won't be displayed in the breadcrumb dropdown</label>
-            <div class="adf-content-node-selector-demo-basic-table">
+            <div class="app-content-node-selector-demo-basic-table">
                 <adf-content-node-selector-panel
                     [breadcrumbTransform]="customBreadcrumbFunction"
                     [currentFolderId]="'-root-'">
diff --git a/demo-shell/src/app/components/content-node-selector/content-node-selector.component.scss b/demo-shell/src/app/components/content-node-selector/content-node-selector.component.scss
index aa99ee25c5..957293d47d 100644
--- a/demo-shell/src/app/components/content-node-selector/content-node-selector.component.scss
+++ b/demo-shell/src/app/components/content-node-selector/content-node-selector.component.scss
@@ -1,4 +1,4 @@
-.adf-content-node-selector-demo {
+.app-content-node-selector-demo {
 
     &-main {
         display: flex;
diff --git a/demo-shell/src/app/components/datatable/copy-content/datatable.component.html b/demo-shell/src/app/components/datatable/copy-content/datatable.component.html
index 832b6a8581..5a2e8ed808 100644
--- a/demo-shell/src/app/components/datatable/copy-content/datatable.component.html
+++ b/demo-shell/src/app/components/datatable/copy-content/datatable.component.html
@@ -16,7 +16,7 @@
         [data]="dataForCopy">
         <data-columns>
             <data-column key="id" title="Id" [copyContent]="true"></data-column>
-            <data-column key="name" title="Name" class="adf-full-width name-column" [copyContent]="false"></data-column>
+            <data-column key="name" title="Name" class="app-full-width name-column" [copyContent]="false"></data-column>
             <data-column key="createdBy" title="Created By"></data-column>
             <data-column key="json" type="json" title="Json" [copyContent]="true"></data-column>
         </data-columns>
diff --git a/demo-shell/src/app/components/document-list/extension-presets/name-column/name-column.component.ts b/demo-shell/src/app/components/document-list/extension-presets/name-column/name-column.component.ts
index a4fa1189a1..bed4b8e57a 100644
--- a/demo-shell/src/app/components/document-list/extension-presets/name-column/name-column.component.ts
+++ b/demo-shell/src/app/components/document-list/extension-presets/name-column/name-column.component.ts
@@ -33,7 +33,7 @@ import { takeUntil } from 'rxjs/operators';
 @Component({
     selector: 'app-name-column',
     template: `
-        <span class="adf-datatable-cell-value" title="{{ node | adfNodeNameTooltip }}" (click)="onClick()">
+        <span class="app-datatable-cell-value" title="{{ node | adfNodeNameTooltip }}" (click)="onClick()">
             {{ displayText$ | async }}
         </span>
     `,
diff --git a/demo-shell/src/app/components/error/demo-error.component.html b/demo-shell/src/app/components/error/demo-error.component.html
index ef9c274dd4..94ed8e36f1 100644
--- a/demo-shell/src/app/components/error/demo-error.component.html
+++ b/demo-shell/src/app/components/error/demo-error.component.html
@@ -1,9 +1,9 @@
 <div fxLayout="column" fxLayoutAlign="center center">
     <adf-error-content [errorCode]="errorCode">
-        <div adf-error-content-actions class="adf-error-content-buttons">
+        <div adf-error-content-actions class="app-error-content-buttons">
             <a a id="adf-secondary-button" mat-raised-button color="primary"
                  (click)="onReportIssue()"
-                class="adf-error-content-description-link">
+                class="app-error-content-description-link">
                 {{ 'ERROR_CONTENT.' + errorCode + '.SECONDARY_BUTTON.TEXT' | translate | uppercase }}
             </a>
             <a id="adf-return-button" mat-raised-button color="primary" (click)="onReturnButton()">
diff --git a/demo-shell/src/app/components/error/demo-error.component.scss b/demo-shell/src/app/components/error/demo-error.component.scss
index d5a25c914a..53ef6445b4 100644
--- a/demo-shell/src/app/components/error/demo-error.component.scss
+++ b/demo-shell/src/app/components/error/demo-error.component.scss
@@ -1,4 +1,4 @@
-.adf-error-content {
+.app-error-content {
 
     &-buttons {
         display: flex;
diff --git a/demo-shell/src/app/components/file-view/file-view.component.scss b/demo-shell/src/app/components/file-view/file-view.component.scss
index 2be390eb61..c2b9bd70c0 100644
--- a/demo-shell/src/app/components/file-view/file-view.component.scss
+++ b/demo-shell/src/app/components/file-view/file-view.component.scss
@@ -1,4 +1,4 @@
-.adf-viewer__sidebar {
+.app-viewer__sidebar {
     width: 380px !important;
 }
 
@@ -7,6 +7,6 @@
     width: 600px;
 }
 
-adf-preview-extension {
+app-preview-extension {
     width: 600px;
 }
diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html
index 3575817454..8ef21bcdd2 100644
--- a/demo-shell/src/app/components/files/files.component.html
+++ b/demo-shell/src/app/components/files/files.component.html
@@ -1,6 +1,6 @@
-<div class="adf-container">
+<div class="app-container">
 
-    <mat-accordion *ngIf="showRecentFiles" class="adf-container-recent">
+    <mat-accordion *ngIf="showRecentFiles" class="app-container-recent">
         <mat-expansion-panel hideToggle="true">
             <mat-expansion-panel-header>
                 <mat-panel-title>
@@ -18,21 +18,21 @@
                 (preview)="showFile($event)"
                 selectionMode="null">
                 <adf-custom-empty-content-template>
-                    <div class="adf-empty-list__block">
+                    <div class="app-empty-list__block">
                         <mat-icon>history</mat-icon>
-                        <p class="adf-empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
+                        <p class="app-empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
                     </div>
                 </adf-custom-empty-content-template>
             </adf-document-list>
         </mat-expansion-panel>
     </mat-accordion>
 
-    <div *ngIf="showSitePicker" class="adf-site-container-style" id="site-container">
+    <div *ngIf="showSitePicker" class="app-site-container-style" id="site-container">
         <adf-sites-dropdown (change)="onSiteChange($event)" [hideMyFiles]="false" [relations]="'members'">
         </adf-sites-dropdown>
     </div>
 
-    <div id="document-list-container" class="adf-document-list-container" fxLayout="row" fxLayoutAlign="start stretch"
+    <div id="document-list-container" class="app-document-list-container" fxLayout="row" fxLayoutAlign="start stretch"
          fxLayoutGap="16px">
         <adf-upload-drag-area fxFlex="1 1 auto"
                               [disabled]="disableDragArea"
@@ -42,28 +42,28 @@
                               [adf-check-allowable-operation]="'create'"
                               [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []"
                               (beginUpload)="onBeginUpload($event)">
-            <div *ngIf="errorMessage" class="adf-error-message">
+            <div *ngIf="errorMessage" class="app-error-message">
                 <button (click)="resetError()" mat-icon-button>
                     <mat-icon>highlight_off</mat-icon>
                 </button>
-                <span class="adf-error-message--text">{{errorMessage}}</span>
+                <span class="app-error-message--text">{{errorMessage}}</span>
             </div>
-            <adf-toolbar *ngIf="!disableDragArea" [color]="toolbarColor" class="adf-files-toolbar">
+            <adf-toolbar *ngIf="!disableDragArea" [color]="toolbarColor" class="app-files-toolbar">
                 <adf-toolbar-title  fxFlex="0 1 auto">
                     <adf-breadcrumb fxShow fxHide.lt-sm="true"
-                                    class="adf-files-breadcrumb"
+                                    class="app-files-breadcrumb"
                                     root="APP.PERSONAL-FILES"
                                     [target]="documentList">
                     </adf-breadcrumb>
                     <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
-                                             class="adf-files-breadcrumb"
+                                             class="app-files-breadcrumb"
                                              [target]="documentList">
                     </adf-dropdown-breadcrumb>
                 </adf-toolbar-title>
 
                 <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
 
-                <div fxFlex="0 0 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
+                <div fxFlex="0 0 auto" class="app-document-action-buttons" fxShow fxHide.lt-sm="true">
                     <button
                         mat-icon-button
                         data-automation-id="document-list-grid-view"
@@ -158,7 +158,7 @@
                     <button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button>
                 </mat-menu>
 
-                <button mat-icon-button (click)="showVersions = !showVersions" class="adf-show-versions-button">
+                <button mat-icon-button (click)="showVersions = !showVersions" class="app-show-versions-button">
                     <mat-icon *ngIf="!showVersions" matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.SHOW_VERSION' | translate }}">
                         chevron_left
                     </mat-icon>
@@ -215,10 +215,10 @@
                 </mat-menu>
             </adf-toolbar>
 
-            <div class="adf-document-list-container" [ngClass]="{'adf-sticky-document-list': stickyHeader }">
+            <div class="app-document-list-container" [ngClass]="{'adf-sticky-document-list': stickyHeader }">
                 <adf-document-list
                 #documentList
-                class="adf-file-list-container"
+                class="app-file-list-container"
                 [permissionsStyle]="permissionsStyle"
                 [currentFolderId]="currentFolderId"
                 [contextMenuActions]="true"
@@ -245,8 +245,8 @@
                     <h1>You don't have permissions</h1>
                 </adf-custom-no-permission-template>
                 <adf-custom-empty-content-template *ngIf="disableDragArea">
-                    <div class="adf-empty_template">
-                        <div class="adf-no-result-message">{{ 'SEARCH.NO_RESULT' | translate }}</div>
+                    <div class="app-empty_template">
+                        <div class="app-no-result-message">{{ 'SEARCH.NO_RESULT' | translate }}</div>
                     </div>
                 </adf-custom-empty-content-template>
                 <data-columns>
@@ -254,13 +254,13 @@
                         key="$thumbnail"
                         type="image"
                         [sortable]="false"
-                        class="adf-image-table-cell"
+                        class="app-image-table-cell"
                         [class.adf-cell-thumbnail]="thumbnails">
                     </data-column>
                     <data-column
                         *ngIf="showNameColumn && hyperlinkNavigation"
                         key="name"
-                        class="adf-ellipsis-cell"
+                        class="app-ellipsis-cell"
                         title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                         [formatTooltip]="getNodeNameTooltip">
                         <ng-template let-context>
@@ -272,7 +272,7 @@
                         key="name"
                         title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                         [formatTooltip]="getNodeNameTooltip"
-                        class="adf-ellipsis-cell adf-expand-cell-5">
+                        class="app-ellipsis-cell adf-expand-cell-5">
                     </data-column>
                     <!-- Location column demo -->
                     <!--
@@ -287,13 +287,13 @@
                         key="content.sizeInBytes"
                         title="{{'DOCUMENT_LIST.COLUMNS.SIZE' | translate}}"
                         type="fileSize"
-                        class="adf-desktop-only adf-ellipsis-cell">
+                        class="app-desktop-only adf-ellipsis-cell">
                     </data-column>
                     <data-column
                         *ngIf="searchTerm"
                         key="search"
                         title="Search"
-                        class="adf-desktop-only adf-expand-cell-3">
+                        class="app-desktop-only adf-expand-cell-3">
                         <ng-template let-entry="$implicit">
                             <div [innerHTML]="searchResultsHighlight(entry.row.node.entry.search) | highlight:searchTerm">
                             </div>
@@ -304,23 +304,23 @@
                     <data-column
                         title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
                         key="id"
-                        class="adf-full-width adf-ellipsis-cell">
+                        class="app-full-width adf-ellipsis-cell">
                         <ng-template let-entry="$implicit">
                             <alfresco-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
                         </ng-template>
                     </data-column>
                     -->
                     <data-column
-                        class="adf-full-width adf-ellipsis-cell adf-desktop-only"
+                        class="app-full-width adf-ellipsis-cell adf-desktop-only"
                         title="{{'DOCUMENT_LIST.COLUMNS.NODE_ID' | translate}}"
                         key="id">
                     </data-column>
                     <data-column
                         title="{{'DOCUMENT_LIST.COLUMNS.IS_LOCKED' | translate}}"
                         key="id"
-                        class="adf-desktop-only adf-ellipsis-cell">
+                        class="app-desktop-only adf-ellipsis-cell">
                         <ng-template let-entry="$implicit">
-                            <button mat-icon-button [adf-node-lock]="entry.row.node.entry" class="adf-lock-button">
+                            <button mat-icon-button [adf-node-lock]="entry.row.node.entry" class="app-lock-button">
                                 <mat-icon *ngIf="entry.row.getValue('isLocked')">lock</mat-icon>
                                 <mat-icon *ngIf="!entry.row.getValue('isLocked')">lock_open</mat-icon>
                             </button>
@@ -329,14 +329,14 @@
                     <data-column
                         title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
                         key="createdByUser.displayName"
-                        class="adf-desktop-only adf-ellipsis-cell">
+                        class="app-desktop-only adf-ellipsis-cell">
                     </data-column>
                     <data-column
                         title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
                         key="createdAt"
                         type="date"
                         [format]="enableMediumTimeFormat ? 'medium' : 'timeAgo'"
-                        class="adf-desktop-only adf-ellipsis-cell">
+                        class="app-desktop-only adf-ellipsis-cell">
                     </data-column>
 
                 </data-columns>
@@ -433,7 +433,7 @@
             <adf-pagination
                 #standardPagination
                 *ngIf="!infiniteScrolling"
-                class="adf-documentlist-pagination"
+                class="app-documentlist-pagination"
                 [target]="documentList"
                 (changePageSize)="onChangePageSize($event)"
                 (changePageNumber)="onChangePageNumber($event)"
@@ -448,7 +448,7 @@
             </adf-infinite-pagination>
         </adf-upload-drag-area>
 
-        <adf-info-drawer-layout *ngIf="showVersions" class="adf-manage-versions-sidebar" fxFlex="0 0 auto">
+        <adf-info-drawer-layout *ngIf="showVersions" class="app-manage-versions-sidebar" fxFlex="0 0 auto">
             <div info-drawer-content>
 
                 <adf-info-drawer [title]="'Details'" *ngIf="documentList.selection[0]">
@@ -469,14 +469,14 @@
                             </ng-container>
                         </ng-container>
                         <ng-template #choose_document_template>
-                            <div class="adf-manage-versions-empty">
-                                <mat-icon class="adf-manage-versions-empty-icon">face</mat-icon>
+                            <div class="app-manage-versions-empty">
+                                <mat-icon class="app-manage-versions-empty-icon">face</mat-icon>
                                 {{'VERSION.CHOOSE_FILE' | translate}}
                             </div>
                         </ng-template>
                         <ng-template #no_permission_to_versions>
-                            <div class="adf-manage-versions-no-permission">
-                                <mat-icon class="adf-manage-versions-no-permission-icon">warning</mat-icon>
+                            <div class="app-manage-versions-no-permission">
+                                <mat-icon class="app-manage-versions-no-permission-icon">warning</mat-icon>
                                 {{'VERSION.NO_PERMISSION' | translate}}
                             </div>
                         </ng-template>
@@ -498,11 +498,11 @@
     </adf-start-process>
 </div>
 
-<div *ngIf="showSettingsPanel" class="adf-content-service-settings">
+<div *ngIf="showSettingsPanel" class="app-content-service-settings">
 
     <p>Current folder ID: {{ documentList.currentFolderId }}</p>
 
-    <div class="adf-p-10">
+    <div class="app-p-10">
         Selected Nodes:
         <ul>
             <li *ngFor="let node of documentList.selection">
@@ -511,7 +511,7 @@
         </ul>
     </div>
 
-    <div class="adf-container">
+    <div class="app-container">
         <section>
             <mat-slide-toggle color="primary" [(ngModel)]="showNameColumn">
                 Show Name Column
@@ -679,7 +679,7 @@
         </section>
     </div>
 
-    <div class="adf-p-10">
+    <div class="app-p-10">
         <p>
             {{'DOCUMENT_LIST.MULTISELECT_DESCRIPTION' | translate}}
         </p>
diff --git a/demo-shell/src/app/components/files/files.component.scss b/demo-shell/src/app/components/files/files.component.scss
index f3bd345d41..c8399a90e9 100644
--- a/demo-shell/src/app/components/files/files.component.scss
+++ b/demo-shell/src/app/components/files/files.component.scss
@@ -1,71 +1,71 @@
-@mixin adf-file-component-theme($theme) {
-    .adf-container {
+@mixin app-file-component-theme($theme) {
+    .app-container {
         margin: 10px !important;
     }
 
     @media screen and ($mat-xsmall) {
-        .adf-container {
+        .app-container {
             margin: 0;
         }
 
-        .adf-show-versions-button.mat-icon-button {
+        .app-show-versions-button.mat-icon-button {
             display: none;
         }
     }
 
-    .adf-error-message {
+    .app-error-message {
         text-align: left;
     }
 
-    .adf-error-message--text {
+    .app-error-message--text {
         color: #d50000;
     }
 
-    .adf-document-list-container {
+    .app-document-list-container {
         min-height: 400px;
 
-        .adf-datatable-list {
+        .app-datatable-list {
             min-height: 400px;
         }
     }
 
-    .adf-datatable-card .adf-lock-button {
+    .app-datatable-card .app-lock-button {
         top: -10px;
     }
 
-    .adf-site-container-style {
+    .app-site-container-style {
         margin-top: 10px;
         margin-bottom: 10px;
         width: 100%;
         min-width: 200px;
     }
 
-    .adf-content-service-settings {
+    .app-content-service-settings {
         padding: 16px;
     }
 
-    .adf-manage-versions-sidebar {
+    .app-manage-versions-sidebar {
         width: 360px !important;
 
-        & .adf-info-drawer-layout-header {
+        & .app-info-drawer-layout-header {
             display: none !important;
         }
     }
 
-    .adf-no-result__empty_doc_lib {
+    .app-no-result__empty_doc_lib {
         width: 565px;
         height: 161px;
         object-fit: contain;
         margin-top: 17px;
     }
 
-    .adf-empty_template {
+    .app-empty_template {
         text-align: center;
         margin-top: 20px;
         margin-bottom: 20px;
     }
 
-    .adf-no-result-message {
+    .app-no-result-message {
         height: 32px;
         opacity: 0.26;
         font-size: 24px;
@@ -73,12 +73,12 @@
         letter-spacing: -1px;
     }
 
-    .adf-container-recent {
+    .app-container-recent {
         mat-icon {
             margin-left: 20px;
         }
 
-        .adf-empty-list__block {
+        .app-empty-list__block {
             height: 100%;
             padding: 0;
             margin: 0;
diff --git a/demo-shell/src/app/components/form/form-list.component.html b/demo-shell/src/app/components/form/form-list.component.html
index 909430f332..7e4313195b 100644
--- a/demo-shell/src/app/components/form/form-list.component.html
+++ b/demo-shell/src/app/components/form/form-list.component.html
@@ -1,12 +1,12 @@
 <adf-form-list [forms]="formList" (row-dblclick)="onRowDblClick($event)">
 </adf-form-list>
-<div class="adf-form-container" *ngIf="!isEmptyForm()">
+<div class="app-form-container" *ngIf="!isEmptyForm()">
     <adf-form #adfForm [form]="form" [data]="restoredData" [showValidationIcon]="showValidationIcon">
     </adf-form>
 </div>
 <button mat-button (click)="store()" color="primary">{{'FORM-LIST.STORE' | translate }}</button>
 <button mat-button (click)="restore()" color="primary">{{'FORM-LIST.RESTORE' | translate }}</button>
-<section class="adf-form-list-margin">
+<section class="app-form-list-margin">
     <mat-slide-toggle color="primary" [(ngModel)]="showValidationIcon">
         Show Validation Icon
     </mat-slide-toggle>
diff --git a/demo-shell/src/app/components/form/form-list.component.scss b/demo-shell/src/app/components/form/form-list.component.scss
index 21a50674d2..4a323097bd 100644
--- a/demo-shell/src/app/components/form/form-list.component.scss
+++ b/demo-shell/src/app/components/form/form-list.component.scss
@@ -1,12 +1,12 @@
-.adf-form-container {
+.app-form-container {
     padding: 10px;
 }
 
-.adf-store-form-container {
+.app-store-form-container {
     width: 80%;
     height: 80%;
 }
 
-.adf-form-list-margin {
+.app-form-list-margin {
     margin-left: 26px;
 }
diff --git a/demo-shell/src/app/components/form/form-loading.component.html b/demo-shell/src/app/components/form/form-loading.component.html
index 0a363e424c..88b4893da3 100644
--- a/demo-shell/src/app/components/form/form-loading.component.html
+++ b/demo-shell/src/app/components/form/form-loading.component.html
@@ -1,4 +1,4 @@
-<div class="adf-form-container">
+<div class="app-form-container">
     <mat-accordion>
         <mat-expansion-panel>
             <mat-expansion-panel-header>
diff --git a/demo-shell/src/app/components/form/form-loading.component.scss b/demo-shell/src/app/components/form/form-loading.component.scss
index 61724fad4b..3e3bab76af 100644
--- a/demo-shell/src/app/components/form/form-loading.component.scss
+++ b/demo-shell/src/app/components/form/form-loading.component.scss
@@ -1,3 +1,3 @@
-.adf-form-container {
+.app-form-container {
     padding: 10px;
 }
diff --git a/demo-shell/src/app/components/form/form.component.html b/demo-shell/src/app/components/form/form.component.html
index 92108c637c..dc0bbab1a5 100644
--- a/demo-shell/src/app/components/form/form.component.html
+++ b/demo-shell/src/app/components/form/form.component.html
@@ -2,7 +2,7 @@
 
     <mat-tab-group>
         <mat-tab label="Form">
-            <div class="adf-form-container">
+            <div class="app-form-container">
                 <adf-form
                     [showRefreshButton]="false"
                     [form]="form"
@@ -10,7 +10,7 @@
                 </adf-form>
             </div>
 
-            <div class="adf-console" #console>
+            <div class="app-console" #console>
                 <h3>Error log:</h3>
                 <p *ngFor="let error of errorFields">Error {{ error.name }} {{error.validationSummary.message |
                     translate}}</p>
@@ -19,20 +19,20 @@
         <mat-tab label="Editor">
             <ngx-monaco-editor
                 id="adf-form-config-editor"
-                class="adf-form-config-editor"
+                class="app-form-config-editor"
                 [options]="editorOptions"
                 [(ngModel)]="formConfig"
                 (onInit)="onInitFormEditor($event)">
             </ngx-monaco-editor>
-            <div class="adf-form-editor-buttons">
-                <button mat-raised-button id="adf-form-config-save" (click)="onSaveFormConfig()" color="primary">Save
+            <div class="app-form-editor-buttons">
+                <button mat-raised-button id="app-form-config-save" (click)="onSaveFormConfig()" color="primary">Save
                     form config
                 </button>
-                <button mat-raised-button id="adf-form-config-clear" (click)="onClearFormConfig()" color="primary">Clear
+                <button mat-raised-button id="app-form-config-clear" (click)="onClearFormConfig()" color="primary">Clear
                     form config
                 </button>
             </div>
-            <div class="adf-upload-config-button">
+            <div class="app-upload-config-button">
                 <a mat-raised-button color="primary" >
                     <mat-icon>file_upload</mat-icon>
                     <label for="upload-config-file">Upload JSON File</label>
diff --git a/demo-shell/src/app/components/form/form.component.scss b/demo-shell/src/app/components/form/form.component.scss
index 8dcba59cf8..ccc0b9271d 100644
--- a/demo-shell/src/app/components/form/form.component.scss
+++ b/demo-shell/src/app/components/form/form.component.scss
@@ -1,17 +1,17 @@
-.adf-form-container {
+.app-form-container {
     padding: 10px;
 }
 
-.adf-main-content {
+.app-main-content {
     padding: 0 15px;
 }
 
-.adf-card-view {
+.app-card-view {
     width: 30%;
     display: inline-block;
 }
 
-.adf-console {
+.app-console {
     width: 60%;
     display: inline-block;
     vertical-align: top;
@@ -31,16 +31,16 @@
     }
 }
 
-.adf-form-config-editor {
+.app-form-config-editor {
     height: 500px !important;
 }
 
-.adf-form-editor-buttons {
+.app-form-editor-buttons {
     display: flex;
     justify-content: space-evenly;
 }
 
-.adf-upload-config-button {
+.app-upload-config-button {
     display: flex;
     justify-content: center;
 
diff --git a/demo-shell/src/app/components/header-data/header-data.component.html b/demo-shell/src/app/components/header-data/header-data.component.html
index 4636ff88f0..9dac3b64df 100644
--- a/demo-shell/src/app/components/header-data/header-data.component.html
+++ b/demo-shell/src/app/components/header-data/header-data.component.html
@@ -1,4 +1,4 @@
-<div class="adf-content adf-header-data">
+<div class="app-content app-header-data">
     <h1>Header data</h1>
     <mat-card>
         <div>
diff --git a/demo-shell/src/app/components/header-data/header-data.component.scss b/demo-shell/src/app/components/header-data/header-data.component.scss
index 5ab939228e..0710d6e7e0 100644
--- a/demo-shell/src/app/components/header-data/header-data.component.scss
+++ b/demo-shell/src/app/components/header-data/header-data.component.scss
@@ -1,4 +1,4 @@
-.adf-content {
+.app-content {
     padding: 10px;
     .mat-card {
         padding: 16px 24px;
diff --git a/demo-shell/src/app/components/home/home.component.html b/demo-shell/src/app/components/home/home.component.html
index 1d06bb0c68..7f38adcaf1 100644
--- a/demo-shell/src/app/components/home/home.component.html
+++ b/demo-shell/src/app/components/home/home.component.html
@@ -1,12 +1,12 @@
-<header class="adf-home-background">
-    <div class="adf-home-section ad">
-        <div class="adf-home-headline">
+<header class="app-home-background">
+    <div class="app-home-section ad">
+        <div class="app-home-headline">
             <h1 class="mat-h1">ADF</h1>
             <h2>{{ 'APP.HOME.TITLE' | translate}}</h2>
         </div>
 
-        <div class="adf-home-start">
-            <a mat-raised-button class="adf-home-docs-button adf-primary-color" href="https://github.com/Alfresco/alfresco-ng2-components/tree/master/docs">{{ 'APP.HOME.DOCUMENTATION' | translate}}</a>
+        <div class="app-home-start">
+            <a mat-raised-button class="app-home-docs-button adf-primary-color" href="https://github.com/Alfresco/alfresco-ng2-components/tree/master/docs">{{ 'APP.HOME.DOCUMENTATION' | translate}}</a>
         </div>
     </div>
 </header>
diff --git a/demo-shell/src/app/components/home/home.component.scss b/demo-shell/src/app/components/home/home.component.scss
index 762e540786..1d9665dcac 100644
--- a/demo-shell/src/app/components/home/home.component.scss
+++ b/demo-shell/src/app/components/home/home.component.scss
@@ -5,16 +5,16 @@
     height: 100%;
 }
 
-.adf-home-header-background {
+.app-home-header-background {
     overflow: hidden;
 }
 
-.adf-home-section {
+.app-home-section {
     text-align: center;
     padding-top: 60px;
 }
 
-.adf-home-headline {
+.app-home-headline {
 
     h1 {
         font-size: 56px;
@@ -31,6 +31,6 @@
     }
 }
 
-.adf-home-docs-button {
+.app-home-docs-button {
     margin: 30px;
 }
diff --git a/demo-shell/src/app/components/login/login.component.html b/demo-shell/src/app/components/login/login.component.html
index 9da704e862..e6fa188734 100644
--- a/demo-shell/src/app/components/login/login.component.html
+++ b/demo-shell/src/app/components/login/login.component.html
@@ -1,7 +1,7 @@
 <!--BPM, ECN AND CSRF TOGGLE-->
 
-<div class="adf-settings">
-    <p class="adf-toggle">
+<div class="app-settings">
+    <p class="app-toggle">
         <mat-slide-toggle
             id="switch3"
             [color]="'primary'"
@@ -10,7 +10,7 @@
             CSRF
         </mat-slide-toggle>
     </p>
-    <p class="adf-toggle">
+    <p class="app-toggle">
         <mat-slide-toggle
             id="switch4"
             [color]="'primary'"
@@ -19,7 +19,7 @@
             {{ 'LOGIN.LOGIN_FOOTER'| translate }}
         </mat-slide-toggle>
     </p>
-    <p class="adf-toggle">
+    <p class="app-toggle">
         <mat-slide-toggle
             id="adf-toggle-show-rememberme"
             [color]="'primary'"
@@ -28,7 +28,7 @@
             {{ 'LOGIN.SHOW_REMEMBERME'| translate }}
         </mat-slide-toggle>
     </p>
-    <p class="adf-toggle">
+    <p class="app-toggle">
         <mat-slide-toggle
             id="adf-toggle-show-successRoute"
             [color]="'primary'"
@@ -37,7 +37,7 @@
             {{ 'LOGIN.SHOW_SUCCESS_ROUTE'| translate }}
         </mat-slide-toggle>
     </p>
-    <p class="adf-toggle">
+    <p class="app-toggle">
         <ng-container *ngIf="customSuccessRoute">
             <mat-form-field floatPlaceholder="float">
                 <input matInput
@@ -48,7 +48,7 @@
         </ng-container>
     </p>
 
-    <p class="adf-toggle">
+    <p class="app-toggle">
         <mat-slide-toggle
             id="adf-toggle-logo"
             [color]="'primary'"
@@ -57,7 +57,7 @@
             {{ 'LOGIN.CUSTOM_LOGO'| translate }}
         </mat-slide-toggle>
     </p>
-    <p class="adf-toggle">
+    <p class="app-toggle">
         <ng-container *ngIf="customLogoImage">
             <mat-form-field floatPlaceholder="float">
                 <input matInput
@@ -72,7 +72,7 @@
 
 <!--SETTING BUTTON-->
 
-<a mat-fab class="adf-setting-button" data-automation-id="settings" href="" routerLink="/settings" color="accent">
+<a mat-fab class="app-setting-button" data-automation-id="settings" href="" routerLink="/settings" color="accent">
     <mat-icon>settings</mat-icon>
 </a>
 
@@ -87,7 +87,7 @@
     copyrightText="{{ 'application.copyright' | adfAppConfig }}"
     (success)="onLogin()"
     (error)="onError($event)">
-    <div class="adf-mobile-settings">
+    <div class="app-mobile-settings">
         <p>
             <mat-slide-toggle
                 id="switch3-mobile"
@@ -106,7 +106,7 @@
                 {{ 'LOGIN.LOGIN_FOOTER'| translate }}
             </mat-slide-toggle>
         </p>
-        <button type="button" mat-raised-button color="accent" class="adf-mobile-setting-button" routerLink="/settings"
+        <button type="button" mat-raised-button color="accent" class="app-mobile-setting-button" routerLink="/settings"
                 data-automation-id="settings">{{ 'APP_LAYOUT.SETTINGS'| translate }}
         </button>
 
diff --git a/demo-shell/src/app/components/login/login.component.scss b/demo-shell/src/app/components/login/login.component.scss
index 4502593286..7d17c6a730 100644
--- a/demo-shell/src/app/components/login/login.component.scss
+++ b/demo-shell/src/app/components/login/login.component.scss
@@ -1,12 +1,12 @@
-@mixin adf-login-component-theme($theme) {
-    .adf-setting-button.mat-fab.mat-accent {
+@mixin app-login-component-theme($theme) {
+    .app-setting-button.mat-fab.mat-accent {
         position: absolute;
         right: 10px;
         top: 10px;
         z-index: 1;
     }
 
-    .adf-settings {
+    .app-settings {
         border-radius: 8px;
         position: absolute;
         background-color: papayawhip;
@@ -16,36 +16,36 @@
         z-index: 1;
     }
 
-    .adf-toggle {
+    .app-toggle {
         width: auto;
         margin: 5px;
         padding: 5px;
     }
 
-    .adf-mobile-settings, .adf-mobile-setting-button {
+    .app-mobile-settings, .app-mobile-setting-button {
         display: none;
     }
 
     @media screen and ($mat-small) {
-        .adf-settings, .adf-setting-button.mat-fab.mat-accent {
+        .app-settings, .app-setting-button.mat-fab.mat-accent {
             display: none;
         }
 
-        .adf-mobile-settings, .adf-mobile-setting-button {
+        .app-mobile-settings, .app-mobile-setting-button {
             display: block;
         }
 
-        .adf-mobile-setting-button {
+        .app-mobile-setting-button {
             width: 100%;
         }
 
-        .adf-mobile-settings {
+        .app-mobile-settings {
             padding-bottom: 20px;
             border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         }
     }
 
-    .adf-settings ::ng-deep .mat-slide-toggle-thumb-container {
+    .app-settings ::ng-deep .mat-slide-toggle-thumb-container {
         cursor: pointer;
     }
 }
diff --git a/demo-shell/src/app/components/logout/logout.component.html b/demo-shell/src/app/components/logout/logout.component.html
index 1ed2d72e02..6fd8a5ee6c 100644
--- a/demo-shell/src/app/components/logout/logout.component.html
+++ b/demo-shell/src/app/components/logout/logout.component.html
@@ -1,16 +1,16 @@
-<header class="adf-logout-background">
-    <div class="adf-logout-section" data-automation-id="adf-logout-section">
-        <div class="adf-logout-headline">
+<header class="app-logout-background">
+    <div class="app-logout-section" data-automation-id="adf-logout-section">
+        <div class="app-logout-headline">
             <h1>{{ 'APP.LOGOUT.TITLE' | translate}}</h1>
             <h2>{{ 'APP.LOGOUT.SUB_TITLE' | translate}}</h2>
         </div>
 
-        <div class="adf-logout-login">
-            <a mat-raised-button class="adf-logout-docs-button adf-primary-color"
+        <div class="app-logout-login">
+            <a mat-raised-button class="app-logout-docs-button adf-primary-color"
                href="/login">{{ 'APP.LOGOUT.LOGIN' | translate}}</a>
         </div>
-        <div class="adf-logout-home">
-            <a mat-raised-button class="adf-logout-docs-button adf-primary-color"
+        <div class="app-logout-home">
+            <a mat-raised-button class="app-logout-docs-button adf-primary-color"
                href="/">{{ 'APP.LOGOUT.HOME' | translate}}</a>
         </div>
     </div>
diff --git a/demo-shell/src/app/components/logout/logout.component.scss b/demo-shell/src/app/components/logout/logout.component.scss
index f529aa8954..0c21d9903b 100644
--- a/demo-shell/src/app/components/logout/logout.component.scss
+++ b/demo-shell/src/app/components/logout/logout.component.scss
@@ -4,16 +4,16 @@
     align-items: center;
 }
 
-.adf-logout-header-background {
+.app-logout-header-background {
     overflow: hidden;
 }
 
-.adf-logout-section {
+.app-logout-section {
     text-align: center;
     padding-top: 60px;
 }
 
-.adf-logout-headline {
+.app-logout-headline {
 
     h1 {
         font-size: 56px;
@@ -30,10 +30,10 @@
     }
 }
 
-.adf-logout-docs-button {
+.app-logout-docs-button {
     margin: 30px;
 }
 
-.adf-logout-login {
+.app-logout-login {
     float: left;
 }
diff --git a/demo-shell/src/app/components/notifications/notifications.component.html b/demo-shell/src/app/components/notifications/notifications.component.html
index e13dc3d061..3b65b9942b 100644
--- a/demo-shell/src/app/components/notifications/notifications.component.html
+++ b/demo-shell/src/app/components/notifications/notifications.component.html
@@ -1,4 +1,4 @@
-<div class="adf-main-content">
+<div class="app-main-content">
     <h1>Notification Service</h1>
 
     <ul>
diff --git a/demo-shell/src/app/components/notifications/notifications.component.scss b/demo-shell/src/app/components/notifications/notifications.component.scss
index 825160a37f..7e89042d6a 100644
--- a/demo-shell/src/app/components/notifications/notifications.component.scss
+++ b/demo-shell/src/app/components/notifications/notifications.component.scss
@@ -1,3 +1,3 @@
-.adf-main-content {
+.app-main-content {
     padding: 10px;
 }
diff --git a/demo-shell/src/app/components/permissions/demo-permissions.component.html b/demo-shell/src/app/components/permissions/demo-permissions.component.html
index d008b38f56..b291fc4fd8 100644
--- a/demo-shell/src/app/components/permissions/demo-permissions.component.html
+++ b/demo-shell/src/app/components/permissions/demo-permissions.component.html
@@ -1,4 +1,4 @@
-<div class="adf-inherit_permission_button">
+<div class="app-inherit_permission_button">
     <button mat-raised-button
             [color]="toggleStatus?'accent':'primary'"
             adf-inherit-permission [nodeId]="nodeId"
diff --git a/demo-shell/src/app/components/permissions/demo-permissions.component.scss b/demo-shell/src/app/components/permissions/demo-permissions.component.scss
index efc518706f..9bbbfee35f 100644
--- a/demo-shell/src/app/components/permissions/demo-permissions.component.scss
+++ b/demo-shell/src/app/components/permissions/demo-permissions.component.scss
@@ -1,4 +1,4 @@
-.adf-inherit_permission_button {
+.app-inherit_permission_button {
     padding-top: 20px;
     display: flex;
     justify-content: center;
diff --git a/demo-shell/src/app/components/pipes/pipes.component.html b/demo-shell/src/app/components/pipes/pipes.component.html
index 9018e2d5a9..b1c6e6cf31 100644
--- a/demo-shell/src/app/components/pipes/pipes.component.html
+++ b/demo-shell/src/app/components/pipes/pipes.component.html
@@ -11,11 +11,11 @@
             </mat-panel-description>
         </mat-expansion-panel-header>
 
-        <mat-form-field class="adf-input-field">
+        <mat-form-field class="app-input-field">
             <input matInput placeholder="Format" [(ngModel)]="format">
         </mat-form-field>
 
-        <mat-form-field class="adf-input-field">
+        <mat-form-field class="app-input-field">
             <mat-select placeholder="Locale dropdown" [(ngModel)]="locale">
                 <mat-option *ngFor="let language of languages" [value]="language.key">
                     {{language.label}}
@@ -43,11 +43,11 @@
             </mat-panel-description>
         </mat-expansion-panel-header>
 
-        <mat-form-field class="adf-input-field">
+        <mat-form-field class="app-input-field">
             <input matInput placeholder="Format" [(ngModel)]="format">
         </mat-form-field>
 
-        <mat-form-field class="adf-input-field">
+        <mat-form-field class="app-input-field">
             <mat-select placeholder="Locale dropdown" [(ngModel)]="locale">
                 <mat-option *ngFor="let language of languages" [value]="language.key">
                     {{language.label}}
@@ -71,20 +71,20 @@
             </mat-panel-description>
         </mat-expansion-panel-header>
 
-        <mat-form-field class="adf-input-field">
+        <mat-form-field class="app-input-field">
             <input matInput placeholder="Number" [(ngModel)]="number">
         </mat-form-field>
-        <mat-form-field class="adf-input-field">
+        <mat-form-field class="app-input-field">
             <input matInput placeholder="Min Integer Digits" [(ngModel)]="decimalValues.minIntegerDigits">
         </mat-form-field>
-        <mat-form-field class="adf-input-field">
+        <mat-form-field class="app-input-field">
             <input matInput placeholder="Min Fraction Digits" [(ngModel)]="decimalValues.minFractionDigits">
         </mat-form-field>
-        <mat-form-field class="adf-input-field">
+        <mat-form-field class="app-input-field">
             <input matInput placeholder="Max Fraction Digits" [(ngModel)]="decimalValues.maxFractionDigits">
         </mat-form-field>
 
-        <mat-form-field class="adf-input-field">
+        <mat-form-field class="app-input-field">
             <mat-select placeholder="Locale dropdown" [(ngModel)]="locale">
                 <mat-option *ngFor="let language of languages" [value]="language.key">
                     {{language.label}}
diff --git a/demo-shell/src/app/components/pipes/pipes.component.scss b/demo-shell/src/app/components/pipes/pipes.component.scss
index 9ed9b6f6a6..2a5ddcae92 100644
--- a/demo-shell/src/app/components/pipes/pipes.component.scss
+++ b/demo-shell/src/app/components/pipes/pipes.component.scss
@@ -2,6 +2,6 @@ h2 {
     padding: 20px;
 }
 
-.adf-input-field {
+.app-input-field {
     margin: 20px;
 }
diff --git a/demo-shell/src/app/components/process-list-demo/process-list-demo.component.html b/demo-shell/src/app/components/process-list-demo/process-list-demo.component.html
index 8e5d2e8aed..41262c99b8 100644
--- a/demo-shell/src/app/components/process-list-demo/process-list-demo.component.html
+++ b/demo-shell/src/app/components/process-list-demo/process-list-demo.component.html
@@ -1,4 +1,4 @@
-<div class="adf-process-list-inputs">
+<div class="app-process-list-inputs">
 
     <form [formGroup]="processListForm">
         <mat-form-field>
@@ -77,7 +77,7 @@
             </mat-error>
         </mat-form-field>
 
-        <div class="adf-reset-button">
+        <div class="app-reset-button">
             <button mat-raised-button (click)="resetProcessForm()">Reset</button>
         </div>
     </form>
diff --git a/demo-shell/src/app/components/process-list-demo/process-list-demo.component.scss b/demo-shell/src/app/components/process-list-demo/process-list-demo.component.scss
index 843ffdf235..59c3e10d16 100644
--- a/demo-shell/src/app/components/process-list-demo/process-list-demo.component.scss
+++ b/demo-shell/src/app/components/process-list-demo/process-list-demo.component.scss
@@ -1,4 +1,4 @@
-.adf-process-list-inputs {
+.app-process-list-inputs {
     margin: 20px auto 0;
     max-width: 1200px;
 
@@ -8,13 +8,13 @@
     }
 }
 
-.adf-reset-button {
+.app-reset-button {
     margin-bottom: 50px;
     display: flex;
     justify-content: center;
 }
 
-.adf-process-list-error-message {
+.app-process-list-error-message {
     color: red;
     text-align: center;
 }
diff --git a/demo-shell/src/app/components/process-service/process-attachments.component.html b/demo-shell/src/app/components/process-service/process-attachments.component.html
index 5afd1d2641..86d56b6d8b 100644
--- a/demo-shell/src/app/components/process-service/process-attachments.component.html
+++ b/demo-shell/src/app/components/process-service/process-attachments.component.html
@@ -11,14 +11,14 @@
                 [processInstanceId]="processInstanceId"
                 (attachmentClick)="onAttachmentClick($event)">
                     <adf-empty-list>
-                      <div adf-empty-list-header class="adf-empty-list-header">
+                      <div adf-empty-list-header class="app-empty-list-header">
                           {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}}
                        </div>
                             <div adf-empty-list-body>
-                            <div fxHide.lt-md="true" class="adf-empty-list-drag_drop">
+                            <div fxHide.lt-md="true" class="app-empty-list-drag_drop">
                               {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
                             </div>
-                                  <div fxHide.lt-md="true" class="adf-empty-list__any-files-here-to-add">
+                                  <div fxHide.lt-md="true" class="app-empty-list__any-files-here-to-add">
                                   {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
                                   </div>
                             </div>
diff --git a/demo-shell/src/app/components/process-service/process-service.component.html b/demo-shell/src/app/components/process-service/process-service.component.html
index ee7484db8b..f8d4f8b3ad 100644
--- a/demo-shell/src/app/components/process-service/process-service.component.html
+++ b/demo-shell/src/app/components/process-service/process-service.component.html
@@ -1,10 +1,10 @@
 <mat-tab-group [(selectedIndex)]="activeTab" (selectedTabChange)="onTabChange($event)"
                data-automation-id="navigation-bar">
-    <mat-tab id="adf-tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
-        <div class="adf-page-content" *ngIf="showTaskTab">
-            <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-                <div class="adf-grid-item adf-tasks-menu" fxFlex.gt-md="265px">
-                    <div class="adf-list-buttons">
+    <mat-tab id="app-tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
+        <div class="app-page-content" *ngIf="showTaskTab">
+            <div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+                <div class="app-grid-item app-tasks-menu" fxFlex.gt-md="265px">
+                    <div class="app-list-buttons">
                         <adf-sidebar-action-menu [expanded]="true" [width]="205"
                                                  title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
                             <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
@@ -16,12 +16,12 @@
                             </div>
                         </adf-sidebar-action-menu>
                     </div>
-                    <mat-accordion class="adf-accordion-panel" [displayMode]="flat">
+                    <mat-accordion class="app-accordion-panel" [displayMode]="flat">
                         <mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
                             <mat-expansion-panel-header>
                                 <mat-panel-title>
                                     <mat-icon>assignment</mat-icon>
-                                    <div class="adf-accordion-title-padding">Tasks</div>
+                                    <div class="app-accordion-title-padding">Tasks</div>
                                 </mat-panel-title>
                             </mat-expansion-panel-header>
                             <adf-task-filters [filterParam]="filterSelected"
@@ -33,7 +33,7 @@
                         </mat-expansion-panel>
                     </mat-accordion>
                 </div>
-                <div class="adf-grid-item adf-tasks-list" fxFlex.gt-md="380px"
+                <div class="app-grid-item app-tasks-list" fxFlex.gt-md="380px"
                      [ngClass.gt-md]="{'adf-small-pagination': true}"
                      *ngIf="taskFilter && !isStartTaskMode()">
                     <adf-tasklist
@@ -56,8 +56,8 @@
                         <!-- Custom column definition demo -->
 
                         <!-- <data-columns>
-                            <data-column key="name" title="{{'ADF_TASK_LIST.PROPERTIES.NAME' | translate}}" class="adf-full-width name-column"></data-column>
-                            <data-column key="created" title="{{'ADF_TASK_LIST.PROPERTIES.CREATED' | translate}}" class="adf-hidden"></data-column>
+                            <data-column key="name" title="{{'ADF_TASK_LIST.PROPERTIES.NAME' | translate}}" class="app-full-width name-column"></data-column>
+                            <data-column key="created" title="{{'ADF_TASK_LIST.PROPERTIES.CREATED' | translate}}" class="app-hidden"></data-column>
                         </data-columns> -->
 
                     </adf-tasklist>
@@ -69,8 +69,8 @@
                         #taskListPagination>
                     </adf-pagination>
                 </div>
-                <div class="adf-grid-item adf-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto"
-                     data-automation-id="adf-tasks-details">
+                <div class="app-grid-item app-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto"
+                     data-automation-id="app-tasks-details">
                     <adf-task-details #activitiDetails
                                       [debugMode]="true"
                                       [taskId]="currentTaskId"
@@ -100,7 +100,7 @@
                         </mat-card-content>
                     </mat-card>
                 </div>
-                <div class="adf-grid-item adf-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
+                <div class="app-grid-item app-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
                     <adf-start-task
                         [appId]="appId"
                         [name]="defaultTaskName"
@@ -113,10 +113,10 @@
     </mat-tab>
     <mat-tab id="processes-header" href="#processes"
              label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
-        <div class="adf-page-content" *ngIf="showProcessTab">
-            <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-                <div class="adf-grid-item adf-processes-menu" fxFlex.gt-md="225px">
-                    <div class="adf-list-buttons">
+        <div class="app-page-content" *ngIf="showProcessTab">
+            <div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+                <div class="app-grid-item app-processes-menu" fxFlex.gt-md="225px">
+                    <div class="app-list-buttons">
                         <adf-sidebar-action-menu [expanded]="true" [width]="205"
                                                  title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
                             <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
@@ -129,12 +129,12 @@
                             </div>
                         </adf-sidebar-action-menu>
                     </div>
-                    <mat-accordion class="adf-accordion-panel" [displayMode]="flat">
+                    <mat-accordion class="app-accordion-panel" [displayMode]="flat">
                         <mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
                             <mat-expansion-panel-header>
                                 <mat-panel-title>
                                     <mat-icon>assessment</mat-icon>
-                                    <div class="adf-accordion-title-padding">Processes</div>
+                                    <div class="app-accordion-title-padding">Processes</div>
                                 </mat-panel-title>
                             </mat-expansion-panel-header>
                             <adf-process-instance-filters
@@ -149,7 +149,7 @@
                         </mat-expansion-panel>
                     </mat-accordion>
                 </div>
-                <div class="adf-grid-item adf-processes-list adf-list" fxFlex.gt-md="380px"
+                <div class="app-grid-item app-processes-list app-list" fxFlex.gt-md="380px"
                      [ngClass.gt-md]="{'adf-small-pagination': true}"
                      *ngIf="processFilter && !isStartProcessMode()">
                     <adf-process-instance-list
@@ -168,8 +168,8 @@
                         <!-- Custom column definition demo -->
 
                         <!-- <data-columns>
-                            <data-column key="name" title="ADF_PROCESS_LIST.PROPERTIES.NAME" class="adf-full-width name-column"></data-column>
-                            <data-column key="created" title="ADF_PROCESS_LIST.PROPERTIES.CREATED" class="adf-hidden"></data-column>
+                            <data-column key="name" title="ADF_PROCESS_LIST.PROPERTIES.NAME" class="app-full-width name-column"></data-column>
+                            <data-column key="created" title="ADF_PROCESS_LIST.PROPERTIES.CREATED" class="app-hidden"></data-column>
                         </data-columns> -->
 
                     </adf-process-instance-list>
@@ -180,7 +180,7 @@
                         #processListPagination>
                     </adf-pagination>
                 </div>
-                <div class="adf-grid-item adf-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
+                <div class="app-grid-item app-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
                     <adf-process-instance-details
                         #activitiProcessDetails
                         [processInstanceId]="currentProcessInstanceId"
@@ -208,7 +208,7 @@
                         </mat-card-content>
                     </mat-card>
                 </div>
-                <div class="adf-grid-item adf-processes-start" fxFlex.gt-md="1 1 auto"
+                <div class="app-grid-item app-processes-start" fxFlex.gt-md="1 1 auto"
                      *ngIf="isStartProcessMode()">
                     <adf-start-process
                         #activitiStartProcess
@@ -225,8 +225,8 @@
     </mat-tab>
     <mat-tab id="report-header" href="#report"
              label="{{'PS-TAB.REPORTS-TAB' | translate}}">
-        <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-            <div class="adf-grid-item adf-reports-menu" fxFlex.gt-md="300px">
+        <div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+            <div class="app-grid-item app-reports-menu" fxFlex.gt-md="300px">
                 <span><h5>Report List</h5></span>
                 <mat-divider></mat-divider>
                 <adf-analytics-report-list
@@ -236,7 +236,7 @@
                     #analyticsReportList>
                 </adf-analytics-report-list>
             </div>
-            <div class="adf-grid-item adf-reports-details" fxFlex.gt-md="1 1 auto">
+            <div class="app-grid-item app-reports-details" fxFlex.gt-md="1 1 auto">
                 <adf-analytics
                     *ngIf="report"
                     [appId]="appId"
@@ -254,11 +254,11 @@
     </mat-tab>
     <mat-tab id="settings-header" href="#settings"
              label="{{'PS-TAB.SETTINGS-TAB' | translate}}">
-        <div class="adf-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-            <div class="adf-grid-item adf-settings-menu" fxFlex.gt-md="300px">
+        <div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+            <div class="app-grid-item app-settings-menu" fxFlex.gt-md="300px">
                 <span><h3>Settings Menu</h3></span>
             </div>
-            <div class="adf-grid-item adf-settings-details" fxFlex.gt-md="1 1 auto">
+            <div class="app-grid-item app-settings-details" fxFlex.gt-md="1 1 auto">
                 <div>
                     <mat-slide-toggle id="adf-show-task-filter-icon" [(ngModel)]="showTaskFilterIcon">Show task filters icons
                     </mat-slide-toggle>
diff --git a/demo-shell/src/app/components/process-service/process-service.component.scss b/demo-shell/src/app/components/process-service/process-service.component.scss
index e72b969d66..a5de374bcf 100644
--- a/demo-shell/src/app/components/process-service/process-service.component.scss
+++ b/demo-shell/src/app/components/process-service/process-service.component.scss
@@ -1,12 +1,12 @@
-@mixin adf-process-service-component-theme($theme) {
-    .adf-no-form-container {
+@mixin app-process-service-component-theme($theme) {
+    .app-no-form-container {
         text-align: center;
         font-weight: 600;
         font-size: 18px;
     }
 
-    .adf-grid {
-        .adf-grid-item {
+    .app-grid {
+        .app-grid-item {
             margin: 4px;
             box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
             0 3px 1px -2px rgba(0, 0, 0, 0.2),
@@ -14,19 +14,19 @@
             padding: 10px;
         }
 
-        .adf-list-buttons {
+        .app-list-buttons {
             margin-bottom: 24px;
         }
 
-        .adf-tasks-list.adf-small-pagination,
-        .adf-processes-list.adf-small-pagination {
-            .adf-pagination {
+        .app-tasks-list.app-small-pagination,
+        .app-processes-list.app-small-pagination {
+            .app-pagination {
 
                 flex-wrap: wrap;
                 padding-bottom: 24px;
                 padding-top: 8px;
 
-                &__range-block.adf-pagination__block:first-child {
+                &__range-block.app-pagination__block:first-child {
                     order: 1;
                     width: 60%;
                     flex: 0 0 auto;
@@ -61,8 +61,8 @@
             }
         }
 
-        .adf-list {
-            .adf-datatable-list {
+        .app-list {
+            .app-datatable-list {
                 border: none;
             }
         }
@@ -72,13 +72,13 @@
         }
 
         @media screen and ($mat-small) {
-            container-widget .adf-grid-list {
+            container-widget .app-grid-list {
                 flex-direction: column;
             }
         }
     }
 
-    .adf-accordion-panel {
+    .app-accordion-panel {
         .mat-expansion-panel {
             background: inherit;
         }
@@ -93,7 +93,7 @@
             align-items: center;
         }
 
-        .adf-accordion-title-padding {
+        .app-accordion-title-padding {
             padding-left: 20px;
         }
     }
diff --git a/demo-shell/src/app/components/process-service/task-attachments.component.html b/demo-shell/src/app/components/process-service/task-attachments.component.html
index bf7f866426..8ab3d2978d 100644
--- a/demo-shell/src/app/components/process-service/task-attachments.component.html
+++ b/demo-shell/src/app/components/process-service/task-attachments.component.html
@@ -9,13 +9,13 @@
                 [taskId]="taskId"
                 (attachmentClick)="onAttachmentClick($event)">
                 <adf-empty-list>
-                    <div adf-empty-list-header class="adf-empty-list-header">{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER' | translate}}
+                    <div adf-empty-list-header class="app-empty-list-header">{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER' | translate}}
                     </div>
                     <div adf-empty-list-body>
-                        <div fxHide.lt-md="true" class="adf-empty-list-drag_drop">
+                        <div fxHide.lt-md="true" class="app-empty-list-drag_drop">
                             {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
                         </div>
-                        <div fxHide.lt-md="true" class="adf-empty-list__any-files-here-to-add">
+                        <div fxHide.lt-md="true" class="app-empty-list__any-files-here-to-add">
                             {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
                         </div>
                     </div>
diff --git a/demo-shell/src/app/components/report-issue/report-issue.component.html b/demo-shell/src/app/components/report-issue/report-issue.component.html
index 244ab876f7..645b1e83a4 100644
--- a/demo-shell/src/app/components/report-issue/report-issue.component.html
+++ b/demo-shell/src/app/components/report-issue/report-issue.component.html
@@ -1,9 +1,9 @@
-<div class="adf-report-issue">
+<div class="app-report-issue">
     <h1>Report Issue</h1>
-    <form class="adf-report-issue-form">
+    <form class="app-report-issue-form">
         <mat-form-field>
-            <textarea matInput placeholder="Leave a comment" class="adf-report-issue-form-textarea"></textarea>
+            <textarea matInput placeholder="Leave a comment" class="app-report-issue-form-textarea"></textarea>
         </mat-form-field>
     </form>
     <button mat-raised-button>Submit</button>
-</div>
\ No newline at end of file
+</div>
diff --git a/demo-shell/src/app/components/report-issue/report-issue.component.scss b/demo-shell/src/app/components/report-issue/report-issue.component.scss
index 59826fd134..226b086281 100644
--- a/demo-shell/src/app/components/report-issue/report-issue.component.scss
+++ b/demo-shell/src/app/components/report-issue/report-issue.component.scss
@@ -1,4 +1,4 @@
-.adf-report-issue {
+.app-report-issue {
     margin: 50px 0;
     display: flex;
     flex-direction: column;
diff --git a/demo-shell/src/app/components/search/search-bar.component.scss b/demo-shell/src/app/components/search/search-bar.component.scss
index baa39ca68d..9e2b54885f 100644
--- a/demo-shell/src/app/components/search/search-bar.component.scss
+++ b/demo-shell/src/app/components/search/search-bar.component.scss
@@ -1,5 +1,5 @@
 
-.adf-search-elements {
+.app-search-elements {
   display: flex;
   align-items: center;
 }
diff --git a/demo-shell/src/app/components/search/search-extended.component.html b/demo-shell/src/app/components/search/search-extended.component.html
index b65ab5c7dd..128b9a239b 100644
--- a/demo-shell/src/app/components/search/search-extended.component.html
+++ b/demo-shell/src/app/components/search/search-extended.component.html
@@ -1,5 +1,5 @@
 <div>
-    <div id="container-for-custom-input" class="adf-search-extended-input-containers">
+    <div id="container-for-custom-input" class="app-search-extended-input-containers">
         <mat-form-field>
             <label>{{'APP_LAYOUT.WORD_TO_SEARCH' | translate}}</label>
             <input type="text" matInput
@@ -8,12 +8,12 @@
     </div>
     <div>
       <adf-search #auto="searchAutocomplete"
-                  class="adf-example-card-search-container">
+                  class="app-example-card-search-container">
           <ng-template let-data>
-            <mat-card class="adf-example-card"
+            <mat-card class="app-example-card"
                  *ngFor="let item of data?.list?.entries; let idx = index" (click)="onClick(item)">
                 <mat-card-header>
-                    <div mat-card-avatar class="adf-example-header-image"></div>
+                    <div mat-card-avatar class="app-example-header-image"></div>
                     <mat-card-title>{{ item?.entry.name }}</mat-card-title>
                     <mat-card-subtitle>{{ item?.entry.createdAt }}</mat-card-subtitle>
                 </mat-card-header>
@@ -24,8 +24,8 @@
                     </p>
                 </mat-card-content>
             </mat-card>
-            <mat-card class="adf-example-card" id="search_no_result" *ngIf="data?.list?.entries.length === 0">
-                <p mat-line class="adf-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchedWord} }}</p>
+            <mat-card class="app-example-card" id="search_no_result" *ngIf="data?.list?.entries.length === 0">
+                <p mat-line class="app-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchedWord} }}</p>
             </mat-card>
         </ng-template>
       </adf-search>
diff --git a/demo-shell/src/app/components/search/search-extended.component.scss b/demo-shell/src/app/components/search/search-extended.component.scss
index a3faac3607..2ea47f803d 100644
--- a/demo-shell/src/app/components/search/search-extended.component.scss
+++ b/demo-shell/src/app/components/search/search-extended.component.scss
@@ -1,62 +1,61 @@
-div.adf-search-results-container {
+div.app-search-results-container {
     padding: 0 20px 20px;
 }
 
-.adf-search-title {
+.app-search-title {
     font-size: 22px;
     padding: 15px 0;
 }
 
 @media screen and (max-width: 600px) {
-    :host .adf-col-display-name {
+    :host .app-col-display-name {
         min-width: 100px;
     }
-    :host .adf-col-modified-at, :host .adf-col-modified-by {
+    :host .app-col-modified-at, :host .app-col-modified-by {
         display: none;
     }
-    :host div.adf-search-results-container table {
+    :host div.app-search-results-container table {
         width: 100%;
     }
 }
 
-.adf-search-results-content {
+.app-search-results-content {
     display: flex;
 }
 
-.adf-search-extended-input-containers {
+.app-search-extended-input-containers {
     display: flex;
     flex-direction: row-reverse;
     justify-content: space-evenly;
 }
 
-.adf-search-extended-input-textarea {
+.app-search-extended-input-textarea {
     width: 300px;
 }
 
-.adf-search-extended-label-error {
+.app-search-extended-label-error {
     display: flex;
     flex-direction: column;
 }
 
-.adf-example-card {
+.app-example-card {
     width: 200px;
     flex: 0 20%;
     margin: 15px;
-  }
+}
 
-  .adf-example-card-search-container {
+.app-example-card-search-container {
     display: flex;
     flex-wrap: wrap;
-  }
-
-  .example-header-image {
+}
 
+.example-header-image {
     background-size: cover;
     margin-bottom: 15px;
-  }
+}
 
-  .example-search-input {
-      width: 100px;
-      border: 1 solid;
-      border-color: black;
-  }
+.example-search-input {
+    width: 100px;
+    border: 1 solid;
+    border-color: black;
+}
diff --git a/demo-shell/src/app/components/search/search-result.component.html b/demo-shell/src/app/components/search/search-result.component.html
index 5f32d0ce3f..2ddf5321cc 100644
--- a/demo-shell/src/app/components/search/search-result.component.html
+++ b/demo-shell/src/app/components/search/search-result.component.html
@@ -1,13 +1,13 @@
-<div class="adf-search-results__facets">
+<div class="app-search-results__facets">
     <adf-search-chip-list [searchFilter]="searchFilter" [clearAll]="true"></adf-search-chip-list>
 </div>
 
-<div class="adf-search-results">
-    <adf-search-filter class="adf-search-settings" #searchFilter></adf-search-filter>
+<div class="app-search-results">
+    <adf-search-filter class="app-search-settings" #searchFilter></adf-search-filter>
 
-    <div class="adf-search-results__content">
+    <div class="app-search-results__content">
         <mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate"></mat-progress-bar>
-        <div class="adf-search-results__sorting">
+        <div class="app-search-results__sorting">
             <adf-search-sorting-picker></adf-search-sorting-picker>
         </div>
         <app-files-component
diff --git a/demo-shell/src/app/components/search/search-result.component.scss b/demo-shell/src/app/components/search/search-result.component.scss
index 65b105620b..50f79d9759 100644
--- a/demo-shell/src/app/components/search/search-result.component.scss
+++ b/demo-shell/src/app/components/search/search-result.component.scss
@@ -1,8 +1,8 @@
-.adf-search-results {
+.app-search-results {
     display: flex;
     margin-left: 5px;
 
-    .adf-search-settings {
+    .app-search-settings {
         width: 260px;
         border: 1px solid #eee;
     }
@@ -20,23 +20,23 @@
     }
 }
 
-div.adf-search-results-container {
+div.app-search-results-container {
     padding: 0 20px 20px;
 }
 
-.adf-search-title {
+.app-search-title {
     font-size: 22px;
     padding: 15px 0;
 }
 
 @media screen and (max-width: 600px) {
-    :host .adf-col-display-name {
+    :host .app-col-display-name {
         min-width: 100px;
     }
-    :host .adf-col-modified-at, :host .adf-col-modified-by {
+    :host .app-col-modified-at, :host .app-col-modified-by {
         display: none;
     }
-    :host div.adf-search-results-container table {
+    :host div.app-search-results-container table {
         width: 100%;
     }
 }
diff --git a/demo-shell/src/app/components/shared-link-view/shared-link-view.component.scss b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.scss
index ed24903a03..39982fce39 100644
--- a/demo-shell/src/app/components/shared-link-view/shared-link-view.component.scss
+++ b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.scss
@@ -1,4 +1,4 @@
-.adf-shared-link-view {
+.app-shared-link-view {
     width: 100%;
     height: 100%;
 }
diff --git a/demo-shell/src/app/components/shared-link-view/shared-link-view.component.ts b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.ts
index 82215f5a0f..0fe1557ee6 100644
--- a/demo-shell/src/app/components/shared-link-view/shared-link-view.component.ts
+++ b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.ts
@@ -24,7 +24,7 @@ import { ActivatedRoute, Router } from '@angular/router';
     styleUrls: [ 'shared-link-view.component.scss' ],
     encapsulation: ViewEncapsulation.None,
     // tslint:disable-next-line:use-host-property-decorator
-    host: { 'class': 'adf-shared-link-view' }
+    host: { 'class': 'app-shared-link-view' }
 })
 export class SharedLinkViewComponent implements OnInit {
 
diff --git a/demo-shell/src/app/components/social/social.component.html b/demo-shell/src/app/components/social/social.component.html
index 43e7763228..1e8cb1d067 100644
--- a/demo-shell/src/app/components/social/social.component.html
+++ b/demo-shell/src/app/components/social/social.component.html
@@ -2,17 +2,17 @@
 <input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
 
 <div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-    <div class="adf-social-example-area" fxFlex.gt-md="1 1 auto">
+    <div class="app-social-example-area" fxFlex.gt-md="1 1 auto">
         <mat-card>
-            <div class="adf-social-title">
+            <div class="app-social-title">
                 {{'SOCIAL.LIKE' | translate }}
             </div>
             <adf-like [nodeId]="nodeId"></adf-like>
         </mat-card>
     </div>
-    <div class="adf-social-example-area" fxFlex.gt-md="1 1 auto">
+    <div class="app-social-example-area" fxFlex.gt-md="1 1 auto">
         <mat-card>
-            <div class="adf-social-title">
+            <div class="app-social-title">
                 {{'SOCIAL.RATING' | translate }}
             </div>
             <adf-rating [nodeId]="nodeId"></adf-rating>
diff --git a/demo-shell/src/app/components/social/social.component.scss b/demo-shell/src/app/components/social/social.component.scss
index d1977438b2..094a43b463 100644
--- a/demo-shell/src/app/components/social/social.component.scss
+++ b/demo-shell/src/app/components/social/social.component.scss
@@ -1,8 +1,8 @@
-.adf-social-example-area {
+.app-social-example-area {
     margin: 10px;
 }
 
 
-.adf-social-example-title {
+.app-social-example-title {
     padding-bottom: 12px;
 }
diff --git a/demo-shell/src/app/components/tag/tag.component.html b/demo-shell/src/app/components/tag/tag.component.html
index 00ee61cf0d..2655d47857 100644
--- a/demo-shell/src/app/components/tag/tag.component.html
+++ b/demo-shell/src/app/components/tag/tag.component.html
@@ -4,22 +4,22 @@
 
 <br>
 <div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
-    <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
+    <div class="app-tag-example-area" fxFlex.gt-md="1 1 auto">
         <mat-card>
             <adf-tag-node-actions-list [nodeId]="nodeId"></adf-tag-node-actions-list>
         </mat-card>
     </div>
-    <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
+    <div class="app-tag-example-area" fxFlex.gt-md="1 1 auto">
         <mat-card>
-            <div class="adf-tag-example-title">
+            <div class="app-tag-example-title">
                 {{'TAG.LIST' | translate }}
             </div>
             <adf-tag-list></adf-tag-list>
         </mat-card>
     </div>
-    <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
+    <div class="app-tag-example-area" fxFlex.gt-md="1 1 auto">
         <mat-card>
-            <div class="adf-tag-example-title">
+            <div class="app-tag-example-title">
                 {{'TAG.NODE_LIST' | translate }}
             </div>
             <adf-tag-node-list [showDelete]="showDelete" [nodeId]="nodeId"></adf-tag-node-list>
diff --git a/demo-shell/src/app/components/tag/tag.component.scss b/demo-shell/src/app/components/tag/tag.component.scss
index b416d4fd67..4d2cc52372 100644
--- a/demo-shell/src/app/components/tag/tag.component.scss
+++ b/demo-shell/src/app/components/tag/tag.component.scss
@@ -1,8 +1,8 @@
-.adf-tag-example-area {
+.app-tag-example-area {
     margin: 10px;
 }
 
 
-.adf-tag-example-title {
+.app-tag-example-title {
     padding-bottom: 12px;
 }
diff --git a/demo-shell/src/app/components/task-list-demo/task-list-demo.component.html b/demo-shell/src/app/components/task-list-demo/task-list-demo.component.html
index 3603077aa5..3dc046024b 100644
--- a/demo-shell/src/app/components/task-list-demo/task-list-demo.component.html
+++ b/demo-shell/src/app/components/task-list-demo/task-list-demo.component.html
@@ -1,4 +1,4 @@
-<div class="adf-task-list-demo-inputs">
+<div class="app-task-list-demo-inputs">
 
     <form [formGroup]="taskListForm">
         <mat-form-field>
@@ -139,7 +139,7 @@
         </mat-form-field>
     </form>
 </div>
-<div class="adf-reset-button">
+<div class="app-reset-button">
     <button mat-raised-button (click)="resetTaskForm()">Reset</button>
 </div>
 
@@ -162,7 +162,7 @@
         #taskList>
         <data-columns>
             <data-column key="id" title="Id"></data-column>
-            <data-column key="assignee" title="Assignee" class="adf-full-width adf-name-column">
+            <data-column key="assignee" title="Assignee" class="adf-full-width app-name-column">
                 <ng-template let-entry="$implicit">
                     <div>{{entry.row.obj.assignee | fullName}}</div>
                 </ng-template>
diff --git a/demo-shell/src/app/components/task-list-demo/task-list-demo.component.scss b/demo-shell/src/app/components/task-list-demo/task-list-demo.component.scss
index b38154919a..4175004a21 100644
--- a/demo-shell/src/app/components/task-list-demo/task-list-demo.component.scss
+++ b/demo-shell/src/app/components/task-list-demo/task-list-demo.component.scss
@@ -1,4 +1,4 @@
-.adf-task-list-demo-inputs {
+.app-task-list-demo-inputs {
     margin: 20px auto 0;
     max-width: 1200px;
 
@@ -8,13 +8,13 @@
     }
 }
 
-.adf-reset-button {
+.app-reset-button {
     margin-bottom: 50px;
     display: flex;
     justify-content: center;
 }
 
-.adf-task-list-demo-error-message {
+.app-task-list-demo-error-message {
     color: red;
     text-align: center;
 }
diff --git a/demo-shell/src/app/components/theme-picker/theme-picker.html b/demo-shell/src/app/components/theme-picker/theme-picker.html
index a060f53a0d..3913ebefa1 100644
--- a/demo-shell/src/app/components/theme-picker/theme-picker.html
+++ b/demo-shell/src/app/components/theme-picker/theme-picker.html
@@ -2,7 +2,7 @@
     <mat-icon>format_color_fill</mat-icon>
 </button>
 
-<mat-menu class="docs-theme-picker-menu adf-menu" #themeMenu="matMenu" x-position="before">
+<mat-menu class="docs-theme-picker-menu app-menu" #themeMenu="matMenu" x-position="before">
     <button *ngFor="let theme of themes" [attr.data-automation-id]="theme.name" mat-menu-item (click)="installTheme(theme)" >
         <mat-icon mat-list-icon [matTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
                  [style.background]="theme.primary"
diff --git a/demo-shell/src/custom-style-dev.scss b/demo-shell/src/custom-style-dev.scss
index d971217931..289de1eea5 100644
--- a/demo-shell/src/custom-style-dev.scss
+++ b/demo-shell/src/custom-style-dev.scss
@@ -20,10 +20,10 @@ $warn:    mat-palette($alfresco-warn);
 $theme:   mat-light-theme($primary, $accent, $warn);
 
 @include angular-material-theme($theme);
-@include adf-app-layout-theme($theme);
-@include adf-file-component-theme($theme);
-@include adf-login-component-theme($theme);
-@include adf-process-service-component-theme($theme);
+@include app-layout-theme($theme);
+@include app-file-component-theme($theme);
+@include app-login-component-theme($theme);
+@include app-process-service-component-theme($theme);
 
 
 @include adf-content-services-theme($theme);
diff --git a/demo-shell/src/custom-style.scss b/demo-shell/src/custom-style.scss
index 17fbfd0d27..dc982d918b 100644
--- a/demo-shell/src/custom-style.scss
+++ b/demo-shell/src/custom-style.scss
@@ -19,10 +19,10 @@ $warn:    mat-palette($alfresco-warn);
 $theme:   mat-light-theme($primary, $accent, $warn);
 
 @include angular-material-theme($theme);
-@include adf-app-layout-theme($theme);
-@include adf-file-component-theme($theme);
-@include adf-login-component-theme($theme);
-@include adf-process-service-component-theme($theme);
+@include app-layout-theme($theme);
+@include app-file-component-theme($theme);
+@include app-login-component-theme($theme);
+@include app-process-service-component-theme($theme);
 
 @include adf-content-services-theme($theme);
 @include adf-process-services-theme($theme);
diff --git a/demo-shell/src/index.html b/demo-shell/src/index.html
index afe6a16bce..e34abbca2a 100644
--- a/demo-shell/src/index.html
+++ b/demo-shell/src/index.html
@@ -1,114 +1,128 @@
 <!doctype html>
 <html lang="en">
+
 <head>
-  <meta charset="utf-8">
-  <title>ACS APS ADF Application with Angular CLI</title>
-  <base href="/">
+    <meta charset="utf-8">
+    <title>ACS APS ADF Application with Angular CLI</title>
+    <base href="/">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
 
-  <style>
-      body, html {
-          height: 100%;
-      }
+    <style>
+        body,
+        html {
+            height: 100%;
+        }
 
-      .adf-loader-container {
-          display: flex;
-          flex-direction: column;
-          height:100%;
+        .app-loader-container {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+        }
 
-          align-items: center;
-          justify-content: center;
-      }
+        .app-loader-item {
+            max-height: 100px;
+            max-width: 300px;
+        }
 
-      .adf-loader-item {
-          max-height:100px;
-          max-width:300px;
-      }
+        .app-loader-spinner {
+            max-height: 300px;
+            max-width: 300px;
+        }
 
-      .adf-loader-spinner {
-          max-height:300px;
-          max-width:300px;
-      }
+        .app-loader-text {
+            white-space: nowrap;
+            text-align: center;
+            position: relative;
+        }
 
-      .adf-loader-text {
-          white-space: nowrap;
-          text-align: center;
-          position: relative;
-      }
+        .app-loader {
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
 
-      .adf-loader {
-          position: absolute;
-          width: 100px;
-          height: 100px;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-      }
+        .app-circular {
+            animation: rotate 2s linear infinite;
+            height: 100px;
+            position: relative;
+            width: 100px;
+        }
 
-      .adf-circular {
-          animation: rotate 2s linear infinite;
-          height: 100px;
-          position: relative;
-          width: 100px;
-      }
+        .app-path {
+            stroke-dasharray: 1, 200;
+            stroke-dashoffset: 0;
+            stroke: #b6463a;
+            animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+            stroke-linecap: round;
+        }
 
-      .adf-path {
-          stroke-dasharray: 1, 200;
-          stroke-dashoffset: 0;
-          stroke: #b6463a;
-          animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
-          stroke-linecap: round;
-      }
+        @keyframes rotate {
+            100% {
+                transform: rotate(360deg);
+            }
+        }
 
-      @keyframes rotate {
-          100% {
-              transform: rotate(360deg);
-          }
-      }
-      @keyframes dash {
-          0% {
-              stroke-dasharray: 1, 200;
-              stroke-dashoffset: 0;
-          }
-          50% {
-              stroke-dasharray: 89, 200;
-              stroke-dashoffset: -35;
-          }
-          100% {
-              stroke-dasharray: 89, 200;
-              stroke-dashoffset: -124;
-          }
-      }
-      @keyframes color {
-          100%, 0% {
-              stroke: #d62d20;
-          }
-          40% {
-              stroke: #0057e7;
-          }
-          66% {
-              stroke: #008744;
-          }
-          80%, 90% {
-              stroke: #ffa700;
-          }
-      }
-  </style>
+        @keyframes dash {
+            0% {
+                stroke-dasharray: 1, 200;
+                stroke-dashoffset: 0;
+            }
+
+            50% {
+                stroke-dasharray: 89, 200;
+                stroke-dashoffset: -35;
+            }
+
+            100% {
+                stroke-dasharray: 89, 200;
+                stroke-dashoffset: -124;
+            }
+        }
+
+        @keyframes color {
+
+            100%,
+            0% {
+                stroke: #d62d20;
+            }
+
+            40% {
+                stroke: #0057e7;
+            }
+
+            66% {
+                stroke: #008744;
+            }
+
+            80%,
+            90% {
+                stroke: #ffa700;
+            }
+        }
+    </style>
 </head>
-<body class="adf-background-color">
-<app-root>
-  <div id="loader-container" class="adf-loader-container">
-      <div class="adf-loader-spinner">
-          <svg class="adf-circular">
-            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
-          </svg>
-      </div>
-    <div class="adf-loader-item">
-      <div id="loader-text" class="adf-loader-text">Loading Demo Shell..</div>
-    </div>
-  </div>
-</app-root>
+
+<body class="app-background-color">
+    <app-root>
+        <div id="loader-container" class="app-loader-container">
+            <div class="app-loader-spinner">
+                <svg class="app-circular">
+                    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10">
+                    </circle>
+                </svg>
+            </div>
+            <div class="app-loader-item">
+                <div id="loader-text" class="app-loader-text">Loading Demo Shell..</div>
+            </div>
+        </div>
+    </app-root>
 </body>
+
 </html>
diff --git a/e2e/pages/adf/cardViewComponentPage.ts b/e2e/pages/adf/cardViewComponentPage.ts
index a9928717da..fd9386b16a 100644
--- a/e2e/pages/adf/cardViewComponentPage.ts
+++ b/e2e/pages/adf/cardViewComponentPage.ts
@@ -27,15 +27,15 @@ export class CardViewComponentPage {
     floatField: ElementFinder = element(by.css(`input[data-automation-id='card-textitem-editinput-float']`));
     valueInputField: ElementFinder = element(by.xpath(`//*[contains(@id,'input') and @placeholder='Value']`));
     nameInputField: ElementFinder = element(by.xpath(`//*[contains(@id,'input') and @placeholder='Name']`));
-    consoleLog: ElementFinder = element(by.className('adf-console'));
+    consoleLog: ElementFinder = element(by.className('app-console'));
     deleteButton: ElementFinder = element.all(by.className('adf-card-view__key-value-pairs__remove-btn')).first();
     select: ElementFinder = element(by.css('mat-select[data-automation-class="select-box"]'));
     checkbox: ElementFinder = element(by.css(`mat-checkbox[data-automation-id='card-boolean-boolean']`));
     resetButton: ElementFinder = element(by.css(`#adf-reset-card-log`));
     listContent: ElementFinder = element(by.css('.mat-select-panel'));
-    editableSwitch: ElementFinder = element(by.id('adf-toggle-editable'));
-    clearDateSwitch: ElementFinder = element(by.id('adf-toggle-clear-date'));
-    noneOptionSwitch: ElementFinder = element(by.id('adf-toggle-none-option'));
+    editableSwitch: ElementFinder = element(by.id('app-toggle-editable'));
+    clearDateSwitch: ElementFinder = element(by.id('app-toggle-clear-date'));
+    noneOptionSwitch: ElementFinder = element(by.id('app-toggle-none-option'));
 
     async clickOnAddButton(): Promise<void> {
         await BrowserActions.click(this.addButton);
@@ -202,7 +202,7 @@ export class CardViewComponentPage {
         const switchClass = await this.clearDateSwitch.getAttribute('class');
         if (switchClass.indexOf('mat-checked') === -1) {
             await this.clearDateSwitch.click();
-            const clearDateChecked = element(by.css('mat-slide-toggle[id="adf-toggle-clear-date"][class*="mat-checked"]'));
+            const clearDateChecked = element(by.css('mat-slide-toggle[id="app-toggle-clear-date"][class*="mat-checked"]'));
             await BrowserVisibility.waitUntilElementIsVisible(clearDateChecked);
         }
     }
@@ -213,7 +213,7 @@ export class CardViewComponentPage {
         const switchClass = await this.noneOptionSwitch.getAttribute('class');
         if (switchClass.indexOf('mat-checked') === -1) {
             await this.noneOptionSwitch.click();
-            const noneOptionChecked = element(by.css('mat-slide-toggle[id="adf-toggle-none-option"][class*="mat-checked"]'));
+            const noneOptionChecked = element(by.css('mat-slide-toggle[id="app-toggle-none-option"][class*="mat-checked"]'));
             await BrowserVisibility.waitUntilElementIsVisible(noneOptionChecked);
         }
     }
diff --git a/e2e/pages/adf/configEditorPage.ts b/e2e/pages/adf/configEditorPage.ts
index e2144ac042..b5f71a3946 100644
--- a/e2e/pages/adf/configEditorPage.ts
+++ b/e2e/pages/adf/configEditorPage.ts
@@ -27,13 +27,13 @@ export class ConfigEditorPage {
     }
 
     async clickSaveButton(): Promise<void> {
-        const saveButton: ElementFinder = element(by.id('adf-form-config-save'));
+        const saveButton: ElementFinder = element(by.id('app-form-config-save'));
         await BrowserActions.click(saveButton);
     }
 
     async clickClearButton(): Promise<void> {
         await BrowserVisibility.waitUntilElementIsVisible(this.textField);
-        const clearButton: ElementFinder = element(by.id('adf-form-config-clear'));
+        const clearButton: ElementFinder = element(by.id('app-form-config-clear'));
         await BrowserActions.click(clearButton);
     }
 
diff --git a/e2e/pages/adf/contentServicesPage.ts b/e2e/pages/adf/contentServicesPage.ts
index 44797c087b..63ea7db8cc 100644
--- a/e2e/pages/adf/contentServicesPage.ts
+++ b/e2e/pages/adf/contentServicesPage.ts
@@ -43,7 +43,7 @@ export class ContentServicesPage {
 
     multipleFileUploadToggle: ElementFinder = element(by.id('adf-document-list-enable-drop-files'));
     uploadBorder: ElementFinder = element(by.id('document-list-container'));
-    contentServices: ElementFinder = element(by.css('.adf-sidenav-link[data-automation-id="Content Services"]'));
+    contentServices: ElementFinder = element(by.css('.app-sidenav-link[data-automation-id="Content Services"]'));
     currentFolder: ElementFinder = element(by.css('div[class*="adf-breadcrumb-item adf-active"] div'));
     createFolderButton: ElementFinder = element(by.css('button[data-automation-id="create-new-folder"]'));
     editFolderButton: ElementFinder = element(by.css('button[data-automation-id="edit-folder"]'));
@@ -61,15 +61,15 @@ export class ContentServicesPage {
     sizeHeader: ElementFinder = element(by.css('div[data-automation-id="auto_id_content.sizeInBytes"] > span'));
     createdByHeader: ElementFinder = element(by.css('div[data-automation-id="auto_id_createdByUser.displayName"] > span'));
     createdHeader: ElementFinder = element(by.css('div[data-automation-id="auto_id_createdAt"] > span'));
-    recentFiles: ElementFinder = element(by.css('.adf-container-recent'));
-    recentFilesExpanded: ElementFinder = element(by.css('.adf-container-recent mat-expansion-panel-header.mat-expanded'));
-    recentFilesClosed: ElementFinder = element(by.css('.adf-container-recent mat-expansion-panel-header'));
-    recentFileIcon: ElementFinder = element(by.css('.adf-container-recent mat-expansion-panel-header mat-icon'));
+    recentFiles: ElementFinder = element(by.css('.app-container-recent'));
+    recentFilesExpanded: ElementFinder = element(by.css('.app-container-recent mat-expansion-panel-header.mat-expanded'));
+    recentFilesClosed: ElementFinder = element(by.css('.app-container-recent mat-expansion-panel-header'));
+    recentFileIcon: ElementFinder = element(by.css('.app-container-recent mat-expansion-panel-header mat-icon'));
     emptyFolder: ElementFinder = element(by.css('.adf-empty-folder-this-space-is-empty'));
     emptyFolderImage: ElementFinder = element(by.css('.adf-empty-folder-image'));
-    emptyRecent: ElementFinder = element(by.css('.adf-container-recent .adf-empty-list__title'));
+    emptyRecent: ElementFinder = element(by.css('.app-container-recent .app-empty-list__title'));
     gridViewButton: ElementFinder = element(by.css('button[data-automation-id="document-list-grid-view"]'));
-    cardViewContainer: ElementFinder = element(by.css('div.adf-document-list-container div.adf-datatable-card'));
+    cardViewContainer: ElementFinder = element(by.css('div.app-document-list-container div.adf-datatable-card'));
     shareNodeButton: ElementFinder = element(by.cssContainingText('mat-icon', ' share '));
     nameColumnHeader = 'name';
     createdByColumnHeader = 'createdByUser.displayName';
@@ -520,7 +520,7 @@ export class ContentServicesPage {
     }
 
     async getRowIconImageUrl(fileName): Promise<string> {
-        const iconRow: ElementFinder = element(by.css(`.adf-document-list-container div.adf-datatable-cell[data-automation-id="${fileName}"] img`));
+        const iconRow: ElementFinder = element(by.css(`.app-document-list-container div.adf-datatable-cell[data-automation-id="${fileName}"] img`));
         await BrowserVisibility.waitUntilElementIsVisible(iconRow);
         return await iconRow.getAttribute('src');
     }
@@ -540,21 +540,21 @@ export class ContentServicesPage {
 
     async getCardElementShowedInPage(): Promise<number> {
         await BrowserVisibility.waitUntilElementIsVisible(this.cardViewContainer);
-        return $$('div.adf-document-list-container div.adf-datatable-card div.adf-cell-value img').count();
+        return $$('div.app-document-list-container div.adf-datatable-card div.adf-cell-value img').count();
     }
 
     async getDocumentCardIconForElement(elementName): Promise<string> {
-        const elementIcon: ElementFinder = element(by.css(`.adf-document-list-container div.adf-datatable-cell[data-automation-id="${elementName}"] img`));
+        const elementIcon: ElementFinder = element(by.css(`.app-document-list-container div.adf-datatable-cell[data-automation-id="${elementName}"] img`));
         return await elementIcon.getAttribute('src');
     }
 
     async checkDocumentCardPropertyIsShowed(elementName, propertyName): Promise<void> {
-        const elementProperty: ElementFinder = element(by.css(`.adf-document-list-container div.adf-datatable-cell[data-automation-id="${elementName}"][title="${propertyName}"]`));
+        const elementProperty: ElementFinder = element(by.css(`.app-document-list-container div.adf-datatable-cell[data-automation-id="${elementName}"][title="${propertyName}"]`));
         await BrowserVisibility.waitUntilElementIsVisible(elementProperty);
     }
 
     async getAttributeValueForElement(elementName, propertyName): Promise<string> {
-        const elementSize = element(by.css(`.adf-document-list-container div.adf-datatable-cell[data-automation-id="${elementName}"][title="${propertyName}"] span`));
+        const elementSize = element(by.css(`.app-document-list-container div.adf-datatable-cell[data-automation-id="${elementName}"][title="${propertyName}"] span`));
         return await BrowserActions.getText(elementSize);
     }
 
@@ -565,7 +565,7 @@ export class ContentServicesPage {
 
     async navigateToCardFolder(folderName): Promise<void> {
         await BrowserActions.closeMenuAndDialogs();
-        const folderCard: ElementFinder = element(by.css(`.adf-document-list-container div.adf-image-table-cell.adf-datatable-cell[data-automation-id="${folderName}"]`));
+        const folderCard: ElementFinder = element(by.css(`.app-document-list-container div.adf-image-table-cell.adf-datatable-cell[data-automation-id="${folderName}"]`));
         await BrowserActions.click(folderCard);
         const folderSelected: ElementFinder = element(by.css(`.adf-datatable-row.adf-is-selected div[data-automation-id="${folderName}"].adf-datatable-cell--image`));
         await BrowserVisibility.waitUntilElementIsVisible(folderSelected);
diff --git a/e2e/pages/adf/demo-shell/process-services/peopleGroupCloudComponentPage.ts b/e2e/pages/adf/demo-shell/process-services/peopleGroupCloudComponentPage.ts
index aaf17adaaa..40dc1b397e 100644
--- a/e2e/pages/adf/demo-shell/process-services/peopleGroupCloudComponentPage.ts
+++ b/e2e/pages/adf/demo-shell/process-services/peopleGroupCloudComponentPage.ts
@@ -20,25 +20,25 @@ import { BrowserVisibility, BrowserActions } from '@alfresco/adf-testing';
 
 export class PeopleGroupCloudComponentPage {
 
-    peopleCloudSingleSelectionChecked: ElementFinder = element(by.css('mat-radio-button[data-automation-id="adf-people-single-mode"][class*="mat-radio-checked"]'));
-    peopleCloudMultipleSelectionChecked: ElementFinder = element(by.css('mat-radio-button[data-automation-id="adf-people-multiple-mode"][class*="mat-radio-checked"]'));
-    peopleCloudSingleSelection: ElementFinder = element(by.css('mat-radio-button[data-automation-id="adf-people-single-mode"]'));
-    peopleCloudMultipleSelection: ElementFinder = element(by.css('mat-radio-button[data-automation-id="adf-people-multiple-mode"]'));
-    peopleCloudFilterRole: ElementFinder = element(by.css('mat-radio-button[data-automation-id="adf-people-filter-role"]'));
-    groupCloudSingleSelection: ElementFinder = element(by.css('mat-radio-button[data-automation-id="adf-group-single-mode"]'));
-    groupCloudMultipleSelection: ElementFinder = element(by.css('mat-radio-button[data-automation-id="adf-group-multiple-mode"]'));
-    groupCloudFilterRole: ElementFinder = element(by.css('mat-radio-button[data-automation-id="adf-group-filter-role"]'));
-    peopleRoleInput: ElementFinder = element(by.css('input[data-automation-id="adf-people-roles-input"]'));
-    peopleAppInput: ElementFinder = element(by.css('input[data-automation-id="adf-people-app-input"]'));
-    peoplePreselect: ElementFinder = element(by.css('input[data-automation-id="adf-people-preselect-input"]'));
-    groupRoleInput: ElementFinder = element(by.css('input[data-automation-id="adf-group-roles-input"]'));
-    groupAppInput: ElementFinder = element(by.css('input[data-automation-id="adf-group-app-input"]'));
+    peopleCloudSingleSelectionChecked: ElementFinder = element(by.css('mat-radio-button[data-automation-id="app-people-single-mode"][class*="mat-radio-checked"]'));
+    peopleCloudMultipleSelectionChecked: ElementFinder = element(by.css('mat-radio-button[data-automation-id="app-people-multiple-mode"][class*="mat-radio-checked"]'));
+    peopleCloudSingleSelection: ElementFinder = element(by.css('mat-radio-button[data-automation-id="app-people-single-mode"]'));
+    peopleCloudMultipleSelection: ElementFinder = element(by.css('mat-radio-button[data-automation-id="app-people-multiple-mode"]'));
+    peopleCloudFilterRole: ElementFinder = element(by.css('mat-radio-button[data-automation-id="app-people-filter-role"]'));
+    groupCloudSingleSelection: ElementFinder = element(by.css('mat-radio-button[data-automation-id="app-group-single-mode"]'));
+    groupCloudMultipleSelection: ElementFinder = element(by.css('mat-radio-button[data-automation-id="app-group-multiple-mode"]'));
+    groupCloudFilterRole: ElementFinder = element(by.css('mat-radio-button[data-automation-id="app-group-filter-role"]'));
+    peopleRoleInput: ElementFinder = element(by.css('input[data-automation-id="app-people-roles-input"]'));
+    peopleAppInput: ElementFinder = element(by.css('input[data-automation-id="app-people-app-input"]'));
+    peoplePreselect: ElementFinder = element(by.css('input[data-automation-id="app-people-preselect-input"]'));
+    groupRoleInput: ElementFinder = element(by.css('input[data-automation-id="app-group-roles-input"]'));
+    groupAppInput: ElementFinder = element(by.css('input[data-automation-id="app-group-app-input"]'));
     peopleCloudComponentTitle: ElementFinder = element(by.cssContainingText('mat-card-title', 'People Cloud Component'));
     groupCloudComponentTitle: ElementFinder = element(by.cssContainingText('mat-card-title', 'Groups Cloud Component'));
-    preselectValidation: ElementFinder = element(by.css('mat-checkbox.adf-preselect-value'));
-    preselectValidationStatus: ElementFinder = element(by.css('mat-checkbox.adf-preselect-value label input'));
-    peopleFilterByAppName: ElementFinder = element(by.css('.people-control-options mat-radio-button[value="appName"]'));
-    groupFilterByAppName: ElementFinder = element(by.css('.groups-control-options mat-radio-button[value="appName"]'));
+    preselectValidation: ElementFinder = element(by.css('mat-checkbox.app-preselect-value'));
+    preselectValidationStatus: ElementFinder = element(by.css('mat-checkbox.app-preselect-value label input'));
+    peopleFilterByAppName: ElementFinder = element(by.css('.app-people-control-options mat-radio-button[value="appName"]'));
+    groupFilterByAppName: ElementFinder = element(by.css('.app-groups-control-options mat-radio-button[value="appName"]'));
 
     async checkPeopleCloudComponentTitleIsDisplayed(): Promise<void> {
         await BrowserVisibility.waitUntilElementIsVisible(this.peopleCloudComponentTitle);
diff --git a/e2e/pages/adf/demo-shell/process-services/taskListDemoPage.ts b/e2e/pages/adf/demo-shell/process-services/taskListDemoPage.ts
index b8f57ccdb4..3ec6703919 100644
--- a/e2e/pages/adf/demo-shell/process-services/taskListDemoPage.ts
+++ b/e2e/pages/adf/demo-shell/process-services/taskListDemoPage.ts
@@ -31,7 +31,7 @@ export class TaskListDemoPage {
     page: ElementFinder = element(by.css("input[data-automation-id='page']"));
     pageForm: ElementFinder = element(by.css("mat-form-field[data-automation-id='page']"));
     taskName: ElementFinder = element(by.css("input[data-automation-id='task name']"));
-    resetButton: ElementFinder = element(by.css("div[class='adf-reset-button'] button"));
+    resetButton: ElementFinder = element(by.css("div[class='app-reset-button'] button"));
     dueBefore: ElementFinder = element(by.css("input[data-automation-id='due before']"));
     dueAfter: ElementFinder = element(by.css("input[data-automation-id='due after']"));
     taskId: ElementFinder = element(by.css("input[data-automation-id='task id']"));
diff --git a/e2e/pages/adf/navigationBarPage.ts b/e2e/pages/adf/navigationBarPage.ts
index afbf289292..03d187235a 100644
--- a/e2e/pages/adf/navigationBarPage.ts
+++ b/e2e/pages/adf/navigationBarPage.ts
@@ -23,23 +23,23 @@ import { BrowserVisibility, BrowserActions } from '@alfresco/adf-testing';
 
 export class NavigationBarPage {
 
-    linkListContainer: ElementFinder = element(by.css('.adf-sidenav-linklist'));
+    linkListContainer: ElementFinder = element(by.css('.app-sidenav-linklist'));
     linkMenuChildrenContainer: ElementFinder = element(by.css('.nestedMenu'));
-    dataTableNestedButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="Datatable"]'));
-    dataTableCopyContentButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="Copy Content"]'));
-    dataTableDragAndDropButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="Drag and Drop"]'));
-    processServicesNestedButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="App"]'));
-    processServicesCloudHomeButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="Home"]'));
+    dataTableNestedButton = this.linkMenuChildrenContainer.element(by.css('.app-sidenav-link[data-automation-id="Datatable"]'));
+    dataTableCopyContentButton = this.linkMenuChildrenContainer.element(by.css('.app-sidenav-link[data-automation-id="Copy Content"]'));
+    dataTableDragAndDropButton = this.linkMenuChildrenContainer.element(by.css('.app-sidenav-link[data-automation-id="Drag and Drop"]'));
+    processServicesNestedButton = this.linkMenuChildrenContainer.element(by.css('.app-sidenav-link[data-automation-id="App"]'));
+    processServicesCloudHomeButton = this.linkMenuChildrenContainer.element(by.css('.app-sidenav-link[data-automation-id="Home"]'));
     themeButton: ElementFinder = element(by.css('button[data-automation-id="theme menu"]'));
     themeMenuContent: ElementFinder = element(by.css('div[class*="mat-menu-panel"]'));
     languageMenuButton: ElementFinder = element(by.css('button[data-automation-id="language-menu-button"]'));
     appTitle: ElementFinder = element(by.css('.adf-app-title'));
     menuButton: ElementFinder = element(by.css('button[data-automation-id="adf-menu-icon"]'));
-    formButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="Form"]'));
-    peopleGroupCloudButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="People/Group Cloud"]'));
+    formButton = this.linkMenuChildrenContainer.element(by.css('.app-sidenav-link[data-automation-id="Form"]'));
+    peopleGroupCloudButton = this.linkMenuChildrenContainer.element(by.css('.app-sidenav-link[data-automation-id="People/Group Cloud"]'));
 
     async clickNavigationBarItem(title): Promise<void> {
-        const menu = element(by.css(`.adf-sidenav-link[data-automation-id="${title}"]`));
+        const menu = element(by.css(`.app-sidenav-link[data-automation-id="${title}"]`));
         await BrowserActions.closeMenuAndDialogs();
         await BrowserActions.click(menu);
     }
@@ -176,7 +176,7 @@ export class NavigationBarPage {
 
     async clickLogoutButton(): Promise<void> {
         await BrowserActions.closeMenuAndDialogs();
-        await BrowserActions.clickExecuteScript('.adf-sidenav-link[adf-logout]');
+        await BrowserActions.clickExecuteScript('.app-sidenav-link[adf-logout]');
     }
 
     async clickThemeButton(): Promise<void> {
diff --git a/e2e/pages/adf/notificationPage.ts b/e2e/pages/adf/notificationPage.ts
index 88437dc938..191c7c4e98 100644
--- a/e2e/pages/adf/notificationPage.ts
+++ b/e2e/pages/adf/notificationPage.ts
@@ -29,7 +29,7 @@ export class NotificationPage {
     notificationSnackBar: ElementFinder = element.all(by.css('simple-snack-bar')).first();
     actionOutput: ElementFinder = element(by.css('div[data-automation-id="notification-action-output"]'));
     selectionDropDown: ElementFinder = element.all(by.css('.mat-select-panel')).first();
-    notificationsPage: ElementFinder = element(by.css('.adf-sidenav-link[data-automation-id="Notifications"]'));
+    notificationsPage: ElementFinder = element(by.css('.app-sidenav-link[data-automation-id="Notifications"]'));
     notificationConfig: ElementFinder = element(by.css('p[data-automation-id="notification-custom-object"]'));
 
     async checkNotifyContains(message): Promise<void> {
diff --git a/e2e/pages/adf/permissionsPage.ts b/e2e/pages/adf/permissionsPage.ts
index 55bfa0d07f..96f58559b2 100644
--- a/e2e/pages/adf/permissionsPage.ts
+++ b/e2e/pages/adf/permissionsPage.ts
@@ -33,7 +33,7 @@ export class PermissionsPage {
     searchUserInput: ElementFinder = element(by.id('searchInput'));
     searchResults: ElementFinder = element(by.css('#adf-add-permission-authority-results #adf-search-results-content'));
     addButton: ElementFinder = element(by.id('add-permission-dialog-confirm-button'));
-    permissionInheritedButton: ElementFinder = element.all(by.css("div[class='adf-inherit_permission_button'] button")).first();
+    permissionInheritedButton: ElementFinder = element.all(by.css("div[class='app-inherit_permission_button'] button")).first();
     noPermissions: ElementFinder = element(by.css('div[id="adf-no-permissions-template"]'));
     deletePermissionButton: ElementFinder = element(by.css(`button[data-automation-id='adf-delete-permission-button']`));
     permissionDisplayContainer: ElementFinder = element(by.css(`div[id='adf-permission-display-container']`));
diff --git a/e2e/pages/adf/process-services/processFiltersPage.ts b/e2e/pages/adf/process-services/processFiltersPage.ts
index 01d45e0494..cbbe2a17e0 100644
--- a/e2e/pages/adf/process-services/processFiltersPage.ts
+++ b/e2e/pages/adf/process-services/processFiltersPage.ts
@@ -26,10 +26,10 @@ export class ProcessFiltersPage {
     runningFilter: ElementFinder = element(by.css('span[data-automation-id="Running_filter"]'));
     completedFilter: ElementFinder = element(by.css('div[class="mat-list-text"] > span[data-automation-id="Completed_filter"]'));
     allFilter: ElementFinder = element(by.css('span[data-automation-id="All_filter"]'));
-    createProcessButton: ElementFinder = element(by.css('.adf-processes-menu button[data-automation-id="create-button"] > span'));
+    createProcessButton: ElementFinder = element(by.css('.app-processes-menu button[data-automation-id="create-button"] > span'));
     newProcessButton: ElementFinder = element(by.css('div > button[data-automation-id="btn-start-process"]'));
-    processesPage: ElementFinder = element(by.css('div[class="adf-grid"] > div[class="adf-grid-item adf-processes-menu"]'));
-    accordionMenu: ElementFinder = element(by.css('.adf-processes-menu mat-accordion'));
+    processesPage: ElementFinder = element(by.css('div[class="app-grid"] > div[class="app-grid-item app-processes-menu"]'));
+    accordionMenu: ElementFinder = element(by.css('.app-processes-menu mat-accordion'));
     buttonWindow: ElementFinder = element(by.css('div > button[data-automation-id="btn-start-process"] > div'));
     noContentMessage: ElementFinder = element.all(by.css('div[class="adf-empty-content__title"]')).first();
     rows: Locator = by.css('adf-process-instance-list div[class="adf-datatable-body"] div[class*="adf-datatable-row"]');
diff --git a/e2e/pages/adf/process-services/taskDetailsPage.ts b/e2e/pages/adf/process-services/taskDetailsPage.ts
index b6cc271eee..a263d2ae17 100644
--- a/e2e/pages/adf/process-services/taskDetailsPage.ts
+++ b/e2e/pages/adf/process-services/taskDetailsPage.ts
@@ -45,7 +45,7 @@ export class TaskDetailsPage {
     addInvolvedUserButton: ElementFinder = element(by.css('button[id="add-people"] span'));
     emailInvolvedUser = by.xpath('following-sibling::div[@class="adf-people-email"]');
     taskDetailsInfoDrawer: ElementFinder = element(by.tagName('adf-info-drawer'));
-    taskDetailsSection: ElementFinder = element(by.css('div[data-automation-id="adf-tasks-details"]'));
+    taskDetailsSection: ElementFinder = element(by.css('div[data-automation-id="app-tasks-details"]'));
     taskDetailsEmptySection: ElementFinder = element(by.css('div[data-automation-id="adf-tasks-details--empty"]'));
     completeTask: ElementFinder = element(by.css('button[id="adf-no-form-complete-button"]'));
     completeFormTask: ElementFinder = element(by.css('button[id="adf-form-complete"]'));
diff --git a/e2e/pages/adf/searchResultsPage.ts b/e2e/pages/adf/searchResultsPage.ts
index 671ac58a53..0707b2c49e 100644
--- a/e2e/pages/adf/searchResultsPage.ts
+++ b/e2e/pages/adf/searchResultsPage.ts
@@ -22,7 +22,7 @@ import { BrowserVisibility, SearchSortingPickerPage } from '@alfresco/adf-testin
 
 export class SearchResultsPage {
 
-    noResultsMessage: ElementFinder = element(by.css('div[class="adf-no-result-message"]'));
+    noResultsMessage: ElementFinder = element(by.css('div[class="app-no-result-message"]'));
     dataTable: DataTableComponentPage = new DataTableComponentPage();
     searchSortingPicker: SearchSortingPickerPage = new SearchSortingPickerPage();
     contentServices: ContentServicesPage = new ContentServicesPage();
diff --git a/lib/core/comments/comments.component.ts b/lib/core/comments/comments.component.ts
index 9f1082a3ee..d7fbfa424e 100644
--- a/lib/core/comments/comments.component.ts
+++ b/lib/core/comments/comments.component.ts
@@ -54,7 +54,8 @@ export class CommentsComponent implements OnChanges {
 
     beingAdded: boolean = false;
 
-    constructor(private commentProcessService: CommentProcessService, private commentContentService: CommentContentService) {
+    constructor(private commentProcessService: CommentProcessService,
+                private commentContentService: CommentContentService) {
         this.comment$ = new Observable<CommentModel>((observer) => this.commentObserver = observer)
             .pipe(share());
         this.comment$.subscribe((comment: CommentModel) => {
diff --git a/stylelint-config.json b/stylelint-config.json
index 7cb48f7b8b..dc06f29ce4 100644
--- a/stylelint-config.json
+++ b/stylelint-config.json
@@ -81,7 +81,7 @@
     "max-line-length": 100,
     "linebreaks": "unix",
     "selector-class-pattern": [
-      "^_?(adf|adf-|cdk-|example-|demo-|mat-|material-|textLayer|canvasWrapper|page)",
+      "^_?(adf|adf-|app|app-|cdk-|example-|demo-|mat-|material-|textLayer|canvasWrapper|page)",
       {
         "resolveNestedSelectors": true
       }