[AAE-6057] Customize text color in the header (#2326)

* [AAE-6057] Customize text color in the header

* [AAE-6057] use css vars

* [AAE-6057] added tests

* [AAE-6057] clear code

* [AAE-6057] quick fix

* [AAE-6057] update css so they wark nicly with new --adf-header-text-color

projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.scss

@@ -1,4 +1,7 @@
 .aca-toolbar-action {
-  color: var(--theme-foreground-text-color);
   margin: 0 5px;
+
+  adf-userinfo {
+    color: var(--theme-foreground-text-color);
+  }
 }

projects/aca-shared/store/src/selectors/app.selectors.ts

@@ -29,6 +29,7 @@ import { createSelector } from '@ngrx/store';
 export const selectApp = (state: AppStore) => state.app;
 
 export const getHeaderColor = createSelector(selectApp, (state) => state.headerColor);
+export const getHeaderTextColor = createSelector(selectApp, (state) => state.headerTextColor);
 export const getAppName = createSelector(selectApp, (state) => state.appName);
 export const getLogoPath = createSelector(selectApp, (state) => state.logoPath);
 export const getHeaderImagePath = createSelector(selectApp, (state) => state.headerImagePath);

projects/aca-shared/store/src/states/app.state.ts

@@ -29,6 +29,7 @@ import { RepositoryInfo, VersionEntry } from '@alfresco/js-api';
 export interface AppState {
   appName: string;
   headerColor: string;
+  headerTextColor: string;
   logoPath: string;
   headerImagePath: string;
   sharedUrl: string;

src/app.config.json

@@ -29,6 +29,7 @@
   "viewer.maxRetries": 1,
   "sharedLinkDateTimePickerType": "date",
   "headerColor": "#ffffff",
+  "headerTextColor": "#000000",
   "pagination": {
     "size": 25,
     "supportedPageSizes": [25, 50, 100]

src/app/app.component.ts

@@ -161,6 +161,7 @@ export class AppComponent implements OnInit, OnDestroy {
       ...INITIAL_APP_STATE,
       appName: this.config.get<string>('application.name'),
       headerColor: this.config.get<string>('headerColor'),
+      headerTextColor: this.config.get<string>('headerTextColor', '#000000'),
       logoPath: this.config.get<string>('application.logo'),
       headerImagePath: this.config.get<string>('application.headerImagePath'),
       sharedUrl: baseShareUrl

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

@@ -6,14 +6,6 @@
     background-image: var(--header-background-image) !important;
     background-repeat: no-repeat !important;
 
-    .adf-app-title {
-      color: var(--theme-foreground-text-color);
-    }
-
-    .adf-menu-icon {
-      color: var(--theme-foreground-text-color) !important;
-    }
-
     .aca-current-user {
       color: var(--theme-foreground-text-color) !important;
     }
@@ -21,9 +13,5 @@
     .adf-toolbar-divider div {
       background-color: var(--theme-foreground-text-color) !important;
     }
-
-    .app-toolbar-menu {
-      color: var(--theme-foreground-text-color) !important;
-    }
   }
 }

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

@@ -54,6 +54,7 @@ describe('AppHeaderComponent', () => {
 
   const app = {
     headerColor: 'some-color',
+    headerTextColor: 'text-color',
     appName: 'name',
     logoPath: 'some/path'
   } as AppState;
@@ -82,10 +83,11 @@ describe('AppHeaderComponent', () => {
     component = fixture.componentInstance;
   });
 
-  it('should set header color, name and logo', fakeAsync(() => {
+  it('should set header color, header text color, name and logo', fakeAsync(() => {
     component.appName$.subscribe((val) => expect(val).toBe(app.appName));
     component.logo$.subscribe((val) => expect(val).toBe(app.logoPath));
     component.headerColor$.subscribe((val) => expect(val).toBe(app.headerColor));
+    component.headerTextColor$.subscribe((val) => expect(val).toBe(app.headerTextColor));
   }));
 
   it('should get header actions', fakeAsync(() => {

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

@@ -27,7 +27,7 @@ import { Component, ViewEncapsulation, Output, EventEmitter, OnInit, Input, OnDe
 import { Store } from '@ngrx/store';
 import { Observable, Subject } from 'rxjs';
 import { ContentActionRef } from '@alfresco/adf-extensions';
-import { AppStore, getHeaderColor, getAppName, getLogoPath, getHeaderImagePath } from '@alfresco/aca-shared/store';
+import { AppStore, getHeaderColor, getAppName, getLogoPath, getHeaderImagePath, getHeaderTextColor } from '@alfresco/aca-shared/store';
 import { AppExtensionService } from '@alfresco/aca-shared';
 import { takeUntil } from 'rxjs/operators';
 
@@ -47,12 +47,14 @@ export class AppHeaderComponent implements OnInit, OnDestroy {
 
   appName$: Observable<string>;
   headerColor$: Observable<any>;
+  headerTextColor$: Observable<string>;
   logo$: Observable<string>;
 
   actions: Array<ContentActionRef> = [];
 
   constructor(store: Store<AppStore>, private appExtensions: AppExtensionService) {
     this.headerColor$ = store.select(getHeaderColor);
+    this.headerTextColor$ = store.select(getHeaderTextColor);
     this.appName$ = store.select(getAppName);
     this.logo$ = store.select(getLogoPath);
 
@@ -68,6 +70,10 @@ export class AppHeaderComponent implements OnInit, OnDestroy {
       .subscribe((actions) => {
         this.actions = actions;
       });
+
+    this.headerTextColor$.subscribe((color) => {
+      document.documentElement.style.setProperty('--adf-header-text-color', color);
+    });
   }
 
   ngOnDestroy() {

src/app/store/initial-state.ts

@@ -28,6 +28,7 @@ import { AppState, AppStore } from '@alfresco/aca-shared/store';
 export const INITIAL_APP_STATE: AppState = {
   appName: 'Alfresco Content Application',
   headerColor: '#ffffff',
+  headerTextColor: '#000000',
   logoPath: 'assets/images/alfresco-logo-white.svg',
   headerImagePath: 'assets/images/mastHead-bg-shapesPattern.svg',
   sharedUrl: '',