From 116f35f9aa2460dee762264667306353f948b313 Mon Sep 17 00:00:00 2001
From: Gabriel Rodriguez Alsina <gabriel.rodriguez@altoros.com>
Date: Thu, 18 Apr 2019 08:14:08 -0300
Subject: [PATCH] (update) home chart line colors

---
 apps/block_scout_web/assets/css/app.scss           |  3 +++
 .../assets/css/components/_dashboard-banner.scss   |  5 +++--
 .../assets/css/theme/_posdao_variables.scss        |  1 -
 .../assets/js/lib/market_history_chart.js          | 14 +++++++++-----
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss
index 09dffd6bab..e1c51b7152 100644
--- a/apps/block_scout_web/assets/css/app.scss
+++ b/apps/block_scout_web/assets/css/app.scss
@@ -121,4 +121,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 :export {
   primary: $primary;
   secondary: $secondary;
+  dashboardLineColorMarket: $dashboard-line-color-market;
+  dashboardLineColorPrice: $dashboard-line-color-price;
+  dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color;
 }
diff --git a/apps/block_scout_web/assets/css/components/_dashboard-banner.scss b/apps/block_scout_web/assets/css/components/_dashboard-banner.scss
index a9fe060a29..7735f3a2f5 100644
--- a/apps/block_scout_web/assets/css/components/_dashboard-banner.scss
+++ b/apps/block_scout_web/assets/css/components/_dashboard-banner.scss
@@ -4,7 +4,7 @@ $dashboard-banner-gradient-end: lighten(
   5%
 ) !default;
 $dashboard-banner-network-plain-container-background-color: lighten($dashboard-banner-gradient-end, 5%)!default;
-$dashboard-line-color-price: $primary !default;
+$dashboard-line-color-price: lighten($dashboard-banner-gradient-end, 5%) !default;
 $dashboard-line-color-market: $secondary !default;
 $dashboard-stats-item-label-color: #fff !default;
 $dashboard-stats-item-value-color: rgba(#fff, 0.8) !default;
@@ -14,6 +14,7 @@ $dashboard-stats-item-border-color: $primary !default;
 $dashboard-banner-network-stats-static-image: false !default;
 $dashboard-banner-network-stats-static-image-height: 150px !default;
 $dashboard-banner-network-plain-container-height: 205px;
+$dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !default;
 
 .dashboard-banner-container {
   @include gradient-container();
@@ -58,7 +59,7 @@ $dashboard-banner-network-plain-container-height: 205px;
 
 .dashboard-banner-chart {
   flex-grow: 1;
-  margin: 0 0 40px 0;
+  margin: 0 0 35px 0;
   max-width: 350px;
   position: relative;
 
diff --git a/apps/block_scout_web/assets/css/theme/_posdao_variables.scss b/apps/block_scout_web/assets/css/theme/_posdao_variables.scss
index bab40643e9..9d92ca2adc 100644
--- a/apps/block_scout_web/assets/css/theme/_posdao_variables.scss
+++ b/apps/block_scout_web/assets/css/theme/_posdao_variables.scss
@@ -6,7 +6,6 @@ $header-links-color-active: #333;
 $dashboard-banner-gradient-start: $secondary;
 $dashboard-banner-gradient-end: #1e4168;
 
-$dashboard-line-color-price: $secondary;
 $dashboard-line-color-market: $primary;
 
 $tile-type-block-border-color: $secondary;
diff --git a/apps/block_scout_web/assets/js/lib/market_history_chart.js b/apps/block_scout_web/assets/js/lib/market_history_chart.js
index a54ac50935..615f888d8a 100644
--- a/apps/block_scout_web/assets/js/lib/market_history_chart.js
+++ b/apps/block_scout_web/assets/js/lib/market_history_chart.js
@@ -25,6 +25,9 @@ const config = {
         time: {
           unit: 'day',
           stepSize: 14
+        },
+        ticks: {
+          fontColor: sassVariables.dashboardBannerChartAxisFontColor
         }
       }],
       yAxes: [{
@@ -36,7 +39,8 @@ const config = {
         ticks: {
           beginAtZero: true,
           callback: (value, index, values) => `$${numeral(value).format('0,0.00')}`,
-          maxTicksLimit: 4
+          maxTicksLimit: 4,
+          fontColor: sassVariables.dashboardBannerChartAxisFontColor
         }
       }, {
         id: 'marketCap',
@@ -91,8 +95,8 @@ class MarketHistoryChart {
       data: getPriceData(marketHistoryData),
       fill: false,
       pointRadius: 0,
-      backgroundColor: sassVariables.primary,
-      borderColor: sassVariables.primary,
+      backgroundColor: sassVariables.dashboardLineColorPrice,
+      borderColor: sassVariables.dashboardLineColorPrice,
       lineTension: 0
     }
     this.marketCap = {
@@ -101,8 +105,8 @@ class MarketHistoryChart {
       data: getMarketCapData(marketHistoryData, availableSupply),
       fill: false,
       pointRadius: 0,
-      backgroundColor: sassVariables.secondary,
-      borderColor: sassVariables.secondary,
+      backgroundColor: sassVariables.dashboardLineColorMarket,
+      borderColor: sassVariables.dashboardLineColorMarket,
       lineTension: 0
     }
     this.availableSupply = availableSupply