From 1dac44f25349138bbc3792ba363d79540d82297b Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Mon, 16 May 2016 18:46:23 +0300
Subject: [PATCH] traffic and popular app components style fixes

---
 .../dashboard/popularApp/popularApp.html      | 43 ++++-----
 .../dashboard/popularApp/popularApp.scss      |  4 +-
 .../trafficChart/trafficChart.component.ts    |  2 +
 .../dashboard/trafficChart/trafficChart.html  |  2 +-
 .../trafficChart/trafficChart.service.ts      | 88 ++++++++++---------
 5 files changed, 75 insertions(+), 64 deletions(-)

diff --git a/src/app/pages/dashboard/popularApp/popularApp.html b/src/app/pages/dashboard/popularApp/popularApp.html
index d2d48da1..d0957863 100644
--- a/src/app/pages/dashboard/popularApp/popularApp.html
+++ b/src/app/pages/dashboard/popularApp/popularApp.html
@@ -1,25 +1,28 @@
-<div class="popular-app-img">
-    <img src="{{ ('app/my-app-logo.png' | appPicture ) }}"/>
+<div class="popular-app-img-container">
+  <div class="popular-app-img">
+    <img src="{{ ( 'app/my-app-logo.png' | appPicture ) }}"/>
+    <span class="logo-text">Super&nbsp;App</span>
+  </div>
 </div>
 <div class="popular-app-cost row">
-    <div class="col-xs-9">
-        Most Popular App
-    </div>
-    <div class="col-xs-3 text-right">
-        175$
-    </div>
+  <div class="col-xs-9">
+    Most Popular App
+  </div>
+  <div class="col-xs-3 text-right">
+    175$
+  </div>
 </div>
 <div class="popular-app-info row">
-    <div class="col-xs-4 text-left">
-        <div class="info-label">Total Visits</div>
-        <div>47,512</div>
-    </div>
-    <div class="col-xs-4 text-center">
-        <div class="info-label">New Visits</div>
-        <div>9,217</div>
-    </div>
-    <div class="col-xs-4 text-right">
-        <div class="info-label">Sales</div>
-        <div>2,928</div>
-    </div>
+  <div class="col-xs-4 text-left">
+    <div class="info-label">Total Visits</div>
+    <div>47,512</div>
+  </div>
+  <div class="col-xs-4 text-center">
+    <div class="info-label">New Visits</div>
+    <div>9,217</div>
+  </div>
+  <div class="col-xs-4 text-right">
+    <div class="info-label">Sales</div>
+    <div>2,928</div>
+  </div>
 </div>
diff --git a/src/app/pages/dashboard/popularApp/popularApp.scss b/src/app/pages/dashboard/popularApp/popularApp.scss
index 241870ff..b27ef785 100644
--- a/src/app/pages/dashboard/popularApp/popularApp.scss
+++ b/src/app/pages/dashboard/popularApp/popularApp.scss
@@ -1,7 +1,7 @@
 @import "../../../theme/sass/conf/conf";
 
-.panel.popular-app {
-  &>.panel-body {
+.card.popular-app {
+  &>.card-body {
     padding: 0;
   }
 
diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.component.ts b/src/app/pages/dashboard/trafficChart/trafficChart.component.ts
index 618855d1..6f484652 100644
--- a/src/app/pages/dashboard/trafficChart/trafficChart.component.ts
+++ b/src/app/pages/dashboard/trafficChart/trafficChart.component.ts
@@ -15,9 +15,11 @@ import {TrafficChartService} from './trafficChart.service';
 export class TrafficChart {
 
   public doughnutData: Array<Object>;
+  public transparent:boolean = false;
 
   constructor(private trafficChartService:TrafficChartService) {
     this.doughnutData = trafficChartService.getData();
+    this.transparent = trafficChartService.getTransparent();
   }
 
   ngAfterViewInit() {
diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.html b/src/app/pages/dashboard/trafficChart/trafficChart.html
index 3b5f55ec..82a0ec70 100644
--- a/src/app/pages/dashboard/trafficChart/trafficChart.html
+++ b/src/app/pages/dashboard/trafficChart/trafficChart.html
@@ -1,4 +1,4 @@
-<div class="channels-block">
+<div class="channels-block" [ngClass]="{'transparent': transparent}">
 
   <div class="chart-bg"></div>
   <div class="traffic-chart" id="trafficChart">
diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.service.ts b/src/app/pages/dashboard/trafficChart/trafficChart.service.ts
index b30e1cf3..8c1aeb5b 100644
--- a/src/app/pages/dashboard/trafficChart/trafficChart.service.ts
+++ b/src/app/pages/dashboard/trafficChart/trafficChart.service.ts
@@ -1,50 +1,56 @@
 import {Injectable} from '@angular/core';
-import {layoutColors} from '../../../theme';
+import {BaThemeConfigProvider, colorHelper} from '../../../theme';
 
 @Injectable()
 export class TrafficChartService {
 
-  private _palette = layoutColors.bgColorPalette;
-  private _data = [
-    {
-      value: 1000,
-      color: this._palette.gossip,
-      highlight: this._palette.gossipDark,
-      label: 'Ad Campaigns',
-      percentage: 17,
-      order: 0,
-    },{
-      value: 1400,
-      color: this._palette.white,
-      highlight: this._palette.whiteDark,
-      label: 'Other',
-      percentage: 87,
-      order: 1,
-    }, {
-      value: 1500,
-      color: this._palette.blueStone,
-      highlight: this._palette.blueStoneDark,
-      label: 'Search engines',
-      percentage: 22,
-      order: 4,
-    }, {
-      value: 1000,
-      color: this._palette.surfieGreen,
-      highlight: this._palette.surfieGreenDark,
-      label: 'Referral Traffic',
-      percentage: 70,
-      order: 3,
-    }, {
-      value: 1200,
-      color: this._palette.silverTree,
-      highlight: this._palette.silverTreeDark,
-      label: 'Direct Traffic',
-      percentage: 38,
-      order: 2,
-    },
-  ];
+  constructor(private _baConfig:BaThemeConfigProvider) {
+  }
+
 
   getData() {
-    return this._data;
+    let dashboardColors = this._baConfig.get().colors.dashboard;
+    return [
+      {
+        value: 2000,
+        color: dashboardColors.white,
+        highlight: colorHelper.shade(dashboardColors.white, 15),
+        label: 'Other',
+        percentage: 87,
+        order: 1,
+      }, {
+        value: 1500,
+        color: dashboardColors.blueStone,
+        highlight: colorHelper.shade(dashboardColors.blueStone, 15),
+        label: 'Search engines',
+        percentage: 22,
+        order: 4,
+      }, {
+        value: 1000,
+        color: dashboardColors.surfieGreen,
+        highlight: colorHelper.shade(dashboardColors.surfieGreen, 15),
+        label: 'Referral Traffic',
+        percentage: 70,
+        order: 3,
+      }, {
+        value: 1200,
+        color: dashboardColors.silverTree,
+        highlight: colorHelper.shade(dashboardColors.silverTree, 15),
+        label: 'Direct Traffic',
+        percentage: 38,
+        order: 2,
+      }, {
+        value: 400,
+        color: dashboardColors.gossip,
+        highlight: colorHelper.shade(dashboardColors.gossip, 15),
+        label: 'Ad Campaigns',
+        percentage: 17,
+        order: 0,
+      },
+    ];
+  }
+
+  getTransparent() {
+    return this._baConfig.get().theme.blur;
   }
 }