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,87 +1,95 @@
-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;
-    default: '#ffffff',
+  private colorScheme: any;
-    defaultText: '#ffffff',
+  private dashboardColors: any;
-    border: '#dddddd',
+  private conf: any;
-    borderDark: '#aaaaaa',
-  };
 
-  // main functional color scheme
+  constructor() {
-  colorScheme = {
+    this.basic = {
-    primary: '#00abff',
+      default: '#ffffff',
-    info: '#40daf1',
+      defaultText: '#ffffff',
-    success: '#8bd22f',
+      border: '#dddddd',
-    warning: '#e7ba08',
+      borderDark: '#aaaaaa',
-    danger: '#f95372',
+    };
-  };
 
-  // dashboard colors for charts
+    // main functional color scheme
-  dashboardColors = {
+    this.colorScheme = {
-    blueStone: '#40daf1',
+      primary: '#00abff',
-    surfieGreen: '#00abff',
+      info: '#40daf1',
-    silverTree: '#1b70ef',
+      success: '#8bd22f',
-    gossip: '#3c4eb9',
+      warning: '#e7ba08',
-    white: '#ffffff',
+      danger: '#f95372',
-  };
+    };
 
-  conf = {
+    // dashboard colors for charts
-    theme: {
+    this.dashboardColors = {
-      name: 'ng2',
+      blueStone: '#40daf1',
-    },
+      surfieGreen: '#00abff',
-    colors: {
+      silverTree: '#1b70ef',
-      default: this.basic.default,
+      gossip: '#3c4eb9',
-      defaultText: this.basic.defaultText,
+      white: '#ffffff',
-      border: this.basic.border,
+    };
-      borderDark: this.basic.borderDark,
 
-      primary: this.colorScheme.primary,
+    this.conf = {
-      info: this.colorScheme.info,
+      theme: {
-      success: this.colorScheme.success,
+        name: 'ng2',
-      warning: this.colorScheme.warning,
-      danger: this.colorScheme.danger,
-
-      primaryLight: colorHelper.tint(this.colorScheme.primary, 30),
-      infoLight: colorHelper.tint(this.colorScheme.info, 30),
-      successLight: colorHelper.tint(this.colorScheme.success, 30),
-      warningLight: colorHelper.tint(this.colorScheme.warning, 30),
-      dangerLight: colorHelper.tint(this.colorScheme.danger, 30),
-
-      primaryDark: colorHelper.shade(this.colorScheme.primary, 15),
-      infoDark: colorHelper.shade(this.colorScheme.info, 15),
-      successDark: colorHelper.shade(this.colorScheme.success, 15),
-      warningDark: colorHelper.shade(this.colorScheme.warning, 15),
-      dangerDark: colorHelper.shade(this.colorScheme.danger, 15),
-
-      dashboard: {
-        blueStone: this.dashboardColors.blueStone,
-        surfieGreen: this.dashboardColors.surfieGreen,
-        silverTree: this.dashboardColors.silverTree,
-        gossip: this.dashboardColors.gossip,
-        white: this.dashboardColors.white,
       },
+      colors: {
+        default: this.basic.default,
+        defaultText: this.basic.defaultText,
+        border: this.basic.border,
+        borderDark: this.basic.borderDark,
 
-      custom: {
+        primary: this.colorScheme.primary,
-        dashboardLineChart: this.basic.defaultText,
+        info: this.colorScheme.info,
-        dashboardPieChart: colorHelper.hexToRgbA(this.basic.defaultText, 0.8)
+        success: this.colorScheme.success,
+        warning: this.colorScheme.warning,
+        danger: this.colorScheme.danger,
+
+        primaryLight: colorHelper.tint(this.colorScheme.primary, 30),
+        infoLight: colorHelper.tint(this.colorScheme.info, 30),
+        successLight: colorHelper.tint(this.colorScheme.success, 30),
+        warningLight: colorHelper.tint(this.colorScheme.warning, 30),
+        dangerLight: colorHelper.tint(this.colorScheme.danger, 30),
+
+        primaryDark: colorHelper.shade(this.colorScheme.primary, 15),
+        infoDark: colorHelper.shade(this.colorScheme.info, 15),
+        successDark: colorHelper.shade(this.colorScheme.success, 15),
+        warningDark: colorHelper.shade(this.colorScheme.warning, 15),
+        dangerDark: colorHelper.shade(this.colorScheme.danger, 15),
+
+        dashboard: {
+          blueStone: this.dashboardColors.blueStone,
+          surfieGreen: this.dashboardColors.surfieGreen,
+          silverTree: this.dashboardColors.silverTree,
+          gossip: this.dashboardColors.gossip,
+          white: this.dashboardColors.white,
+        },
+
+        custom: {
+          dashboardPieChart: colorHelper.hexToRgbA(this.basic.defaultText, 0.8),
+          dashboardLineChart: this.basic.defaultText,
+        }
       }
-    }
+    };
-  };
+  }
 
   get() {
     return this.conf;
   }
 
-  changeTheme (theme) {
+  changeTheme(theme: any) {
     _.merge(this.get().theme, theme);
   }
 
-  changeColors (colors) {
+  changeColors(colors: any) {
     _.merge(this.get().colors, colors);
   }
 }