From f0b6c1baa87e76ecc0b32f7fb793481dad7b68ed Mon Sep 17 00:00:00 2001
From: KostyaDanovsky <kostya.danovsky@gmail.com>
Date: Wed, 11 May 2016 11:52:26 +0300
Subject: [PATCH] fix(dashboard): move progress bar colors to variables

---
 .../dashboard/trafficChart/trafficChart.html  |  3 +-
 src/sass/app/_form.scss                       |  2 +-
 src/sass/theme/conf/_colorScheme.scss         |  2 +
 src/sass/theme/dashboard/_trafficChart.scss   | 38 ++++++++++---------
 4 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.html b/src/app/pages/dashboard/trafficChart/trafficChart.html
index 9af85ae..048f51b 100644
--- a/src/app/pages/dashboard/trafficChart/trafficChart.html
+++ b/src/app/pages/dashboard/trafficChart/trafficChart.html
@@ -1,5 +1,4 @@
-<div class="channels-block">
-
+<div class="channels-block transparent">
   <div class="chart-bg"></div>
   <div class="traffic-chart" id="trafficChart">
     <div class="canvas-holder">
diff --git a/src/sass/app/_form.scss b/src/sass/app/_form.scss
index 48976f6..f0cf9d2 100644
--- a/src/sass/app/_form.scss
+++ b/src/sass/app/_form.scss
@@ -504,7 +504,7 @@ label.custom-input-danger {
 }
 
 .progress {
-  background: rgba(black, 0.15);
+  background: $progress-background;
 }
 
 .progress-bar-primary {
diff --git a/src/sass/theme/conf/_colorScheme.scss b/src/sass/theme/conf/_colorScheme.scss
index 1a634fc..bca0adf 100644
--- a/src/sass/theme/conf/_colorScheme.scss
+++ b/src/sass/theme/conf/_colorScheme.scss
@@ -18,6 +18,8 @@ $bootstrap-panel-text: #7d7d7d;
 $bootstrap-panel-bg: #ffffff;
 $mail-box: whitesmoke;
 $auth-panel-background: rgba(#000000, 0.55);
+$progress-background: rgba(#000000, 0.15);
+$progress-default: #ffffff;
 
 $primary: #209e91 !default;
 $info: #2dacd1 !default;
diff --git a/src/sass/theme/dashboard/_trafficChart.scss b/src/sass/theme/dashboard/_trafficChart.scss
index de0e83c..7ad78fc 100644
--- a/src/sass/theme/dashboard/_trafficChart.scss
+++ b/src/sass/theme/dashboard/_trafficChart.scss
@@ -3,6 +3,24 @@
   position: relative;
 }
 
+.channels-block.transparent {
+  .traffic-chart canvas{
+    border: 10px solid rgba(0,0,0,0.35);
+    box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
+    border-radius: 150px;
+  }
+
+  .chart-bg{
+    position: absolute;
+    width: 180px;
+    height: 180px;
+    left: 60px;
+    top: 60px;
+    background-color: rgba(0,0,0,0.35);
+    border-radius: 100px;
+  }
+}
+
 .channels-info {
   display: inline-block;
   width: calc(100% - 370px);
@@ -97,11 +115,11 @@
   border-radius: 0;
   width: 100%;
   margin-bottom: 0;
-  background-color: rgba(0, 0, 0, 0.25);
+  background-color: $progress-background;
   box-shadow: none;
   .progress-bar{
     height: 4px;
-    background-color: $default-text;
+    background-color: $progress-default;
     box-shadow: none;
   }
 }
@@ -116,22 +134,6 @@
   left: -45px;
 }
 
-.traffic-chart canvas{
-  border: 10px solid rgba(0,0,0,0.35);
-  box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
-  border-radius: 150px;
-}
-
-.chart-bg{
-  position: absolute;
-  width: 180px;
-  height: 180px;
-  left: 60px;
-  top: 60px;
-  background-color: rgba(0,0,0,0.35);
-  border-radius: 100px;
-}
-
 @media (max-width: $resM) {
   div.channels-info{
     display: block;