fix(theme): fix cards background of blur theme

src/app/app.component.ts

@@ -2,6 +2,7 @@ import { Component, ViewContainerRef } from '@angular/core';
 
 import { GlobalState } from './global.state';
 import { BaImageLoaderService, BaThemePreloader, BaThemeSpinner } from './theme/services';
+import { BaThemeConfig } from './theme/theme.config';
 import { layoutPaths } from './theme/theme.constants';
 
 import 'style-loader!./app.scss';
@@ -27,7 +28,10 @@ export class App {
   constructor(private _state: GlobalState,
               private _imageLoader: BaImageLoaderService,
               private _spinner: BaThemeSpinner,
-              private viewContainerRef: ViewContainerRef) {
+              private viewContainerRef: ViewContainerRef,
+              private themeConfig: BaThemeConfig) {
+
+    themeConfig.config();
 
     this._loadImages();
 

src/app/theme/sass/conf/colorSchemes/_blur.scss

@@ -24,7 +24,7 @@ $progress-default: #ffffff;
 
 $bootstrap-panel-radius: 5px;
 $bootstrap-panel-text: #7d7d7d;
-$bootstrap-panel-bg: #ffffff;
+$bootstrap-panel-bg: rgba(255, 255, 255, 0.1);
 $bootstrap-panel-header-bg: $bootstrap-panel-bg;
 $bootstrap-panel-header-border: 1px solid rgba(0, 0, 0, 0.12);
 $bootstrap-panel-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);

src/app/theme/sass/conf/colorSchemes/_ng2.scss

@@ -13,7 +13,6 @@ $border-light: rgba(255, 255, 255, 0.3); // lighter version of border color (for
 $input-border: rgba(255, 255, 255, 0.6); // input border color
 $input-background: rgba(255, 255, 255, 0.1); // input border color for hover
 $dropdown-text: #7d7d7d; // dropdown text color
-$ckeditor-text: #333;
 
 // sidebar colors
 $sidebar: #282828;

src/app/theme/theme.config.ts

@@ -1,17 +1,17 @@
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
-import {BaThemeConfigProvider} from './theme.configProvider';
+
-import {colorHelper} from './theme.constants';
+import { BaThemeConfigProvider } from './theme.configProvider';
+import { colorHelper } from './theme.constants';
 
 @Injectable()
 export class BaThemeConfig {
 
-  constructor(private _baConfig:BaThemeConfigProvider) {
+  constructor(private _baConfig: BaThemeConfigProvider) {
-    this._config();
   }
 
-  private _config() {
+  config() {
-    // this._baConfig.changeTheme({name: 'my-theme'});
+    // this._baConfig.changeTheme({ name: 'my-theme' });
-
+    //
     // let colorScheme = {
     //   primary: '#209e91',
     //   info: '#2dacd1',
@@ -19,9 +19,10 @@ export class BaThemeConfig {
     //   warning: '#dfb81c',
     //   danger: '#e85656',
     // };
+    //
     // this._baConfig.changeColors({
     //   default: '#4e4e55',
-    //   defaultText: '#e2e2e2',
+    //   defaultText: '#aaaaaa',
     //   border: '#dddddd',
     //   borderDark: '#aaaaaa',
     //
@@ -50,6 +51,11 @@ export class BaThemeConfig {
     //     gossip: '#b9f2a1',
     //     white: '#10c4b5',
     //   },
+    //
+    //   custom: {
+    //     dashboardPieChart: colorHelper.hexToRgbA('#aaaaaa', 0.8),
+    //     dashboardLineChart: '#6eba8c',
+    //   },
     // });
   }
 }

src/app/theme/theme.configProvider.ts

@@ -1,11 +1,18 @@
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
-import {colorHelper} from './theme.constants';
 import * as _ from 'lodash';
 
+import { colorHelper } from './theme.constants';
+
 @Injectable()
 export class BaThemeConfigProvider {
 
-  basic = {
+  private basic: any;
+  private colorScheme: any;
+  private dashboardColors: any;
+  private conf: any;
+
+  constructor() {
+    this.basic = {
       default: '#ffffff',
       defaultText: '#ffffff',
       border: '#dddddd',
@@ -13,7 +20,7 @@ export class BaThemeConfigProvider {
     };
 
     // main functional color scheme
-  colorScheme = {
+    this.colorScheme = {
       primary: '#00abff',
       info: '#40daf1',
       success: '#8bd22f',
@@ -22,7 +29,7 @@ export class BaThemeConfigProvider {
     };
 
     // dashboard colors for charts
-  dashboardColors = {
+    this.dashboardColors = {
       blueStone: '#40daf1',
       surfieGreen: '#00abff',
       silverTree: '#1b70ef',
@@ -30,7 +37,7 @@ export class BaThemeConfigProvider {
       white: '#ffffff',
     };
 
-  conf = {
+    this.conf = {
       theme: {
         name: 'ng2',
       },
@@ -67,21 +74,22 @@ export class BaThemeConfigProvider {
         },
 
         custom: {
+          dashboardPieChart: colorHelper.hexToRgbA(this.basic.defaultText, 0.8),
           dashboardLineChart: this.basic.defaultText,
-        dashboardPieChart: colorHelper.hexToRgbA(this.basic.defaultText, 0.8)
         }
       }
     };
+  }
 
   get() {
     return this.conf;
   }
 
-  changeTheme (theme) {
+  changeTheme(theme: any) {
     _.merge(this.get().theme, theme);
   }
 
-  changeColors (colors) {
+  changeColors(colors: any) {
     _.merge(this.get().colors, colors);
   }
 }