feat: updated UI to Refined Trading Dashboard style

js/core/constants.js

@@ -1,15 +1,15 @@
 export const INTERVALS = ['1m', '3m', '5m', '15m', '30m', '37m', '148m', '1h', '2h', '4h', '8h', '12h', '1d', '3d', '1w', '1M'];
 
 export const COLORS = {
-    tvBg: '#131722',
-    tvPanelBg: '#1e222d',
-    tvBorder: '#2a2e39',
-    tvText: '#d1d4dc',
-    tvTextSecondary: '#787b86',
-    tvGreen: '#26a69a',
-    tvRed: '#ef5350',
+    tvBg: '#0d1421',
+    tvPanelBg: '#1a2333',
+    tvBorder: '#2d3a4f',
+    tvText: '#ffffff',
+    tvTextSecondary: '#8fa2b3',
+    tvGreen: '#26d367',
+    tvRed: '#ff4d4d',
     tvBlue: '#2962ff',
-    tvHover: '#2a2e39'
+    tvHover: '#252f3f'
 };
 
 export const API_BASE = window.APP_CONFIG?.API_BASE_URL || '/api/v1';

js/ui/chart.js

@@ -289,22 +289,22 @@ constructor() {
                 background: { color: COLORS.tvBg },
                 textColor: COLORS.tvText,
                 panes: {
-                    background: { color: '#1e222d' },
-                    separatorColor: '#2a2e39',
-                    separatorHoverColor: '#363c4e',
+                    background: { color: COLORS.tvPanelBg },
+                    separatorColor: COLORS.tvBorder,
+                    separatorHoverColor: COLORS.tvHover,
                     enableResize: true
                 }
             },
             grid: {
-                vertLines: { color: '#363d4e' },
-                horzLines: { color: '#363d4e' },
+                vertLines: { color: '#1e293b' },
+                horzLines: { color: '#1e293b' },
             },
             rightPriceScale: {
-                borderColor: '#363d4e',
+                borderColor: COLORS.tvBorder,
                 autoScale: true,
             },
             timeScale: {
-                borderColor: '#363d4e',
+                borderColor: COLORS.tvBorder,
                 timeVisible: true,
                 secondsVisible: false,
                 rightOffset: 12,
@@ -335,12 +335,12 @@ constructor() {
          }
          
          this.candleSeries = this.chart.addSeries(LightweightCharts.CandlestickSeries, {
-             upColor: '#ff9800',
-             downColor: '#ff9800',
-             borderUpColor: '#ff9800',
-             borderDownColor: '#ff9800',
-             wickUpColor: '#ff9800',
-             wickDownColor: '#ff9800',
+             upColor: '#f0b90b',
+             downColor: '#f0b90b',
+             borderUpColor: '#f0b90b',
+             borderDownColor: '#f0b90b',
+             wickUpColor: '#f0b90b',
+             wickDownColor: '#f0b90b',
              lastValueVisible: false,
              priceLineVisible: false,
                  priceFormat: { type: 'price', precision: 0, minMove: 1 }