From 07e2a9af065e7888f117deab755d86e5e2db24a4 Mon Sep 17 00:00:00 2001
From: Tome Boshevski <tome@storj.io>
Date: Thu, 9 Nov 2023 13:30:27 -0600
Subject: [PATCH] web/satellite: update charts styling

This change updates the styling of the satellite UI dashboard charts
to prepare for V2.

Change-Id: Ic329963a6b825e3e4aaecab0696080a152a41c5f
---
 .../components/project/dashboard/BandwidthChart.vue | 13 +++++++------
 .../components/project/dashboard/StorageChart.vue   | 13 +++++++------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/web/satellite/src/components/project/dashboard/BandwidthChart.vue b/web/satellite/src/components/project/dashboard/BandwidthChart.vue
index 4906feefb..95c4298e8 100644
--- a/web/satellite/src/components/project/dashboard/BandwidthChart.vue
+++ b/web/satellite/src/components/project/dashboard/BandwidthChart.vue
@@ -50,10 +50,10 @@ const chartData = computed((): ChartData => {
         datasets: [{
             data,
             fill: true,
-            backgroundColor: '#929fb110',
-            borderColor: '#929fb1',
+            backgroundColor: '#c3c3c310',
+            borderColor: '#c3c3c3',
             pointHoverBackgroundColor: '#FFFFFF',
-            pointBorderColor: '#929fb1',
+            pointBorderColor: '#c3c3c3',
             pointHoverBorderWidth: 3,
             hoverRadius: 8,
             hitRadius: 3,
@@ -108,13 +108,14 @@ watch(() => props.width, () => {
         display: flex;
         flex-direction: column;
         align-items: center;
-        background-color: #929fb1;
+        background-color: #e4e4e4;
+        box-shadow: rgb(0 0 0 / 3%) 0 1px 10px 10px !important;
 
         &__value {
             font-size: 14px;
             line-height: 26px;
             text-align: center;
-            color: var(--c-white);
+            color: #444;
             white-space: nowrap;
 
             &__bold {
@@ -128,7 +129,7 @@ watch(() => props.width, () => {
             border-radius: 8px 0 0;
             transform: scale(1, 0.85) translate(0, 20%) rotate(45deg);
             margin-bottom: -4px;
-            background-color: #929fb1;
+            background-color: #e4e4e4;
         }
     }
 </style>
diff --git a/web/satellite/src/components/project/dashboard/StorageChart.vue b/web/satellite/src/components/project/dashboard/StorageChart.vue
index d7a79fcb9..3eb041fb0 100644
--- a/web/satellite/src/components/project/dashboard/StorageChart.vue
+++ b/web/satellite/src/components/project/dashboard/StorageChart.vue
@@ -50,10 +50,10 @@ const chartData = computed((): ChartData => {
         datasets: [{
             data,
             fill: true,
-            backgroundColor: '#929fb110',
-            borderColor: '#929fb1',
+            backgroundColor: '#c3c3c310',
+            borderColor: '#c3c3c3',
             pointHoverBackgroundColor: '#FFFFFF',
-            pointBorderColor: '#929fb1',
+            pointBorderColor: '#c3c3c3',
             pointHoverBorderWidth: 3,
             hoverRadius: 8,
             hitRadius: 3,
@@ -107,13 +107,14 @@ watch(() => props.width, () => {
         display: flex;
         flex-direction: column;
         align-items: center;
-        background-color: #929fb1;
+        background-color: #e4e4e4;
+        box-shadow: rgb(0 0 0 / 3%) 0 1px 10px 10px !important;
 
         &__value {
             font-size: 14px;
             line-height: 26px;
             text-align: center;
-            color: var(--c-white);
+            color: #444;
             white-space: nowrap;
 
             &__bold {
@@ -127,7 +128,7 @@ watch(() => props.width, () => {
             border-radius: 8px 0 0;
             transform: scale(1, 0.85) translate(0, 20%) rotate(45deg);
             margin-bottom: -4px;
-            background-color: #929fb1;
+            background-color: #e4e4e4;
         }
     }
 </style>