style and theming fixes (#428)

* fix generic error text and styles

* search input layout and style fixes

* settings theme

* layout theme support

* current user theme

* theming support for header component

* disable "use-host-property-decorator" tslint rule

* sorting picker button theme

e2e/components/header/header.ts

@@ -30,13 +30,13 @@ import { UserInfo } from './user-info';
 export class Header extends Component {
     private locators = {
         logoLink: by.css('.app-menu__title'),
-        userInfo: by.css('app-current-user')
+        userInfo: by.css('aca-current-user')
     };
 
     logoLink: ElementFinder = this.component.element(this.locators.logoLink);
     userInfo: UserInfo = new UserInfo(this.component);
 
     constructor(ancestor?: ElementFinder) {
-        super('app-header', ancestor);
+        super('aca-header', ancestor);
     }
 }

e2e/components/header/user-info.ts

@@ -40,7 +40,7 @@ export class UserInfo extends Component {
     menu: Menu = new Menu();
 
     constructor(ancestor?: ElementFinder) {
-        super('app-current-user', ancestor);
+        super('aca-current-user', ancestor);
     }
 
     openMenu(): promise.Promise<Menu> {

src/app/components/current-user/current-user.component.html

@@ -1,25 +1,23 @@
-<div>
+<div title="{{ user?.id }}">
-    <div title="{{ user?.id }}">
+    <div class="current-user__full-name">{{ userName }}</div>
-        <div class="current-user__full-name">{{ userName }}</div>
+    <div
-        <div
+        class="current-user__avatar am-avatar"
-            class="current-user__avatar am-avatar am-avatar--light"
+        [matMenuTriggerFor]="userMenu">
-            [matMenuTriggerFor]="userMenu">
+            {{ userInitials }}
-                {{ userInitials }}
-        </div>
     </div>
-
-    <mat-menu #userMenu="matMenu" [overlapTrigger]="false">
-        <button *ngIf="'languagePicker' | adfAppConfig"
-            mat-menu-item [matMenuTriggerFor]="langMenu">
-            {{ 'APP.LANGUAGE' | translate }}
-        </button>
-
-        <button mat-menu-item adf-logout>
-            {{ 'APP.SIGN_OUT' | translate }}
-        </button>
-    </mat-menu>
-
-    <mat-menu #langMenu="matMenu">
-        <adf-language-menu></adf-language-menu>
-    </mat-menu>
 </div>
+
+<mat-menu #userMenu="matMenu" [overlapTrigger]="false">
+    <button *ngIf="'languagePicker' | adfAppConfig"
+        mat-menu-item [matMenuTriggerFor]="langMenu">
+        {{ 'APP.LANGUAGE' | translate }}
+    </button>
+
+    <button mat-menu-item adf-logout>
+        {{ 'APP.SIGN_OUT' | translate }}
+    </button>
+</mat-menu>
+
+<mat-menu #langMenu="matMenu">
+    <adf-language-menu></adf-language-menu>
+</mat-menu>

src/app/components/current-user/current-user.component.scss

@@ -1,49 +0,0 @@
-@import 'variables';
-
-$am-avatar-size: 40px;
-
-$am-avatar-light-bg: rgba(white, .15);
-$am-avatar-dark-bg: rgba(black, .15);
-
-:host {
-    font-weight: lighter;
-    position: relative;
-
-    color: $alfresco-white;
-    line-height: 20px;
-
-    .am-avatar {
-        margin-left: 5px;
-        cursor: pointer;
-
-        display: inline-block;
-        width: $am-avatar-size;
-        height: $am-avatar-size;
-        line-height: $am-avatar-size;
-        font-size: 1.2em;
-        text-align: center;
-        color: inherit;
-        border-radius: 100%;
-
-        &--light {
-            background: $am-avatar-light-bg;
-        }
-
-        &--dark {
-            background: $am-avatar-dark-bg;
-        }
-    }
-
-    .current-user__full-name {
-        width: 100px;
-        text-align: right;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display:inline-block;
-        height: 20px;
-        font-size: 14px;
-        line-height: 1.43;
-        letter-spacing: -0.2px;
-    }
-}

src/app/components/current-user/current-user.component.theme.scss

@@ -0,0 +1,38 @@
+@mixin aca-current-user-theme($theme) {
+    $background: map-get($theme, background);
+    $am-avatar-size: 40px;
+
+    .aca-current-user {
+        font-weight: lighter;
+        position: relative;
+        color: mat-color($background, card);
+        line-height: 20px;
+
+        .am-avatar {
+            margin-left: 5px;
+            cursor: pointer;
+            display: inline-block;
+            width: $am-avatar-size;
+            height: $am-avatar-size;
+            line-height: $am-avatar-size;
+            font-size: 1.2em;
+            text-align: center;
+            color: inherit;
+            border-radius: 100%;
+            background-color: mat-color($background, card, .15);
+        }
+
+        .current-user__full-name {
+            width: 100px;
+            text-align: right;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display:inline-block;
+            height: 20px;
+            font-size: 14px;
+            line-height: 1.43;
+            letter-spacing: -0.2px;
+        }
+    }
+}

src/app/components/current-user/current-user.component.ts

@@ -23,14 +23,15 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { PeopleContentService } from '@alfresco/adf-core';
 import { Subscription } from 'rxjs/Rx';
 
 @Component({
-    selector: 'app-current-user',
+    selector: 'aca-current-user',
     templateUrl: './current-user.component.html',
-    styleUrls: [ './current-user.component.scss' ]
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'aca-current-user' }
 })
 export class CurrentUserComponent implements OnInit, OnDestroy {
     private subscriptions: Subscription[] = [];

src/app/components/files/files.component.html

@@ -94,7 +94,7 @@
     </div>
 
     <div [attr.class]="isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'">
-        <app-generic-error></app-generic-error>
+        <aca-generic-error></aca-generic-error>
     </div>
 
     <div [attr.class]="!isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'">

src/app/components/generic-error/generic-error.component.html

@@ -1,4 +1,4 @@
-<div class="generic-error">
+<mat-icon>ic_error</mat-icon>
-    <mat-icon>ic_error</mat-icon>
+<p class="generic-error__title">
-    <p class="generic-error__title">This file / folder no longer exists or you don't have permission to view it.</p>
+    {{ 'APP.MESSAGES.ERRORS.MISSING_CONTENT' | translate }}
-</div>
+</p>

src/app/components/generic-error/generic-error.component.scss

@@ -1,25 +0,0 @@
-@import 'variables';
-
-$alfresco-warn-color--hue-2: #ff5252;
-
-.generic-error {
-    color: $alfresco-secondary-text-color;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-
-    &__title {
-        font-size: 16px;
-    }
-
-    mat-icon {
-        color: $alfresco-warn-color--hue-2;
-        direction: rtl;
-        font-size: 52px;
-        height: 52px;
-        width: 52px;
-    }
-  }

src/app/components/generic-error/generic-error.component.theme.scss

@@ -0,0 +1,27 @@
+@mixin aca-generic-error-theme($theme) {
+    $warn: map-get($theme, warn);
+    $foreground: map-get($theme, foreground);
+
+    .aca-generic-error {
+        color: mat-color($foreground, text, 0.54);
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+
+        &__title {
+            font-size: 16px;
+        }
+
+        mat-icon {
+            color: mat-color($warn);
+            direction: rtl;
+            font-size: 52px;
+            height: 52px;
+            width: 52px;
+        }
+    }
+}

src/app/components/generic-error/generic-error.component.ts

@@ -23,12 +23,14 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
-    selector: 'app-generic-error',
+    selector: 'aca-generic-error',
-    styleUrls: ['./generic-error.component.scss'],
+    templateUrl: './generic-error.component.html',
-    templateUrl: './generic-error.component.html'
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: { class: 'aca-generic-error' }
 })
 export class GenericErrorComponent {}
 

src/app/components/header/header.component.html

@@ -16,9 +16,9 @@
 
     <div class="adf-toolbar--spacer"></div>
 
-    <app-search-input></app-search-input>
+    <aca-search-input></aca-search-input>
 
     <adf-toolbar-divider></adf-toolbar-divider>
 
-    <app-current-user></app-current-user>
+    <aca-current-user></aca-current-user>
 </adf-toolbar>

src/app/components/header/header.component.scss

@@ -1,55 +0,0 @@
-@import 'variables';
-
-$app-menu-height: 64px;
-
-.app-menu {
-    height: $app-menu-height;
-
-    &.adf-toolbar {
-        .mat-toolbar {
-            background-color: inherit;
-            font-family: inherit;
-            min-height: $app-menu-height;
-            height: $app-menu-height;
-
-            .mat-toolbar-layout {
-                height: $app-menu-height;
-
-                .mat-toolbar-row {
-                    height: $app-menu-height;
-                }
-            }
-        }
-
-        .adf-toolbar-divider {
-            margin-left: 5px;
-            margin-right: 5px;
-
-            & > div {
-                background-color: $alfresco-white !important;
-            }
-        }
-
-        .adf-toolbar-title {
-            color:  $alfresco-white;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: center;
-        }
-    }
-
-    .app-menu__title {
-        width: 100px;
-        height: 50px;
-        margin-left: 40px;
-        display: flex;
-        justify-content: center;
-        align-items: stretch;
-
-        &> img {
-            width: 100%;
-            object-fit: contain;
-        }
-    }
-}

src/app/components/header/header.component.theme.scss

@@ -0,0 +1,59 @@
+@mixin aca-header-theme($theme) {
+    $background: map-get($theme, background);
+    $app-menu-height: 64px;
+
+    .aca-header {
+
+        .app-menu {
+            height: $app-menu-height;
+
+            &.adf-toolbar {
+                .mat-toolbar {
+                    background-color: inherit;
+                    font-family: inherit;
+                    min-height: $app-menu-height;
+                    height: $app-menu-height;
+
+                    .mat-toolbar-layout {
+                        height: $app-menu-height;
+
+                        .mat-toolbar-row {
+                            height: $app-menu-height;
+                        }
+                    }
+                }
+
+                .adf-toolbar-divider {
+                    margin-left: 5px;
+                    margin-right: 5px;
+
+                    & > div {
+                        background-color: mat-color($background, card);
+                    }
+                }
+
+                .adf-toolbar-title {
+                    color:  mat-color($background, card);
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+
+            .app-menu__title {
+                width: 100px;
+                height: 50px;
+                margin-left: 40px;
+                display: flex;
+                justify-content: center;
+                align-items: stretch;
+
+                &> img {
+                    width: 100%;
+                    object-fit: contain;
+                }
+            }
+        }
+    }
+}

src/app/components/header/header.component.ts

@@ -30,10 +30,10 @@ import { AppStore } from '../../store/states/app.state';
 import { selectHeaderColor, selectAppName, selectLogoPath } from '../../store/selectors/app.selectors';
 
 @Component({
-    selector: 'app-header',
+    selector: 'aca-header',
     templateUrl: './header.component.html',
-    styleUrls: [ './header.component.scss' ],
+    encapsulation: ViewEncapsulation.None,
-    encapsulation: ViewEncapsulation.None
+    host: { class: 'aca-header' }
 })
 export class HeaderComponent {
     @Output() menu: EventEmitter<any> = new EventEmitter<any>();

src/app/components/layout/layout.component.html

@@ -15,7 +15,7 @@
 
             <adf-sidenav-layout-header>
                 <ng-template let-toggleMenu="toggleMenu">
-                    <app-header (menu)="toggleMenu()"></app-header>
+                    <aca-header (menu)="toggleMenu()"></aca-header>
                 </ng-template>
             </adf-sidenav-layout-header>
 
@@ -35,4 +35,4 @@
 
         <adf-file-uploading-dialog position="left"></adf-file-uploading-dialog>
     </adf-upload-drag-area>
-</div>
+</div>

src/app/components/location-link/location-link.component.ts

@@ -30,7 +30,7 @@ import { Observable } from 'rxjs/Rx';
 
 import { Store } from '@ngrx/store';
 import { AppStore } from '../../store/states/app.state';
-import {  NavigateToLocationAction } from '../../store/actions';
+import { NavigateToLocationAction } from '../../store/actions';
 
 @Component({
     selector: 'app-location-link',
@@ -41,10 +41,7 @@ import {  NavigateToLocationAction } from '../../store/actions';
     `,
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    // tslint:disable-next-line:use-host-property-decorator
+    host: { 'class': 'app-location-link adf-location-cell' }
-    host: {
-        'class': 'app-location-link adf-location-cell'
-    }
 })
 export class LocationLinkComponent implements OnInit {
 

src/app/components/preview/preview.component.ts

@@ -37,7 +37,6 @@ import { PageComponent } from '../page.component';
     templateUrl: 'preview.component.html',
     styleUrls: ['preview.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    // tslint:disable-next-line:use-host-property-decorator
     host: { 'class': 'app-preview' }
 })
 export class PreviewComponent extends PageComponent implements OnInit {

src/app/components/search-input/search-input.component.html

@@ -1,17 +1,15 @@
-<div class="adf-search-control-wrapper">
+<button mat-icon-button
-    <button mat-icon-button
+        *ngIf="onSearchResults"
-            *ngIf="onSearchResults"
+        id="adf-search-button"
-            id="adf-search-button"
+        class="adf-search-button"
-            class="adf-search-button"
+        [title]="'SEARCH.BUTTON.TOOLTIP' | translate">
-            [title]="'SEARCH.BUTTON.TOOLTIP' | translate">
+    <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
-        <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
+</button>
-    </button>
+<adf-search-control #searchControl
-    <adf-search-control #searchControl
+    [highlight]="true"
-        [highlight]="true"
+    (optionClicked)="onItemClicked($event)"
-        (optionClicked)="onItemClicked($event)"
+    [expandable]="!onSearchResults"
-        [expandable]="!onSearchResults"
+    [liveSearchEnabled]="!onSearchResults"
-        [liveSearchEnabled]="!onSearchResults"
+    (submit)="onSearchSubmit($event)"
-        (submit)="onSearchSubmit($event)"
+    (searchChange)="onSearchChange($event)">
-        (searchChange)="onSearchChange($event)">
+</adf-search-control>
-    </adf-search-control>
-</div>

src/app/components/search-input/search-input.component.scss

@@ -1,23 +0,0 @@
-@import 'variables';
-
-adf-search-control {
-    color: $alfresco-white;
-}
-
-.adf-search-control-wrapper {
-    display: flex;
-    box-sizing: border-box;
-    padding: 0;
-    width: 100%;
-    flex-direction: row;
-    align-items: center;
-    white-space: nowrap;
-
-    .adf-search-button {
-        left: -15px;
-        margin-left: 13px;
-        align-items: flex-start;
-        font: 400 11px system-ui;
-        color: #fff;
-    }
-}

src/app/components/search-input/search-input.component.theme.scss

@@ -0,0 +1,28 @@
+@mixin aca-search-input-theme($theme) {
+    $background: map-get($theme, background);
+
+    .aca-search-input{
+        display: flex;
+        box-sizing: border-box;
+        padding: 0;
+        flex-direction: row;
+        align-items: center;
+        white-space: nowrap;
+
+        .adf-search-control {
+            color: mat-color($background, card);
+
+            .mat-form-field-underline {
+                background-color: mat-color($background, card);
+            }
+        }
+
+        .adf-search-button {
+            left: -15px;
+            margin-left: 13px;
+            align-items: flex-start;
+            font: 400 11px system-ui;
+            color: mat-color($background, card);
+        }
+    }
+}

src/app/components/search-input/search-input.component.ts

@@ -23,7 +23,7 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import {
     NavigationEnd, PRIMARY_OUTLET, Router, RouterEvent, UrlSegment, UrlSegmentGroup,
     UrlTree
@@ -32,9 +32,10 @@ import { MinimalNodeEntity } from 'alfresco-js-api';
 import { SearchControlComponent } from '@alfresco/adf-content-services';
 
 @Component({
-    selector: 'app-search-input',
+    selector: 'aca-search-input',
     templateUrl: 'search-input.component.html',
-    styleUrls: ['search-input.component.scss']
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'aca-search-input' }
 })
 export class SearchInputComponent implements OnInit {
 

src/app/components/settings/settings.component.scss

@@ -1,69 +0,0 @@
-@import 'variables';
-
-.app-settings {
-    .settings-input {
-        width: 50%;
-    }
-
-    .settings-buttons {
-        text-align: right;
-
-        .mat-button {
-            text-transform: uppercase;
-        }
-    }
-
-    $app-menu-height: 64px;
-
-    .app-menu {
-        height: $app-menu-height;
-
-        &.adf-toolbar {
-            .mat-toolbar {
-                background-color: inherit;
-                font-family: inherit;
-                min-height: $app-menu-height;
-                height: $app-menu-height;
-
-                .mat-toolbar-layout {
-                    height: $app-menu-height;
-
-                    .mat-toolbar-row {
-                        height: $app-menu-height;
-                    }
-                }
-            }
-
-            .adf-toolbar-divider {
-                margin-left: 5px;
-                margin-right: 5px;
-
-                & > div {
-                    background-color: $alfresco-white !important;
-                }
-            }
-
-            .adf-toolbar-title {
-                color:  $alfresco-white;
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: center;
-            }
-        }
-
-        .app-menu__title {
-            width: 100px;
-            height: 50px;
-            margin-left: 40px;
-            display: flex;
-            justify-content: center;
-            align-items: stretch;
-
-            &> img {
-                width: 100%;
-                object-fit: contain;
-            }
-        }
-    }
-}

src/app/components/settings/settings.component.theme.scss

@@ -0,0 +1,70 @@
+@mixin aca-settings-theme($theme) {
+    $background: map-get($theme, background);
+    $app-menu-height: 64px;
+
+    .aca-settings {
+        .settings-input {
+            width: 50%;
+        }
+
+        .settings-buttons {
+            text-align: right;
+
+            .mat-button {
+                text-transform: uppercase;
+            }
+        }
+
+        .app-menu {
+            height: $app-menu-height;
+
+            &.adf-toolbar {
+                .mat-toolbar {
+                    background-color: inherit;
+                    font-family: inherit;
+                    min-height: $app-menu-height;
+                    height: $app-menu-height;
+
+                    .mat-toolbar-layout {
+                        height: $app-menu-height;
+
+                        .mat-toolbar-row {
+                            height: $app-menu-height;
+                        }
+                    }
+                }
+
+                .adf-toolbar-divider {
+                    margin-left: 5px;
+                    margin-right: 5px;
+
+                    & > div {
+                        background-color: mat-color($background, card);
+                    }
+                }
+
+                .adf-toolbar-title {
+                    color:  mat-color($background, card);
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+
+            .app-menu__title {
+                width: 100px;
+                height: 50px;
+                margin-left: 40px;
+                display: flex;
+                justify-content: center;
+                align-items: stretch;
+
+                &> img {
+                    width: 100%;
+                    object-fit: contain;
+                }
+            }
+        }
+    }
+}

src/app/components/settings/settings.component.ts

@@ -29,12 +29,10 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { Validators, FormGroup, FormBuilder } from '@angular/forms';
 
 @Component({
-    selector: 'app-settings',
+    selector: 'aca-settings',
     templateUrl: './settings.component.html',
-    styleUrls: ['./settings.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    // tslint:disable-next-line:use-host-property-decorator
+    host: { class: 'aca-settings' }
-    host: { class: 'app-settings' }
 })
 export class SettingsComponent implements OnInit {
 

src/app/dialogs/node-versions/node-versions.dialog.ts

@@ -33,7 +33,6 @@ import { SnackbarErrorAction } from '../../store/actions';
 @Component({
     templateUrl: './node-versions.dialog.html',
     encapsulation: ViewEncapsulation.None,
-    // tslint:disable-next-line:use-host-property-decorator
     host: { class: 'aca-node-versions-dialog' }
 })
 export class NodeVersionsDialogComponent {

src/app/ui/_layout.scss

@@ -1,56 +0,0 @@
-@import 'mixins';
-
-$app-layout--header-height: 65px;
-$app-layout--side-width: 320px;
-$app-inner-layout--header-height: 48px;
-$app-inner-layout--footer-height: 48px;
-$alfresco-divider-color: rgba($alfresco-black, .07);
-$alfresco-gray-background: #fafafa;
-
-.layout {
-    @include flex-column;
-}
-
-.inner-layout {
-    @include flex-column;
-
-    &__header {
-        display: flex;
-        align-items: center;
-        flex: 0 0 $app-layout--header-height;
-        flex-basis: $app-inner-layout--header-height;
-        background: $alfresco-gray-background;
-        border-bottom: 1px solid $alfresco-divider-color;
-        padding: 0 24px;
-    }
-
-    &__content {
-        @include flex-row;
-    }
-
-    &__content--hide {
-        display: none !important;
-    }
-
-    &__panel {
-        @include flex-column;
-        border-right: 1px solid rgba(0, 0, 0, 0.07);
-    }
-
-    &__side-panel {
-        display: block;
-        height: 100%;
-        overflow-y: scroll;
-        max-width: 350px;
-        width: 350px;
-    }
-}
-
-.content--scroll {
-    overflow: auto !important;
-}
-
-app-generic-error {
-    height: 100%;
-    width: 100%;
-}

src/app/ui/_variables.scss

@@ -1,6 +0,0 @@
-// Grayscale
-$alfresco-white: #fff;
-$alfresco-black: #000;
-
-// Dark
-$alfresco-secondary-text-color: rgba($alfresco-black, .54);

src/app/ui/application.scss

@@ -1,5 +1,4 @@
 @import 'mixins';
-@import 'variables';
 @import 'theme';
 
 $foreground: map-get($theme, foreground);
@@ -24,5 +23,3 @@ app-search,
 ng-component {
     @include flex-column;
 }
-
-@import 'layout';

src/app/ui/custom-theme.scss

@@ -3,7 +3,13 @@
 
 @import '../components/sidenav/sidenav.component.theme';
 @import '../components/about/about.component.theme';
+@import '../components/generic-error/generic-error.component.theme';
+@import '../components/search-input/search-input.component.theme';
+@import '../components/settings/settings.component.theme';
+@import '../components/current-user/current-user.component.theme';
+@import '../components/header/header.component.theme';
 @import '../dialogs/node-versions/node-versions.dialog.theme';
+
 @import './overrides/adf-toolbar.theme';
 @import './overrides/adf-search-filter.theme';
 @import './overrides/adf-info-drawer.theme';
@@ -14,7 +20,9 @@
 @import './overrides/adf-sidenav-layout.theme';
 @import './overrides/adf-document-list.theme';
 @import './overrides/adf-upload-drag-area.theme';
+@import './overrides/adf-search-sorting-picker.theme';
 
+@import 'layout';
 @import 'snackbar';
 
 $grey-scale: (
@@ -58,18 +66,25 @@ $custom-theme-warn: mat-palette($alfresco-warn);
 $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
 
 @mixin custom-theme($theme) {
-    @include adf-toolbar-theme($custom-theme);
+    @include adf-toolbar-theme($theme);
-    @include adf-search-filter-theme($custom-theme);
+    @include adf-search-filter-theme($theme);
-    @include adf-info-drawer-theme($custom-theme);
+    @include adf-info-drawer-theme($theme);
-    @include adf-upload-button-theme($custom-theme);
+    @include adf-upload-button-theme($theme);
-    @include adf-sidebar-action-menu-theme($custom-theme);
+    @include adf-sidebar-action-menu-theme($theme);
-    @include adf-pagination-theme($custom-theme);
+    @include adf-pagination-theme($theme);
-    @include adf-sidenav-layout-theme($custom-theme);
+    @include adf-sidenav-layout-theme($theme);
-    @include adf-document-list-theme($custom-theme);
+    @include adf-document-list-theme($theme);
-    @include adf-upload-drag-area-theme($custom-theme);
+    @include adf-upload-drag-area-theme($theme);
+    @include adf-search-sorting-picker-theme($theme);
 
-    @include aca-node-versions-dialog-theme($custom-theme);
+    @include aca-layout-theme($theme);
-    @include snackbar-theme($custom-theme);
+    @include aca-header-theme($theme);
-    @include sidenav-component-theme($custom-theme);
+    @include aca-search-input-theme($theme);
-    @include aca-about-component-theme($custom-theme);
+    @include aca-generic-error-theme($theme);
+    @include aca-node-versions-dialog-theme($theme);
+    @include aca-settings-theme($theme);
+    @include snackbar-theme($theme);
+    @include sidenav-component-theme($theme);
+    @include aca-about-component-theme($theme);
+    @include aca-current-user-theme($theme);
 }

src/app/ui/layout.scss

@@ -0,0 +1,55 @@
+@import 'mixins';
+
+@mixin aca-layout-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    $app-layout--header-height: 65px;
+    $app-layout--side-width: 320px;
+    $app-inner-layout--header-height: 48px;
+    $app-inner-layout--footer-height: 48px;
+    $alfresco-divider-color: mat-color($foreground, text, 0.07);
+    $alfresco-gray-background: #fafafa;
+
+    .layout {
+        @include flex-column;
+    }
+
+    .inner-layout {
+        @include flex-column;
+
+        &__header {
+            display: flex;
+            align-items: center;
+            flex: 0 0 $app-layout--header-height;
+            flex-basis: $app-inner-layout--header-height;
+            background: $alfresco-gray-background;
+            border-bottom: 1px solid $alfresco-divider-color;
+            padding: 0 24px;
+        }
+
+        &__content {
+            @include flex-row;
+        }
+
+        &__content--hide {
+            display: none !important;
+        }
+
+        &__panel {
+            @include flex-column;
+            border-right: 1px solid mat-color($foreground, text, 0.07);
+        }
+
+        &__side-panel {
+            display: block;
+            height: 100%;
+            overflow-y: scroll;
+            max-width: 350px;
+            width: 350px;
+        }
+    }
+
+    .content--scroll {
+        overflow: auto !important;
+    }
+}

src/app/ui/overrides/adf-search-sorting-picker.theme.scss

@@ -0,0 +1,9 @@
+@mixin adf-search-sorting-picker-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    .adf-search-sorting-picker {
+        .mat-icon-button {
+            color: mat-color($foreground, text, 0.54);
+        }
+    }
+}

src/assets/i18n/en.json

@@ -152,6 +152,7 @@
         },
         "MESSAGES": {
             "ERRORS":{
+                "MISSING_CONTENT": "This file / folder no longer exists or you don't have permission to view it.",
                 "GENERIC": "The action was unsuccessful. Try again or contact your IT Team.",
                 "CONFLICT": "This name is already in use, try a different name.",
                 "NODE_MOVE": "Move unsuccessful, a file with the same name already exists.",

tslint.json

@@ -127,7 +127,7 @@
     ],
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
+    "use-host-property-decorator": false,
     "no-input-rename": true,
     "no-output-rename": true,
     "use-life-cycle-interface": true,