[ACA-2123] Change header colors (#1376)

* [ACA-2123] Change header colors

* [ACA-2123] Update initial state to meet new header background-color

docs/getting-started/configuration.md

@@ -100,7 +100,7 @@ You can change the header background color by specifying the color code for the
 ```json
 {
     ...,
-    "headerColor": "#1565c0"
+    "headerColor": "#ffffff"
 }
 ```
 

docs/ja/getting-started/configuration.md

@@ -100,7 +100,7 @@ Alfresco コンテンツアプリケーションの左上隅に表示される
 ```json
 {
     ...,
-    "headerColor": "#1565c0"
+    "headerColor": "#ffffff"
 }
 ```
 

src/app.config.json

@@ -25,7 +25,7 @@
   },
   "viewer.maxRetries": 1,
   "sharedLinkDateTimePickerType": "date",
-  "headerColor": "#1565c0",
+  "headerColor": "#ffffff",
   "languagePicker": true,
   "processServices": true,
   "pagination": {

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

@@ -0,0 +1,23 @@
+@mixin app-header-theme($theme) {
+  $foreground: map-get($theme, foreground);
+
+  .adf-app-title {
+    color: mat-color($foreground, text, 0.72);
+  }
+
+  .adf-menu-icon {
+    color: mat-color($foreground, text, 0.72) !important;
+  }
+
+  .aca-current-user {
+    color: mat-color($foreground, text, 0.72) !important;
+  }
+
+  .adf-toolbar-divider div {
+    background-color: mat-color($foreground, text, 0.72) !important;
+  }
+
+  .app-toolbar-menu {
+    color: mat-color($foreground, text, 0.72) !important;
+  }
+}

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

@@ -45,6 +45,7 @@ import {
 @Component({
   selector: 'app-header',
   templateUrl: 'header.component.html',
+  styleUrls: ['header.component.scss'],
   encapsulation: ViewEncapsulation.None,
   host: { class: 'app-header' }
 })

src/app/components/layout/layout.theme.scss

@@ -1,5 +1,7 @@
 @import './app-layout/app-layout.theme.scss';
+@import './app/components/header/header.component.scss';
 
 @mixin layout-theme($theme) {
   @include app-layout-theme($theme);
+  @include app-header-theme($theme);
 }

src/app/store/initial-state.ts

@@ -27,7 +27,7 @@ import { AppState, AppStore } from '@alfresco/aca-shared/store';
 
 export const INITIAL_APP_STATE: AppState = {
   appName: 'Alfresco Content Application',
-  headerColor: '#1565c0',
+  headerColor: '#ffffff',
   logoPath: 'assets/images/alfresco-logo-white.svg',
   languagePicker: false,
   sharedUrl: '',