refractor(theme): set the theme from login and update default theme to (#128)

denim-yellowgreen

Set the theme from the login page itself if present in local storage and
update default theme to denim-yellowgreen (based on logo of Mifos).

Fixes #127

src/app/core/shell/toolbar/theme-picker/theme-picker.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 
 import { Theme } from './theme.model';
-import { ThemeManagerService } from './theme-manager.service';
 import { ThemeStorageService } from './theme-storage.service';
 
 @Component({
@@ -13,21 +12,33 @@ import { ThemeStorageService } from './theme-storage.service';
 export class ThemePickerComponent implements OnInit {
 
   currentTheme: Theme = {
-    href: 'indigo-pink.css',
+    href: 'denim-yellowgreen.css',
-    primary: '#3F51B5',
+    primary: '#1074B9',
-    accent: '#E91E63',
+    accent: '#B4D575',
     isDark: false,
     isDefault: true
   };
   themes = [
     this.currentTheme,
+    {
+      href: 'pictonblue-yellowgreen.css',
+      primary: '#1DAEEC',
+      accent: '#B4D575',
+      isDark: false
+    },
+    {
+      href: 'indigo-pink.css',
+      primary: '#3F51B5',
+      accent: '#E91E63',
+      isDark: false,
+    },
     {
       href: 'deeppurple-amber.css',
       primary: '#673AB7',
       accent: '#FFC107',
       isDark: false
     },
-    {
+    { // TODO: Remove Dark Themes
       href: 'pink-bluegrey.css',
       primary: '#E91E63',
       accent: '#607D8B',
@@ -38,41 +49,21 @@ export class ThemePickerComponent implements OnInit {
       primary: '#9C27B0',
       accent: '#4CAF50',
       isDark: true
-    },
-    {
-      href: 'denim-yellowgreen.css',
-      primary: '#1074B9',
-      accent: '#B4D575',
-      isDark: false
-    },
-    {
-      href: 'pictonblue-yellowgreen.css',
-      primary: '#1DAEEC',
-      accent: '#B4D575',
-      isDark: false
     }
   ];
 
-  constructor(public themeManagerService: ThemeManagerService,
+  constructor(public themeStorageService: ThemeStorageService) {  }
-              private themeStorageService: ThemeStorageService) {
+
+  ngOnInit() {
     const theme = this.themeStorageService.getTheme();
-    if (theme) {
-      this.installTheme(theme);
-    }
-  }
-
-  ngOnInit() { }
-
-  installTheme(theme: Theme) {
     if (theme) {
       this.currentTheme = theme;
     }
-    if (this.currentTheme.isDefault) {
+  }
-      this.themeManagerService.removeTheme();
+
-    } else {
+  installTheme(theme: Theme) {
-      this.themeManagerService.setTheme(`theme/${this.currentTheme.href}`);
+    this.currentTheme = theme;
-    }
+    this.themeStorageService.installTheme(theme);
-    this.themeStorageService.storeTheme(this.currentTheme);
   }
 
 }

src/app/core/shell/toolbar/theme-picker/theme-storage.service.ts

@@ -1,6 +1,7 @@
 import {Injectable, EventEmitter} from '@angular/core';
 
 import { Theme } from './theme.model';
+import { ThemeManagerService } from './theme-manager.service';
 
 @Injectable({
   providedIn: 'root'
@@ -10,7 +11,7 @@ export class ThemeStorageService {
   private themeStorageKey = 'mifosXTheme';
   onThemeUpdate: EventEmitter<Theme>;
 
-  constructor() {
+  constructor(public themeManagerService: ThemeManagerService) {
     this.onThemeUpdate = new EventEmitter<Theme>();
   }
 
@@ -27,4 +28,13 @@ export class ThemeStorageService {
     localStorage.removeItem(this.themeStorageKey);
   }
 
+  installTheme(theme: Theme) {
+    if (theme.isDefault) {
+      this.themeManagerService.removeTheme();
+    } else {
+      this.themeManagerService.setTheme(`theme/${theme.href}`);
+    }
+    this.storeTheme(theme);
+  }
+
 }

src/app/web-app.component.ts

@@ -9,6 +9,7 @@ import { filter, map, mergeMap } from 'rxjs/operators';
 
 import { environment } from '../environments/environment';
 import { Logger, I18nService } from './core';
+import { ThemeStorageService } from './core/shell/toolbar/theme-picker/theme-storage.service';
 import { AlertService } from './core/alert.service';
 
 const log = new Logger('MifosX');
@@ -25,6 +26,7 @@ export class WebAppComponent implements OnInit {
               private titleService: Title,
               private translateService: TranslateService,
               private i18nService: I18nService,
+              private themeStorageService: ThemeStorageService,
               public snackBar: MatSnackBar,
               private alertService: AlertService) { }
 
@@ -61,6 +63,11 @@ export class WebAppComponent implements OnInit {
         }
       });
 
+    const theme = this.themeStorageService.getTheme();
+    if (theme) {
+      this.themeStorageService.installTheme(theme);
+    }
+
     this.alertService.alertEvent.subscribe((alertEvent: any) => {
       this.snackBar.open(`${alertEvent.message}`, 'Close', {
         duration: 2000,

src/main.scss

@@ -4,7 +4,7 @@
  */
 
 // Import Default Theme for MifosX
-@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+@import "theme/custom/denim-yellowgreen";
 
 // 3rd party libraries