Update chart colors.

frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Observable, combineLatest } from 'rxjs';
-import { filter, map } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 import { SeoService } from 'src/app/services/seo.service';
 import { StateService } from 'src/app/services/state.service';
 import { WebsocketService } from 'src/app/services/websocket.service';

frontend/src/app/bisq/bisq-market/bisq-market.component.ts

@@ -82,7 +82,7 @@ export class BisqMarketComponent implements OnInit, OnDestroy {
             return {
               time: h.time,
               value: h.volume_right,
-              color: h.close > h.avg ? 'rgba(0, 150, 136, 0.8)' : 'rgba(255,82,82, 0.8)',
+              color: h.close > h.avg ? 'rgba(0, 41, 74, 0.7)' : 'rgba(0, 41, 74, 1)',
             };
           })
         };

frontend/src/app/bisq/lightweight-charts-area/lightweight-charts-area.component.scss

@@ -17,9 +17,9 @@
 }
 
 :host ::ng-deep .volumeText {
-	color: rgba(37, 177, 53, 1);
+	color: rgba(33, 150, 243, 0.7);
 }
 
 :host ::ng-deep .tradesText {
-	color: rgba(33, 150, 243, 1);
+	color: rgba(37, 177, 53, 1);
 }

frontend/src/app/bisq/lightweight-charts-area/lightweight-charts-area.component.ts

@@ -24,7 +24,6 @@ export class LightweightChartsAreaComponent implements OnChanges, OnDestroy {
   constructor(
     private element: ElementRef,
   ) {
-    
     this.container = document.createElement('div');
     const chartholder = this.element.nativeElement.appendChild(this.container);
 
@@ -54,20 +53,20 @@ export class LightweightChartsAreaComponent implements OnChanges, OnDestroy {
       },
     });
 
-    this.areaSeries = this.chart.addAreaSeries({
-      topColor: 'rgba(33, 150, 243, 0.9)',
-      bottomColor: 'rgba(33, 150, 243, 0.1)',
-      lineColor: 'rgba(33, 150, 243, 1)',
-      lineWidth: 2,
-    });
-
     this.lineSeries = this.chart.addLineSeries({
       color: 'rgba(37, 177, 53, 1)',
       lineColor: 'rgba(216, 27, 96, 1)',
       lineWidth: 2,
     });
 
-    var toolTip = document.createElement('div');
+    this.areaSeries = this.chart.addAreaSeries({
+      topColor: 'rgba(33, 150, 243, 0.7)',
+      bottomColor: 'rgba(33, 150, 243, 0.1)',
+      lineColor: 'rgba(33, 150, 243, 0.1)',
+      lineWidth: 2,
+    });
+
+    const toolTip = document.createElement('div');
     toolTip.className = 'floating-tooltip-2';
     chartholder.appendChild(toolTip);
 
@@ -77,32 +76,32 @@ export class LightweightChartsAreaComponent implements OnChanges, OnDestroy {
         return;
       }
 
-      var dateStr = isBusinessDay(param.time)
+      const dateStr = isBusinessDay(param.time)
         ? this.businessDayToString(param.time)
         : new Date(param.time * 1000).toLocaleDateString();
 
       toolTip.style.display = 'block';
-      var price = param.seriesPrices.get(this.areaSeries);
+      const price = param.seriesPrices.get(this.areaSeries);
-      var line = param.seriesPrices.get(this.lineSeries);
+      const line = param.seriesPrices.get(this.lineSeries);
 
-      toolTip.innerHTML = 
+      toolTip.innerHTML = `<table>
-      `<table><tr><td class="volumeText">Volume:<td class="text-right volumeText">${Math.round(price * 100) / 100} BTC</td></tr>
         <tr><td class="tradesText"># of trades:</td><td class="text-right tradesText">${Math.round(line * 100) / 100}</td></tr>
+        <tr><td class="volumeText">Volume:<td class="text-right volumeText">${Math.round(price * 100) / 100} BTC</td></tr>
         </table>
         <div>${dateStr}</div>`;
 
-      var y = param.point.y;
+      const y = param.point.y;
 
-      var toolTipWidth = 100;
+      const toolTipWidth = 100;
-      var toolTipHeight = 80;
+      const toolTipHeight = 80;
-      var toolTipMargin = 15;
+      const toolTipMargin = 15;
 
-      var left = param.point.x + toolTipMargin;
+      let left = param.point.x + toolTipMargin;
       if (left > this.width - toolTipWidth) {
         left = param.point.x - toolTipMargin - toolTipWidth;
       }
 
-      var top = y + toolTipMargin;
+      let top = y + toolTipMargin;
       if (top > this.height - toolTipHeight) {
         top = y - toolTipHeight - toolTipMargin;
       }